TRAE AI 编程实战：Vue 3 + Node.js + MySQL 企业级项目从搭建到部署

TRAE AI 编程实战：Vue 3 + Node.js + MySQL 企业级项目从搭建到部署 | 极客日志

特性维度	@Chat 智能体	@Builder 智能体	@Builder with MCP 智能体
核心角色	代码级助手	项目级构建者	系统级架构师
工作粒度	文件/代码块 (函数、组件、样式)	功能/页面/项目 (完整功能模块、项目骨架)	全栈应用/数据流 (前端 + 后端 + 数据库 + 服务)
交互模式	对话驱动 (你问它答，你指令它执行)	目标驱动 (你描述'做什么'，它决定'怎么做')	资源驱动 (你描述目标，它调度外部资源来实现)
核心输入	代码片段、错误信息、自然语言指令	自然语言需求描述、设计稿、产品原型图	自然语言需求描述、数据库 Schema、API 文档、外部工具配置
核心输出	代码片段、修改建议、解释、修复方案	结构化、可运行的项目文件和代码	连接了真实数据源和服务、具备完整数据流的生产就绪项目
数据能力	操作前端模拟数据 (Mock)	操作前端模拟数据 (Mock)	连接并操作真实数据库 (MySQL/PostgreSQL 等)、调用外部 API
决策权	低 (等待你的每一步指令)	中 (自主进行技术选型、项目结构设计)	高 (自主进行系统架构、数据库设计、服务集成)

// backend/models/Task.js
module.exports = (sequelize, DataTypes) => {
  const Task = sequelize.define('Task', {
    id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true },
    title: { type: DataTypes.STRING, allowNull: false },
    description: { type: DataTypes.TEXT, allowNull: true },
    status: { type: DataTypes.INTEGER, allowNull: false, defaultValue: 1, // 默认为待处理 references: { model: 'task_status', key: 'id' } },
    priority: { type: DataTypes.ENUM('low', 'medium', 'high', 'urgent'), allowNull: false, defaultValue: 'medium' },
    assignee_id: { type: DataTypes.INTEGER, allowNull: true, references: { model: 'users', key: 'id' } },
    due_date: { type: DataTypes.DATE, allowNull: true },
    created_at: { type: DataTypes.DATE, allowNull: false, defaultValue: DataTypes.NOW }
  }, { tableName: 'tasks', timestamps: false });
  return Task;
};

// src/stores/taskStore.js
import { defineStore } from 'pinia'
import { taskApi } from '@/services/api'

export const useTaskStore = defineStore('task', {
  state: () => ({
    tasks: [],
    loading: false,
    error: null,
    filter: { status: '', priority: '', assignee: '' },
    pagination: { currentPage: 1, pageSize: 10, total: 0 }
  }),
  getters: {
    filteredTasks: (state) => {
      return state.tasks.filter(task => {
        let match = true
        if (state.filter.status && task.status !== state.filter.status) { match = false }
        if (state.filter.priority && task.priority !== state.filter.priority) { match = false }
        if (state.filter.assignee && (!task.assignee || task.assignee.id !== parseInt(state.filter.assignee))) { match = false }
        return match
      })
    },
    taskStats: (state) => {
      const statusMap = { 1: 'pending', 2: 'in_progress', 3: 'completed' }
      const stats = { pending: 0, inProgress: 0, completed: 0, total: state.tasks.length }
      state.tasks.forEach(task => {
        const frontEndStatus = statusMap[task.status] || 'pending'
        if (frontEndStatus === 'pending') { stats.pending++ }
        else if (frontEndStatus === 'in_progress') { stats.inProgress++ }
        else if (frontEndStatus === 'completed') { stats.completed++ }
      })
      return stats
    }
  },
  actions: {
    setFilter(filter) {
      this.filter = { ...this.filter, ...filter }
      this.fetchTasks()
    },
    setPagination(currentPage, pageSize) {
      this.pagination.currentPage = currentPage
      this.pagination.pageSize = pageSize
      this.fetchTasks()
    },
    async fetchTasks() {
      this.loading = true
      this.error = null
      try {
        const params = { ...this.filter, page: this.pagination.currentPage, pageSize: this.pagination.pageSize }
        const response = await taskApi.getTasks(params)
        this.tasks = response.tasks || response
        this.pagination.total = response.total || this.tasks.length
      } catch (error) {
        this.error = error.message
        console.error('获取任务列表失败:', error)
      } finally {
        this.loading = false
      }
    },
    async fetchTaskById(id) {
      this.loading = true
      this.error = null
      try {
        return await taskApi.getTaskById(id)
      } catch (error) {
        this.error = error.message
        console.error('获取任务详情失败:', error)
        throw error
      } finally {
        this.loading = false
      }
    },
    async addTask(taskData) {
      this.loading = true
      this.error = null
      try {
        const newTask = await taskApi.createTask(taskData)
        this.tasks.unshift(newTask)
        this.pagination.total++
        return newTask
      } catch (error) {
        this.error = error.message
        console.error('创建任务失败:', error)
        throw error
      } finally {
        this.loading = false
      }
    },
    async updateTask(id, updates) {
      this.loading = true
      this.error = null
      try {
        const updatedTask = await taskApi.updateTask(id, updates)
        const index = this.tasks.findIndex(task => task.id === id)
        if (index !== -1) { this.tasks[index] = { ...this.tasks[index], ...updatedTask } }
        return updatedTask
      } catch (error) {
        this.error = error.message
        console.error('更新任务失败:', error)
        throw error
      } finally {
        this.loading = false
      }
    },
    async deleteTask(id) {
      this.loading = true
      this.error = null
      try {
        await taskApi.deleteTask(id)
        const index = this.tasks.findIndex(task => task.id === id)
        if (index !== -1) { this.tasks.splice(index, 1); this.pagination.total-- }
        return true
      } catch (error) {
        this.error = error.message
        console.error('删除任务失败:', error)
        throw error
      } finally {
        this.loading = false
      }
    },
    async fetchTaskStats() {
      try {
        return await taskApi.getTaskStats()
      } catch (error) {
        console.error('获取任务统计失败:', error)
        return this.taskStats
      }
    }
  }
})

// src/services/api.js
import axios from 'axios';

const api = axios.create({
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

api.interceptors.request.use(config => config, error => Promise.reject(error));

api.interceptors.response.use(
  response => response.data,
  error => {
    console.error('API Error:', error);
    let errorMessage = '请求失败';
    if (error.response) {
      switch (error.response.status) {
        case 401: errorMessage = '未授权，请重新登录'; break;
        case 403: errorMessage = '拒绝访问'; break;
        case 404: errorMessage = '请求的资源不存在'; break;
        case 500: errorMessage = '服务器错误'; break;
        default: errorMessage = error.response.data?.message || '请求失败';
      }
    } else if (error.request) {
      errorMessage = '网络错误，请检查您的网络连接';
    }
    return Promise.reject(new Error(errorMessage));
  }
);

export const taskApi = {
  getTasks: (params = {}) => api.get('/api/tasks', { params }),
  getTaskById: (id) => api.get(`/api/tasks/${id}`),
  createTask: (taskData) => api.post('/api/tasks', taskData),
  updateTask: (id, taskData) => api.put(`/api/tasks/${id}`, taskData),
  deleteTask: (id) => api.delete(`/api/tasks/${id}`),
  getTaskStats: () => api.get('/api/tasks/stats')
};

export const userApi = {
  getUsers: () => api.get('/api/users'),
  getUserById: (id) => api.get(`/api/users/${id}`)
};

export default api;

// backend/config/config.js
{
  "development": {
    "username": "root",
    "password": "password",
    "database": "task_management",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "define": { "timestamps": true },
    "pool": { "max": 10, "min": 0, "acquire": 30000, "idle": 10000 },
    "logging": true
  },
  "test": {
    "username": "root",
    "password": "password",
    "database": "task_management_test",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "pool": { "max": 10, "min": 0, "acquire": 30000, "idle": 10000 },
    "logging": false
  },
  "production": {
    "username": "root",
    "password": "password",
    "database": "task_management",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "pool": { "max": 20, "min": 2, "acquire": 60000, "idle": 20000 },
    "logging": false
  }
}

-- backend\migrations\20230101000005-add-indexes.js
-- 为表的常用查询字段添加索引
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.addIndex('tasks', ['status'], { name: 'idx_tasks_status' });
    await queryInterface.addIndex('tasks', ['priority'], { name: 'idx_tasks_priority' });
    await queryInterface.addIndex('tasks', ['assignee_id'], { name: 'idx_tasks_assignee_id' });
    await queryInterface.addIndex('tasks', ['due_date'], { name: 'idx_tasks_due_date' });
    await queryInterface.addIndex('tasks', ['created_at'], { name: 'idx_tasks_created_at' });
    await queryInterface.addIndex('comments', ['task_id'], { name: 'idx_comments_task_id' });
    await queryInterface.addIndex('comments', ['user_id'], { name: 'idx_comments_user_id' });
    await queryInterface.addIndex('comments', ['created_at'], { name: 'idx_comments_created_at' });
    await queryInterface.addIndex('attachments', ['task_id'], { name: 'idx_attachments_task_id' });
    await queryInterface.addIndex('attachments', ['user_id'], { name: 'idx_attachments_user_id' });
    await queryInterface.addIndex('users', ['email'], { name: 'idx_users_email', unique: true });
    await queryInterface.addIndex('users', ['name'], { name: 'idx_users_name' });
  },
  down: async (queryInterface) => {
    await queryInterface.removeIndex('tasks', 'idx_tasks_status');
    await queryInterface.removeIndex('tasks', 'idx_tasks_priority');
    await queryInterface.removeIndex('tasks', 'idx_tasks_assignee_id');
    await queryInterface.removeIndex('tasks', 'idx_tasks_due_date');
    await queryInterface.removeIndex('tasks', 'idx_tasks_created_at');
    await queryInterface.removeIndex('comments', 'idx_comments_task_id');
    await queryInterface.removeIndex('comments', 'idx_comments_user_id');
    await queryInterface.removeIndex('comments', 'idx_comments_created_at');
    await queryInterface.removeIndex('attachments', 'idx_attachments_task_id');
    await queryInterface.removeIndex('attachments', 'idx_attachments_user_id');
    await queryInterface.removeIndex('users', 'idx_users_email');
    await queryInterface.removeIndex('users', 'idx_users_name');
  }
};

# backend/Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN mkdir -p logs backups
ENV NODE_ENV=production
ENV PORT=3000
EXPOSE 3000
CMD ["npm", "start"]

// backend\migrations\20230101000006-production-migration.js
module.exports = {
  up: async (queryInterface, Sequelize) => {
    const transaction = await queryInterface.sequelize.transaction();
    try {
      await queryInterface.createTable('task_statuses', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        name: { type: Sequelize.STRING, allowNull: false, unique: true },
        created_at: { allowNull: false, type: Sequelize.DATE },
        updated_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('users', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        name: { type: Sequelize.STRING, allowNull: false },
        email: { type: Sequelize.STRING, allowNull: false, unique: true },
        role: { type: Sequelize.STRING, allowNull: false, defaultValue: 'user' },
        created_at: { allowNull: false, type: Sequelize.DATE },
        updated_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('tasks', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        title: { type: Sequelize.STRING, allowNull: false },
        description: { type: Sequelize.TEXT },
        status: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'task_statuses', key: 'id' } },
        priority: { type: Sequelize.ENUM('low', 'medium', 'high', 'urgent'), allowNull: false, defaultValue: 'medium' },
        assignee_id: { type: Sequelize.INTEGER, references: { model: 'users', key: 'id' } },
        due_date: { type: Sequelize.DATE },
        created_at: { allowNull: false, type: Sequelize.DATE },
        updated_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('comments', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        content: { type: Sequelize.TEXT, allowNull: false },
        task_id: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'tasks', key: 'id', onDelete: 'CASCADE' } },
        user_id: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'users', key: 'id' } },
        created_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('attachments', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        filename: { type: Sequelize.STRING, allowNull: false },
        filepath: { type: Sequelize.STRING, allowNull: false },
        filesize: { type: Sequelize.INTEGER, allowNull: false },
        filetype: { type: Sequelize.STRING, allowNull: false },
        task_id: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'tasks', key: 'id', onDelete: 'CASCADE' } },
        user_id: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'users', key: 'id' } },
        created_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.addIndex('tasks', ['status'], { name: 'idx_tasks_status', transaction });
      await queryInterface.addIndex('tasks', ['priority'], { name: 'idx_tasks_priority', transaction });
      await queryInterface.addIndex('tasks', ['assignee_id'], { name: 'idx_tasks_assignee_id', transaction });
      await queryInterface.addIndex('tasks', ['due_date'], { name: 'idx_tasks_due_date', transaction });
      await queryInterface.addIndex('tasks', ['created_at'], { name: 'idx_tasks_created_at', transaction });
      await queryInterface.addIndex('comments', ['task_id'], { name: 'idx_comments_task_id', transaction });
      await queryInterface.addIndex('comments', ['user_id'], { name: 'idx_comments_user_id', transaction });
      await queryInterface.addIndex('comments', ['created_at'], { name: 'idx_comments_created_at', transaction });
      await queryInterface.addIndex('attachments', ['task_id'], { name: 'idx_attachments_task_id', transaction });
      await queryInterface.addIndex('attachments', ['user_id'], { name: 'idx_attachments_user_id', transaction });
      await queryInterface.addIndex('users', ['email'], { name: 'idx_users_email', unique: true, transaction });
      await queryInterface.addIndex('users', ['name'], { name: 'idx_users_name', transaction });
      await transaction.commit();
    } catch (error) {
      await transaction.rollback();
      throw error;
    }
  },
  down: async (queryInterface) => {
    await queryInterface.dropTable('attachments');
    await queryInterface.dropTable('comments');
    await queryInterface.dropTable('tasks');
    await queryInterface.dropTable('users');
    await queryInterface.dropTable('task_statuses');
  }
};

特性	@Builder 智能体 (SOLO 模式)	@Chat 智能体
任务粒度	项目级/功能级：创建整个应用、完整页面	文件/代码块级：修改函数、解释代码、修复错误
交互模式	目标驱动：你提供'做什么'，它决定'怎么做'并执行。	指令驱动：你一步步下达'怎么做'的指令。
输出结果	完整的、结构化的项目文件、配置和可运行的代码库。	代码片段、建议、解释，需要你手动整合。
最佳场景	项目冷启动、原型开发、从设计稿到代码	日常编码、调试、迭代优化、学习代码

将 TRAE 的 Chat 智能体当作一个能力超群、不知疲倦的编程伙伴。核心任务是从'写代码'转变为'提需求、做审查和定方向'。通过清晰的指令和迭代式的对话，将能极大地提升开发效率，将精力集中在架构设计和业务逻辑等更有创造性的工作上。 上下文是关键：提供充足背景：在提问前，确保智能体已经加载了指定项目（TRAE 通常会自动完成）。在复杂问题上，可以在问题中说'参考一下 utils/api.js 文件里的格式'。精准描述：与其说'这里出错了'，不如说'这个函数在用户登录时抛出了类型错误，请看 LoginForm.js 第 25 行附近的 handleSubmit 函数'。迭代式精炼：从静态数据到动态交互，从基础功能到高级功能，一步步地向智能体提出需求。不要试图在一个指令中完成所有事情。将智能体视为一个实习生，先让它搭出框架，然后再一步步提出修改要求，使其不断完善。示例流程：'创建一个按钮' -> '给按钮加一个加载状态' -> '点击按钮时调用这个 API'。善用指令与快捷方式：TRAE 通常支持一些快捷指令，如 /test（为这段代码生成测试）、/explain（详细解释）、/fix（尝试自动修复）。留意官方文档中的特定指令。明确技术栈：在指令中开头就声明'使用 Vue 3 + Composition API + <script setup>'，让智能体生成最符合个人习惯的代码。善用组件库：直接要求智能体使用 Element Plus、Ant Design Vue 等知名组件库来重构 UI，能极大提升开发效率和界面美观度。让智能体调试：遇到任何错误或警告，直接将错误信息复制给智能体，并说明上下文，它不仅能修复，还能解释报错原因。结合 SOLO 模式进行飞跃：对于更宏大的任务，直接使用 SOLO 模式。可以上传一张设计图或提供一个产品链接，然后说'参考这张设计图，在我的项目中搭建一个类似的主页 UI。'SOLO 模式的 Builder 智能体会尝试自动分析并生成整个页面的代码框架，再通过 Chat 智能体进行微调。