如何使用 Preact 构建 CRUD 应用？

概述 在本指南中，您将使用 preact 开发一个 crud（创建、读取、更新和删除）应用程序。 我们将引导您构建一个处理基本数据操作的系统，从初始化一个名为 basic crud app preact 的 back4app 项目开始，轻松管理数据。该项目提供了强大的后端和一个使用 preact 构建的简洁、极简的前端。 我们将首先在 back4app 上设置一个新项目，然后设计一个高效的数据库架构——可以手动完成，也可以借助 back4app ai 助手。这一设计将支持所有基本的 crud 功能。 接下来，我们介绍 back4app 管理应用程序，这是一个简化数据管理的拖放界面。您可以使用此工具快速添加、修改或删除记录。 最后，您将使用 rest/graphql 将 preact 前端连接到 back4app，确保您的后端通过高级访问规则保持安全。 在本教程结束时，您将拥有一个生产就绪的 web 应用程序，具有用户身份验证和强大的数据管理功能——所有这些都是使用 preact 构建并由 back4app 提供支持的。 主要见解 掌握构建 crud 应用程序的技巧，使用可靠的后端高效管理数据。 学习设计可扩展的数据模型，并将其与 preact 前端集成，以获得最佳用户体验。 了解拖放式 back4app 管理应用程序如何简化创建、读取、更新和删除操作。 了解部署策略，包括使用 docker 进行容器化，以快速启动您的应用程序。 前提条件 在开始之前，请确保您拥有： 一个 back4app 账户和一个初始化的项目。 有关指导，请查看 使用 back4app 入门 https //www back4app com/docs/get started/new parse app 。 一个 preact 开发环境。 使用像 preact cli https //github com/preactjs/preact cli 或同等工具，确保安装了 node js（v14 或更高版本）。 基本的 javascript、preact 和 rest api 知识。 如有需要，请参考 preact 文档 https //preactjs com/guide/v10/ 。 步骤 1 – 设置您的项目 初始化 back4app 项目 登录到您的 back4app 账户。 在您的仪表板上选择“新应用”选项。 命名您的项目： basic crud app preact 并按照设置提示进行操作。 创建新项目 创建后，您的项目将在您的 back4app 仪表板上可见，为后端配置奠定基础。 步骤 2 – 制作您的数据库架构 构建您的数据模型 对于我们的 crud 应用，您需要几个集合。以下是概述支持 crud 操作所需集合和字段的示例。 1 项目集合 此集合保留有关每个项目的详细信息。 字段 数据类型 目的 id 对象id 自动生成的主键。 标题 字符串 物品的名称。 描述 字符串 该项目的简短描述。 创建于 日期 创建时间戳。 更新于 日期 最后更新时间戳。 2 用户收集 这包含用户凭据和个人资料详细信息。 字段 数据类型 目的 id 对象id 自动生成的主键。 用户名 字符串 独特的用户名。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 用于身份验证的哈希密码。 创建于 日期 账户创建时间戳。 更新于 日期 最后账户更新时间戳。 您可以通过 back4app 控制面板手动创建这些集合，为每个集合添加一个新类并定义适当的字段。 创建新类 您可以通过选择数据类型、命名列以及设置默认值和必需标志来添加列。 创建列 使用 back4app ai 助手进行模式创建 back4app 中可用的 ai 助手可以根据描述您的集合和字段的提示自动生成您的架构。此功能加快了设置速度并确保一致性。 使用 ai 助手的步骤： 从您的 back4app 仪表板打开 ai 助手。 输入您数据模型的详细描述。 查看自动生成的集合和字段定义，然后将其应用到您的项目中。 示例提示： create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 这种方法节省了时间，并保证了良好的架构结构。 步骤 3 – 激活管理员应用程序并管理 crud 操作 介绍管理员应用 back4app 管理员应用提供了一个无代码界面，让您轻松管理后端数据。其拖放功能使您能够轻松执行 crud 操作。 激活管理员应用 前往您的 back4app 仪表板中的“更多”菜单。 选择“管理员应用”并点击 “启用管理员应用。” 设置您的第一个管理员用户，这也将配置角色，如 b4aadminuser 和系统集合。 启用管理员应用 激活后，登录管理员应用以管理您的数据。 管理员应用仪表板 使用管理员应用执行 crud 操作 在界面中，您可以： 添加记录： 在任何集合中使用“添加记录”选项（例如，项目）以创建新条目。 查看和编辑记录： 选择一条记录以查看其详细信息或修改其字段。 删除记录： 删除不再需要的条目。 这个直观的工具通过简化数据管理来增强用户体验。 步骤 4 – 将您的 preact 前端连接到 back4app 后端就位后，是时候集成您的 preact 前端了。 选项 a：使用 parse sdk 安装 parse sdk： npm install parse 在你的preact项目中设置parse。创建一个文件（例如， src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 在preact组件中集成parse。例如，构建一个组件来获取和显示项目 // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; 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 fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</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获取项目 // sample rest call to retrieve 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(); 根据需要在您的preact组件中集成这些api调用。 步骤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); // configure acl only the owner has read/write access 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仪表板中，调整每个集合的clp，以限制仅对经过身份验证或授权的用户的访问。 步骤 6 – 实现用户认证 配置用户账户 back4app 利用 parse 的用户类来管理认证。在您的 preact 应用中，按如下方式管理用户注册和登录： // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; 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 registration successful!'); } catch (error) { alert('registration error ' + 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 部署启动您的 preact 前端 back4app 的 web 部署功能允许您通过链接 github 存储库来托管您的 preact 应用。在这一部分，您将准备生产构建，提交代码，集成 web 部署，并部署您的网站。 7 1 构建您的生产文件 在终端中打开您的项目目录。 运行构建命令： npm run build 这将生成一个 build 文件夹，包含优化的静态资源（html、js、css、图像）。 3\ 确认 build 文件夹中包含一个 index html 文件和必要的资源。 7 2 组织并提交您的源代码 您的代码库应包含完整的 preact 前端源代码。示例目录结构： basic crud app preact 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'; // enter your 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 { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; 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; 将您的代码提交到 github 初始化一个 git 仓库（如果尚未完成）： git init 准备你的源文件 git add 提交你的更改 git commit m "initial commit of preact frontend source code" 创建一个新的 github 仓库，例如， basic crud app preact frontend 推送你的代码 git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 将你的仓库与网络部署连接 在您的 back4app 仪表板中转到 web 部署部分，打开您的项目 ( basic crud app preact ），并选择 web deployment 按照提示链接您的 github 账户，以便 back4app 可以访问您的代码库。 选择代码库 (例如， basic crud app preact frontend ) 并选择适当的分支 (例如， main )。 7 4 部署配置 指定其他设置： 构建命令： 如果没有预构建的 build 文件夹，请设置构建命令 (例如， npm run build )。 back4app 将在部署期间运行此命令。 输出目录： 将输出文件夹定义为 build 以便 back4app 识别静态文件。 环境变量： 添加您的应用程序所需的任何 api 密钥或设置。 7 5 使用 docker 对您的 preact 应用进行容器化 如果您更喜欢 docker，请在您的代码库中包含一个 dockerfile ，类似于： # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 在您的 back4app web 部署设置中选择 docker 部署选项。 7 6 部署您的应用程序 配置完成后，点击 部署 按钮。 在 back4app 获取您的代码、构建并部署您的应用程序时，监控构建过程。 完成后，back4app 将提供一个 url，您可以在其中托管您的应用程序。 7 7 验证您的部署 访问提供的 url 查看您的实时网站。 测试所有功能以确保每个功能，包括路由和资源，正确加载。 如果出现问题，请查看浏览器控制台日志和 back4app 中的部署日志。 第8步 – 总结与未来方向 干得好！您已经成功使用preact和back4app开发了一个完整的crud应用程序。 您设置了一个名为 basic crud app preact 的项目，定义了强大的数据库集合，并使用管理员应用程序进行高效的数据管理。 然后，您将preact前端连接到后端，并实施了严格的访问控制。 接下来是什么？ 通过详细视图、搜索功能和实时更新等附加功能来增强您的preact应用程序。 整合更高级的后端逻辑，如云函数或第三方api集成。 查阅 back4app文档 https //www back4app com/docs 和其他资源，以深入了解优化和自定义配置。 通过遵循本教程，您已经获得了使用back4app为您的preact应用程序构建可扩展、安全的crud后端的技能。享受编码和探索新功能的乐趣！