如何使用 Redwood.js 构建 CRUD 应用？

概述 在本指南中，您将学习如何使用 redwoodjs 创建一个基本的 crud（创建、读取、更新、删除）应用程序。 本教程将引导您完成使用 back4app 作为后端服务设置项目的过程，设计一个强大的数据库架构，并将其与 redwoodjs 前端集成。 通过遵循这些步骤，您将构建一个生产就绪的应用程序，有效管理数据，同时采用现代开发技术。 基本见解 掌握创建一个高效处理数据的 crud 应用程序，配备强大的后端服务。 了解如何构建可扩展的数据库，并将其与 redwoodjs 界面合并，以增强用户交互。 探索使用无代码拖放管理工具——back4app 管理应用程序，以简化 crud 操作。 学习部署策略，包括使用 docker 进行容器化，以快速启动您的 web 应用程序。 前提条件 在开始之前，请确认您拥有以下内容 一个活跃的 back4app 账户，并且有一个新的项目准备好。 如果您需要指导，请查看 开始使用 back4app https //www back4app com/docs/get started/new parse app 一个设置好的 redwoodjs 开发环境。 使用 redwoodjs cli 创建您的应用程序。确保安装了 node js（版本 14 或更高）。 对 javascript、redwoodjs 和 graphql 的基本理解。 有关更多详细信息，请访问 redwoodjs 文档 https //redwoodjs com/docs/introduction 步骤 1 – 启动您的项目 启动一个新的 back4app 项目 登录到您的 back4app 控制面板。 选择 “新应用” 以开始一个新项目。 为您的项目命名： basic crud app redwoodjs 并按照设置说明进行操作。 创建新项目 您的项目现在将在仪表板中显示，为您的后端配置和管理奠定基础。 步骤 2 – 制作数据库架构 构建您的数据模型 对于这个 crud 应用，您将设计几个集合。以下是两个基本集合的示例以及必要的字段。这些设置对于启用可靠的 crud 功能至关重要。 1\ 集合：项目 此集合包含有关每个项目的详细信息。 字段 数据类型 目的 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 一个简短的摘要描述该项目。 创建于 日期 记录创建时间戳。 更新时间 日期 最新更新的时间戳。 2\ 收集：用户 此集合存储用户凭据和详细信息。 字段 数据类型 目的 id 对象id 自动生成的唯一标识符。 用户名 字符串 用户的唯一标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 用于身份验证的加密密码。 创建于 日期 账户创建时间戳。 更新于 日期 最新更新的时间戳。 您可以通过在 back4app 控制面板中创建新类并添加适当的列来直接配置这些集合。 创建新类 通过选择其类型、命名并设置其默认或必需状态来定义每个字段。 创建列 使用 back4app ai 代理进行模式创建 可以从您的仪表板访问的 back4app ai 代理，可以根据描述性提示自动生成您的数据库模式。此功能显著加快了为您的应用程序设置一致模式的速度。 如何使用 ai 代理： 启动 ai 代理： 从您的 back4app 仪表板或项目设置中访问代理。 详细描述您的数据模型： 输入一条全面的提示，概述您所需的集合和字段。 审查并实施： 检查生成的模式建议并将其应用于您的项目。 示例提示 create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 利用这种基于 ai 的方法不仅节省时间，还能确保模式的良好优化和一致性。 步骤 3 – 激活管理员应用程序并管理 crud 操作 管理员应用程序简介 back4app 管理应用是一个用户友好的无代码界面，使您能够轻松处理后端数据。其拖放功能使得执行 crud 操作（例如添加、查看、更新和删除记录）变得轻而易举。 如何启用管理应用 前往您的 back4app 仪表板中的 “更多” 菜单 。 选择 “管理应用” 然后点击 “启用管理应用。” 设置您的管理员凭据 ，通过创建初始管理员用户，这也建立了角色（例如， b4aadminuser ) 和系统集合。 启用管理应用 激活后，登录管理应用以管理您的数据。 管理应用仪表板 通过管理应用执行 crud 操作 在管理应用中，您可以： 添加新记录： 在集合中使用 “添加记录” 按钮（例如，项目）插入新数据。 查看和修改记录： 点击记录以查看其详细信息并进行更新。 删除记录： 选择删除选项以消除不再需要的数据。 这个直观的界面大大简化了数据管理任务。 步骤 4 – 将 redwoodjs 与 back4app 集成 现在您的后端已设置并可以通过管理应用程序进行管理，是时候将您的redwoodjs前端与back4app连接起来。 使用graphql api集成 redwoodjs围绕graphql构建，使其与back4app通过api调用集成成为完美匹配。您将通过graphql查询和变更与后端进行交互，而不是使用sdk。 设置您的redwoodjs项目 创建一个新的redwoodjs应用程序： yarn create redwood app basic crud app redwood 导航到您的项目目录： cd basic crud app redwood 配置您的环境变量： 在您的 env 文件中，添加您的back4app凭据： back4app app id=your application id back4app rest api key=your rest api key back4app server url=https //parseapi back4app com 使用redwoodjs cells获取数据 redwoodjs cells简化了数据获取。以下是一个检索项目的单元示例： // web/src/components/itemscell/itemscell js export const query = gql` query items query { items itemscollection { id title description } } `; export const loading = () => \<div>loading items…\</div>; export const empty = () => \<div>no items available \</div>; export const failure = ({ error }) => \<div>error {error message}\</div>; export const success = ({ items }) => { return ( \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item title}\</strong> — {item description} \</li> ))} \</ul> ); }; 您可以在您的 redwoodjs 组件中集成类似的 graphql 查询和变更，以执行 crud 操作。 步骤 5 – 保护您的后端 实施访问控制 通过直接在对象上设置访问控制列表 (acl) 来保护您的数据。例如，在创建私有项目时，您可以确保只有所有者具有读/写权限。 async function createprivateitem(itemdata, owner) { const response = await fetch(`${process env back4app server url}/classes/items`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[owner] { read true, write true }, " " { read false, write false } } }) }); return response json(); } 配置类级权限 在 back4app 仪表板中，为每个集合设置类级权限 (clps)，以限制对经过身份验证的用户或特定角色的访问，确保您的数据保持安全。 第 6 步 – 管理用户身份验证 设置账户管理 back4app 利用强大的用户系统，您可以将其集成到 redwoodjs 中以进行用户身份验证。在您的 redwoodjs 应用中，通过 api 调用处理用户注册和登录。 示例：用户注册 // web/src/components/auth/signup js import { usestate } from 'react'; const signup = () => { const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); try { const response = await fetch(`${process env back4app server url}/users`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data error) { alert('sign up failed ' + data error); } else { alert('user successfully registered!'); } } catch (error) { console error('registration error ', error); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; export default signup; 类似的方法可以应用于登录和维护用户会话。 步骤 7 – 通过网络部署部署您的 redwoodjs 前端 back4app 的网络部署功能使托管您的 redwoodjs 前端变得无缝。按照以下步骤将您的代码推送到生产环境： 7 1 构建您的生产版本 在终端中打开您的项目文件夹。 运行构建命令： yarn rw build 这将生成一个 web/dist 文件夹，其中包含您的优化静态文件。 验证构建输出： 确保 web/dist 文件夹中包含一个 index html 以及所有必要的资产。 7 2 组织并提交您的源代码 您的代码库应托管您 redwoodjs 应用程序的完整源代码。典型结构可能是： basic crud app redwood/ ├── api/ ├── web/ │ ├── dist/ │ ├── src/ │ │ ├── components/ │ │ │ ├── itemscell/ │ │ │ └── auth/ │ │ └── app js │ └── index html ├── env └── package json 提交到 github 初始化 git（如果需要）： git init 暂存你的文件： git add 提交你的代码： git commit m "initial commit for redwoodjs crud frontend" 创建一个 github 仓库 （例如， basic crud app redwood ）并推送你的代码： git remote add origin https //github com/your username/basic crud app redwood git git push u origin main 7 3 与网络部署集成 从您的 back4app 仪表板访问网络部署 在您的项目下（basic crud app redwood）。 如果您尚未连接，请 按照提示连接您的 github 账户。 选择您的代码库和分支 （例如， main ）包含您的 redwoodjs 代码。 7 4 设置部署参数 构建命令： 如果您的代码库不包含预构建的分发，请指定 yarn rw build 。 输出目录： 将输出目录配置为 web/dist 。 环境变量： 包含任何必要的环境变量，例如您的 back4app 密钥。 7 5 使用 docker 容器化 如果您偏好使用 docker 进行部署，请在您的代码库中包含一个 dockerfile 。例如： \# use an official node image for building the app from node 16 alpine as builder \# set the working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run yarn install \# copy the project files copy \# build the redwoodjs app run yarn rw build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/web/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 部署应用程序 按下部署按钮 在 back4app 中完成配置后 监控部署过程 back4app 将获取您的代码，构建项目，并在容器化环境中部署它 获取您的应用程序 url 一旦部署，将提供一个 url，您的 redwoodjs 应用程序将托管在此 7 7 验证您的部署 在浏览器中打开提供的 url 以确认网站加载 测试应用程序功能 确保所有页面、路由和资源正确加载 如有必要进行故障排除 利用浏览器开发工具和 back4app 部署日志进行任何所需的调试 第8步 – 最后的想法和未来方向 恭喜你使用 back4app 构建了基于 redwoodjs 的 crud 应用程序！ 你成功设置了一个名为 basic crud app redwood 的项目，创建了详细的数据库集合用于项目和用户，并集成了一个干净的前端与强大的数据管理和安全性。 接下来是什么？ 优化你的前端： 通过详细的项目页面、搜索功能和实时更新等功能增强你的 redwoodjs 应用程序。 加入高级功能： 考虑添加无服务器功能、第三方集成或更复杂的访问控制。 探索更多资源： 深入了解 back4app 文档 https //www back4app com/docs 和 redwoodjs 指南 https //redwoodjs com/docs 以获得进一步的改进。 通过遵循本教程，你现在掌握了开发可扩展 crud 后端的知识，并能够将其与现代的 redwoodjs 前端无缝集成，使用 back4app。享受你的编码之旅！