如何构建一个Redwood.js前端并将其连接到后端？

在本教程中，您将使用 redwood js 构建一个待办事项列表应用程序，并将其连接到 back4app 上的托管后端。 本实用指南将引导您完成每一步——从设置您的 redwood js 项目到集成 parse 进行后端通信——让您可以专注于创建动态和响应式的用户界面。 redwood js 旨在通过将现代 react 基于前端与强大的后端架构相结合，简化全栈开发。 在本教程中，您将使用 back4app 来管理您的后端服务，使您能够执行基本的 crud 操作，而无需管理服务器基础设施的麻烦。 关键要点 在本指南结束时，您将能够： 使用行业标准工具初始化一个现代的 redwood js 项目。 使用 parse javascript sdk 将您的 redwood js 前端连接到 back4app 后端。 实现 crud 操作来管理您的 待办事项列表 将您的 redwood js 应用程序容器化，并通过 back4app web 部署进行部署。 先决条件 在开始之前，请确保您具备以下条件： 在您的计算机上安装了 node js 和 npm/yarn 。通过 node v 和 npm v 或 yarn v 验证安装。 基本的 redwood js 知识 , 包括项目结构、路由和组件。熟悉 react 概念是有益的。 一个 back4app 账户 用于设置和管理您的后端服务。如有需要，请在 back4app https //www back4app com/ 注册。 在具备这些先决条件后，您就可以开始设置您的 redwood js 项目并将其连接到可扩展的后端。 项目设置 首先创建一个新的 redwood js 应用程序。打开终端并运行以下命令，替换 todo app 为您想要的项目名称： yarn create redwood app todo app 导航到您的项目目录： cd todo app 安装所有依赖项： yarn install 运行开发服务器以验证您的项目是否正确设置： yarn rw dev 访问终端中显示的 url 以确认您的 redwood js 应用程序正在运行。 在 back4app 上设置 todo 后端 back4app 提供了一个托管的 parse 后端，简化了您应用程序的数据处理。在本节中，您将创建一个数据模型来存储待办事项列表的任务。 创建您的后端应用程序 登录到您的 back4app 仪表板 https //www back4app com/ 并点击 "创建新应用。" 为您的应用程序命名（例如， todoredwoodapp ) 并选择 nodejs/parse 作为后端类型。 在 "数据库" > "浏览器" 部分，点击 "创建一个类" 并选择 "自定义。" 将类命名为 任务 并设置其类级别权限以允许公共读取和写入（根据需要稍后调整这些设置）。 向 任务 类添加以下字段： 标题 (字符串) – 任务的标题。 描述 (字符串) – 关于任务的详细信息。 完成 (布尔值) – 任务是否完成。 截止日期 (日期) – 任务的截止日期。 点击 "保存" 以完成模式。 将 back4app 与 redwood js 集成 要将您的 redwood js 应用程序连接到 back4app，请安装 parse javascript sdk yarn add parse 接下来，通过在 web/src 目录中创建一个新文件来配置 parse。将其命名为 parseclient js 并添加以下代码。用您的 back4app 控制面板中的凭据替换 'your application id' 和 'your javascript key' （在 应用设置 > 安全性与密钥 ) // web/src/parseclient js import parse from 'parse/dist/parse min js' const parse app id = 'your application id' const parse js key = 'your javascript key' const parse server url = 'https //parseapi back4app com/' parse initialize(parse app id, parse js key) parse serverurl = parse server url export default parse 此配置使您能够从任何 redwood js 组件调用 parse 方法。 使用 redwood js 构建前端 连接后端后，是时候构建待办事项列表界面。在 redwood js 中，页面放置在 web/src/pages 目录下。 创建待办事项页面 创建一个名为 todopage 的新文件夹在 web/src/pages 并添加一个名为 todopage jsx mkdir p web/src/pages/todopage touch web/src/pages/todopage/todopage jsx 打开 web/src/pages/todopage/todopage jsx 并添加以下代码： // web/src/pages/todopage/todopage jsx import { usestate, useeffect } from 'react' import parse from 'src/parseclient' const todopage = () => { const \[tasks, settasks] = usestate(\[]) const \[title, settitle] = usestate('') const \[description, setdescription] = usestate('') useeffect(() => { fetchtasks() }, \[]) const fetchtasks = async () => { try { const task = parse object extend('task') const query = new parse query(task) const results = await query find() settasks(results map((task) => ({ id task id, task tojson() }))) } catch (error) { console error('error fetching tasks ', error) } } const addtask = async (e) => { e preventdefault() try { const task = parse object extend('task') const task = new task() task set('title', title) task set('description', description) task set('completed', false) await task save() settitle('') setdescription('') fetchtasks() } catch (error) { console error('error adding task ', error) } } const toggletask = async (id, currentstatus) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) task set('completed', !currentstatus) await task save() fetchtasks() } catch (error) { console error('error toggling task ', error) } } const deletetask = async (id) => { try { const task = parse object extend('task') const query = new parse query(task) const task = await query get(id) await task destroy() fetchtasks() } catch (error) { console error('error deleting task ', error) } } return ( \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={addtask} classname="form"> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<div key={task id} classname={`task item ${task completed ? 'completed' ''}`} \> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={() => toggletask(task id, task completed)}> {task completed ? 'undo' 'complete'} \</button> \<button onclick={() => deletetask(task id)}>delete\</button> \</div> )) )} \</div> \</div> ) } export default todopage 配置路由 要使您的待办事项页面可访问，请打开 routes jsx 文件，位于 web/src/routes jsx 并添加一个新路由： // web/src/routes jsx import todopage from 'src/pages/todopage/todopage' const routes = () => { return ( \<router> \<route path="/" page={todopage} name="todo" /> \<route notfound page={notfoundpage} /> \</router> ); }; export default routes; 添加全局样式 要添加全局样式，请将以下 css 样式添加到名为 index css 的 css 文件中，该文件位于 web/src 文件夹中： / web/src/index css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } 您的 redwood js 应用现在具有一个功能齐全的待办事项列表界面，可以与 back4app 后端进行交互。 在 back4app 上容器化和部署您的 redwood js 应用 back4app web 部署提供了一个容器化环境，简化了应用部署。在本节中，您将把您的 redwood js 应用打包到 docker 容器中并进行部署。 为生产准备您的应用 首先，为您的 redwood js 应用程序构建生产版本： yarn rw build web 创建 dockerfile 要为您的 redwood js 项目设置 docker，您需要在终端上运行 docker 设置命令： yarn rw setup docker 设置命令执行多个任务： 它创建了四个文件：dockerfile、 dockerignore、docker compose dev yml 和 docker compose prod yml。 它将 @redwoodjs/api server 包添加到 api 端，将 @redwoodjs/web server 包添加到 web 端。 它更新了 redwood toml 中的 browser open 设置。如果此设置保持为 true，则在运行 docker compose dev yml 时会导致开发服务器崩溃。 该命令提供了一个 dockerfile，用于构建您的 redwood js 应用程序，并使用最小的 node js 运行时准备生产镜像。 您可以使用以下命令启动开发组合文件： docker compose f /docker compose dev yml up 在您的浏览器中打开 http //localhost 8390 以验证您的 redwood js 应用程序是否正常运行。 通过 back4app web 部署进行部署 将您的项目推送到 github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main 然后，登录到 back4app web 部署 https //www back4app com/containers 并按照以下步骤操作 点击 "创建新应用" 并输入您的项目详细信息。 选择 github 仓库 并授权 back4app。 选择您的 todo redwood 仓库。 选择 dockerfile 部署 并验证构建设置。 点击 "部署" 开始部署过程。 部署后，使用 back4app 控制面板监控日志、管理构建，并在必要时设置自定义域。 测试和调试您的应用程序 一旦部署，确保您的应用程序按预期功能运行 api 连接： 使用浏览器开发者工具验证添加、切换和删除任务的 api 请求是否成功。 数据持久性： 通过 ui 添加任务并刷新以确认任务在 back4app 数据库中持久存在。 crud 操作： 测试切换和删除任务，同时检查控制台或 api 日志中的任何错误。 边缘案例： 验证输入验证是否防止空提交。 最佳实践和优化建议 为了确保应用程序的安全和高效，请考虑以下几点： 优化 api 请求： 使用批处理并仅获取所需字段。 环境变量： 使用环境变量保护敏感凭据（应用程序 id 和 javascript 密钥）。 访问控制： 实施动态 acl，以便只有授权用户可以修改数据。 云代码： 将复杂逻辑卸载到 back4app 云代码，以提高性能和安全性。 结论 您现在已经使用 redwood js 构建了一个完整的全栈待办事项应用程序，并与 back4app 后端集成。 本教程涵盖了从项目初始化和后端集成到容器化部署的所有内容。 在继续开发时，请考虑添加高级用户管理、实时更新和第三方集成功能。 有关更多信息，请查看 back4app 文档 https //www back4app com/docs 和 redwood js 资源。