企业官网建设流程全解析

1. 教师代课系统为什么值得用 Trae 从零搭一遍

教师代课系统这个需求，看起来简单，真动手做就会发现坑不少：谁有权限提交代课申请、被代课老师怎么从固定名单里选、审批流怎么走、排课时间冲突怎么判断、前端下拉框为什么显示的是数字 ID 而不是老师名字。这些问题单拎出来都不难，但串成一个完整项目，就特别适合拿来验证 AI 编程工具到底能不能扛住真实业务。

Trae 是字节跳动推出的 AI 编程 IDE，支持对话式生成、多文件编辑和项目级上下文理解，能直接在你的工程目录里读写代码。它适合谁？适合已经会一点 Vue 或 Spring Boot、但不想从零手写每个 CRUD 页面的开发者，也适合想快速验证一个管理系统原型的老师或教务人员。你不需要把每个接口都背下来，但需要能把需求说清楚，并且在 AI 跑偏的时候及时拉回来。

我这篇要做的，是把「教师代课系统」从需求拆解、数据模型、排课冲突处理到前端交互，完整走一遍。重点不是给你一个能直接上线的成品，而是给你一套可复制的项目结构、关键配置和运行命令，让你能复现一次「代课申请 → 审批」的端到端流程，然后按自己学校的规则二次开发。源代码结构我会在下面给出，关键文件路径和配置片段都可以直接抄。

先说清楚技术选型：前端 Vue3 + Vite，后端 Spring Boot 3，数据库 MySQL 8，接口用 RESTful，登录用 JWT。这个组合是 Trae 比较擅长的，因为生态成熟、报错信息明确，AI 排查起来有据可依。下面按实际开发顺序展开，每一步都给出可复制的配置和命令。

2. 用 Trae 拆解需求与数据模型：教师代课系统表结构设计

在 Trae 里新建项目后，第一件事不是让它直接写代码，而是先让它做整体设计和表设计。这一步非常关键，因为表结构一旦定错，后面改起来成本很高。我用的提示词思路是：先声明角色和技术栈，再列功能点，最后给本地数据库连接信息，并要求「先设计、我确认后再开发」。

核心表一共五张：用户表sys_user、教师表teacher、课程表course、代课申请表substitute_application、代课老师配置表substitute_teacher_config。其中代课申请表是业务核心，字段包括申请人、代课日期、代课时间段、课程、被代课老师、代课原因、备注、审批状态。审批状态用枚举PENDING / APPROVED / REJECTED，避免用数字导致前端显示混乱。

排课冲突处理是这里最容易出问题的地方。判断逻辑是：同一被代课老师、同一天、同一时间段，不能有两条状态为PENDING或APPROVED的申请。SQL 层面可以用唯一索引兜底，业务层面在 Service 里先查再插。下面这段是 Trae 生成后我调整过的建表语句，可以直接用：

CREATE TABLE substitute_application ( id BIGINT PRIMARY KEY AUTO_INCREMENT, applicant_id BIGINT NOT NULL COMMENT '申请人用户ID', substitute_teacher_id BIGINT NOT NULL COMMENT '被代课老师ID', course_id BIGINT NOT NULL COMMENT '课程ID', substitute_date DATE NOT NULL COMMENT '代课日期', time_slot VARCHAR(20) NOT NULL COMMENT '时间段，如 08:00-09:40', reason VARCHAR(255) COMMENT '代课原因', remark VARCHAR(255) COMMENT '备注', status VARCHAR(20) NOT NULL DEFAULT 'PENDING', created_at DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_teacher_date_slot (substitute_teacher_id, substitute_date, time_slot) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

注意那个唯一索引uk_teacher_date_slot，它能在数据库层直接拦住重复申请，比只在代码里判断更可靠。Trae 一开始没加这个索引，是我在它生成后手动补的。教师表teacher里要有teacher_name字段，并且初始化真实姓名数据，否则前端下拉框就会显示数字 ID——这是后面会专门讲的坑。

数据模型确认后，再让 Trae 生成实体类、Mapper、Service 和 Controller。建议一次只让它生成一个模块，比如先做登录，再做代课申请，避免上下文太长导致它「忘记」前面的约定。我实测下来，分模块对话的成功率明显高于一次性生成整个后端。

3. 可复制配置：Trae 项目结构、application.yml 与前端 settings

项目结构建议这样组织，前后端分开，Trae 在根目录下能同时看到两边代码，方便它跨文件修改：

teacher-substitute/ ├── backend/ │ ├── src/main/java/com/example/substitute/ │ │ ├── controller/ │ │ ├── service/ │ │ ├── mapper/ │ │ ├── entity/ │ │ └── config/ │ ├── src/main/resources/ │ │ └── application.yml │ └── pom.xml ├── frontend/ │ ├── src/ │ │ ├── api/ │ │ ├── views/ │ │ └── router/ │ ├── vite.config.ts │ └── package.json └── README.md

后端application.yml关键配置如下，数据库名用teachermanage，端口 8082，JWT 密钥自己换一个：

server: port: 8082 spring: datasource: url: jdbc:mysql://localhost:3306/teachermanage?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: "12345678" driver-class-name: com.mysql.cj.jdbc.Driver jackson: date-format: yyyy-MM-dd time-zone: Asia/Shanghai mybatis-plus: configuration: map-underscore-to-camel-case: true jwt: secret: "change-this-to-a-long-random-string" expire: 86400

前端vite.config.ts里配代理，解决跨域，同时让前端请求统一走/api前缀：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { '/api': { target: 'http://localhost:8082', changeOrigin: true } } } })

如果你在 Trae 里接的是外部模型服务，需要在设置里填三件套：Base URL、API Key、Model ID。以 TaoToken 为例，Base URL 填https://taotoken.net/api，API Key 在控制台创建，Model ID 按你选的模型填。Trae 的模型配置入口在设置里的「模型服务」或「自定义模型」，填完后点测试连接，返回 200 就说明通了。这一步不做，后面所有对话都无从谈起。

前端 API 封装建议统一加 Authorization 头，这是后面 401 报错的根因所在：

import axios from 'axios' const request = axios.create({ baseURL: '/api', timeout: 10000 }) request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) export default request

这段代码看着简单，但 Trae 第一版经常漏掉Bearer前缀或者漏掉整个拦截器，导致登录后请求仍然 401。把这段固定下来，能省很多排查时间。

4. 验证请求：代课申请到审批的端到端跑通与成功结果

配置就绪后，启动后端和前端，验证一次完整流程。后端启动命令：

cd backend mvn spring-boot:run

前端启动：

cd frontend npm install npm run dev

浏览器打开http://localhost:5173，用初始化管理员账号登录。登录接口返回的 token 会被存进localStorage，后续请求自动带上。然后进入代课申请页，填写被代课老师（下拉框应显示姓名）、课程、日期、时间段、原因，点提交。

提交成功后，数据库里应该出现一条status = PENDING的记录。你可以用下面这条 SQL 验证：

SELECT id, applicant_id, substitute_teacher_id, substitute_date, time_slot, status FROM substitute_application ORDER BY id DESC LIMIT 5;

接着用管理员账号进入审批页，点通过，状态变成APPROVED。再回到申请页刷新，能看到状态更新。如果此时你尝试对同一老师、同一天、同一时间段再提交一条申请，数据库唯一索引会拦截，后端返回冲突提示，这就是排课冲突处理生效的表现。

被代课老师下拉框的数据来源是teacher表，接口返回id和teacher_name，前端v-for绑定teacher_name作为显示文本、id作为值。如果显示的是数字，说明前端绑错了字段，或者后端返回的 JSON 里字段名对不上。Trae 生成时容易把teacherName和teacher_name混用，检查一下实体类的@TableField注解和前端取值即可。

审批接口的返回结构建议统一成{ code, message, data }，前端根据code判断成功失败。这样即使后面加更多状态，前端也不用大改。实测下来，这套结构跑通一次后，二次开发加字段、加角色都很顺。

5. 本篇常见错排查：401、下拉框显示数字与模型死循环

第一个高频报错是提交代课申请时返回401 Unauthorized，浏览器 F12 里能看到类似：

POST http://localhost:8082/api/applications 401 (Unauthorized) createApplication @ index.ts:22 submitApplication @ AdminView.vue:711

原因通常是前端登录后没把 token 存进localStorage，或者请求拦截器没加Authorization头，或者 token 过期。排查顺序：先看localStorage里有没有token，再看 Network 里请求头有没有Authorization: Bearer xxx，最后看后端 JWT 过滤器有没有放行登录接口、校验其他接口。Trae 有时会生成一个测试页面来验证 token 传递，这个思路可以借鉴，但别让它把测试代码留在生产分支里。

第二个问题是下拉框显示数字而不是老师姓名。根因是teacher表里teacher_name字段存的是空值或占位数字，或者前端绑定的是id。解决方式：先执行UPDATE teacher SET teacher_name = '张老师' WHERE id = 1;把真实姓名补上，再检查前端<el-option :label="item.teacherName" :value="item.id">的字段名是否和后端返回一致。Trae 对驼峰和下划线的转换偶尔会出错，手动核对一遍最稳。

第三个问题是底层模型出现死循环，写着写着从 MySQL 切到 H2 内存数据库，或者反复改同一个文件。这通常是上下文丢失导致的。应对方式：一是把关键约束写进项目根目录的README.md或.trae/rules文件，让 Trae 每次都能读到；二是分模块对话，别一次性让它改太多文件；三是发现跑偏立刻手动停止，重新用简短指令拉回来。我试过在提示词里明确写「数据库固定使用 MySQL，禁止切换 H2」，之后这类问题明显减少。

还有一个容易忽略的报错是local proxy failed，一般出现在 Trae 连接外部模型服务时。检查 Base URL 是否填了完整路径、网络是否可达、API Key 是否有效。如果用的是 TaoToken，Base URL 用https://taotoken.net/api，不要多加斜杠或路径。OAuth 相关报错则多见于 Claude Code 类工具，需要确认授权回调地址和 token 有效期。

6. 继续开发与接入建议

跑通一次之后，你可以按学校实际规则扩展：加请假类型、加代课课时统计、加导出 Excel、加消息通知。每次扩展前，先让 Trae 更新表设计，确认后再改代码，别跳过设计直接写。源代码结构上面已经给全，关键配置和 SQL 都能直接复制，剩下的就是按你的业务填字段。

如果你在接入模型服务时需要创建 Key 或查看用量，可以走这几个入口：模型对话在https://taotoken.net/api对应的控制台里体验，API Keys 在控制台的密钥管理页创建，接入文档在文档中心，长期做编码和 Agent 任务可以看 Coding Plan。排障和接入问题优先查 API Keys 和接入文档，验证模型效果用模型对话，长期编码用 Coding Plan。

最后留一个实用技巧：把每次和 Trae 确认过的表结构、接口约定、字段命名规则写进项目里的docs/design.md，下次对话时直接让它读这个文件。这样即使换模型、换会话，上下文也不会丢，项目能一直沿着你定的方向走。