Quickstarters
Feature Overview
如何为jQuery构建后端?
37 分
介绍 在本教程中,您将学习 如何为 jquery 构建后端 使用 back4app。 我们将整合 back4app 的基本功能——数据库管理、云代码、rest 和 graphql api、用户身份验证以及实时查询——以创建一个安全且可扩展的后端。 该后端将通过 ajax 调用和其他常见的 jquery 方法与您的基于 jquery 的前端进行通信。 back4app 的直观环境减少了设置服务器或数据库所需的时间。 通过遵循几个简单的步骤,您将获得有关 acl、类级权限、数据建模、文件上传等的实践经验。 在本教程结束时,您将拥有一个与 back4app 后端连接的功能齐全的基于 jquery 的应用程序的坚实基础。 您将准备好添加自定义逻辑、集成外部 api,并通过细粒度控制来保护您的数据。 先决条件 要完成本教程,您需要: 一个 back4app 账户和一个新的 back4app 项目 开始使用 back4app。 https //www back4app com/docs/get started/new parse app 如果您没有账户,可以免费创建一个。请按照上面的指南准备好您的项目。 基本的 jquery 环境 您可以从 官方网站 https //jquery com/download/ 下载 jquery。 安装 node js(版本 14 或更高)(可选) 虽然在浏览器中使用 jquery 并不严格要求 node js,但如果您希望进行本地测试,可能需要它来运行本地测试服务器或安装 npm 包。 安装 node js https //nodejs org/en/download/ 熟悉 javascript 和 jquery 基础知识 jquery 官方文档。 https //api jquery com/ 在开始之前,请确保您已准备好所有这些先决条件,以便在构建基于 jquery 的前端并将其连接到 back4app 时能够顺利进行。 步骤 1 – 设置 back4app 项目 创建新项目 要开始您的 jquery 后端项目,请创建一个新的 back4app 项目: 登录到您的 back4app 账户 点击“新应用”按钮 在您的 back4app 控制面板中。 给您的应用命名 (例如,“jquery backend tutorial”)。 当项目创建后,您将在您的 back4app 控制面板中看到它。这将是您 jquery 后端配置的基础。 连接 parse sdk back4app 使用 parse 平台进行数据和实时功能。如果您想直接使用 jquery 与 parse sdk,您可以在 html 中将其作为脚本加载。 检索您的 parse 密钥 在 back4app 仪表板中,打开您应用的“应用设置”或“安全性与密钥”以查找 应用程序 id javascript 密钥 parse 服务器 url (通常是 https //parseapi back4app com ) 在您的 html 文件中包含 parse sdk : 在一个 jquery 环境中,您可以先加载 jquery,然后加载 parse,并在您的脚本中与 parse 对象交互。此连接确保所有对您 back4app 后端的数据调用都通过 parse 平台进行。 步骤 2 – 设置数据库 保存和查询数据 在集成 parse sdk 后,您可以从 back4app 数据库保存和获取数据。以下是使用 jquery 和 parse 创建和检索 “todo” 对象的简单示例: 您还可以使用 curl 调用 rest api curl x post \ h "x parse application id your application id" \ h "x parse rest api key your rest api key" \ h "content type application/json" \ d '{"title" "buy groceries", "iscompleted" false}' \ https //parseapi back4app com/classes/todo 或者使用 graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 模式设计和数据类型 在 back4app 仪表板中: 转到“数据库。” 创建一个新类 (例如,“待办事项”)并添加像标题(字符串)和 iscompleted(布尔值)这样的列。 您还可以让 parse 在您第一次保存对象时自动创建列。 使用 ai 代理 back4app 有一个用于数据建模的 ai 代理: 在您应用的仪表板或菜单中打开 ai 代理 。 描述您的数据模型 (例如,“创建一个带有类模式的待办事项应用。”)。 让 ai 代理生成模式 。 关系数据 如果您有一个 类别 类别与多个 待办事项 项目相关联,您可以使用指针或关系: 实时查询 在您的 jquery 应用中获取实时更新: 在您的 back4app 仪表板中启用实时查询 在 服务器设置 下 初始化实时查询订阅 此订阅会在实时通知您每当创建、更新或删除“待办事项”对象时。 步骤 3 – 使用 acl 和 clp 应用安全性 back4app 安全机制 acl(访问控制列表) 和 clp(类级权限) 让您控制谁可以在对象或类级别读取和写入数据。 访问控制列表(acl) acl 是在单个对象上设置的,以限制访问: 类级权限 (clps) clps 控制整个类的默认权限: 在您的 back4app 控制面板中 , 打开 数据库 部分。 选择您的类 (例如,“待办事项”)。 转到类级权限 标签以配置公共、认证或基于角色的访问。 将对象级安全的 acl 与 clps 结合以实现更广泛的限制。更多信息,请参见 应用安全指南 https //www back4app com/docs/security/parse security 。 步骤 4 – 编写和部署云函数 云代码 在服务器端运行自定义 javascript,允许您添加业务逻辑、数据验证或外部 api 调用。 它是如何工作的 您将代码放入 main js (或类似文件),将其部署到 back4app,并让 parse server 处理执行。您还可以使用 npm 模块来处理更复杂的逻辑。 // main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); 部署您的函数 通过 unhandled content type https //www back4app com/docs/local development/parse cli b4a deploy 通过仪表板 在您应用的仪表板中,转到 cloud code > functions 将函数复制/粘贴到 main js 点击 部署 调用您的函数 从 jquery,你可以像这样调用云函数: 步骤 5 – 配置用户认证 back4app 中的用户认证 back4app 使用 parse user 类进行认证。密码哈希、会话令牌和安全存储自动处理。 设置用户认证 会话管理 您可以检索当前用户: const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } 注销: parse user logout(); 社交登录集成 back4app 支持 google、facebook、apple 和其他 oauth 提供商。有关更多信息,请参见 社交登录文档 https //www back4app com/docs/platform/sign in with apple 。 步骤 6 – 处理文件存储 上传和检索文件 使用 parse file 处理上传: 您可以通过将文件分配给字段来将其存储在类中: const photo = parse object extend('photo'); const photo = new photo(); photo set('imagefile', parsefile); photo save(); 检索文件 url: const imagefile = photo get('imagefile'); const imageurl = imagefile url(); 文件安全性 您可以通过修改 parse server 中的文件上传设置来管理谁可以上传文件: { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } 第 7 步 – 使用云作业调度任务 云作业 您可以运行例行任务,例如删除旧数据: // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); 在仪表板中,转到 应用设置 > 服务器设置 > 后台作业 以调度它。 第 8 步 – 集成 webhooks webhooks 允许您的应用在某些事件发生时向外部服务发送http请求: 前往 更多 > webhooks 在您的back4app仪表板中。 添加一个新的webhook 与您的外部端点。 配置 触发器以处理诸如“todo类中的新记录”之类的事件。 您可以通过发送事件数据通过webhooks集成slack或像stripe这样的支付网关。 第9步 – 探索back4app管理面板 该 back4app管理应用 提供了一个非技术性的基于web的crud操作界面。 启用管理应用 前往 应用仪表板 > 更多 > 管理应用 并点击“启用管理应用” 创建第一个管理员用户 , 这将自动创建一个新角色 (b4aadminuser) 和您架构中的类 选择一个子域名 以访问管理应用 登录 使用您的新管理员凭据 启用后,此管理应用程序允许您管理数据或在不编写代码的情况下授予团队成员访问权限。 结论 在本指南中,您学习了如何使用 back4app 为 jquery 构建后端。您: 创建了一个新的 back4app 项目作为您的后端基础。 设置了数据库,包括模式设计和数据关系。 使用 acl 和 clp 进行细粒度安全控制。 部署了云代码以实现自定义服务器端逻辑。 配置了用户身份验证、文件存储和实时更新。 安排了后台作业并集成了外部服务的 webhook。 探索了 back4app 管理面板以简化数据管理。 您现在已具备将此基本的 jquery + back4app 设置扩展为完整生产解决方案的能力。继续集成高级功能,如社交登录或更详细的安全规则。享受构建可扩展的数据驱动应用程序的乐趣! 下一步 准备生产: 添加基于角色的高级权限、缓存策略和性能调优。 集成第三方 api: 用于支付、消息传递或分析。 探索 back4app 文档: 深入了解高级安全、日志或分析。 创建现实世界的应用: 结合 jquery 的简单性和 back4app 的强大后端服务。