如何为Gatsby构建后端？

介绍 在本教程中，您将学习 如何为 gatsby 构建后端 使用 back4app。 我们将向您展示如何集成 back4app 的功能——例如数据库管理、云代码功能、 rest api 和 graphql 查询 功能、用户身份验证和实时查询（实时查询）——以创建一个安全、可扩展和强大的后端，可以从您的 gatsby 站点 访问。 您还将看到 back4app 的快速设置和直观环境如何大幅减少处理后端任务所需的时间和精力。 到最后，您将确切知道 如何为 gatsby 构建后端 ，以存储和检索数据、处理身份验证、集成云功能等。 这使您能够轻松地合并自定义逻辑、添加第三方 api 或扩展数据模型，而无需担心传统的服务器维护。 您将构建什么以及它的价值 完整的后端集成 您将为您的 gatsby 站点创建一个可扩展的后端结构，结合 parse sdk，非常适合动态数据需求。 节省时间 back4app 提供 ai 代理、实时查询和云作业等工具，加快后端创建。 可扩展技能 完成后，您将能够将这些概念应用于更高级的 gatsby 功能，例如 在构建时创建页面 或连接无服务器功能以进行动态操作。 前提条件 一个 back4app 账户和一个新的 back4app 项目 开始使用 back4app https //www back4app com/docs/get started/new parse app 如果您没有账户，可以免费创建一个。请按照上面的指南准备好您的项目。 基本的 gatsby 开发环境 您可以通过安装 gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli 来设置此环境，并运行 安装 node js（版本 14 或更高） 安装 node js https //nodejs org/en/download/ 熟悉 javascript 和 gatsby 的概念 gatsby 官方文档 https //www gatsbyjs com/docs/ 如果您是 gatsby 新手，请阅读文档或初学者教程。 确保您已设置这些要求。这将确保您在 创建新文件 进行配置或在您的 gatsby 环境中运行 graphql 查询时，体验顺畅。 步骤 1 – 设置 back4app 项目 创建新项目 在 back4app 上 如何为 gatsby 构建后端 的第一步是创建一个新项目。如果您还没有： 登录到您的 back4app 账户 。 点击仪表板上的“新应用”按钮 。 给您的应用命名 （例如，“gatsby backend tutorial”）。 创建项目后，它将出现在您的 back4app 控制面板中。我们将使用此项目作为我们后端的核心。 连接 parse sdk back4app 使用 parse 平台来管理您的数据，提供实时功能，处理用户身份验证等。对于 gatsby，您仍然可以 npm install parse 然后将其集成到您的源文件中： 检索您的 parse 密钥 在您的 back4app 控制面板中，找到您的 应用程序 id 和 javascript 密钥 , 通常在“应用设置”或“安全性与密钥”下。您还会找到 parse 服务器 url （通常类似于 https //parseapi back4app com )。 在您的 gatsby 网站中安装 parse sdk ： npm install parse 在您的 gatsby 项目的根目录或 src/ 中创建一个 parseconfig js ： 导航到“数据库”部分 在您的 back4app 控制面板中。 创建一个新类 （例如，“待办事项”）并添加像标题（字符串）和 iscompleted（布尔值）这样的列。 或者，您可以让 parse 在对象首次从您的代码保存时自动创建列。 使用 ai 代理创建数据模型 back4app 提供了一个 ai 代理来帮助定义您的数据结构。 从您的应用程序仪表板或菜单中打开 ai 代理 描述您的数据模型 （例如，“请创建一个新的待办事项应用程序架构，包含标题和完成状态。”）。 让 ai 代理为您生成 架构。 使用 sdk 读取和写入数据 在gatsby中的一个示例代码片段可能看起来像这样（例如，在基于react的页面或在 gatsby browser js ) 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); } } 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); } } 使用rest api读取和写入数据 或者，您可以通过 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 api读取和写入数据 back4app还支持一个 graphql api , 因此您可以运行查询或变更，例如 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 如果您希望您的 gatsby 网站在构建时通过 graphql 查询提取数据，这尤其方便。 使用实时查询 gatsby 是一个静态网站生成器，但您仍然可以使用 parse 实时查询 设置动态实时连接。这在浏览器运行的代码或您自己的无服务器钩子中可能会很有用。 前往 数据库 在您的 back4app 控制面板中。 选择类（例如， 待办事项 )。 点击 类级别权限 标签。 配置类是否可以公开读取，是否需要身份验证，或是否限制为某些角色。 在代码中使用 acls 在您的 gatsby 代码中，您可以为每个新对象定义 acls： async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); 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); } } 步骤 4 – 编写云代码函数 为什么选择云代码？ 通过云代码，您可以向您的 back4app 后端添加自定义服务器端逻辑。这对于业务规则、 rest api 转换、触发器或您可能希望保持安全并不在客户端的数据验证非常有用。 示例云函数 // 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 安装并配置 cli，然后运行 b4a deploy 通过仪表板 转到 cloud code > functions 在您的仪表板中，将代码粘贴到 main js , 然后点击 部署 调用您的函数 来自 gatsby/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); } } 步骤 5 – 配置身份验证 解析用户类 back4app 使用 parse user 类进行身份验证。默认情况下，它处理密码哈希、会话和安全存储。 在 gatsby 中注册和登录 import parse from ' /parseconfig'; // signup 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); } } // login 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); } } 登录后，您可以调用 parse user current() 来检查用户是否已登录。 社交登录 您可以集成 google , facebook , apple , 和其他提供商，需进行额外设置。详细信息请参阅 社交登录文档。 https //www back4app com/docs/platform/sign in with apple 步骤 6 – 处理文件存储 上传文件 使用 parse file 上传图像或其他文件。例如，在 gatsby 组件中： async function uploadimage(file) { 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); } } 然后，您可以将此文件附加到 parse 对象，存储它，并稍后检索文件 url 以在您的 gatsby 网站中显示。 步骤 7 – 邮件验证和密码重置 为什么这很重要 电子邮件验证确认用户的电子邮件地址，密码重置流程改善用户体验。这两者都可以在 back4app 中轻松配置。 在仪表板中导航到您的应用程序的电子邮件设置 。 启用电子邮件验证 并设置密码重置电子邮件模板。 使用 parse sdk 方法（例如， parse user requestpasswordreset(email) ) 来触发重置电子邮件。 第 8 步 – 使用云作业调度任务 云作业概述 使用 云作业 来自动化重复任务，例如删除过期数据或发送每日摘要。例如： // 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); } }); 然后在 应用设置 > 服务器设置 > 后台作业 中调度它。 步骤 9 – 集成 webhooks webhooks 让您的 back4app 应用在特定事件发生时（例如创建新记录）向外部服务发送 http 请求。 前往 您的 back4app 控制面板 > 更多 > webhooks 添加一个新的 webhook , 指定外部服务的端点 url。 选择 触发 webhook 的条件（例如，在 todo 类上使用 aftersave）。 您还可以通过添加适当的端点与 slack 或支付网关集成。 步骤 10 – 探索 back4app 管理面板 back4app的 admin app 是一个以模型为中心的数据管理界面。您可以为非技术用户提供安全访问，以执行对您的类的crud操作。 启用admin app 前往 app dashboard > more > admin app 并点击 “启用admin app。” 然后 创建一个admin用户 并为管理界面选择一个子域名。 您现在可以登录到您的admin app，以查看和修改数据，而无需编写代码。 结论 在本教程中，您发现了 如何使用 back4app 构建 gatsby 的后端 。您已经学会了： 配置一个安全的数据库 ，包括类、自定义字段和关系。 使用 parse sdk , 以及 rest api 和 graphql 查询 选项进行数据交易。 设置 acl 和 clp 以确保数据安全。 编写和部署云代码 以扩展业务逻辑和触发器。 管理用户身份验证 ，包括注册、登录、密码重置和电子邮件验证。 处理文件存储 ，用于图像和文档。 安排自动化任务 ，使用云作业。 通过 webhooks 集成外部服务 利用管理应用程序 进行简单的数据管理。 通过这些技能，您的 gatsby 网站可以利用强大的动态功能，同时仍然利用 gatsby 的静态渲染。从这里，您可以： 扩展您的数据模型 并添加高级业务逻辑。 集成更多外部 api 以实现真正全面的平台。 遵循 back4app 的官方文档 以深入了解安全性、性能和分析。 尝试 gatsby 的构建时功能 ——例如，“ 从动态数据创建页面 ”或为您的 back4app 后端设置一个 “ gatsby source ” 插件。 现在，您已经为使用 gatsby 和 back4app 构建未来可持续的数据驱动应用程序奠定了坚实的基础。