用 Next.js、Vercel 和 Back4App 构建票务应用程序

在本教程中，我们将构建一个 票务系统 ，使用 next js 和应用路由， back4app 作为后端服务，以及 tailwind css 进行样式设计。该应用允许用户创建、更新、查看和删除票务，同时利用 parse server 在 back4app 上进行数据库管理。 1\ 前提条件 在开始之前，请确保您拥有： node js 已安装在您的机器上 ( node js 安装指南 https //nodejs org/ )。 back4app 账户 ( 免费注册 https //www back4app com/ )。 vercel 账户用于部署 ( 注册 vercel https //vercel com/ )。 2\ 设置 back4app 登录到您的 back4app 控制面板并创建一个新项目。 导航到 数据浏览器 并创建一个名为 票务 的新类，具有以下模式： 字段名称 类型 标题 字符串 描述 字符串 类别 字符串 优先级 数字 进展 数字 状态 字符串 创建于 日期（自动生成） 更新于 日期（自动生成） 3\ 设置前端 (next js) 3 1 创建一个新的 next js 项目 运行以下命令以创建一个新的 next js 项目： npx create next app\@latest ticketing app cd ticketing app 3 2 安装依赖 安装 tailwind css , font awesome , 和 parse sdk 以进行后端操作 npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 设置 tailwind css 编辑 tailwind config js 文件以配置 tailwind css 内容路径 module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } 在 styles/globals css , 添加 tailwind 导入 @tailwind base; @tailwind components; @tailwind utilities; 3 4 创建项目结构 根据提供的结构，创建必要的目录和组件。 目录结构 /app /tickets /\[id] page js layout js page js /components deleteblock jsx nav jsx prioritydisplay jsx progressdisplay jsx statusdisplay jsx ticketcard jsx ticketform jsx /lib parseclient js 4\ 设置解析客户端 在 /lib 文件夹中，创建一个 parseclient js 文件以配置 parse sdk。 import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; 将 'your app id' 和 'your js key' 替换为您的 back4app 项目凭据。 5\ 创建关键组件 5 1 ticketform 此组件将处理 创建 和 更新 票据。 在 /components/ticketform jsx , 创建以下内容： import { usestate } from 'react'; import parse from ' /lib/parseclient'; export default function ticketform({ ticket }) { const \[title, settitle] = usestate(ticket? title || ''); const \[description, setdescription] = usestate(ticket? description || ''); const handlesubmit = async (e) => { e preventdefault(); const ticket = parse object extend('ticket'); const newticket = ticket || new ticket(); newticket set('title', title); newticket set('description', description); try { await newticket save(); alert('ticket saved successfully!'); } catch (error) { console error('error saving ticket ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" value={title} onchange={(e) => settitle(e target value)} placeholder="title" required /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description" required /> \<button type="submit">save ticket\</button> \</form> ); } 5 2 ticketcard 该组件将显示单个票据的信息。 在 /components/ticketcard jsx import link from 'next/link'; import progressdisplay from ' /progressdisplay'; export default function ticketcard({ ticket }) { return ( \<div classname="border p 4"> \<h2>{ticket title}\</h2> \<p>{ticket description}\</p> \<progressdisplay progress={ticket progress} /> \<link href={`/tickets/${ticket objectid}`}>edit\</link> \</div> ); } 5 3 删除块 一个用于删除票据的确认组件： 在 /components/deleteblock jsx import parse from ' /lib/parseclient'; export default function deleteblock({ ticketid, ondelete }) { const handledelete = async () => { const query = new parse query('ticket'); const ticket = await query get(ticketid); try { await ticket destroy(); alert('ticket deleted successfully'); ondelete(); } catch (error) { console error('error deleting ticket ', error); } }; return ( \<button onclick={handledelete}>delete ticket\</button> ); } 5 4 进度显示 该组件将进度显示为百分比条： 在 /components/progressdisplay jsx export default function progressdisplay({ progress }) { return ( \<div> \<div classname="w full bg gray 200 rounded"> \<div classname="bg blue 600 text xs font medium text blue 100 text center p 0 5 leading none rounded" style={{ width `${progress}%` }} \> {progress}% \</div> \</div> \</div> ); } 5 4 进度显示 6\ 页面和路由 6 1 票据列表 在 /app/page js , 显示票据列表 import { useeffect, usestate } from 'react'; import parse from ' /lib/parseclient'; import ticketcard from ' /components/ticketcard'; export default function home() { const \[tickets, settickets] = usestate(\[]); useeffect(() => { const fetchtickets = async () => { const query = new parse query('ticket'); const results = await query find(); settickets(results); }; fetchtickets(); }, \[]); return ( \<div> \<h1>tickets\</h1> {tickets map(ticket => ( \<ticketcard key={ticket id} ticket={ticket} /> ))} \</div> ); } 6 2 票据详情和编辑 在 /app/tickets/\[id]/page js import { useeffect, usestate } from 'react'; import { userouter } from 'next/router'; import parse from ' / / /lib/parseclient'; import ticketform from ' / / /components/ticketform'; import deleteblock from ' / / /components/deleteblock'; export default function ticketdetail() { const router = userouter(); const { id } = router query; const \[ticket, setticket] = usestate(null); useeffect(() => { if (!id) return; const fetchticket = async () => { const query = new parse query('ticket'); const result = await query get(id); setticket(result); }; fetchticket(); }, \[id]); const handledelete = () => { router push('/'); }; if (!ticket) return \<div>loading \</div>; return ( \<div> \<ticketform ticket={ticket} /> \<deleteblock ticketid={ticket id} ondelete={handledelete} /> \</div> ); } 7\ 部署到 vercel 7 1 创建 vercel 账户 如果您还没有 vercel 账户，请访问 vercel com https //vercel com/ 并创建一个账户。 您可以使用 github、gitlab 或 bitbucket 注册。vercel 使您可以轻松直接链接您的代码库进行部署。 7 2 将您的代码推送到 github 要在 vercel 上部署您的应用程序，您需要将项目托管在像 github 这样的版本控制平台上（或 gitlab/bitbucket）。 如果您的项目尚未在 github 上，请按照以下步骤操作： 在您的项目目录中初始化 git： 将您的项目添加到 github： 7 3 安装 vercel cli（可选） 如果您更喜欢直接从命令行部署，请全局安装 vercel cli ： 或者，您可以通过 vercel 的仪表板进行部署，我们将在接下来的部分中介绍。 7 4 将您的 github 仓库连接到 vercel 前往 vercel https //vercel com/ 点击 新项目 选择包含您的 next js 项目的 git 仓库。 配置您的项目 vercel 将自动检测这是一个 next js 项目并应用正确的构建设置。 将 根目录 设置为项目的文件夹（如有必要）。 7 5 设置环境变量 您需要在 vercel 中配置您的 back4app 凭据 和任何其他环境变量。 在 vercel 的 项目设置 , 前往 环境变量 部分。 添加以下环境变量 7 6 在 env local 中设置 parse 配置（可选） 如果您在开发过程中使用本地环境变量，请确保在项目根目录中创建一个 env local 文件，并包含以下变量 这些环境变量在设置于 vercel 仪表板后也将被 vercel 使用。 7 7 配置构建设置（可选） 确保 node js 版本 和 构建命令 被正确配置（vercel 会自动检测这一点）。 对于 next js 应用，默认设置应为： 构建命令：npm run build 输出目录： next/ 7 8 部署项目 在您链接 github 仓库后，vercel 将自动触发构建和部署过程。 您可以在 vercel 仪表板中查看构建状态。 7 9 检查部署日志 如果在部署过程中出现任何问题，您可以检查部署日志以进行调试。 7 10 访问您的已部署应用 一旦部署成功，vercel 将为您提供一个独特的 url，您的 next js 应用将在该 url 上运行。您可以访问该 url 来访问您已部署的票务应用。 例如： https //your app name vercel app/ 8\ 确保顺利部署 back4app 凭据： 请仔细检查您的 back4app 环境变量在 env local（用于本地开发）和 vercel 仪表板（用于生产）中是否正确设置。 cors（跨源资源共享）： 确保 back4app 在其 cors 设置中允许您的 vercel url，您可以在 back4app 仪表板的 安全性 中进行配置。 测试您的 api： 在部署之前，先在本地测试您的 back4app api 交互，以确保一切顺利。 9\ 结论 通过这些步骤，您的 next js 票务应用 现在应该已在 vercel 上部署，使用 back4app 作为后端。这完成了完整的开发周期，从设置 back4app、在 next js 中创建前端，到在 vercel 上实时部署应用。 如果您想进行更新，只需将更改推送到您的 github 仓库，vercel 将自动触发新的部署。