Quickstarters
Feature Overview
如何为BackboneJS构建后端?
45 分
介绍 在本教程中,您将学习如何使用 back4app 为 backbonejs 应用程序构建完整的后端。 我们将逐步整合 back4app 的基本功能——如数据库管理、云代码函数、rest 和 graphql api、用户身份验证以及实时查询(实时查询)——以创建一个安全、可扩展且强大的后端,与您的 backbonejs 前端无缝通信。 您还将看到,back4app 的快速设置和直观环境可以大幅减少与手动配置服务器和数据库相比所需的时间和精力。 在此过程中,您将获得关键功能的实践经验,包括高级安全功能、使用云作业调度任务以及为外部集成设置 webhook。 到本教程结束时,您将为将此基础设置提升为生产就绪的应用程序做好充分准备,或根据需要轻松集成自定义逻辑和第三方 api。 前提条件 要完成本教程,您需要 一个 back4app 账户和一个新的 back4app 项目 开始使用 back4app https //www back4app com/docs/get started/new parse app 如果您没有账户,可以免费创建一个。请按照上面的指南准备好您的项目。 基本的 backbonejs 开发环境 您可以通过在项目中包含 backbonejs https //backbonejs org/ 来设置此环境。如果您计划在本地提供或打包您的 backbone 应用,请确保您的计算机上已安装 node js。 安装 node js(版本 14 或更高) 您将需要 node js 来安装 npm 包和运行本地开发服务器。 安装 node js https //nodejs org/en/download/ 熟悉 javascript 和基本的 backbonejs 概念 backbonejs 官方文档。 https //backbonejs org/ 如果您是 backbone 的新手,请在开始之前查看官方文档或初学者教程。 在开始之前,请确保您已具备所有这些前提条件。设置好您的 back4app 项目并准备好本地 backbonejs 环境将帮助您更轻松地跟随。 步骤 1 – 设置 back4app 项目 创建新项目 在 back4app 上构建 backbonejs 后端的第一步是创建一个新项目。如果您尚未创建,请按照以下步骤操作: 登录到您的 back4app 账户 。 点击“新应用”按钮 在您的 back4app 控制面板中。 给您的应用命名 (例如,“backbonejs 后端 教程”)。 项目创建后,您将在 back4app 控制面板中看到它列出。这个项目将是本教程中讨论的所有后端配置的基础。 连接 parse sdk back4app 依赖 parse 平台来管理您的数据,提供实时功能,处理用户身份验证等。将您的 backbonejs 应用连接到 back4app 涉及安装 parse npm 包(或包含 parse sdk 脚本)并使用您 back4app 控制面板中的凭据进行初始化。 检索您的 parse 密钥 在您的 back4app 控制面板中,导航到您应用的“应用设置”或“安全性与密钥”部分以找到您的 应用程序 id 和 javascript 密钥 您还会找到 parse 服务器 url (通常格式为 https //parseapi back4app com )。 在您的项目中安装 parse sdk : npm install parse 如果您使用 yarn,可以使用以下命令安装它: yarn add parse 在您的backbonejs应用程序中初始化parse 。通常,您会在应用程序的目录中创建一个文件(例如, parseconfig js ) src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 此文件确保每当您在backbonejs应用程序中导入或引用parse时,它已预先配置为连接到您的特定back4app实例。 通过完成此步骤,您已在backbonejs前端和back4app后端之间建立了安全连接。所有请求和数据交易都通过此sdk安全路由,从而减少了手动rest或graphql调用的复杂性(尽管在需要时您仍然可以使用它们)。 步骤2 – 设置数据库 保存和查询数据 在设置好back4app项目并将parse sdk集成到您的backbonejs应用程序后,您现在可以开始保存和检索数据。以下是使用backbone友好结构的parse对象的简单示例。 定义模型 import parse from ' /parseconfig'; // define a parse powered backbone model const todomodel = parse object extend('todo'); export default todomodel; 创建和保存数据 import todomodel from ' /todomodel'; async function createtodoitem(title, iscompleted) { const todo = new todomodel(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todoquery = new parse query(todomodel); try { const results = await todoquery find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } 或者,您可以使用 back4app 的 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 back4app 还提供 graphql 接口 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 这些多样的选项让您可以以最适合您开发过程的方式集成数据操作——无论是通过 parse sdk、rest 还是 graphql。 架构设计和数据类型 默认情况下,parse 允许 动态创建架构 , 但您也可以在 back4app 仪表板中定义您的类和数据类型,以获得更多控制。 导航到您的 back4app 仪表板中的 “数据库” 部分 。 创建一个新类 (例如,“todo”)并添加相关列,例如标题(字符串)和已完成(布尔值)。 back4app 还支持各种数据类型: 字符串 , 数字 , 布尔值 , 对象 , 日期 , 文件 , 指针 , 数组 , 关系 , 地理点 , 和 多边形 您可以为每个字段选择适当的类型。如果您愿意,您也可以让 parse 在您第一次从 backbonejs 应用程序保存对象时自动创建这些列。 back4app 提供一个 ai 代理,可以帮助您设计数据模型: 从您的应用仪表板或菜单中打开 ai 代理 。 用简单的语言描述您的数据模型 (例如,“请在 back4app 上创建一个完整类架构的新待办事项应用。”)。 让 ai 代理为您创建架构 使用 ai 代理可以在设置数据架构时节省时间,并确保您的应用程序的一致性。 关系数据 如果你有关系数据——比如,一个 类别 对象指向多个 待办事项 ——你可以在 parse 中使用 指针 或 关系 。例如: // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const todomodel = parse object extend('todo'); const todo = new todomodel(); // construct a pointer to the category const category = parse object extend('category'); const categorypointer = new category(); categorypointer id = categoryobjectid; // set fields todo set('title', title); todo set('category', categorypointer); try { return await todo save(); } catch (err) { console error('error creating task with category relationship ', err); } } async function fetchtodoswithcategory() { const todomodel = parse object extend('todo'); const query = new parse query(todomodel); // include pointer data query include('category'); try { return await query find(); } catch (err) { console error('error fetching todos with category ', err); } } 当你调用 include('category') , 你会在每个待办事项旁边获取类别详细信息,使你的关系数据无缝可访问。 实时查询 实时更新,back4app 提供 实时查询 在 backbonejs 应用中,您可以订阅特定类的更改: 在您的 back4app 控制面板中启用 实时查询 ,在您的应用的 服务器设置 下。确保“实时查询”已开启。 在您的代码中初始化实时查询订阅 : src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; import parse from ' /parseconfig'; async function subscribetotodos(callback) { const todoquery = new parse query('todo'); const subscription = await todoquery subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } 通过订阅,您可以在创建、更新或删除新 todo 时接收实时通知。此功能对于需要多个用户查看最新数据而无需刷新页面的协作或动态应用特别有价值。 步骤 3 – 使用 acl 和 clp 应用安全性 back4app 安全机制 back4app 非常重视安全性,提供 访问控制列表 (acls) 和 类级权限 (clps) 。这些功能允许您限制谁可以按对象或按类读取或写入数据,确保只有授权用户可以修改您的数据。 访问控制列表 (acls) 一个 acl 应用于单个对象,以确定哪些用户、角色或公众可以执行读/写操作。例如: async function createprivatetodo(title, owneruser) { const todomodel = parse object extend('todo'); const todo = new todomodel(); todo set('title', title); // create an acl granting read/write access only to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } 当您保存对象时,它具有一个acl,防止除指定用户之外的任何人读取或修改它。 类级权限 (clps) clps 管理整个类的默认权限,例如该类是否可以公开读取或写入,或者是否只有某些角色可以访问它。 前往您的 back4app 控制面板 , 选择您的应用程序,然后打开 数据库 部分。 选择一个类 (例如,“待办事项”)。 打开类级权限 标签。 配置您的默认设置,例如“需要身份验证”以进行读取或写入,或“无访问”以供公众使用。 这些权限设置了基线,而 acl 则为单个对象微调权限。一个强大的安全模型通常结合了 clp(广泛限制)和 acl(每个对象的细粒度限制)。有关更多信息,请访问 应用安全指南。 步骤 4 – 编写和部署云函数 云代码是 parse server 环境的一个功能,允许您在服务器端运行自定义 javascript 代码 – 无需管理您的服务器或基础设施。通过编写云代码,您可以通过额外的业务逻辑、验证、触发器和集成来扩展您的 back4app 后端,这些都可以在 parse server 上安全高效地运行。 它是如何工作的 当你编写云代码时,通常会将你的 javascript 函数、触发器和任何所需的 npm 模块放在一个 main js (或 app js ) 文件中。然后将此文件部署到你的 back4app 项目中,该项目在 parse server 环境中执行。 由于这些函数和触发器在服务器上运行,你可以信任它们处理机密逻辑、处理敏感数据或进行仅限后端的 api 调用——这些过程你可能不想直接暴露给客户端。 你在 back4app 应用程序的所有云代码都在 back4app 管理的 parse server 内运行,因此你不必担心服务器维护、扩展或配置。每当你更新并部署你的 main js 文件时,正在运行的 parse server 会更新为你的最新代码。 // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function 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; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); 通过安装和使用 npm 模块,cloud code 变得非常灵活,允许您与外部 api 集成,执行数据转换或执行复杂的服务器端逻辑。 典型用例 业务逻辑 例如,您可以通过聚合多个对象属性来计算用户在游戏中的得分,然后自动存储该数据。 数据验证 确保某些字段存在或用户在保存或删除记录之前具有正确的权限。 触发器 当数据发生变化时执行操作(例如,当用户更新其个人资料时发送通知)。 集成 连接第三方 api 或服务。例如,您可以直接从 cloud code 集成支付网关、slack 通知或电子邮件营销平台。 安全执行 通过验证和清理输入参数来为您的 cloud code 函数添加额外的安全层。 部署您的函数 下面是一个简单的 cloud code 函数,它计算从客户端发送的文本字符串的长度: main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); 通过 back4app cli 1 安装 cli 对于 linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash 对于 windows 下载 b4a exe 文件从 发布页面 https //github com/back4app/parse cli/releases 2 配置您的账户密钥 b4a configure accountkey 3 部署您的云代码 b4a deploy 通过仪表板部署 在您的应用程序仪表板中,转到 cloud code > functions 将函数复制/粘贴到 main js 编辑器中。 点击 deploy 调用您的函数 使用 parse sdk 从 backbonejs import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } 您也可以通过 rest 调用它 curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength 或者通过 graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } 这种灵活性使您能够将自定义逻辑集成到您的 backbonejs 前端或任何其他支持 rest 或 graphql 的客户端中。 步骤 5 – 配置用户身份验证 back4app中的用户认证 back4app利用了 parse user 类作为认证的基础。默认情况下,parse处理密码哈希、会话令牌和安全存储。这意味着您不必手动设置复杂的安全流程。 设置用户认证 在backbonejs应用程序中,您可以使用以下代码创建新用户: import parse from ' /parseconfig'; async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } 通过rest,登录可能看起来像这样: curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login 会话管理 成功登录后,parse会创建一个 会话令牌 ,该令牌存储在用户对象中。在您的应用中,您可以访问当前登录的用户: const currentuser = parse user current(); if (currentuser) { console log('currently logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } parse会在后台自动处理基于令牌的会话,但您也可以手动管理或撤销它们。这在您需要注销时非常有用: await parse user logout(); 社交登录集成 back4app 和 parse 可以通过安装额外的包或使用现有的适配器与流行的 oauth 提供商集成,例如 google 或 facebook , 具体的详细说明可能有所不同,请参考 社交登录文档。 https //www back4app com/docs/platform/sign in with apple // example facebook login (conceptual example) const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; 电子邮件验证和密码重置 要启用电子邮件验证和密码重置: 在您的 back4app 控制面板中导航到 电子邮件设置 。 启用电子邮件验证 以确保新用户验证其电子邮件地址的所有权。 配置发件人地址 , 电子邮件模板,以及如果需要的话,您的自定义域名。 这些功能通过验证用户对电子邮件的所有权并提供安全的密码恢复方法来提高账户安全性和用户体验。 步骤 6 – 处理文件存储 上传和检索文件 解析包括 parse file 类用于处理文件上传,back4app 安全地存储这些文件 import parse from ' /parseconfig'; async function uploadimage(file) { // file is typically from an \<input type="file" /> in a webpage const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } 检索文件 url 非常简单 const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your backbone view or html element 文件安全 parse server 提供灵活的配置来管理文件上传安全性。例如 { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } enableforpublic 设置为 true 时,允许任何人,无论其身份验证状态如何,上传文件。 enableforanonymoususer 控制匿名(访客)用户是否可以上传文件。 enableforauthenticateduser 指定是否仅允许经过身份验证的用户上传文件。 第 7 步 – 使用云作业调度任务 云作业 云作业 在 back4app 中允许您调度和运行后台的例行任务 – 比如清理旧数据或发送每日摘要电子邮件。一个典型的云作业可能如下所示 // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo'); const query = new parse query(todo); // for example, remove todos older than 30 days 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); } }); 部署您的云代码 使用新作业(通过cli或仪表板)。 转到back4app仪表板 > 应用设置 > 服务器设置 > 后台作业 安排 作业每天运行或按您需要的任何间隔运行。 云作业使您能够自动化后台维护或其他定期过程 – 无需手动干预。 步骤8 – 集成webhook webhooks 允许您的 back4app 应用在特定事件发生时向外部服务发送 http 请求。这对于与第三方系统(如支付网关(例如,stripe)、电子邮件营销工具或分析平台)集成非常强大。 导航到 webhooks 配置 在您的 back4app 仪表板 > 更多 > webhooks,然后点击添加 webhook。 设置一个端点 (例如, https //your external service com/webhook endpoint https //your external service com/webhook endpoint )。 配置触发器 以指定在您的 back4app 类或云代码函数中将触发 webhook 的事件。 例如,如果您想在创建新 todo 时通知 slack 频道: 创建一个接受传入 webhook 的 slack 应用。 复制 slack webhook url。 在您的 back4app 仪表板中,将端点设置为该 slack url,用于事件“todo 类中的新记录”。 如果需要,您还可以添加自定义 http 头或有效负载。 您还可以通过在触发器中进行自定义 http 请求来定义 cloud code 中的 webhooks,例如 beforesave、aftersave: 第 9 步 – 探索 back4app 管理面板 “ back4app 管理应用 ”是一个基于网络的管理界面,旨在让非技术用户执行 crud 操作并处理常规数据任务,而无需编写任何代码。它提供了一个 以模型为中心 , 用户友好 的界面,简化了数据库管理、自定义数据管理和企业级操作。 启用管理应用 通过前往 应用仪表板 > 更多 > 管理应用 并点击“启用管理应用”按钮来启用它。 创建第一个管理员用户 (用户名/密码),这将自动在您应用的架构中生成一个新角色(b4aadminuser)和类(b4asetting、b4amenuitem 和 b4acustomfield)。 选择一个子域名 以访问管理界面并完成设置。 登录 使用您创建的管理员凭据访问新的管理员应用程序仪表板。 一旦启用,back4app 管理应用程序使您可以轻松查看、编辑或删除数据库中的记录——无需直接使用 parse 仪表板或后端代码。通过可配置的访问控制,您可以安全地与需要清晰、点击式管理数据的团队成员或客户共享此界面。 结论 通过遵循本综合教程,您已经: 创建了一个安全的后端 用于backbonejs应用程序在back4app上 配置了一个数据库 具有类模式、数据类型和关系 集成了实时查询 (实时查询)以便立即更新数据 应用了安全措施 使用acl和clp来保护和管理数据访问 实现了云代码 函数在服务器端运行自定义业务逻辑 设置了用户认证 支持电子邮件验证和密码重置 管理文件上传 和检索,具有可选的文件安全控制 安排云作业 用于自动化后台任务 使用webhooks 与外部服务集成 探索了back4app管理面板 用于数据管理 凭借坚实的backbonejs前端和强大的back4app后端,您现在可以很好地开发功能丰富、可扩展和安全的应用程序。继续探索更高级的功能,集成您的业务逻辑,并利用back4app的强大功能为您节省无数小时的服务器和数据库管理。祝您编码愉快! 下一步 构建一个生产就绪的 backbonejs 应用 通过扩展这个后端以处理更复杂的数据模型、缓存策略和性能优化。 集成高级功能 例如专门的身份验证流程、基于角色的访问控制或外部 api(如支付网关)。 查看 back4app 的官方文档 以深入了解高级安全性、性能调优和日志分析。 探索其他教程 关于实时聊天应用、物联网仪表板或基于位置的服务。您可以将这里学到的技术与