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

在本教程中，您将使用 react 创建一个待办事项列表应用程序，并将其连接到后端服务。 这个项目是一个理想的起点，因为它涉及基本的 crud（创建、读取、更新、删除）操作和简单的用户界面。到最后，您将拥有一个功能齐全的应用程序，并且连接了后端，展示了如何将托管的后端服务集成到您的开发工作流程中。 从头开始构建一个全栈应用程序通常需要设置后端、管理数据库、处理身份验证和部署基础设施。这些任务可能复杂且耗时，特别是如果您专注于前端开发，我们将使用 back4app 来实现这一目的。 back4app 通过提供一个 可扩展的后端即服务（baas） 解决方案简化了这个过程，让您可以专注于构建应用程序，而它处理托管、数据库和 api。 back4app 提供后端服务，包括现成的数据库、身份验证、用于服务器端逻辑的云代码和无缝集成的 sdk。它还支持容器化部署，使其成为托管全栈应用程序的灵活选择。 凭借这些功能，您可以快速构建和部署应用程序，而无需管理服务器基础设施。 关键要点 通过阅读本文，您将学习到： 使用行业标准工具设置一个现代的 react 项目。 无缝集成后端服务以管理应用程序数据。 实现动态用户体验所需的基本 crud 操作。 部署一个功能齐全的待办事项应用程序并查看其运行在 待办事项应用 先决条件 要有效地遵循本教程，请确保您具备以下工具和技能 在您的机器上安装了 node js 和 npm 。您将使用 npm 来安装依赖项并运行您的 react 应用程序。通过在终端中运行 node v 和 npm v 来验证您的安装 基本的 react 知识 , 包括函数组件、使用钩子的状态管理和处理用户输入。本教程不会涵盖 react 基础知识，因此需要熟悉 jsx 和组件结构 一个 back4app 账户 用于设置和管理您的后端服务。如果您没有账户，请在 back4app https //www back4app com/ 注册 有了这些准备，您就可以开始设置项目并开始构建 项目设置 要开始，您需要设置本地开发环境并使用 vite 初始化前端项目。 这确保了快速高效的开发体验，同时保持项目结构的清晰。 首先，确保您已安装了 node js (lts 版本) 。如果没有，请从 nodejs org https //nodejs org/ 下载并安装它。安装后，通过运行以下命令验证 node v npm v 现在，使用 vite , 一个现代构建工具，提供比 create react app 更快的速度。 在终端中运行以下命令，将 todo app 替换为您喜欢的项目名称 npm create vite\@latest todo app template react 导航到项目文件夹 cd todo app 安装必要的依赖项 npm install 启动开发服务器以验证设置： npm run dev 这将在本地启动您的 react 应用程序。打开提供的 url 在浏览器中确认它正在运行。设置好前端后，下一步是在 back4app 上创建后端以处理数据存储和 api 交互。 创建 todo 后端 back4app 提供一个完全托管的后端服务，支持 parse , 提供一个 nosql 数据库、身份验证、云代码和 api 生成 ，开箱即用。 这使您能够管理应用程序的数据，而无需从头构建后端。您将创建一个 任务 数据模型来存储待办事项，并将其连接到您的 react 前端。 创建后端应用程序 登录 到您的 back4app 仪表板 https //www back4app com/ 并点击 "创建新应用。" 输入应用程序的名称 （例如， todoapp ) 并选择 nodejs/parse 作为后端类型。 创建后，转到 "数据库" > "浏览器" , 点击 "创建一个类" , 并选择 "自定义" 。将其命名为 任务 并设置 类级别权限 以允许公共读取和写入（您可以稍后进行细化）。 在 任务 类中，添加以下字段： 标题 （字符串）– 任务标题 描述 （字符串）– 任务详情 完成 （布尔值）– 完成状态 截止日期 （日期）– 任务截止日期 点击 "保存" 来创建模式。 将 back4app 连接到 react 现在，使用 parse javascript sdk 将 back4app 集成到您的 react 项目中。通过 npm 安装它 npm install parse 接下来，通过使用您的 应用程序 id 和 javascript 密钥 来初始化 sdk。请从 back4app 仪表板 的 应用设置 > 安全性与密钥 部分获取这些凭据。 back4app 密钥页面，突出显示应用程序 id 和 js 密钥 在 src/main jsx , 通过导入压缩的 sdk 并使用您的 应用程序 id 和 javascript 密钥： 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; 连接后端后，您可以构建 待办事项列表 ui 并集成 crud 操作。 开发前端 现在您的后端已设置并连接，是时候在 react 中构建 待办事项列表 ui 。您将创建用于添加、显示、更新和删除任务的组件，同时有效地管理状态。 结构化组件 您的应用程序将由三个关键组件组成： taskform jsx – 处理添加新任务。 tasklist jsx – 显示所有任务并提供标记任务为完成或删除的控制。 taskitem jsx – 表示单个任务，并提供标记为完成或删除的操作。 首先在 src 中创建一个 components 文件夹，并添加这些文件： mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx 管理状态 您将使用 usestate 和 useeffect 钩子在本地管理任务，同时从 back4app 获取和更新数据。首先，在 app jsx 中定义状态： import { usestate, useeffect } from "react"; import parse from "parse/dist/parse min js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; function app() { const \[tasks, settasks] = 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); } }; return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; 创建任务表单 在 taskform jsx 中，创建一个受控表单以添加新任务。这将把输入值存储在状态中，并将数据提交到 back4app。 import { usestate } from "react"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = 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(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<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> ); } export default taskform; 显示任务 在 tasklist jsx 中，渲染任务列表，并包括将其标记为已完成和删除的操作。 import taskitem from " /taskitem"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; 任务项组件 在 taskitem jsx , 定义操作以将任务标记为完成或从 back4app 中删除它。 import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; 应用程序样式 在 src 中创建一个 styles css 文件并添加基本样式： / container to center the content and add some spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } / make the heading stand out and add spacing below it / container h1 { margin bottom 20px; } / style the form so that inputs and the button are nicely spaced and aligned / form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } / make the text inputs fill a reasonable width and add padding / form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } / style the 'add task' button / 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; } / basic text styles for empty task list message / container p { font size 1rem; } / task item container \ centered in both directions (flex + align items/justify content) \ a gap between elements for visual breathing room / task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; / centers text for titles/descriptions / transition background color 0 2s ease; } / completed tasks visually differ strikethrough and grey text / task item completed h3, task item completed p { text decoration line through; color #888; } / task title / task item h3 { margin 0; font size 1 1rem; } / task description / task item p { margin 0; font size 1rem; } / buttons within each task item (centered and with some spacing) / task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } / on wider screens, you can display elements in a row but keep them centered adjust justify content/align items if you want them spaced differently / @media (min width 600px) { task item { flex direction row; } } 在 main jsx 导入此css import " /styles css"; 应用程序的用户界面 您的 待办事项应用 现在有一个工作前端，具有 react 用户界面、back4app 集成和基本样式。 完成的待办事项应用 接下来，您将把这个前端部署到 back4app web 部署 。 在 back4app web 部署上部署前端 back4app web 部署提供了一个 完全托管的、容器化的环境 用于部署应用程序。 它支持 基于 docker 的部署 , 允许您将前端打包到一个容器中并在 back4app 的基础设施上运行。这确保了可扩展性、安全性，并通过直接与 github 集成实现了简单的 ci/cd 管道。 为容器化配置 vite vite 默认以开发模式提供应用程序。对于生产环境，您需要 构建一个静态版本 并使用轻量级的 web 服务器如 nginx 来提供它。首先，更新 vite config js 以指定适当的部署基础路径： import { defineconfig } from 'vite'; import react from '@vitejs/plugin react'; export default defineconfig({ plugins \[react()], base ' /', // ensures correct asset paths in a containerized environment }); 现在，运行构建命令以生成生产就绪的文件： npm run build 为部署创建 dockerfile 一个 dockerfile 定义了您的 react 应用如何被容器化。在项目根目录下创建一个名为 dockerfile 的文件，并添加以下配置： # use an official lightweight node js image from node 18 alpine as build \# set working directory workdir /app \# copy package json and install dependencies copy package json package lock json / run npm install \# copy project files copy \# build the project run npm run build \# use an nginx server for efficient static file serving from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html \# expose port 80 expose 80 \# start nginx cmd \["nginx", " g", "daemon off;"] 这个 dockerfile 做了以下事情： 使用 node js 安装依赖并构建 react 应用程序。 将构建的文件复制到一个 nginx 容器中，以高效提供静态文件。 暴露端口 80 来提供应用程序。 在本地构建和测试容器 在部署之前，先在本地测试容器，以确保其按预期工作。运行以下命令构建 docker 镜像： docker build t todo frontend 然后，使用以下命令启动一个容器： docker run p 8080 80 todo frontend 在浏览器中打开 http //localhost 8080 以确认您的 react 应用程序是否正确提供。 推送到 github 并连接到 back4app 要在 back4app 上部署，首先将您的项目推送到 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 部署平台进行部署 登录到 back4app web 部署 https //www back4app com/containers 点击 "创建新应用" , 命名您的项目，并选择 github 仓库 授权 back4app 访问您的 github 并选择 todo app 仓库 选择 dockerfile 部署 并确认构建设置 点击 "部署" 以触发第一次构建 管理和监控部署 一旦部署，导航到您的应用程序在 back4app 仪表板 在这里，您可以 查看 日志 以调试问题 监控 容器重启和资源使用 在新提交上重新部署，使用 "触发构建" 按钮 配置 自定义域名 如果在个人域名上托管 back4app 网络部署仪表板 已部署的应用程序 您可以在此教程中访问已部署的应用程序，网址为 https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ 前端成功部署后，下一步是测试和调试，以确保一切顺利运行。 测试和调试 在部署前端和后端后，您需要确保应用程序正常运行。这涉及到测试 前端 后端交互 ，识别常见问题，并有效调试错误。 集成应用程序测试 要验证您的 react 前端是否与 back4app 后端正确交互，请按照以下步骤操作： 测试api连接 打开浏览器的开发者控制台 ( f12 → 网络标签 )，在添加或获取任务时检查api调用。 如果api请求失败，请检查响应状态和错误消息。 手动添加和检索任务 使用 待办事项列表ui 添加任务。刷新页面以确保任务持久。 打开 back4app数据库浏览器 并确认任务出现在 任务 类下。 检查crud操作 从ui中完成和删除任务，然后在back4app的数据库中验证更改。 如果更新未反映，请检查浏览器控制台或api日志中的错误。 测试边缘情况 尝试提交空任务以确保验证正常工作。 模拟慢速互联网连接 ( chrome开发者工具 → 网络 → 慢速3g ) 来测试性能。 常见问题与故障排除 cors 错误 ( access control allow origin 问题) 前往 back4app 控制面板 > 应用设置 > 安全与密钥 在 "允许的头和域" , 添加您的前端 url 保存并重启后端 身份验证失败 (401 未授权错误) 确保 应用程序 id 和 javascript 密钥 在您的 react 应用中正确配置 如果使用用户身份验证，请检查会话令牌是否包含在 api 请求中 后端部署问题 如果 api 无响应，请导航到 back4app 网络部署 > 日志 检查后端部署中的错误 如有需要，请重启容器 在测试和调试完成后，下一步是实施 使用 back4app 服务的最佳实践 以优化性能和可维护性 使用 back4app 服务的最佳实践 以下是使用 back4app 时可以遵循的一些最佳实践。 优化前端与后端的交互 前端与 back4app 后端之间的高效通信确保了顺畅的用户体验。使用 批量请求 在执行多个操作时以减少网络开销： const tasks = \[task1, task2, task3]; parse object saveall(tasks); 对于读取操作， 启用缓存 并在 back4app 仪表板中设置 索引查询 以加快频繁请求的速度。始终仅请求必要的字段以最小化响应大小： query select("title", "completed"); 环境与扩展 将敏感密钥，如 应用程序 id 和 javascript 密钥 , 存储在环境变量中，而不是硬编码。如果使用 vite , 创建一个 env 文件： vite parse app id=your app id vite parse js key=your js key 在生产中，启用 自动扩展 以处理增加的流量。监控数据库使用情况，并使用 back4app 中的 性能监控 工具优化查询。 增强安全性与性能 限制 类级别权限 (clps) ，以便只有经过身份验证的用户可以修改数据。根据用户角色动态设置读/写权限： task setacl(new parse acl(parse user current())); 使用 云代码 将复杂的业务逻辑从前端卸载，减少 api 暴露并提高性能。最后，启用 速率限制 和 请求验证 以防止滥用并确保数据完整性。 结论 您现在已经通过设置 react 前端、将其与 back4app 的后端集成以及通过容器化工作流进行部署，构建了一个全栈待办事项应用程序。 这个过程展示了从本地开发到云部署的清晰路径，确保了前端与后端的顺畅交互。 展望未来，考虑增强功能，如高级用户管理、实时更新和第三方集成。 要进一步学习，请探索 back4app 文档 https //www back4app com/docs 和社区支持资源。