如何使用 Gatsby 创建 CRUD 应用？

介绍 在这个演练中，您将发现如何使用 gatsby 构建一个 crud（创建、读取、更新、删除）web 应用程序。 我们将使用 back4app 作为您的云后端，以轻松管理数据。本指南将引导您配置 back4app 项目，定义灵活的架构，并通过 rest 或 graphql api 调用将您的 gatsby 应用与 crud 操作连接。 最初，您将设置一个名为 basic crud app gatsby 的 back4app 项目。该项目为您提供访问强大的非关系数据库的权限。您将通过在 back4app 控制面板中手动创建类和字段或利用 back4app 的 ai agent 来设计数据架构。 接下来，您将使用 back4app 管理应用程序——一个拖放界面——轻松处理数据管理任务。 最后，您将通过 back4app api（通过 rest 或 graphql）将您的 gatsby 应用程序集成，以执行安全的 crud 操作。 在本教程结束时，您将开发出一个生产就绪的 gatsby 应用程序，该应用程序能够执行基本的 crud 操作，并具备安全的数据处理和用户身份验证。 关键要点 学习如何使用gatsby构建一个由低代码后端支持的crud应用程序。 了解如何构建后端并将其与现代gatsby网站连接。 利用back4app直观的管理应用程序来管理数据的创建、读取、更新和删除。 发现包括容器化策略在内的gatsby应用程序的部署选项。 先决条件 在开始之前，请确保您拥有： 一个具有活动项目的back4app账户。 需要帮助？请参见 使用back4app入门 https //www back4app com/docs/get started/new parse app 。 一个安装了gatsby cli的node js环境。 使用 node js https //nodejs org/ 并通过 npm install g gatsby cli 安装gatsby。 对react、graphql和rest api的熟悉。 如有需要，请查看 react文档 https //reactjs org/docs/getting started html 。 步骤 1 – 设置您的项目 创建一个新的 back4app 项目 登录到您的 back4app 账户。 点击“新应用” 从您的仪表板 命名您的项目： basic crud app gatsby 并完成设置步骤。 创建新项目 创建后，您的项目将出现在仪表板上，准备进行后端配置。 步骤 2 – 定义您的数据模型 配置您的架构 对于这个 crud 应用，您需要在 back4app 中设置几个类。以下是基本类和字段的示例。 1\ 项目类 这个类存储有关每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 物品名称。 描述 字符串 项目的简要描述。 创建于 日期 项目创建时的时间戳。 更新时间 日期 项目最后更新的时间戳。 2\ 用户类别 这个类处理用户凭据和身份验证。 字段 数据类型 描述 id 对象id 自动生成的唯一id。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 登录的加密密码。 创建于 日期 账户创建时间戳。 更新时间 日期 最新账户更新的时间戳。 您可以直接在 back4app 仪表板中添加这些类和字段。 创建新类 您可以通过选择数据类型、命名字段、设置默认值和标记必填字段来定义字段。 创建列 使用 back4app ai 代理进行模式生成 back4app ai代理可以根据您的规格自动构建您的模式。这加快了设置速度，并确保您的数据模型支持所有crud操作。 如何使用ai代理： 打开ai代理： 登录到您的back4app仪表板，并在项目设置中找到ai代理。 输入您的需求： 描述您需要的类和字段。 审核并应用： 代理将建议一个模式。审核并确认以实施。 示例提示 create the following 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 – 将您的 gatsby 应用与 back4app 连接 在您的后端设置完成后，下一步是将您的 gatsby 应用链接到 back4app。 在 gatsby 中使用 api 调用 我们将利用 rest 或 graphql 调用与 back4app 进行通信。第二个选项是使用 sdk。 使用 rest 获取数据 您可以使用 javascript 的 fetch api 来检索数据。例如，从 back4app 加载项目 // src/services/api js export const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data results; } catch (error) { console error('error fetching items ', error); return \[]; } }; 通过 rest 发送数据 要添加新项目，请使用 post 请求 // src/services/api js export const createitem = async (title, description) => { try { const response = await fetch('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', }, body json stringify({ title, description }), }); const data = await response json(); return data; } catch (error) { console error('error creating item ', error); } }; 您可以类似地使用 put/post 和 delete 方法实现更新和删除功能。 将这些 api 调用集成到您的 gatsby 页面或组件中，以动态管理数据。 步骤 5 – 保护您的后端 实施访问控制 通过在 back4app 中设置访问控制列表 (acl) 来保护您的数据。例如，要创建一个仅对其所有者可见的项目： // example payload for a private item const privateitem = { title 'private title', description 'this item is private', acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } } }; 类级权限 (clps) 在您的 back4app 仪表板中设置 clp，以强制执行默认访问规则，确保只有经过身份验证的用户可以访问特定类。 步骤 6 – 添加用户身份验证 在 gatsby 中配置用户帐户 back4app 利用 parse 的内置用户类进行身份验证。在您的 gatsby 应用中，通过 api 调用管理用户注册和登录。 示例：用户注册 // src/services/auth js export const signup = async (username, password, email) => { try { const response = await fetch('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', }, body json stringify({ username, password, email }), }); const data = await response json(); return data; } catch (error) { console error('error during sign up ', error); } }; 示例：用户登录 // src/services/auth js export const login = async (username, password) => { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data; } catch (error) { console error('login error ', error); } }; 这种方法可以扩展到管理会话、密码重置等更多功能。 第 7 步 – 部署您的 gatsby 应用程序 back4app 支持顺畅的部署过程。您可以使用多种方法部署您的 gatsby 应用，包括容器化。 7 1 构建您的 gatsby 网站 安装依赖： 运行： npm install 构建网站： 使用 gatsby 构建命令： gatsby build 本地测试： 提供您的生产构建以验证功能： gatsby serve 7 2 项目结构概述 一个典型的 gatsby 项目结构可能如下所示： basic crud app gatsby/ \| node modules/ \| src/ \| | components/ \| | | itemform js \| | | itemlist js \| | pages/ \| | index js \| | login js \| static/ \| gatsby config js \| package json \| readme md 7 3 将您的 gatsby 应用程序容器化 如果您更喜欢容器化部署，请添加一个 dockerfile \# use an official node js image as the base from node 14 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the remaining source code copy \# build the gatsby site run npm run build \# expose port (adjust if needed) expose 8000 \# serve the built site cmd \["npx", "gatsby", "serve", " h", "0 0 0 0"] 7 4 通过 back4app web 部署 链接您的代码库： 将您的 gatsby 源代码托管在 github 上。 配置部署： 在 back4app 仪表板中，选择 web deployment , 连接您的代码库（例如， basic crud app gatsby ），并选择分支。 设置构建命令： 指定构建命令（例如， npm run build ) 和输出目录。 部署： 点击 deploy 并监控日志，直到您的网站上线。 第8步 – 结论和下一步 干得好！你已经构建了一个基于gatsby的crud应用程序，并与back4app集成。 你设置了一个名为 basic crud app gatsby 的项目，定义了你的数据模型，使用管理员应用程序管理数据，并通过rest/graphql api调用将你的gatsby前端连接到back4app。 下一步： 增强你的应用： 考虑添加高级搜索、详细视图或实时更新。 扩展后端功能： 探索云函数、第三方api集成或精细的基于角色的访问控制。 了解更多： 访问 back4app文档 https //www back4app com/docs 以获取更多见解和教程。 祝你编码愉快，享受构建你的gatsby crud应用程序的过程！