如何使用Marionette.js构建基本的CRUD应用程序：分步指南

介绍 在本指南中，您将学习如何使用 marionette js 创建一个完整的 crud（创建、读取、更新、删除）应用程序。 本教程向您展示如何设置一个高效管理数据操作的应用程序。我们将首先设置一个名为 basic crud app marionettejs 的 back4app 项目，它为您的应用程序提供强大的后端支持。 在配置项目后，您将通过定义集合和字段来设计一个灵活的数据库架构——可以手动完成，也可以借助 back4app ai agent。这种方法确保您的后端组织良好，能够可靠地处理 crud 操作。 接下来，您将使用 back4app 管理应用程序——一个拖放界面——轻松管理您的集合，使您能够轻松执行创建、读取、更新和删除操作。 最后，您将使用 rest/graphql（或 parse sdk，如果适用）将您的 marionette js 前端与 back4app 集成，同时确保您的后端通过高级访问控制保持安全。 到本教程结束时，您将拥有一个支持 crud 操作的生产就绪的 web 应用程序，并具备用户身份验证和安全数据管理功能。 关键要点 构建有效管理数据的crud应用程序，使用强大的后端 深入了解如何创建可扩展的后端并将其连接到marionette js前端 学习使用无代码管理界面（back4app admin app）来简化数据操作 了解部署技术，包括docker容器化，以快速启动您的应用程序 先决条件 在开始之前，请确保您具备以下条件 一个已设置新项目的back4app账户 有关指导，请参见 使用back4app入门 https //www back4app com/docs/get started/new parse app 一个marionette js开发环境 您可以使用marionette js的模板或入门工具包。确保安装node js（版本14或更高） 对javascript、marionette js和rest api有基本了解 有关更多详细信息，请参阅 marionette js文档 https //marionettejs com/docs/master/ 步骤1 – 项目设置 创建一个新的back4app项目 登录到您的 back4app 账户。 点击“新应用”按钮 在您的仪表板上。 命名您的项目： basic crud app marionettejs 并完成提示。 创建新项目 创建项目后，它将出现在您的仪表板上，为后端配置和管理提供基础。 步骤 2 – 设计您的数据库架构 构建您的数据模型 对于这个 crud 应用，您将定义几个集合。以下是您可能创建的集合示例，包括将为您的数据库提供支持的字段和数据类型。 1\ 项目集合 此集合包含每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 物品名称。 描述 字符串 关于该项目的简短总结。 创建于 日期 项目创建的时间戳。 更新于 日期 最后更新的时间戳。 2\ 用户集合 此集合存储用户凭据和个人资料详细信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 用户身份验证的加密密码。 创建于 日期 账户创建的时间戳。 更新于 日期 上次账户更新的时间戳。 您可以通过在 back4app 仪表板上为每个集合创建一个新类并定义其各自的字段来手动添加这些集合。 创建新班级 您可以通过选择数据类型、提供名称、设置默认值，并在需要时将其标记为必填项来创建字段。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理通过从描述性提示生成集合和字段来简化模式创建。 如何使用 ai 代理 启动 ai 代理 通过您的 back4app 仪表板菜单或项目设置访问它。 描述您的数据模型 粘贴详细提示，概述您所需的集合和字段。 审核并确认 检查建议的模式并将其应用于您的项目。 示例提示 create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 这种方法节省时间并确保您的数据库模式的一致性。 步骤 3 – 激活管理应用程序并执行 crud 操作 管理应用程序概述 back4app 管理应用程序提供无代码、拖放界面来管理您的后端数据。它简化了创建、读取、更新和删除记录等 crud 操作。 启用管理应用程序 打开“更多”菜单 在您的 back4app 控制面板上。 选择“管理员应用” 然后点击 “启用管理员应用。” 设置您的管理员凭据 通过创建一个管理员用户，这也配置了默认角色，如 b4aadminuser 。 启用管理员应用 激活后，登录管理员应用以管理您的集合。 管理员应用仪表板 使用管理员应用进行 crud 任务 创建记录： 使用“添加记录”按钮将新条目插入集合中。 读取/更新记录： 点击记录以查看或修改其详细信息。 删除记录： 使用删除选项删除过时的记录。 这个直观的界面通过简化数据管理来改善用户交互。 步骤 4 – 将 marionette js 与 back4app 连接 在通过管理应用程序配置和管理后端后，下一步是将您的 marionette js 前端与 back4app 集成。 选项 a：使用 parse sdk（如果适用） 安装 parse sdk： npm install parse 在您的 marionette js 应用程序中初始化 parse： 创建一个配置文件（例如， app/parseconfig js )： // app/parseconfig js import parse from 'parse'; // 在此插入您的 back4app 凭据 parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 在 marionette 视图中集成 parse： 例如，创建一个视图以获取和渲染项目： // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>项目\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; this fetchitems(); }, async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; this render(); } catch (error) { console error("获取项目时出错：", error); } }, serializedata() { return { items this items }; } }); 选项 b：使用 rest 或 graphql 如果 parse sdk 不是一个选项，您可以使用 rest 或 graphql 调用与 back4app 交互。例如，通过 rest 检索项目： // example rest call to retrieve items async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); 根据需要将这些 api 调用纳入您的 marionette js 视图或控制器中。 步骤 5 – 保护您的后端 配置访问控制列表 (acls) 通过在对象上设置 acl 来保护您的数据。例如，要创建一个仅对其所有者可访问的项目 async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access solely to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } 设置类级权限 (clps) 在 back4app 仪表板中，为每个集合配置 clp，以强制执行默认访问规则，确保只有授权用户可以访问敏感数据。 步骤 6 – 用户认证 创建用户账户 back4app 利用 parse 的用户类来管理认证。在您的 marionette js 应用中，处理用户注册和登录，如下所示： // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); 登录和会话处理可以遵循类似的模式。可以通过 back4app 仪表板配置社交登录或密码重置等附加功能。 步骤 7 – 使用 web 部署部署您的 marionette js 前端 back4app 的 web 部署功能通过链接您的 github 存储库，让您无缝托管您的 marionette js 前端。 7 1 – 构建您的生产版本 在终端中导航到您的项目目录。 执行构建命令： npm run build 这将生成一个 build 文件夹，其中包含优化的静态文件（html、js、css、图像）。 确认构建： 确保 build 文件夹包含一个 index html 文件以及所需的资产。 7 2 – 组织和上传您的源代码 您的存储库应包含您 marionette js 前端的所有源代码。示例文件结构为： basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md 示例配置文件 app/parseconfig js // app/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 示例应用程序文件 app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); 提交到 github 初始化 git 仓库 （如果尚未完成）： git init 暂存你的文件： git add 提交你的更改： git commit m "为 marionette js 前端的初始提交" 在 github 上创建一个仓库 （例如， basic crud app marionettejs frontend ）。 推送你的代码： git remote add origin https //github com/your username/basic crud app marionettejs frontend git git push u origin main 7 3 – 将您的代码库与网络部署集成 访问网络部署： 在您的 back4app 控制面板中，选择您的项目（basic crud app marionettejs），然后点击 网络部署 连接到 github： 按照提示链接您的 github 账户，以便 back4app 可以访问您的代码库。 选择代码库和分支： 选择代码库（例如， basic crud app marionettejs frontend ) 和包含您代码的分支（例如， main )。 7 4 – 配置您的部署 指定附加设置： 构建命令： 如果缺少预构建的 构建 文件，请设置构建命令（例如， npm run build )。back4app将在部署期间执行此操作。 输出目录： 指明 构建 作为包含您的静态文件的文件夹。 环境变量： 在部署设置中提供任何必要的环境变量（如api密钥）。 7 5 – 将您的 marionette js 应用程序 docker 化 如果您更喜欢使用 docker 进行部署，请通过在您的代码库中包含一个 dockerfile 来将您的应用程序容器化： \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 如果需要，请配置 web 部署以使用 docker 选项。 7 6 – 部署您的应用程序 点击部署按钮： 完成您的部署设置并点击 部署 监控构建： back4app 将提取您的 github 代码，运行构建命令并部署您的容器。 获取您的 url： 一旦部署，back4app 将提供一个 url，您的 marionette js 应用程序将托管在该 url 上。 7 7 – 验证您的部署 访问提供的 url： 在您的浏览器中打开部署 url。 测试应用程序： 确保应用程序正确加载，并且所有功能（路由、资源）正常运行。 必要时进行故障排除： 如果出现任何问题，请使用浏览器开发工具并检查 back4app 上的部署日志。 第8步 – 结论和下一步 做得好！您已经成功构建了一个使用 marionette js 和 back4app 的 crud 应用程序。 您设置了一个名为 basic crud app marionettejs 的项目，为项目中的 items 和 users 创建了详细的数据库集合，并通过管理应用程序管理您的数据。 您还将 marionette js 前端连接到后端，并实施了强有力的安全措施。 未来的增强功能： 优化您的前端： 添加详细视图、搜索功能和实时更新等功能。 扩展后端功能： 考虑集成云函数、第三方 api 或高级基于角色的访问控制。 进一步学习： 在 back4app 文档 https //www back4app com/docs 中探索更多资源，以获取更高级的优化和集成。 通过遵循本教程，您现在掌握了使用 marionette js 和 back4app 构建强大、可扩展的 crud 应用程序的知识。祝您编码愉快！