数据库设置指南

在继续开发仪表盘之前，您需要准备一些数据。本章将指导您通过 Vercel 市场集成 设置 PostgreSQL 数据库。如果您已熟悉 PostgreSQL 并希望使用自己的数据库提供商，可以跳过本章自行设置。否则，让我们继续吧！

创建 GitHub 仓库

首先，如果您尚未操作，请将代码库推送至 GitHub。这将简化数据库设置和部署流程。

如需仓库设置帮助，请参考 GitHub 官方指南。

须知：

• 您也可以使用其他 Git 服务如 GitLab 或 Bitbucket
• 若您是 GitHub 新手，推荐使用 GitHub 桌面客户端 简化开发流程

创建 Vercel 账户

访问 vercel.com/signup 注册账户。选择免费的 "hobby" 套餐，点击 Continue with GitHub 关联您的 GitHub 和 Vercel 账户。

连接并部署项目

接下来您将看到以下界面，选择并 导入 您刚创建的 GitHub 仓库：

输入项目名称后点击 部署。

恭喜！🎉 您的项目已成功部署。

关联 GitHub 仓库后，每当您向 main 分支推送更改时，Vercel 将自动重新部署应用而无需额外配置。提交拉取请求时，您还会获得 即时预览链接，便于及早发现部署问题并与团队成员分享项目预览以获取反馈。

创建 PostgreSQL 数据库

接下来点击 Continue to Dashboard，在项目仪表盘中选择 Storage 标签页，点击 Create Database。根据您的 Vercel 账户创建时间，您可能看到 Neon 或 Supabase 等选项。选择首选提供商后点击 Continue。

选择区域和存储方案（如需要）。所有 Vercel 项目的 默认区域 是 华盛顿特区 (iad1)，为降低 数据请求延迟，建议优先选择该区域。

连接成功后，导航至 .env.local 标签页，点击 Show secret 并 Copy Snippet。请确保在复制前已显示所有密钥。

返回代码编辑器，将 .env.example 文件重命名为 .env，并粘贴从 Vercel 复制的配置内容。

重要提示： 检查 .gitignore 文件，确保已忽略 .env 文件，防止推送至 GitHub 时泄露数据库密钥。

数据库初始化

数据库创建完成后，让我们填充初始数据。

我们已内置一个可通过浏览器访问的 API 端点，该端点将运行初始化脚本为数据库填充预设数据。脚本使用 SQL 创建数据表，并通过 placeholder-data.ts 文件中的数据完成填充。

确保本地开发服务器正在运行（执行 pnpm run dev），然后在浏览器中访问 localhost:3000/seed。完成后浏览器将显示 "Database seeded successfully" 提示信息。初始化完成后可删除此文件。

故障排除：

• 请确认在复制到 .env 文件前已显示所有数据库密钥
• 脚本使用 bcrypt 哈希用户密码，若环境不兼容可改用 bcryptjs
• 若初始化遇到问题需重新运行脚本，可在数据库查询界面执行 DROP TABLE tablename 删除现有表（详见下方 执行查询 部分）。注意：此命令将永久删除表及其所有数据。示例应用中使用占位数据可执行此操作，但切勿在生产环境中使用。

执行查询

让我们执行查询验证功能是否正常。我们将使用另一个路由处理器 app/query/route.ts 来查询数据库。该文件包含的 listInvoices() 函数有如下 SQL 查询：

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

取消文件注释，移除 Response.json() 代码块，然后在浏览器中访问 localhost:3000/query。您将看到返回的发票 amount 和客户 name 数据。