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) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;注意那个唯一索引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端口 8082JWT 密钥自己换一个server: port: 8082 spring: datasource: url: jdbc:mysql://localhost:3306/teachermanage?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/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/apiAPI 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 :labelitem.teacherName :valueitem.id的字段名是否和后端返回一致。Trae 对驼峰和下划线的转换偶尔会出错手动核对一遍最稳。第三个问题是底层模型出现死循环写着写着从 MySQL 切到 H2 内存数据库或者反复改同一个文件。这通常是上下文丢失导致的。应对方式一是把关键约束写进项目根目录的README.md或.trae/rules文件让 Trae 每次都能读到二是分模块对话别一次性让它改太多文件三是发现跑偏立刻手动停止重新用简短指令拉回来。我试过在提示词里明确写「数据库固定使用 MySQL禁止切换 H2」之后这类问题明显减少。还有一个容易忽略的报错是local proxy failed一般出现在 Trae 连接外部模型服务时。检查 Base URL 是否填了完整路径、网络是否可达、API Key 是否有效。如果用的是 TaoTokenBase 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下次对话时直接让它读这个文件。这样即使换模型、换会话上下文也不会丢项目能一直沿着你定的方向走。