如何构建一个 CRUD 应用与 Backbone.js？一步一步的教程

介绍 在本指南中，您将学习如何使用 backbone js 创建一个功能齐全的 crud（创建、读取、更新、删除）应用程序。 本教程将帮助您通过展示如何构建一个有效操作和管理数据的 crud 系统，来理解 web 应用程序的核心操作。 您将首先设置一个名为 basic crud app backbone 的 back4app 项目，以作为您应用程序的可靠后端。 之后，您将通过手动或借助 back4app ai agent 的帮助，设计一个灵活的数据库架构，定义特定的集合和字段。这个过程确保您的数据结构适合无缝的 crud 交互。 接下来，您将使用直观的 back4app 管理应用程序，该应用程序具有拖放界面，轻松处理您的数据集合。这个工具简化了 crud 操作，使后端数据管理变得简单明了。 最后，您将使用 rest api 将您的 backbone js 前端连接到 back4app，并指导依赖于标准 api 调用与您的后端进行交互。您还将学习如何通过强大的访问控制来保护您的数据。 在本教程结束时，您将构建一个支持 crud 功能的生产就绪 web 应用程序，并包括用户身份验证以及高级数据管理功能。 关键要点 掌握构建crud应用程序的艺术，使用可靠的后端服务有效处理数据。 发现创建可扩展数据库设计并将其与backbone js前端集成的策略。 学习使用back4app管理应用程序的拖放功能来简化创建、读取、更新和删除任务。 熟悉部署方法，包括docker容器化，以快速启动您的应用程序。 先决条件 在深入之前，请确保您拥有： 一个back4app账户和一个活跃的项目。 如果您需要指导，请参考 back4app入门指南 https //www back4app com/docs/get started/new parse app 。 一个backbone js开发环境。 您可以通过像npm这样的包管理器或直接从cdn链接来包含backbone js。 对javascript、backbone js和restful api的基本理解。 如果需要，请查看 backbone js文档 https //backbonejs org/#getting started 以便复习。 步骤1 – 项目初始化 创建您的back4app项目 登录到您的 back4app 账户。 点击“新应用”按钮 在您的仪表板上。 命名您的项目： basic crud app backbone 并按照提示进行设置。 创建新项目 一旦您的项目创建完成，它将在您的仪表板上可见，准备好作为应用程序的后端进行配置。 步骤 2 – 制作数据库模式 定义您的数据模型 对于这个 crud 应用程序，您将设置几个集合。以下是您需要建立模式的字段和类型的示例集合，以确保您的应用程序可以执行所有 crud 操作。 1\ 项目集合 此集合将保存每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简要概述。 创建于 日期 指示项目添加时间的时间戳。 更新于 日期 最近更新的时间戳。 2\ 用户集合 此集合存储用户详细信息和认证信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 安全哈希密码。 创建于 日期 账户创建时间戳。 更新于 日期 用户数据的最后修改时间戳。 您可以通过 back4app 控制面板手动创建这些集合，为每个集合添加一个新类并配置相应的字段。 创建新班级 只需选择数据类型，设置字段名称，提供默认值（如有需要），并将字段标记为必填。 创建列 利用 back4app ai 代理进行模式创建 back4app ai 代理是您仪表板中的一个实用工具，可以帮助自动化数据库模式创建。 通过输入描述性提示来定义您所需的集合和字段，ai 代理可以快速生成所需的数据库结构，节省您的时间并确保一致性。 如何使用 ai 代理： 访问 ai 代理： 登录您的 back4app 仪表板，并在导航或项目设置中找到 ai 代理。 详细描述您的数据模型： 输入一个提示，概述您所需的集合和字段。 审查并实施： 评估建议的模式并将更改应用到您的项目中。 示例提示 create the following collections for 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) 利用 ai 代理确保您的模式适合您应用程序的要求。 步骤 3 – 激活管理应用程序并管理 crud 操作 介绍管理应用程序 back4app 管理应用程序是一个无代码界面，让您高效管理后端数据。 其直观的拖放设计使得执行 crud 操作（如添加、查看、修改和删除记录）变得非常简单。 激活管理员应用程序 打开“更多”菜单 从您的 back4app 控制面板 选择“管理员应用” 然后选择 “启用管理员应用。” 设置您的管理员凭据 通过创建初始管理员帐户。此步骤还建立角色（如 b4aadminuser ) 和系统集合 启用管理员应用 激活后，登录管理员应用程序以无缝处理您的数据 管理员应用仪表板 使用管理员应用管理 crud 操作 在管理员应用中，您可以： 添加新条目： 在任何集合中使用“添加记录”选项（例如，项目）以创建新条目 查看/修改记录： 点击记录以检查或更改其详细信息 删除记录： 利用删除功能清除不需要的数据 此界面通过简化所有数据管理任务来增强用户体验 第 4 步 – 将 backbone js 连接到 back4app 现在您的后端已配置，是时候将您的 backbone js 前端与 back4app 集成 使用 backbone js 进行 rest api 调用 由于 parse sdk 并未针对 backbone js 进行定制，您将使用 backbone 的内置模型、集合和视图与 rest api 调用结合使用，以与 back4app 进行交互 设置您的 backbone 模型和集合 首先定义一个模型用于你的项目和相应的集合。例如： // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; 构建一个用于crud交互的backbone视图 创建一个视图以渲染项目列表并处理用户操作，例如添加、编辑和删除。 // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; 此视图使用rest api从back4app获取项目，并允许您添加、编辑和删除记录。 步骤 5 – 保护您的后端 实施访问控制列表 (acls) 通过在您的对象上设置 acl 来保护您的数据。例如，要将某个项目的访问权限仅限于其创建者： function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } 配置类级权限 (clps) 在您的 back4app 控制面板中，为每个集合设置 clp，以确保只有授权用户可以访问或修改敏感数据。 步骤 6 – 用户认证 在 backbone js 中设置用户账户 back4app 利用类似于 parse 的用户类的用户管理系统进行身份验证。在您的 backbone js 应用程序中，您可以使用 ajax 调用 back4app rest api 来处理用户注册和登录。 例如，注册一个新用户 function signupuser(username, password, email) { $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } 类似的方法可以用于用户登录和会话管理。 第 7 步 – 部署您的 backbone js 前端 back4app 的 web 部署功能允许您通过链接您的 github 存储库无缝托管您的 backbone js 应用程序。 7 1 创建生产构建 在终端中打开您的项目目录。 运行您的构建过程 如果您使用任务运行器或打包工具（如 webpack 或 gulp），请执行命令（例如， npm run build ) 以生成优化的静态资产。 确认构建 确保您的构建输出目录包含主 html 文件和所有必要的资产文件夹。 7 2 组织和推送您的源代码 您的 github 存储库应包含您的 backbone js 应用程序的所有源文件。一个典型的结构可能是 basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md 示例配置文件 src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); 推送到 github 初始化 git（如果尚未完成）： git init 暂存你的文件： git add 提交你的更改： git commit m "初始提交 backbone js 前端代码" 创建一个 github 仓库 （例如， basic crud app backbone ）。 推送你的仓库： git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 将您的代码库与 back4app web 部署集成 访问 web 部署部分： 在您的 back4app 控制面板中，转到您的项目并点击 web 部署 选项。 链接您的 github 账户： 按照提示授权 back4app 访问您的代码库。 选择您的代码库和分支： 选择您的 basic crud app backbone 代码库和主分支。 7 4 部署配置 提供额外设置： 构建命令： 如果没有预构建的资产，请指定命令（例如， npm run build ）来构建您的应用程序。 输出目录： 指定包含您的静态文件的文件夹（例如， public 或 dist unhandled content type 环境变量： 添加任何必要的 api 密钥或配置。 7 5 docker化您的 backbone js 项目 如果您选择 docker 进行部署，请包含一个 dockerfile ，类似于： \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 如果需要，配置 back4app 以使用 docker 部署。 7 6 启动您的应用程序 点击部署按钮： 配置完成后，点击 部署 。 监控构建： back4app 将获取您的代码，执行构建过程，并部署您的容器化应用。 获取您的实时 url： 部署后，将提供一个 url，您的 backbone js 应用将托管在该 url 上。 7 7 验证您的部署 访问提供的 url： 在浏览器中打开该 url，以确认您的应用程序是否正确加载。 测试功能： 确保导航、数据获取和 crud 操作按预期工作。 故障排除： 使用浏览器工具和 back4app 日志来解决任何问题。 第8步 – 结论和未来方向 干得好！你已经成功构建了一个使用 backbone js 和 back4app 的 crud 应用程序。 你设置了一个名为 basic crud app backbone 的项目，定义了 items 和 users 的详细集合，并使用管理应用程序管理你的后端。 此外，你通过 rest api 调用集成了你的 backbone js 前端，并应用了基本的安全措施。 下一步： 增强前端： 扩展你的 backbone js 应用程序，增加更详细的视图、搜索功能和实时更新。 添加新功能： 考虑集成更高级的后端逻辑、第三方 api 或更精细的访问控制。 进一步学习： 访问 back4app 文档 https //www back4app com/docs ，获取有关性能改进和自定义集成的更多见解。 通过遵循本教程，你现在具备了使用 back4app 为你的 backbone js 应用程序创建强大、可扩展的 crud 后端的专业知识。享受编码和探索新功能的乐趣！