如何为 ReactJS 构建后端？

介绍 在本教程中，您将学习如何使用 back4app 为 reactjs 应用程序构建完整的后端。 我们将逐步整合 back4app 的基本功能 如数据库管理、云代码函数、rest 和 graphql api、用户身份验证以及实时查询（实时查询） 以创建一个安全、可扩展且强大的后端，与您的 reactjs 前端无缝通信。 您还将看到 back4app 的快速设置和直观环境如何大幅减少与手动配置服务器和数据库相比所需的时间和精力。 在此过程中，您将获得关键功能的实践经验，包括高级安全功能、使用云作业调度任务以及为外部集成设置 webhook。 在本教程结束时，您将为将此基础设置提升为生产就绪的应用程序做好充分准备，或根据需要轻松集成自定义逻辑和第三方 api。 先决条件 要完成本教程，您需要： 一个 back4app 账户和一个新的 back4app 项目 开始使用 back4app。 https //www back4app com/docs/get started/new parse app 如果您没有账户，可以免费创建一个。请按照上面的指南准备好您的项目。 基本的 reactjs 开发环境 您可以使用 create react app https //create react app dev/docs/getting started/ 或类似工具来设置。确保您的计算机上已安装 node js。 安装 node js（版本 14 或更高） 您需要 node js 来安装 npm 包和运行本地开发服务器。 安装 node js https //nodejs org/en/download/ 熟悉 javascript 和基本的 reactjs 概念 reactjs 官方文档。 https //reactjs org/docs/getting started html 如果您是 react 新手，请在开始之前查看官方文档或初学者教程。 在开始之前，请确保您具备所有这些先决条件。设置好您的 back4app 项目和本地 reactjs 环境将帮助您更轻松地跟随。 步骤 1 – 设置 back4app 项目 创建新项目 在 back4app 上构建您的 reactjs 后端的第一步是创建一个新项目。如果您还没有创建，请按照以下步骤操作： 登录到您的 back4app 账户 。 点击您的 back4app 仪表板中的“新应用”按钮 。 给您的应用命名 （例如，“reactjs backend tutorial”）。 一旦项目创建完成，您将在您的 back4app 仪表板中看到它列出。这个项目将是本教程中讨论的所有后端配置的基础。 连接 parse sdk back4app 依赖 parse 平台来管理您的数据，提供实时功能，处理用户身份验证等。将您的 reactjs 应用程序连接到 back4app 涉及安装 parse npm 包并使用您 back4app 仪表板中的凭据进行初始化。 检索您的 parse 密钥 在您的 back4app 仪表板中，导航到您应用的“应用设置”或“安全性与密钥”部分以找到您的 应用程序 id 和 javascript 密钥 您还会找到 parse 服务器 url （通常格式为 https //parseapi back4app com )。 在您的 reactjs 项目中安装 parse sdk ： npm install parse 如果您使用 yarn，您可以使用以下命令安装它： yarn add parse 在您的 reactjs 应用程序中初始化 parse： 通常，您会在您的 src 目录中创建一个文件（例如， 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; 此文件确保每当您在 react 应用程序的其他地方导入 parse 时，它已预先配置为连接到您的特定 back4app 实例。 通过完成此步骤，您已在 reactjs 前端和 back4app 后端之间建立了安全连接。所有请求和数据交易都通过此 sdk 安全路由，从而减少了手动 rest 或 graphql 调用的复杂性（尽管在需要时您仍然可以使用它们）。 步骤 2 – 设置数据库 保存和查询数据 在设置好您的 back4app 项目并将 parse sdk 集成到您的 react 应用程序后，您现在可以开始保存和检索数据。创建记录的最简单方法是使用 parse object 类： // example create a todo item import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); 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); } } // example query all todo items async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query 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 仪表板中导航到 “数据库” 部分 创建一个新类 （例如，“待办事项”）并添加相关列，例如标题（字符串）和 iscompleted（布尔值）。 back4app 还支持各种数据类型： 字符串 , 数字 , 布尔值 , 对象 , 日期 , 文件 , 指针、数组、关系 , 地理点 , 和多边形 您可以为每个字段选择适当的类型。如果您愿意，您也可以让 parse 在您第一次从 react 应用程序保存对象时自动创建这些列。 back4app 提供一个 ai 代理，可以帮助您设计数据模型： 从您的应用仪表板或菜单中打开 ai 代理 用简单的语言描述您的数据模型 （例如，“请在 back4app 上创建一个新的待办事项应用，带有完整的类模式。”）。 让 ai 代理为您创建模式 使用ai代理可以在设置数据架构时节省时间，并确保应用程序的一致性。 关系数据 如果您有关系数据——比如，一个 类别 对象指向多个 待办事项 项目——您可以在parse中使用 指针 或 关系 。例如，向一个 类别 添加指针： // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const todo = new parse object('todo'); // construct a pointer to the category const categorypointer = new parse object('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); } } 当您查询时，您还可以包含指针数据： const query = new parse query('todo'); query include('category'); const todoswithcategory = await query find(); 这个 include('category') 调用会在每个待办事项旁边获取类别详细信息，使您的关系数据无缝可访问。 实时查询 为了实时更新，back4app提供了 实时查询 。在您的reactjs应用中，您可以订阅特定类的更改： 在您的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 query = new parse query('todo'); const subscription = await query 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 todo = parse object extend('todo'); const todo = new todo(); 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 文件结构 一个典型的 main js 可能包含 所需模块的 require 语句（npm 包、内置 node 模块或其他云代码文件）。 云函数定义 使用 parse cloud define() 触发器 如 parse cloud beforesave() , parse cloud aftersave() , 等等。 您安装的 npm 模块 （如果需要）。例如，您可能会安装一个像 axios 的包来进行 http 请求。然后，您可以在文件顶部 require（或导入）它。 // 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 函数中验证和清理输入参数，增加额外的安全层。例如，您可以确保传入的数据符合特定格式，拒绝无效或恶意输入，并根据用户角色或权限在执行敏感操作之前强制执行访问规则。 部署您的函数 以下是一个简单的云代码函数，用于计算从客户端发送的文本字符串的长度： 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 通过仪表板部署 在您的应用仪表板中，转到 云代码 > 函数 复制/粘贴函数到 main js 编辑器 点击 部署 调用您的函数 从 reactjs 使用 parse sdk 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 } } 这种灵活性使您能够将自定义逻辑集成到您的 reactjs 前端或任何其他支持 rest 或 graphql 的客户端中。 步骤 5 – 配置用户身份验证 back4app 中的用户身份验证 back4app 利用 parse user 类作为身份验证的基础。默认情况下，parse 处理密码哈希、会话令牌和安全存储。这意味着您不必手动设置复杂的安全流程。 设置用户身份验证 在 react 应用程序中，您可以使用以下方式创建新用户 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会创建一个 会话令牌 ，该令牌存储在用户对象中。在您的react应用中，您可以访问当前登录的用户： 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 , 通过安装额外的包或使用现有的适配器。例如，您可以通过配置您的 facebook应用id 并使用parse facebookutils login()来设置facebook登录。详细说明可能有所不同，因此请参考 社交登录文档。 https //www back4app com/docs/platform/sign in with apple 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包含了 parse file 类来处理文件上传，back4app会安全地存储这些文件 import parse from ' /parseconfig'; async function uploadimage(file) { // file is typically from an \<input type="file" /> in react 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(); 您可以通过将此 imageurl 设置为 \<img> 标签的 src，在您的 react 组件中显示此图像 文件安全 parse server 提供灵活的配置来管理文件上传安全性。以下示例显示了如何设置权限以控制谁可以将文件上传到服务器 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 – 集成 webhooks webhooks 允许您的 back4app 应用在某些事件发生时向外部服务发送 http 请求。这对于与第三方系统（如支付网关（例如 stripe）、电子邮件营销工具或分析平台）集成非常强大。 导航到 webhooks 配置 在您的 back4app 仪表板 > 更多 > webhooks，然后单击添加 webhook。 设置端点 （例如，https //your external service com/webhook endpoint）。 配置触发器 以指定您的 back4app 类或云代码函数中的哪些事件将触发 webhook。 例如，如果您想在创建新 todo 时通知 slack 频道： 创建一个接受传入 webhook 的 slack 应用。 复制 slack webhook url。 在您的 back4app 仪表板中，将端点设置为该 slack url，用于事件“todo 类中的新记录。” 如果需要，您还可以添加自定义 http 头或有效负载。 您还可以通过在触发器中发出自定义 http 请求来定义 webhooks，例如 beforesave、aftersave： 第9步 – 探索 back4app 管理面板 “ back4app 管理应用 ”是一个基于网络的管理界面，旨在为非技术用户提供执行 crud 操作和处理常规数据任务的能力，而无需编写任何代码。它提供了一个 以模型为中心 , 用户友好 的界面，简化了数据库管理、自定义数据管理和企业级操作。 启用管理应用 启用 它前往 应用仪表板 > 更多 > 管理应用 并点击“启用管理应用”按钮。 创建第一个管理员用户 （用户名/密码），这将自动在您的应用架构中生成一个新角色（b4aadminuser）和类（b4asetting、b4amenuitem 和 b4acustomfield）。 选择一个子域名 以访问管理界面并完成设置。 登录 使用您创建的管理员凭据访问您的新管理员应用程序仪表板。 启用后，back4app 管理应用程序使您可以轻松查看、编辑或删除数据库中的记录 无需直接使用 parse 仪表板或后端代码。通过可配置的访问控制，您可以安全地与需要清晰、点击式管理数据的团队成员或客户共享此界面。 结论 通过遵循本综合教程，您已经： 创建了一个安全的后端 用于reactjs应用程序在back4app上。 配置了一个数据库 具有类模式、数据类型和关系。 集成了实时查询 （实时查询）以便立即更新数据。 应用了安全措施 使用acl和clp来保护和管理数据访问。 实现了云代码 函数在服务器端运行自定义业务逻辑。 设置了用户身份验证 支持电子邮件验证和密码重置。 管理文件上传 和检索，具有可选的文件安全控制。 安排云作业 用于自动化后台任务。 使用webhooks 与外部服务集成。 探索了back4app管理面板 进行数据管理。 凭借坚实的reactjs前端和强大的back4app后端，您现在可以开发功能丰富、可扩展和安全的应用程序。继续探索更高级的功能，集成您的业务逻辑，并利用back4app的强大功能为您节省无数小时的服务器和数据库管理时间。祝您编码愉快！ 下一步 构建一个生产就绪的 reactjs 应用 通过扩展这个后端以处理更复杂的数据模型、缓存策略和性能优化。 集成高级功能 例如专门的身份验证流程、基于角色的访问控制或外部 api（如支付网关）。 查看 back4app 的官方文档 以深入了解高级安全性、性能调优和日志分析。 探索其他教程 关于实时聊天应用、物联网仪表板或基于位置的服务。您可以将这里学到的技术与第三方 api 结合起来，创建复杂的现实世界应用。