Trae 全栈开发工作流：前后端一体化实战

全栈开发中 AI IDE 的角色

做全栈开发最头疼的不是前端或后端本身，而是两边要同时兼顾。你写完一个 API，还得去前端写调用逻辑；改了数据库字段，前后端的类型定义都得跟着改。来回切换上下文，效率直接砍半。

Trae 在全栈场景下的价值，就是帮你把这些割裂的环节串起来：

传统全栈开发：
  写后端 API → 手动写文档 → 切到前端 → 对着文档写调用 → 联调出 bug → 反复改

Trae 辅助全栈开发：
  Builder 生成 API → 自动生成类型定义 → Chat 构建 UI → 类型共享，联调一次过

Builder 负责搭架子，Chat 负责打磨 UI，SOLO 负责端到端跑通。三种模式配合使用，才是全栈开发的正确姿势。

---

Monorepo 下前后端项目组织

全栈项目推荐 Monorepo，这样 Trae 能同时看到前后端代码，上下文更完整。

my-fullstack-app/
├── packages/
│   ├── server/           # Express + Prisma
│   │   ├── src/
│   │   └── prisma/
│   ├── web/              # React + Vite
│   │   └── src/
│   └── shared/           # 共享类型
│       └── src/types/
├── package.json          # workspace 根配置
└── trae.config.json

关键在 shared 包——前后端的类型定义放这里，改一处两边都能感知。根目录配置 workspace：

{
  "private": true,
  "workspaces": ["packages/*"],
  "scripts": {
    "dev": "concurrently \"npm run dev:server\" \"npm run dev:web\"",
    "dev:server": "npm -w packages/server run dev",
    "dev:web": "npm -w packages/web run dev"
  }
}

---

后端：Builder 生成 API 和数据库 Schema

后端用 Builder Mode 效率最高。给它一个任务描述，它自动生成数据库模型、API 路由、业务逻辑。

打开 Builder，输入：

帮我设计用户系统的数据库模型：用户表、会话表、资料表
使用 Prisma + PostgreSQL

Builder 生成的 schema.prisma：

model User {
  id           String    @id @default(cuid())
  email        String    @unique
  passwordHash String    @map("password_hash")
  nickname     String
  avatar       String?
  createdAt    DateTime  @default(now()) @map("created_at")
  sessions     Session[]
  profile      Profile?
  @@map("users")
}

model Session {
  id        String   @id @default(cuid())
  userId    String   @map("user_id")
  token     String   @unique
  expiresAt DateTime @map("expires_at")
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  @@map("sessions")
}

model Profile {
  id     String  @id @default(cuid())
  userId String  @unique @map("user_id")
  bio    String?
  github String?
  user   User    @relation(fields: [userId], references: [id], onDelete: Cascade)
  @@map("profiles")
}

Builder 不只生成 Schema，还会自动执行 prisma generate 和 prisma db push。接着让它生成 API：

基于 Prisma Schema 生成认证 API：
- POST /api/auth/register、login、logout
- GET  /api/auth/me
用 Express + TypeScript，bcrypt 加密，Session 存数据库

路由、service 层、中间件一条龙搞定。

---

前端：Chat 构建 UI

前端更适合 Chat Mode，因为 UI 需要频繁微调。

@file:packages/shared/src/types/user.ts
帮我写一个登录表单组件，React + TypeScript + Tailwind，有加载状态和错误提示

Chat 参考你引用的类型文件，生成类型安全的组件：

import { useState } from 'react'
import type { LoginRequest, AuthResponse } from '@shared/types/user'

export function LoginForm({ onSuccess }: { onSuccess: (data: AuthResponse) => void }) {
  const [form, setForm] = useState<LoginRequest>({ email: '', password: '' })
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError(null)
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (!res.ok) throw new Error((await res.json()).message || '登录失败')
      onSuccess(await res.json())
    } catch (err) {
      setError(err instanceof Error ? err.message : '未知错误')
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm mx-auto">
      <input type="email" value={form.email} required
        onChange={(e) => setForm({ ...form, email: e.target.value })}
        className="block w-full rounded-md border-gray-300" placeholder="邮箱" />
      <input type="password" value={form.password} required
        onChange={(e) => setForm({ ...form, password: e.target.value })}
        className="block w-full rounded-md border-gray-300" placeholder="密码" />
      {error && <p className="text-red-500 text-sm">{error}</p>}
      <button type="submit" disabled={loading}
        className="w-full py-2 bg-blue-600 text-white rounded-md disabled:opacity-50">
        {loading ? '登录中...' : '登录'}
      </button>
    </form>
  )
}

Chat 的好处是你可以不断追问：“加记住密码”、“错误提示改成 toast”、“加表单验证”。每次修改都是增量的。

---

前后端联调：类型定义和 API 客户端

联调最容易出 bug 的地方就是接口不一致。解决方案：共享类型 + 类型安全的 API 客户端。

// packages/shared/src/types/user.ts
export interface User {
  id: string; email: string; nickname: string; avatar: string | null
}
export interface LoginRequest { email: string; password: string }
export interface RegisterRequest { email: string; password: string; nickname: string }
export interface AuthResponse { user: User; token: string }

然后让 Chat 生成封装好的客户端：

// packages/web/src/api/client.ts
import type { LoginRequest, RegisterRequest, AuthResponse, User } from '@shared/types/user'

const BASE = import.meta.env.VITE_API_URL || '/api'

async function request<T>(path: string, opts?: RequestInit): Promise<T> {
  const res = await fetch(`${BASE}${path}`, {
    ...opts,
    headers: { 'Content-Type': 'application/json', ...opts?.headers },
    credentials: 'include',
  })
  if (!res.ok) throw new Error((await res.json()).message)
  return res.json()
}

export const authApi = {
  login:    (data: LoginRequest) => request<AuthResponse>('/auth/login', { method: 'POST', body: JSON.stringify(data) }),
  register: (data: RegisterRequest) => request<AuthResponse>('/auth/register', { method: 'POST', body: JSON.stringify(data) }),
  logout:   () => request<void>('/auth/logout', { method: 'POST' }),
  me:       () => request<User>('/auth/me'),
}

改了类型定义，两边 TypeScript 编译器都会报错，逼着你同步修改。写错参数 IDE 直接报红。

---

用 MCP 连接数据库辅助开发

Trae 支持 MCP，可以让 AI 直接连数据库查数据、验证 SQL、排查问题。

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://user:pass@localhost:5432/mydb"]
    }
  }
}

配好后在 Chat 里直接问：

数据库里现在有多少用户？
帮我查最近注册的 10 个用户
users 表的索引需要优化吗？

MCP 在全栈开发中最实用的三个场景：写完 API 后验证数据是否正确写入、排查 bug 时查相关数据定位问题、写复杂查询时先在真实数据上测试再转成 Prisma。

---

实战：构建带用户认证的全栈应用

把前面的知识串起来，走一遍完整流程。

第一步：Builder 初始化项目 —— 输入”初始化全栈 Monorepo：server 用 Express+Prisma，web 用 React+Vite，shared 放共享类型”。Builder 自动创建目录、装依赖、配 TypeScript paths。

第二步：Builder 搭后端 —— 输入”实现用户认证系统：Prisma Schema + 注册登录登出 API + 认证中间件，类型放 shared 包”。一条龙生成。

第三步：Chat 打磨前端 —— 分多轮对话逐步完善：

第一轮：写登录页面，用 authApi 调后端
第二轮：加注册页面，表单要有密码确认
第三轮：写 useAuth hook 管理登录状态
第四轮：加路由守卫，未登录跳转登录页

第四步：SOLO 跑通联调 —— 输入”跑通整个认证流程：启动前后端、测试注册登录登出，有报错直接修”。SOLO 自动启动服务、发请求、发现问题直接改代码。

---

Builder vs Chat vs SOLO 切换策略

开发阶段	推荐模式	原因	典型指令
项目初始化	Builder	创建大量文件和目录	”初始化 Monorepo 项目”
数据库设计	Builder	Schema 生成 + 自动迁移	”设计用户系统数据库模型”
API 开发	Builder	路由、Service、中间件一条龙	”实现认证 API”
UI 组件	Chat	需要反复微调样式	”写一个登录表单”
Bug 修复	Chat	需要分析上下文讨论方案	”登录返回 401 帮我排查”
前后端联调	SOLO	同时操作前后端 + 跑测试	”跑通注册到登录流程”
添加功能	Builder → Chat	先搭架子再打磨	Builder 骨架 + Chat 优化
重构	Chat	需要理解现有代码	”把组件拆成子组件”
性能优化	Chat	需要分析讨论	”这个查询太慢了”
部署配置	Builder	生成 Dockerfile、CI 等	”生成 Docker 部署配置”
E2E 测试	SOLO	自动跑测试 + 修问题	”跑所有 E2E 测试”

核心原则：从零搭建用 Builder，现有代码改用 Chat，跑通验证用 SOLO。不确定的时候，先 Chat 聊思路再决定。

全栈开发不是前端加后端，而是一个完整的系统。Trae 的价值不在于帮你写了多少行代码，而在于它理解前后端之间的关系，让类型流动起来，让接口对齐变成自动的事情。当你不再需要在前后端之间来回切换上下文的时候，你才真正进入了全栈开发的心流状态。