第 8 章：实战项目 3 - 全栈博客系统 (Vibe Blog)

​

🪢

🎯 本章目标：​

我们将构建一个真正的全栈应用，涵盖数据库、ORM、服务端组件和数据变更​

核心技能：Schema-First 开发模式、Server Actions、Prisma ORM、Next.js App Router。​

​

​

​

​

​

​

​

50%

​

​

​

​

50%

​

​

8.1 系统架构与技术栈​

我们要做的不是一个静态网页，而是一个有"记忆"的系统。​

技术栈 (The Modern Stack)​

•

框架：Next.js 15 (App Router)​

•

数据库：SQLite (开发阶段) / PostgreSQL (生产环境)。​

•

ORM：Prisma​

•

样式：Tailwind CSS + Typography 插件。​

初始化项目​

打开终端，运行：​

​

代码块​

Plain Text

npx create-next-app@latest vibe-blog --typescript --tailwind --eslint​

cd vibe-blog​

npm install prisma -D​

npx prisma init --datasource-provider sqlite​

​

8.2 数据库先行：Schema-First 开发​

在全栈 Vibe Coding 中，Schema 是真理之源。你定义好数据结构，AI 就能帮你搞定剩下的一切。​

📢 提示词 1：设计数据模型​

打开 prisma/schema.prisma，清空内容（保留 datasource 和 generator），然后唤起 Ctrl + K：​

​

代码块​

Markdown

[Requirement]​

请帮我设计一个博客系统的 Prisma Schema。​

1. **User**: 包含 id, email, name, role (ADMIN/USER), posts。​

2. **Post**: 包含 id, title, content (Markdown), published (boolean), author, createdAt。​

​

生成后，运行迁移命令让数据库生效：​

​

代码块​

Plain Text

npx prisma migrate dev --name init​

​

8.3 数据访问层：让 AI 写种子数据​

数据库有了，但它是空的。我们需要数据来驱动开发。​

📢 提示词 2：生成种子数据 (Seed Script)​

创建一个 prisma/seed.ts 文件，输入：​

​

代码块​

Plain Text

[Context]​

参考 `schema.prisma` 的定义。​

​

[Requirement]​

请写一个 seed 脚本，向数据库插入：​

1. 一个名为 "Vibe Master" 的管理员用户。​

2. 5 篇由该用户发布的示例文章，标题要和 "AI 编程"、"未来科技" 相关，内容用 Lorem Ipsum 填充但带一点 Markdown 格式。​

3. 3 个分类：Tech, Life, Vibe。​

​

[Output]​

请给出完整的 TypeScript 代码，并包含 main 函数执行逻辑。​

​

执行种子数据​

为了最简单地运行 TS 脚本，我们使用 tsx 工具（无需修改 package.json）：​

​

代码块​

Plain Text

​

运行完毕后，你的 SQLite 数据库里应该已经有数据了。可以使用 npx prisma studio 打开可视化界面查看。​

8.4 UI 构建：Server Components​

Next.js 的魅力在于服务端组件。我们可以直接在组件里查数据库。​

📢 提示词 3：首页文章列表​

首先，安装必要的 UI 依赖：​

​

代码块​

Plain Text

npm install react-markdown @tailwindcss/typography clsx tailwind-merge​

​

打开 app/page.tsx：​

​

代码块​

Markdown

[Context]​

我是 Next.js App Router 项目。数据库由 Prisma 管理。​

​

[Requirement]​

请重写这个页面，展示博客文章列表。​

1. **数据获取**：直接在组件内使用 `prisma.post.findMany` 获取所有 `published: true` 的文章，包含 author 和 categories 信息。​

2. **异步组件**：请确保导出的是 `export default async function Home() ...`。​

3. **UI 设计**：使用 Grid 布局，每篇文章是一个卡片，UI 需适配 Markdown 内容展示。​

4. **交互**：点击标题跳转到 `/posts/[id]`。​

​

[Style]​

极简杂志风格，大留白，高雅的字体排印。​

​

📢 提示词 4：文章详情页​

新建 app/posts/[id]/page.tsx：​

8.5 管理后台：Server Actions​

最后，我们需要一个发布文章的地方。这次我们尝试 Server Actions，这是 Next.js 处理表单提交的最新方式。​

📢 提示词 5：发布文章功能​

新建 app/admin/create/page.tsx：​

​

代码块​

Markdown

[Context]​

我们需要一个创建文章的页面。​

​

[Requirement]​

1. **表单 UI**：包含标题输入框、分类选择（从数据库加载）、内容多行文本框、发布按钮。​

2. **Server Action**：请在同文件（或 `actions.ts`）中定义一个 `createPost` 异步函数。​

- 接收 FormData。​

- 验证数据。​

- 调用 `prisma.post.create` 写入数据库。​

- 成功后使用 `revalidatePath('/')` (清除首页缓存) 并 `redirect('/')`。​

​

​

​

💡 为什么要 revalidatePath? Next.js 默认会缓存页面。如果不调用这个函数，发布完跳回首页，你可能还是会看到旧的列表。这就是 Server Actions 的魔法所在。​

​

​

​

8.5 Vibe DevOps：让 AI 搞定运维​

代码写好了，怎么上线？不要去死记硬背 Dockerfile 的语法，让 AI 帮你写。​

编写 Dockerfile​

​

Prompt: "请为这个 Next.js 项目编写一个生产环境可用的 Dockerfile。使用多阶段构建 (Multi-stage build) 以减小镜像体积。基于 node:18-alpine。"​

​

AI 的优势：它不会忘记 CMD 和 ENTRYPOINT 的区别，也不会忘记在 Alpine 镜像里安装 libc6-compat。​

配置 Nginx​

​

Prompt: "请写一个 nginx.conf，作为反向代理服务器。将 80 端口流量转发到 locahost:3000。要求：开启 Gzip 压缩，配置 HTTP/2，并添加安全相关的 Header (如 X-Frame-Options)。"​

​

GitHub Actions (CI/CD)​

这是 AI 的绝活。Yaml 文件的缩进极其容易出错，但 AI 哪怕闭着眼也能写对。​

​

Prompt: "请帮我写一个 .github/workflows/deploy.yml。 当代码推送到 main 分支时：​

安装依赖并运行 npm test。​

如果测试通过，构建 Docker 镜像。​

将镜像推送到 GitHub Container Registry (GHCR)。​

通过 SSH 触发生产服务器的部署脚本。"​

​

​

​

8.6 部署上线​

有了上述配置，上线只需要一行 git push。​

📝 本章小结​

在这个项目中，你体验了真正的全栈 Vibe Coding 流程：​

定义 Schema：用自然语言描述数据结构。​

生成数据：让 AI 帮你填充测试内容。​

连接界面：直接用 Server Components 读取数据。​

处理交互：用 Server Actions 处理提交。​

这就是 2026 年的全栈开发 —— 你不再纠结于胶水代码，而是专注于数据流向和产品逻辑。​