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

在本指南中，您将使用 blitz js 构建一个待办事项列表应用程序，并将其连接到 back4app 的托管后端。 本分步教程旨在帮助您实现基本的 crud 操作，并使用 blitz js 创建动态用户界面。 构建全栈应用程序可能会很复杂，因为您必须同时管理前端和后端系统。 通过利用 back4app，您可以通过一个 可扩展的 baas 来简化后端管理，让您专注于构建引人入胜的 blitz js 界面。 back4app 提供了一套后端服务，包括现成的 nosql 数据库、身份验证、云函数和 api 端点。 这些功能使您能够快速开发和部署应用程序，而无需承担服务器维护的负担。 关键要点 在本教程结束时，您将能够： 使用行业标准工具设置现代 blitz js 项目。 使用 parse sdk 将 back4app 后端与您的 blitz js 应用程序集成。 实现 crud 操作以管理您的 待办事项列表 。 使用 back4app 的 web 部署对您的 blitz js 应用进行容器化和部署。 先决条件 在开始之前，请确保您拥有以下内容： node js 和 npm 已安装在您的机器上。通过在终端中输入 node v 和 npm v 来验证安装情况。 基本的 blitz js 知识 , 包括路由、查询和变更。熟悉 react 是有益的，因为 blitz js 是基于它构建的。 一个 back4app 账户 用于配置和管理您的后端服务。如果您还没有，请在 back4app https //www back4app com/ 注册。 满足这些先决条件后，您就可以初始化您的 blitz js 项目并将其与强大的后端集成。 项目设置 首先设置您的 blitz js 应用程序。blitz js 通过将 next js 的强大功能与全栈框架结合，提供了简化的开发者体验。 运行以下命令以创建一个新的 blitz js 项目。将 todo app 替换为您选择的项目名称： npx blitz new todo app 导航到您的项目目录： cd todo app 运行您的开发服务器以验证一切是否设置正确： npm run dev 访问终端中显示的 url 以确认您的 blitz js 应用程序正在运行。 在 back4app 上设置 todo 后端 back4app 提供了一个托管的 parse 后端，简化了您应用程序的数据管理。在本节中，您将创建一个数据模型来存储待办事项列表的任务。 创建您的后端应用程序 登录到您的 back4app 控制面板 https //www back4app com/ 并点击 "创建新应用。" 为您的应用程序提供一个名称（例如， todoblitzapp ) 并选择 nodejs/parse 作为后端类型。 在 "数据库" > "浏览器" 部分，点击 "创建一个类" 并选择 "自定义。" 将类命名为 任务 并设置类级别权限以允许公共读取和写入（您可以稍后调整这些设置）。 向 任务 类添加以下字段： 标题 (字符串) – 任务的标题。 描述 (字符串) – 关于任务的详细信息。 完成 (布尔值) – 任务是否完成。 截止日期 (日期) – 任务的截止日期。 点击 "保存" 以创建模式。 将 back4app 与 blitz js 集成 要将您的 blitz js 应用连接到 back4app，请安装 parse javascript sdk npm install parse 接下来，在您的 blitz js 项目中配置 parse sdk。创建一个新的配置文件（例如， src/parseclient js ) 并按如下所示初始化 parse。用您的 back4app 凭据替换占位符，来自于 应用设置 > 安全性与密钥 // 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; 您现在可以在您的 blitz js 查询和变更中导入此配置，以与您的后端进行交互。 使用 blitz js 构建前端 后端设置完成后，是时候在 blitz js 中构建待办事项列表界面了。您将使用 blitz js 的内置查询和变更来执行 crud 操作。 构建您的页面和 api 调用 在 blitz js 中，页面位于 src/pages 目录下。打开 src/pages/index tsx 并添加以下代码以设置页面，从 back4app 查询任务，并定义添加、切换和删除任务的变更 // src/pages/index tsx import layout from "src/core/layouts/layout" import { blitzpage } from "@blitzjs/next" import { usequery } from "@tanstack/react query" import parse from " /parseclient" import { usestate } from "react" const fetchtasks = async () => { const task = parse object extend("task") const query = new parse query(task) const results = await query find() return results map((task) => ({ id task id, task tojson() })) } const addtask = async (title string, description string) => { 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() } const toggletask = async (id string, currentstatus boolean) => { 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() } const deletetask = async (id string) => { const task = parse object extend("task") const query = new parse query(task) const task = await query get(id) await task destroy() } const home blitzpage = () => { const { data tasks, refetch, isloading } = usequery(\["tasks"], fetchtasks) const \[title, settitle] = usestate("") const \[description, setdescription] = usestate("") if (isloading) return \<div>loading \</div> return ( \<layout title="home"> \<div classname="container"> \<h1>to do list\</h1> \<form onsubmit={async (e) => { e preventdefault() await addtask(title, description) settitle("") setdescription("") await refetch() }} 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={async () => { await toggletask(task id, task completed) await refetch() }} \> {task completed ? "undo" "complete"} \</button> \<button onclick={async () => { await deletetask(task id) await refetch() }} \> delete \</button> \</div> )) )} \</div> \</div> \</layout> ) } export default home 此页面利用 tanstack 的查询钩子来获取任务并处理用户操作，确保与您的 back4app 后端的无缝集成。 为了确保 usequery 正常工作，您需要将整个应用程序包装在一个 queryclientprovider 中。您可以在 src/pages/ app tsx 文件中完成此操作。 用下面的代码块替换 src/pages/ app tsx 文件中的代码： // src/pages/ app tsx import { errorfallbackprops, errorcomponent, errorboundary, appprops } from "@blitzjs/next" import react from "react" import { withblitz } from "src/blitz client" import { queryclient, queryclientprovider } from "@tanstack/react query" const queryclient = new queryclient() function rooterrorfallback({ error } errorfallbackprops) { return ( \<errorcomponent statuscode={(error as any)? statuscode || 400} title={error message || error name} /> ) } function myapp({ component, pageprops } appprops) { const getlayout = component getlayout || ((page) => page) return ( \<queryclientprovider client={queryclient}> \<errorboundary fallbackcomponent={rooterrorfallback}> {getlayout(\<component { pageprops} />)} \</errorboundary> \</queryclientprovider> ) } export default withblitz(myapp) 添加全局样式 要定义您应用的基本样式，请将代码块添加到 src/styles/globals css 的 css 文件中。 / src/styles/globals 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; } } 通过在 src/pages/ app tsx （或您的自定义 app 组件文件）中添加以下行来导入您的全局样式： / src/pages/ app tsx / import " /styles/globals css"; 您的 blitz js 应用现在显示一个与 back4app 集成的完全功能的待办事项列表界面。 在 back4app 上容器化和部署您的 blitz js 应用 back4app web 部署提供了一个容器化环境，简化了部署过程。您将把您的 blitz js 应用打包到 docker 容器中，并无缝部署。 为生产准备您的 blitz js 应用 首先，为生产环境构建您的 blitz js 应用程序： blitz build 创建 dockerfile 在项目的根目录中创建一个 dockerfile ，内容如下： from node 18 arg database url arg port=3000 env database url ${database url} workdir /usr/src/app copy package json / run npm install run npm install g blitz copy run blitz build expose 3000 cmd \["blitz", "start", " p", "3000"] 这个 dockerfile 构建您的 blitz js 项目，并使用轻量级的 node js 运行时准备生产镜像。在创建 dockerfile 后，创建一个 dockerignore 文件，并复制粘贴您的 gitignore 文件。 构建和测试您的 docker 容器 在本地构建 docker 镜像： docker build t todo blitz frontend 运行容器进行测试： docker run p 3000 3000 todo blitz frontend 在您的浏览器中访问 http //localhost 3000 以验证您的 blitz 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 blitz 仓库。 选择 dockerfile 部署 并验证构建设置。 点击 "部署" 开始部署过程。 一旦部署，使用 back4app 控制面板监控日志，管理构建，并在需要时设置自定义域。 测试和调试您的应用程序 部署后，通过以下方式确保您的应用程序按预期工作 检查api连接： 使用浏览器的开发者工具验证添加、切换和删除任务的api请求是否成功。 验证数据持久性： 通过ui添加任务并刷新页面以确认它们已保存在back4app数据库中。 测试crud操作： 验证任务可以被切换和删除，并检查控制台日志以查找任何错误。 处理边缘情况： 尝试提交无效输入以测试验证的稳健性。 最佳实践和优化建议 考虑以下建议以确保应用程序的安全和高效： 优化api请求： 使用批处理和限制查询字段以减少网络开销。 保护环境变量： 将敏感凭据（应用程序id和javascript密钥）存储在安全的 env 文件中。 实施访问控制： 使用动态acl确保只有授权用户可以修改数据。 利用云代码： 将复杂逻辑卸载到back4app云代码中，以提高性能和安全性。 结论 您现在已经使用blitz js构建了一个完整的待办事项列表应用程序，并与back4app后端集成。 本教程指导您完成项目初始化、后端集成和容器化部署。 在您继续前进时，考虑通过高级用户管理、实时更新和第三方集成等功能扩展您的应用程序。 有关更多见解，请探索 back4app文档 https //www back4app com/docs 和blitz js资源。