构建之路

从业务目标开始

第一步，我们先把一个最简单的员工管理应用真正做出来：用户能够看到员工列表，并修改员工的毕业学校。

这个目标足够小，但它已经包含了一个完整系统必须面对的问题：页面如何展示、请求如何传递、业务逻辑在哪里执行、数据如何持久化，以及开发者如何在自己的电脑上重复运行这一切。

三层应用架构

我们把应用拆成三个职责清晰的层次。拆分的目的不是让结构看起来复杂，而是让每一层可以独立修改、测试和替换。

前端不直接连接数据库。它通过 HTTP 请求调用后端 API；后端再通过 Prisma 访问 PostgreSQL。这样的边界让数据库凭证不会暴露给浏览器，也让业务规则集中在后端。

业务开发

明确了要做什么、每一层负责什么，接下来就可以开始写代码。把下面的提示词交给任意 Coding Agent（能帮助你编写和修改代码的 AI 编程工具），让它完成这个最小应用。作者使用的是 Codex + AGPT6 astra。

可以直接复制这段提示词：

请帮我搭建一个可以在本地运行的极简员工管理应用。

业务目标：
1. 页面展示员工列表，字段包括姓名、年龄、毕业学校。
2. 用户可以编辑毕业学校，保存后写入数据库；刷新页面后仍能看到修改。
3. 提供虚构的员工示例数据，方便第一次打开页面就能测试。

技术与分层：
- 前端：Next.js 16、React 19、TypeScript、Tailwind CSS 4。
- 后端：Node.js、Express 4、TypeScript、Prisma 5。
- 数据库：PostgreSQL 15，使用 postgres:15-alpine 镜像在本地运行。
- 前端和后端分别放在 frontend、backend 目录，分别用 npm run dev 启动。
- 前端只调用后端 API，不直接连接数据库。

具体要求：
- 员工页面放在 /employee-management。
- GET /api/employees 返回员工列表。
- PUT /api/employees/:id 更新员工的 graduatedSchool 字段。
- Employee 包含 id、name、age、graduatedSchool、createdAt、updatedAt。
- 后端检查输入，前端展示加载中、保存中和失败提示。
- 数据库连接通过后端环境变量 DATABASE_URL 配置。
- 提供数据库表初始化、示例数据写入和本地启动的具体步骤。
- 先完成本地应用，不加入云部署、CI/CD 或集群配置。

验收方式：
打开页面能看到示例员工，修改一位员工的毕业学校并保存，
刷新页面后确认修改仍然存在。请实际实现，并说明如何验证。

提示词里最重要的是把功能和验收方式说清楚。代码生成之后，还需要按下一节的步骤启动应用，并亲自完成一次“查看 → 编辑 → 保存 → 刷新”的操作，确认它真的能用。

在本地分别运行

完成分层后，先让每一层可以独立启动。数据库由 Docker 提供，后端和前端在本机分别运行开发服务器。

# 先启动本地 PostgreSQL
docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d db

# 后端
cd backend
npm ci
npx prisma generate
npx prisma db push
npm run dev

# 另开终端启动前端
cd frontend
npm ci
npm run dev

这时后端运行在 localhost:5000，前端运行在 localhost:3000。打开 http://localhost:3000/employee-management，就可以完成第一次前后端联调。

Prisma 5Prisma 5×是什么连接应用代码与数据库的工具，用模型描述数据结构，并生成数据库访问代码。在本项目中用在哪里在 backend/prisma/schema.prisma 中定义 Employee 模型，生成后端使用的 Prisma Client。 的 generate 会根据 schema 生成 Prisma Client；db push 会把 schema 同步到本地数据库。

本地运行效果

下面嵌入的就是员工管理页面。启动本地后端和数据库后，可以直接在这里查看员工、修改毕业学校并保存。

保存后，在新窗口打开页面确认修改仍然存在，就完成了从页面操作到数据库保存的验证。如果页面提示连接失败，请先检查后端和数据库是否已启动。