如何使用 Remix 创建 CRUD 应用？

概述 在本教程中，您将学习如何使用 remix js 构建一个 crud（创建、读取、更新、删除）应用程序。 我们将使用 back4app 作为我们的后端服务，以无缝处理数据存储。 本指南涵盖了设置 back4app 项目、设计动态数据架构以及在您的 remix js 应用程序中连接 crud 操作。 最初，您将设置一个 back4app 项目，我们称之为 basic crud app remix ，提供可扩展的非关系数据存储。 然后，您将通过 back4app 仪表板手动建立集合和字段来创建数据模型，或者甚至可以使用集成的 ai 代理进行自动设置。 接下来，您将探索 back4app 管理应用程序——一个用户友好的界面，让您可以轻松地使用拖放操作管理数据。 最后，您将通过 rest api 调用将您的 remix js 应用程序连接到 back4app，确保您的 crud 功能以及用户身份验证是强大且安全的。 通过本教程的学习，您将拥有一个生产就绪的 remix js 应用程序，能够执行基本的 crud 操作以及安全的用户管理。 您将学习到的内容 如何使用 remix js 和可靠的后端构建 crud 应用程序。 构建后端的最佳实践以及如何将其与 remix js 前端集成。 如何使用 back4app 管理应用程序简化数据管理任务。 部署 remix js 应用程序的技术，包括使用 docker 进行容器化。 先决条件 在开始之前，请确保您具备以下条件： 一个拥有新项目的 back4app 账户。 需要帮助？访问 back4app 入门指南 https //www back4app com/docs/get started/new parse app 。 一个可工作的 remix js 开发环境。 您可以使用任何现代代码编辑器，如 vs code。应安装 node js（版本 14 或更高）。 基本的 javascript、react 和 restful api 知识。 如需复习，请查看 remix 文档 https //remix run/docs 。 步骤 1 – 设置您的项目 启动一个新的 back4app 项目 登录到您的 back4app 账户。 点击“新应用”按钮 在您的仪表板上。 命名您的项目： basic crud app remix 并按照步骤完成创建过程。 创建新项目 一旦您的项目准备好，它将出现在您的仪表板上，为您的后端提供基础。 步骤 2 – 构建您的数据模型 建立数据结构 对于这个crud应用程序，您将在back4app中定义几个集合。以下是将支持您的crud功能的主要集合和字段的示例。 1\ 项目集合 此集合将存储有关每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 一段简要总结，描述该项目。 创建于 日期 添加项目的时间戳。 更新时间 日期 最后修改的时间戳。 2\ 用户收集 此集合管理用户凭据和身份验证信息。 字段 数据类型 描述 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一用户名。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于安全身份验证的哈希密码。 创建于 日期 账户创建的时间戳。 更新时间 日期 账户更新的时间戳。 您可以直接从 back4app 仪表板创建这些集合并添加字段。 创建新班级 要添加一个新字段，只需选择数据类型，输入字段名称，并根据需要设置默认值或必填选项。 创建列 使用 back4app ai 代理进行模式生成 集成到back4app中的ai代理可以根据您的描述自动生成您的架构，从而简化初始设置。 如何使用ai代理： 访问ai代理： 登录到您的back4app仪表板，并在项目设置中找到ai代理。 描述您的数据模型： 提供您所需的集合和字段的详细说明。 审核并确认： ai代理将呈现一个建议的架构。验证详细信息并确认设置。 示例提示 create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection 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 – 将您的 remix js 应用程序与 back4app 连接 现在您的后端已设置好，是时候将您的 remix js 应用程序与 back4app 集成了。 在 remix js 中使用 rest api 调用 由于 parse sdk 通常不与 remix js 一起使用，您将通过 rest api 请求执行 crud 操作。 1\ 设置您的 remix js 项目 如果您还没有，请创建一个新的 remix 项目： npx create remix\@latest 按照提示选择您的部署目标。 2\ 从 remix 发起 api 请求 在 app/routes 目录下创建 api 路由文件以处理 crud 操作。例如，您可能会有一个名为 items server js 的文件，其中包含用于获取、创建、更新和删除项目的函数。 示例：获取项目 // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { const response = await fetch("https //parseapi back4app com/classes/items", { method "get", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", }, }); const data = await response json(); return json(data); } 同样，您可以创建 post、put 和 delete 路由来处理项目的创建、更新和删除。 3\ 连接 ui 组件 在您的 remix 组件中，您可以使用像 useloaderdata 这样的钩子来获取数据，以及 fetch api 或操作函数将数据发送回 back4app。 例如，在您的 react 组件中： // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } 在您的 remix 操作中集成类似的 api 调用以进行更新和删除操作。 步骤 5 – 保护您的后端 实施访问控制列表 (acls) 通过为您的对象设置 acl 来增强数据安全性。例如，要创建一个仅由其创建者访问的项目： // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { 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", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } 类级权限 (clps) 在您的 back4app 仪表板中调整 clps，以强制执行默认安全策略，确保只有经过身份验证的用户可以访问特定集合。 步骤 6 – 添加用户身份验证 配置用户管理 back4app 利用 parse 内置的用户类进行身份验证管理。在您的 remix 应用程序中，使用 api 调用处理用户注册和登录。 示例：用户注册端点 // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); 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 }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } 为登录、会话管理和密码重置实现类似的端点。 步骤 7 – 部署您的 remix js 应用程序 back4app 支持无缝部署。您可以使用各种策略（包括 docker）来部署您的 remix js 应用。 7 1 构建您的 remix js 应用程序 编译和打包： 使用您的包管理器和构建脚本（例如，通过 npm run build ) 来编译您的应用。 验证输出： 确保您的构建输出包含所有必要的文件。 7 2 项目结构示例 一个典型的 remix js 项目可能看起来像： basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 1 构建您的 remix js 应用程序 7 3 将您的应用程序容器化 如果您选择容器化，请在项目根目录中添加一个 dockerfile \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 通过 back4app web 部署 连接您的代码库： 在 github 上托管您的 remix js 源代码。 配置部署： 在您的 back4app 控制面板中，选择 web 部署 功能，链接您的代码库（例如， basic crud app remix ），并选择正确的分支。 设置构建和输出命令： 指定您的构建命令（如 npm run build ) 和输出目录。 部署您的应用： 点击 部署 并监控日志，直到您的应用上线。 第 8 步 – 总结与未来方向 做得好！你现在已经使用 remix js 集成 back4app 构建了一个 crud 应用程序。 在本指南中，你设置了一个名为 basic crud app remix 的项目，定义了 items 和 users 的集合，并通过 back4app 管理应用程序管理数据。 然后，你通过 rest api 调用将 remix js 应用程序连接到 back4app，并实施了安全的用户身份验证和数据保护措施。 下一步： 增强你的应用程序： 考虑添加更多功能，如搜索功能、详细的项目视图或实时更新。 扩展后端功能： 研究云函数、外部 api 集成或更高级的访问控制。 继续学习： 访问 back4app 文档 https //www back4app com/docs ，并探索更多的 remix js 教程，以进一步优化你的应用程序。 祝你编码愉快，祝你在 remix js 的旅程中一切顺利！