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

在本教程中，您将使用preact构建一个待办事项列表应用程序，并将其连接到back4app提供的强大后端。 本指南非常适合入门，因为它涵盖了核心的crud（创建、读取、更新、删除）操作，并引导您创建一个干净、功能齐全的用户界面。 到最后，您将拥有一个完全可操作的应用程序，展示如何在使用preact进行轻量级和快速前端的同时集成托管后端。 构建全栈应用程序可能很复杂，特别是在处理后端设置、数据库管理、身份验证和部署时。 为了简化这些挑战，我们使用back4app——一个可扩展的 后端即服务（baas） 解决方案——这样您就可以专注于开发前端，而它处理托管、数据库和api。 back4app提供全面的后端服务，包括现成的数据库、身份验证、用于服务器端逻辑的云代码以及用于顺利集成的sdk。它还支持容器化部署，使其成为现代全栈应用程序的绝佳选择。 借助这些资源，您可以快速开发和部署应用程序，而无需管理服务器基础设施的负担。 关键要点 通过遵循本教程，您将学习到： 使用 vite 初始化一个现代的 preact 项目。 集成后端服务以管理您的应用程序数据。 为交互式用户界面实现核心 crud 操作。 使用容器化工作流在 back4app 上部署一个完全功能的 待办事项应用程序 。 先决条件 在开始之前，请确保您具备以下条件： node js 和 npm 从 nodejs org https //nodejs org/ 安装最新的 lts 版本的 node js，并通过在终端中运行 node v 和 npm v 来验证。 基本的 preact 知识 需要熟悉函数组件、钩子（如 usestate 和 useeffect ）以及 jsx 语法。如果您是 preact 新手，建议先复习其基础知识。 一个 back4app 账户 在 back4app https //www back4app com/ 注册以设置和管理您的后端服务。 在具备这些先决条件后，您就可以开始设置项目并开始构建。 项目设置 首先设置您的本地开发环境，并使用 vite 初始化您的 preact 项目，以获得流畅的开发体验。 确认已安装 node js (lts 版本) 。如有需要，请从 nodejs org https //nodejs org/ 下载并安装。通过运行以下命令进行验证 node v npm v 使用 vite 初始化您的 preact 项目。在终端中运行以下命令（将 todo app 替换为您喜欢的项目名称）： npm create vite\@latest todo app template preact 进入您的项目目录： cd todo app 安装所需的依赖项： npm install 启动开发服务器以验证您的设置： npm run dev 您的 preact 应用程序现在应该在本地运行。打开提供的 url 以确认。接下来，您将设置 back4app 上的后端以管理数据存储和 api 交互。 创建 todo 后端 back4app 提供一个完全托管的后端服务，基于 parse , 提供开箱即用的 nosql 数据库、身份验证、云代码和自动生成的 api。 本节将指导您创建一个 task 数据模型，以存储您的待办事项，并将其连接到您的 preact 前端。 设置您的后端应用程序 登录 到您的 back4app 仪表板 https //www back4app com/ 并点击 "创建新应用。" 为您的应用命名 （例如， todopreactapp ) 并选择 nodejs/parse 作为后端类型。 应用创建后，导航到 "数据库" > "浏览器" 点击 "创建一个类" 并选择 "自定义" 将类命名为 task 并设置 类级别权限 以允许公共读写（您可以稍后调整这些设置）。 在 task 类中，添加以下字段： 标题 （字符串）– 任务标题。 描述 （字符串）– 关于任务的详细信息。 完成 （布尔值）– 指示任务是否完成。 截止日期 （日期）– 任务的截止日期。 点击 "保存" 完成您的模式设置。 将 back4app 与 preact 集成 使用 parse javascript sdk 将 back4app 集成到您的 preact 项目中。通过 npm 安装 sdk npm install parse 通过使用您的 应用程序 id 和 javascript 密钥 来初始化 sdk。 从您的 back4app 仪表板的 应用设置 > 安全性与密钥 中获取这些凭据。 在您的 src/main jsx , 按如下方式导入和配置 parse： import { render } from 'preact' import ' /index css' import app from ' /app jsx' 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; render(\<app />, document getelementbyid('app')) 连接后端后，您准备好在 preact 中构建待办事项列表 ui 并实现 crud 操作。 使用 preact 开发前端 现在您的后端已配置完成，使用preact构建您的待办事项应用程序的用户界面。您将创建组件来添加、显示、更新和删除任务，同时使用hooks管理状态。 组织您的组件 您的应用程序将包括以下关键组件： taskform jsx – 管理新任务的添加。 tasklist jsx – 显示所有任务并提供完成或删除它们的控制。 taskitem jsx – 代表一个单独的任务，并提供切换完成状态或删除任务的操作。 在 src 中创建一个 components 文件夹，并添加这些文件： mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx 使用hooks管理状态 使用preact的钩子 ( usestate 和 useeffect ) 进行状态管理和副作用处理。首先在 app jsx import { usestate, useeffect } from "preact/hooks"; import taskform from " /components/taskform jsx"; import tasklist from " /components/tasklist jsx"; import parse from "parse/dist/parse min js"; function app() { const \[tasks, settasks] = usestate(\[]); 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); } }; useeffect(() => { fetchtasks(); }, \[]); return ( \<div class="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; 构建任务表单组件 在 taskform jsx , 创建一个受控表单以添加任务。使用 usestate 来管理输入值并将数据提交到back4app import { usestate } from "preact/hooks"; 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} oninput={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} oninput={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; 显示任务列表 在 tasklist jsx , 通过映射任务数组并使用 taskitem 组件来渲染任务列表： import taskitem from " /taskitem jsx"; 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 , 创建一个组件，允许您将任务标记为完成或删除它： 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 class={`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; 为您的应用程序添加样式 在 index css 文件中添加以下样式，位于 src 文件夹中： / container styling / 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; box sizing border box; 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; } container p { font size 1rem; } 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; 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; } } 在你的 src/main jsx import " /index css"; 完成用户界面 你的 preact 待办事项应用程序现在具有与 back4app 集成的动态前端和自定义样式。该应用程序允许你添加、显示、更新和删除任务，同时保持高效的前端与后端通信。 接下来，你将使用 back4app 的 web 部署平台部署你的 preact 应用程序。 在 back4app 上部署前端 back4app web deployment 提供了一个完全托管的、容器化的环境，用于部署您的应用程序。通过基于 docker 的部署，您可以轻松打包您的 preact 前端并进行部署。 为生产配置 vite 使用 vite 构建的 preact 项目默认以开发模式运行。对于生产，构建一个静态版本并使用轻量级的 web 服务器（如 nginx）进行服务。 更新您的 vite config js 以设置正确的基础路径： import { defineconfig } from 'vite'; import preact from '@preact/preset vite'; export default defineconfig({ plugins \[preact()], base ' /', // ensures asset paths are correct in a containerized environment }); 生成生产就绪的文件： npm run build 为您的应用创建 dockerfile 在根目录中创建一个 dockerfile 以定义您的容器： \# build stage using a lightweight node js image from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# production stage using nginx to serve static files from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 在本地测试容器 在部署之前，先在本地构建并测试您的 docker 容器： docker build t todo preact frontend 运行容器 docker run p 8080 80 todo preact frontend 在浏览器中访问 http //localhost 8080 以确认您的应用程序是否正确提供服务。 推送到 github 并通过 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 访问您的仓库并选择 todo preact 仓库 选择 dockerfile 部署 并确认构建设置 点击 "部署" 以启动构建过程 监控和管理部署 部署后，使用 back4app 控制面板来 查看日志以进行故障排除 监控容器性能和资源使用 在新提交时触发重新部署 如有需要，配置自定义域 测试和调试您的应用程序 部署后，彻底测试您的 preact 应用程序： 验证 api 连接： 打开浏览器的开发者控制台 (f12 → 网络) 以监控任务操作期间的 api 调用。 添加和检索任务： 使用 ui 添加任务，然后刷新页面以验证在 back4app 数据库浏览器中的持久性。 测试 crud 操作： 确保标记任务完成和删除在后端正确反映。 边缘案例处理： 验证表单输入并使用开发者工具模拟慢速网络条件。 如果遇到问题，请查看 back4app 日志或检查您的 api 配置。 使用 back4app 服务的最佳实践 通过遵循以下最佳实践来提高您应用程序的性能和安全性： 优化 api 调用： 对于多个操作使用批量请求，并在查询中仅选择必要的字段。 保护敏感数据： 将应用程序 id 和 javascript 密钥等凭据存储在环境变量中。使用 vite，创建一个 env 文件： vite parse app id=your app id vite parse js key=your js key 启用自动扩展 在back4app web部署中激活自动扩展以管理高流量。 增强安全性 限制类级别权限（clps）以控制数据修改，并根据需要设置acl。 利用云代码 将复杂逻辑卸载到云代码中，以获得更好的性能和减少api暴露。 结论 你现在已经使用preact构建了一个完整的待办事项列表应用程序，前端使用preact，后端使用back4app的强大服务。 本教程指导你初始化preact项目，集成parse sdk，并使用容器化工作流在back4app上部署你的应用。 在继续开发时，考虑添加一些功能，例如高级用户身份验证、实时更新和第三方集成。有关更多详细信息和支持，请参考 back4app文档 https //www back4app com/docs