如何用ReactJS构建CRUD应用？

介绍 在本教程中，您将使用 reactjs 构建一个全面的 crud（创建、读取、更新和删除）应用程序。 本指南旨在通过演示如何构建有效管理和更新数据的 crud 应用程序，来执行软件应用程序的基本操作。 您将首先创建并配置一个名为 basic crud app reactjs 的 back4app 项目，该项目作为您 web 应用程序的强大后端系统。 接下来，您将通过定义详细的集合和字段来设计一个可扩展的数据库架构——可以手动完成，也可以借助 back4app ai agent。 然后，您将利用 back4app 管理应用程序——一个用户友好的管理工具，具有拖放界面——轻松管理您的集合数据。 此管理界面改善了用户体验，简化了用户界面，使用户能够快速执行 crud 操作。 最后，您将部署您的 reactjs 前端，并使用 rest/graphql（或在可用的情况下使用 parse sdk）将其与 back4app 集成，同时使用高级访问控制来保护您的后端。 在本指南结束时，您将构建一个生产就绪的web应用程序，该应用程序不仅支持基本的crud操作，还包括用户身份验证和强大的数据更新功能。 关键要点 学习如何构建有效管理数据的crud应用程序，使用可靠的数据库管理系统。 获得设计可扩展后端并将其与reactjs前端集成的实用见解，以增强用户体验。 发现如何使用拖放管理工具（back4app管理应用）来简化创建、读取、更新和删除操作。 了解部署技术，包括docker容器化，以快速启动您的web应用程序。 先决条件 在开始之前，请确保您具备以下条件： 一个back4app账户和一个新项目的设置。 如果您需要帮助，请参考 使用back4app入门 https //www back4app com/docs/get started/new parse app 。 一个reactjs开发环境。 使用 create react app https //create react app dev/docs/getting started/ 或类似工具。确保安装node js（版本14或更高）。 对javascript、reactjs和rest api的基本理解。 如有必要，请查看 reactjs文档 https //reactjs org/docs/get started html 。 步骤1 – 项目设置 创建一个新的 back4app 项目 登录到您的 back4app 账户。 点击“新应用”按钮 在您的仪表板中。 输入项目名称： basic crud app reactjs 并按照提示创建您的项目。 创建新项目 创建后，您的新项目将出现在您的 back4app 仪表板上，为您的后端配置和项目管理提供坚实的基础。 步骤 2 – 数据库模式设计 设计您的数据模型 对于基本的 crud 应用，您将创建几个集合。 以下是您需要的一些集合示例，概述了必要的字段和数据类型，以帮助您有效地设置数据库架构。 这些集合旨在执行基本的 crud 操作，使用户能够创建、读取、更新和删除数据。 1\ 项目集合 该集合存储有关每个项目的信息。 字段 数据类型 描述 id 对象id 自动生成的主键。 标题 字符串 项目的标题。 描述 字符串 该项目的简要描述。 创建于 日期 项目创建的时间戳。 更新于 日期 项目最后更新时间戳。 2\ 用户收集 此集合存储用户信息和身份验证详细信息。 字段 数据类型 描述 id 对象id 自动生成的主键。 用户名 字符串 用户的唯一用户名。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 用于身份验证的哈希密码。 创建于 日期 用户账户创建的时间戳。 更新于 日期 用户账户更新的时间戳。 您可以通过在 back4app 控制面板中手动设置这些集合，为每个集合创建一个新类并添加列以定义字段。 创建新类 您可以通过选择数据类型、命名字段、设置默认值以及定义是否为必填项，轻松创建数据库字段。 创建列 使用 back4app ai 代理进行模式生成 back4app ai 代理是一个强大的工具，可以直接从您的 back4app 控制面板访问。 它允许您根据描述所需集合和字段的提示自动生成数据库架构。 此功能为项目管理节省了大量时间，并帮助确保您的数据库管理系统能够执行您的web应用程序所需的基本操作。 如何使用ai代理： 打开ai代理： 登录到您的back4app仪表板，并在菜单或项目设置中找到ai代理。 描述您的数据模型： 在ai代理界面中，粘贴一个详细的提示，概述您需要的集合和字段。 审查并应用： 提交后，ai代理将生成集合和字段定义。审查这些建议并将其应用到您的项目中。 示例提示 create the following collections in my back4app application 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操作 在管理员应用程序中，您可以 创建记录 在集合中点击“添加记录”按钮（例如，项目）以创建新条目。 读取/更新记录 选择任何记录以查看其详细信息或编辑字段，确保数据更新顺利进行。 删除记录 使用删除选项移除不再需要的记录。 这个易于使用的管理工具通过提供简单的拖放界面来改善整体用户体验，以实现crud功能。 步骤4 – 将reactjs与back4app集成 现在您的后端已通过管理员应用程序设置和管理，是时候将您的reactjs前端连接到back4app。 选项 a：使用 parse sdk 安装 parse sdk： npm install parse 在您的 react 应用中初始化 parse： 创建一个文件（例如， src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // 用您的实际 back4app 凭据替换 parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 在 react 组件中使用 parse： 例如，创建一个组件来获取和显示项目： // src/components/itemslist js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("获取项目时出错：", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>项目\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; 选项 b：使用 rest 或 graphql 如果您的环境不支持 parse sdk，您可以使用 rest 或 graphql 执行 crud 操作。例如，使用 rest 获取项目： // example rest call to fetch items 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); 根据需要将这些 api 调用集成到您的 react 组件中。 步骤 5 – 保护您的后端 访问控制列表 (acls) 通过将 acl 分配给对象来保护您的数据。例如，要创建一个私有项目： async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // set acl only the owner can read and write const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } 类级权限 (clps) 在 back4app 仪表板中，为每个集合配置 clps 以设置默认访问规则。这确保只有经过身份验证或授权的用户可以访问敏感数据。 步骤 6 – 用户身份验证 设置用户帐户 back4app 利用 parse 的用户类进行身份验证。在您的 react 应用中，处理用户注册和登录如下 // src/components/auth js import react, { usestate } from 'react'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user signed up successfully!'); } catch (error) { alert('error signing up ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; 类似的方法可以用于登录和会话管理。可以在 back4app 仪表板中配置社交登录、电子邮件验证和密码重置等附加功能。 步骤 7 – 使用 web 部署部署您的 reactjs 前端 back4app 的 web 部署功能允许您通过从 github 存储库部署代码无缝托管您的 reactjs 前端。 在本节中，您将学习如何准备生产构建，将源代码提交到 github，将您的存储库与 web 部署集成，以及部署您的网站。 7 1 准备您的生产构建 在终端中打开您的项目文件夹。 运行构建命令： npm run build 此命令创建一个 build 文件夹，其中包含所有优化的静态文件（包括 index html , javascript, css 和图像）。 验证构建： 确保 build 文件夹中包含一个 index html 文件以及必要的资产子目录。 7 2 组织并上传您的源代码 您的代码库应包括完整的 reactjs 前端源代码。典型的文件结构可能如下所示： basic crud app reactjs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md 示例源代码文件 src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace with your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import react, { useeffect, usestate } from 'react'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; \#### commit your code to github 1\ initialize a git repository in your project folder (if you haven’t already) ```bash git init 添加您的源文件： git add 提交您的更改： git commit m "初始提交 reactjs 前端源代码" 创建一个 github 仓库： 例如，创建一个名为 basic crud app reactjs frontend 的仓库在 github 上。 将您的代码推送到 github： git remote add origin https //github com/your username/basic crud app reactjs frontend git git push u origin main 7 3 将您的 github 存储库与 web 部署集成 访问 web 部署： 登录到您的 back4app 控制面板，导航到您的项目（basic crud app reactjs），然后点击 web 部署 功能。 连接到 github： 如果您还没有，请按照屏幕上的提示集成您的 github 账户。此连接允许 back4app 访问您的存储库。 选择您的存储库和分支： 选择您创建的存储库（例如， basic crud app reactjs frontend ) 并选择包含您的 reactjs 代码的分支（例如， main )。 7 4 配置您的部署 提供额外的配置细节： 构建命令： 如果您的代码库不包含预构建的 build 文件夹，请指定构建命令（例如， npm run build )。back4app将在部署期间运行此命令。 输出目录： 将输出目录设置为 build 以便back4app知道哪个文件夹包含您的静态站点文件。 环境变量： 如果您的应用程序依赖于任何环境变量（例如，api密钥），请在配置设置中添加它们。 7 5 将您的reactjs应用程序项目docker化 如果您更喜欢使用docker进行部署，可以将您的reactjs应用程序容器化。在您的代码库中包含一个 dockerfile ，内容类似于以下内容： \# use an official node runtime as a parent image from node 16 alpine as build \# set the working directory workdir /app \# copy package json and package lock json copy package json / \# install dependencies run npm install \# copy the rest of the application copy \# build the react app run npm run build \# use nginx to serve the build from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 将此 dockerfile 包含在您的代码库中。然后，在您的 web 部署配置中，选择 docker 部署选项以构建和部署您的容器化应用程序。 7 6 部署您的应用程序 点击部署按钮： 配置完部署设置后，点击 部署 按钮。 监控构建过程： back4app 将从 github 拉取您的代码，执行构建命令（如果已配置），并在容器中部署您的应用。 获取您的 url： 部署完成后，back4app 将提供一个 url，您可以在其中访问您的 reactjs 应用。 7 7 验证您的部署 访问提供的 url： 在您的网页浏览器中打开该 url 以查看您的已部署网站。 测试应用程序： 验证您的应用程序是否正确加载，所有路由是否按预期工作，以及所有资源（css、javascript、图像）是否正确提供。 如有需要进行故障排除： 使用浏览器的开发者工具检查是否有任何错误。如果出现问题，请查看 back4app 中的部署日志，并验证您的 github 集成和构建设置。 第8步 – 结论和后续步骤 恭喜你！你已经使用 reactjs 和 back4app 构建了一个完整的基本 crud 应用程序。 你配置了一个名为 basic crud app reactjs 的项目，为项目中的 items 和 users 设计了详细的数据库集合，并通过强大的管理应用程序管理你的数据。 你还将 reactjs 前端与后端集成，并通过强大的访问控制保护了你的数据。 后续步骤： 增强你的前端： 为你的 reactjs 应用程序扩展功能，例如详细的项目视图、搜索功能和实时通知。 集成额外功能： 考虑添加更高级的后端逻辑（例如，云函数）、第三方 api 集成或基于角色的访问控制。 进一步探索资源： 查看 back4app 文档 https //www back4app com/docs 和其他教程，以深入了解性能优化和自定义集成。 通过遵循本教程，你现在具备了使用 back4app 为你的 reactjs 应用程序创建强大、可扩展的 crud 后端的技能。祝你编码愉快！