如何使用 jQuery 创建 CRUD 应用？

介绍 本指南将引导您构建一个完整的 crud（创建、读取、更新、删除）应用程序，使用 jquery。 我们将使用 back4app 作为我们的后端服务，以简化数据管理。在本教程中，您将探索如何配置 back4app 项目，设计灵活的架构，并通过 rest api 调用使用 jquery 实现 crud 功能。 我们首先设置一个名为 basic crud app jquery 的 back4app 项目。该项目提供可扩展的非关系数据存储解决方案。您将通过在 back4app 中直接创建类和字段来定义数据模型，可以手动完成，也可以借助 back4app 的 ai agent。 之后，您将学习如何使用 back4app 管理应用程序——一个用户友好的拖放界面。 最后，您将通过 rest api 调用将 jquery 驱动的前端连接到 back4app，确保保持安全访问。 在本教程结束时，您将拥有一个生产就绪的 jquery 应用程序，能够执行基本的 crud 操作，并具备安全的用户身份验证和数据管理功能。 关键要点 使用强大的低代码后端构建基于jquery的crud应用程序。 了解如何设计可扩展的后端并将其与您的jquery前端集成。 学习使用直观的back4app管理应用程序进行高效的数据操作。 发现包括容器化在内的部署策略，以顺利启动您的应用程序。 先决条件 在开始之前，请确保您拥有： 一个back4app账户和一个新项目。 需要指导？访问 开始使用back4app https //www back4app com/docs/get started/new parse app 一个可工作的web开发环境。 使用像vscode、sublime text或类似的代码编辑器，并确保您有现代浏览器进行测试。 jquery、javascript和rest api的基本知识。 如需复习，请查看 jquery文档 https //api jquery com/ 步骤1 – 项目设置 创建一个新的 back4app 项目 登录到您的 back4app 账户。 点击您的仪表板上的“新应用”按钮 。 命名您的项目： basic crud app jquery 并按照屏幕上的说明完成设置。 创建新项目 创建后，您的项目将出现在仪表板上，为您的后端配置奠定基础。 步骤 2 – 设计数据模型 定义您的数据结构 对于这个crud应用程序，您将在back4app中创建几个类（集合）。以下是crud操作所必需的主要类及其字段。 1\ 项目类 此类存储有关每个项目的信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 物品的名称。 描述 字符串 该项目的简要描述。 创建于 日期 添加该项目的时间戳。 更新时间 日期 最后修改的时间戳。 2\ 用户类 这个类处理用户凭据和身份验证细节。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的电子邮件地址。 密码哈希 字符串 用于安全登录的加密密码。 创建于 日期 账户创建时间戳。 更新时间 日期 上次账户更新的时间戳。 您可以通过 back4app 控制面板手动添加这些类和字段。 创建新类 要添加字段，选择数据类型，输入字段名称，必要时设置默认值，并在需要时标记为必填。 创建列 利用 back4app ai 代理进行模式生成 集成的 back4app ai 代理可以根据简要描述自动生成您的模式。这简化了项目初始化，并确保您的模型支持 crud 操作。 如何使用ai代理 打开ai代理 登录到您的back4app仪表板，并在项目设置下导航到ai代理部分。 描述您的架构 提供有关所需类和字段的详细信息。 审核并确认 一旦ai代理处理您的输入，它将建议一个架构。审核并批准以完成您的配置。 示例提示 create these classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) 这个ai辅助的过程不仅节省时间，还确保数据架构的一致性和优化。 步骤3 – 激活管理员应用程序并处理crud操作 开始使用管理应用程序 back4app 管理应用程序提供了一种无代码解决方案，用于高效的后端数据管理。其直观的拖放界面简化了执行 crud 操作的过程，例如添加、查看、编辑和删除记录。 启用管理应用程序 前往“更多”菜单 在您的 back4app 控制面板上。 选择“管理应用程序” 并点击 “启用管理应用程序。” 设置您的管理员凭据 通过创建一个初始管理员帐户，这也将建立角色（如 b4aadminuser ) 和系统类。 启用管理应用程序 一旦激活，登录管理应用程序以管理您的应用程序数据。 管理应用程序仪表板 使用管理应用程序进行 crud 操作 在管理应用程序中，您可以： 插入记录： 在一个类（例如，项目）中点击“添加记录”以添加新数据。 查看和编辑记录： 选择一条记录以查看其详细信息或修改其字段。 删除记录： 删除不再需要的条目。 这个简化的工具简化了数据管理，使您能够专注于前端逻辑。 步骤 4 – 将您的 jquery 应用程序与 back4app 连接 现在您的后端已配置完成，是时候将基于 jquery 的应用程序连接到 back4app 了。 使用 jquery 进行 ajax 调用 您将直接使用 jquery 的 ajax 方法进行 rest api 调用，而不是使用 parse sdk。以下是如何执行 crud 操作的示例。 获取项目 $ ajax({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { console log('items retrieved ', response results); }, error function(error) { console error('error fetching items ', error); } }); 创建项目 $ ajax({ url 'https //parseapi back4app com/classes/items', 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({ title 'new item', description 'a brief description of the new item ' }), success function(response) { console log('item created ', response); }, error function(error) { console error('error creating item ', error); } }); 更新项目 $ ajax({ url 'https //parseapi back4app com/classes/items/your item id', method 'put', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ title 'updated title', description 'updated description ' }), success function(response) { console log('item updated ', response); }, error function(error) { console error('error updating item ', error); } }); 删除项目 $ ajax({ url 'https //parseapi back4app com/classes/items/your item id', method 'delete', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { console log('item deleted ', response); }, error function(error) { console error('error deleting item ', error); } }); 根据需要将这些 ajax 调用集成到您的 jquery 脚本中，以管理应用程序中的 crud 操作。 步骤 5 – 保护您的后端 配置访问控制列表 (acls) 通过为您的对象设置 acls 来保护您的数据。例如，要创建一个只有所有者可以读取和写入的项目： var acl = { " " { "read" false, "write" false }, "owner user id" { "read" true, "write" true } }; $ ajax({ url 'https //parseapi back4app com/classes/items', 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({ title 'private item', description 'this item is only accessible by its owner ', acl acl }), success function(response) { console log('private item created ', response); }, error function(error) { console error('error creating private item ', error); } }); 设置类级权限 (clps) 使用 back4app 仪表板配置 clps，确保只有经过身份验证的用户可以访问敏感类。 第 6 步 – 实施用户身份验证 管理用户帐户 back4app 使用内置的用户类来处理身份验证。在您的 jquery 应用中，您可以通过 rest api 调用管理用户注册和登录。 注册新用户 $ 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 'newuser', password 'securepassword', email 'newuser\@example com' }), success function(response) { console log('user registered ', response); }, error function(error) { console error('registration error ', error); } }); 用户登录 $ ajax({ url 'https //parseapi back4app com/login', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, data { username 'newuser', password 'securepassword' }, success function(response) { console log('user logged in ', response); }, error function(error) { console error('login error ', error); } }); 用户登录 您可以扩展这些方法来管理会话、密码重置和其他身份验证功能。 步骤 7 – 部署您的 jquery 应用程序 back4app 提供了简单的部署过程。您可以使用多种方法部署您的 jquery 应用程序，包括静态网站托管或容器化。 7 1 准备您的应用程序 构建和压缩： 使用 webpack 或 gulp 等工具来打包和压缩您的 jquery 脚本。 验证资产： 确保所有 html、css 和 javascript 文件都正确编译。 7 2 组织您的项目结构 一个典型的项目布局可能如下所示： basic crud app jquery/ \| index html \| css/ \| | styles css \| js/ \| | app js \| | jquery min js \| assets/ \| | images/ \| | logo png \| readme md 示例：ajax crud 在 app js $(document) ready(function() { // fetch and display items function loaditems() { $ ajax({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(response) { $('#itemscontainer') empty(); $ each(response results, function(index, item) { $('#itemscontainer') append('\<div>' + '\<h3>' + item title + '\</h3>' + '\<p>' + item description + '\</p>' + '\</div>'); }); }, error function(error) { console error('error loading items ', error); } }); } // call the function on page load loaditems(); }); 7 3 部署您的应用程序 静态托管 将您的项目文件上传到静态托管提供商，如 github pages、netlify 或 vercel。 将您的应用程序容器化 如果您更喜欢容器化，请在项目根目录中包含一个 dockerfile ： \# use an official node image to serve static files from node 14 alpine \# set the working directory workdir /app \# copy your project files into the container copy \# install a simple static server run npm install g serve \# expose the port used by the static server expose 3000 \# command to run the server cmd \["serve", " s", " "] 在设置好您的 docker 环境后，在 back4app 仪表板的 web 部署 部分链接您的 github 仓库，必要时配置构建命令，并部署您的应用程序。 第 8 步 – 结论和后续步骤 恭喜！您成功构建了一个基于 jquery 的 crud 应用程序，并与 back4app 集成。 在本教程中，您设置了一个名为 basic crud app jquery 的项目，定义了 items 和 users 的数据架构，并通过 back4app 管理您的数据。 此外，您通过 rest api 调用连接了 jquery 前端，并实施了基本的安全措施。 后续步骤： 扩展应用程序： 添加高级过滤、详细视图或实时更新等功能。 增强后端能力： 探索云函数、集成第三方 api 或实施基于角色的访问。 进一步提升您的技能： 深入了解 back4app 文档 https //www back4app com/docs ，并探索更多高级功能的额外教程。 祝您编码愉快，祝您的 jquery crud 应用程序好运！