ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

AI 编程 Trae 重大更新:用 Trae + TaoToken 配置图书借阅网站实战

AI 编程 Trae 重大更新:用 Trae + TaoToken 配置图书借阅网站实战 1. Trae 更新后为什么我建议把模型通道统一到 TaoTokenTrae 是字节推出的 AI 编程工具更新后内置支持了 GLM-4.6 这类国产模型Builder 模式能从零搭建完整项目Chat 模式适合改 Bug 和局部重构。它适合谁适合想用自然语言快速把想法变成可运行代码的开发者尤其是做 MVP 验证、课程作业、内部小工具的场景。但实际用下来会遇到一个现实问题Trae 里切换模型、管理不同厂商的 Key时间一长就乱。今天用 GLM-4.6明天想对比另一个模型Key 散落在各处项目配置也跟着改来改去。我的做法是把模型调用统一走 TaoToken 的 API 通道Trae 侧只认一个 base_url 和一个 Key换模型只改模型名不动其他配置。这篇就以「图书借阅网站」为落地场景交付一份可复制的 settings.json 配置骨架、Trae 项目初始化步骤以及借阅、归还、查询三个功能的验证动作。你跟着做能复现一个前后端分离、MySQL 存储、GLM-4.6 驱动的借阅系统 MVP。TaoToken 在这里的角色是统一 Key/API 通道官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口 https://taotoken.net/api 。它不替代 Trae 的编辑器能力只负责把模型请求收敛到一个出口方便你在 Trae 里稳定调用 GLM-4.6。2. 前置准备TaoToken Key 与 Trae 项目初始化2.1 拿到统一 Key先到 TaoToken 控制台创建 API Key入口在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。创建后复制那串 Key后面写进 Trae 的模型配置里。注意 Key 只显示一次建议先存到本地密码管理器。如果你还没决定用哪个模型可以先在模型对话页试一下 GLM-4.6 的响应风格入口 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。确认能正常出结果再回到 Trae 里配置能少走弯路。2.2 本地建目录并打开 Trae在本地建一个文件夹命名 books。打开 Trae点「文件 - 打开文件夹」选中 books。右下角聊天框会让你选模式Builder 模式适合从 0 搭建图书借阅系统这种全新项目就用它。Chat 模式适合已有项目的 Bug 修复和局部修改等第一版跑起来后再切过去调样式。2.3 数据库先建好本地 MySQL 建库 books字符集用 utf8mb4。连接信息按你本机实际情况填示例里用 localhost:3306、root、密码 12345678。建库语句CREATE DATABASE books DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;这一步别省。Trae 生成的后端代码会直接连这个库库不存在的话启动就报连接错误排查起来反而费时间。3. 可复制配置settings.json 骨架与 Trae 模型接入3.1 settings.json 配置骨架Trae 的模型接入配置放在项目根目录的 settings.json 里。下面这份骨架可以直接复制把 apiKey 换成你自己的model 按需切换{ ai: { provider: openai-compatible, baseUrl: https://taotoken.net/api, apiKey: sk-你的TaoTokenKey, model: glm-4.6, temperature: 0.3, maxTokens: 4096, timeout: 60000 }, project: { name: books, frontend: vue3, backend: spring-boot, database: { host: localhost, port: 3306, user: root, password: 12345678, name: books } } }几个参数说明一下。baseUrl 固定指向 https://taotoken.net/api 不加任何多余路径。model 写 glm-4.6想换模型只改这一行。temperature 设 0.3 是因为代码生成需要稳定太高会飘。timeout 给 60 秒生成完整后端代码时响应会久一点。注意apiKey 不要提交到 Git。建议在 .gitignore 里加上 settings.json或者用环境变量注入。3.2 在 Trae 里绑定配置配置写好后在 Trae 的设置里找到模型配置项选择 OpenAI 兼容协议把 baseUrl 和 Key 填进去。如果 Trae 版本支持读取项目级 settings.json它会自动加载不支持的话手动填一次即可。绑定完成后在 Trae 聊天框里发一句「用一句话说明你当前使用的模型」看返回是否正常。这一步是快速验证通道是否打通比直接生成项目再报错要省事。3.3 项目初始化提示词Builder 模式下把下面这段提示词发给 Trae请编写一个图书借阅网站实现图书的借阅功能。需要包含完整的前端和后端代码要求项目自测通过可以正常运行。 核心功能 1. 打开网站显示图书列表左侧图书分类中间上为搜索框、下为图书列表 2. 管理图书基本信息书名、作者、编码、分类 3. 搜索图书 4. 借阅登记用户手机号 5. 图书归还 设计要求 1. 现代简约风格参照苹果风格 2. 页面交互友好 初始化 1. 先输出表设计、系统设计文档 2. 数据库localhost:3306root12345678库名 books 3. 技术选型前端 Vue3后端 Spring Boot数据库 MySQL发送后 Trae 会先输出设计文档再逐步生成代码。第一版跑起来后再发配色调整提示词比如主按钮用 #007BFF、背景纯白 #FFFFFF、文字 #333333并强调「不改变整体布局只修改配色」。4. 验证请求借阅、归还、查询三个动作4.1 启动项目并确认接口后端启动后先确认服务端口默认 8080。前端 Vue 项目 npm run dev 起在 5173。打开浏览器访问前端地址能看到图书列表就说明前后端连通了。如果列表空白先看浏览器 Network 里 /api/books 请求的返回。常见情况是后端没起、跨域没配、或者数据库表没建。跨域在后端加 CrossOrigin 或全局配置即可。4.2 借阅功能验证在图书列表点「借阅」弹窗输入手机号提交。预期结果是借阅记录写入 borrow 表图书状态变为已借出。验证 SQLSELECT b.id, b.title, r.phone, r.borrow_time FROM book b JOIN borrow_record r ON b.id r.book_id WHERE r.status BORROWED;能查到刚提交的手机号和借阅时间说明借阅链路通了。如果查不到检查前端请求体字段名和后端 RequestBody 的字段是否一致这是最常见的错。4.3 归还功能验证在借阅记录里点「归还」预期 borrow_record 的 status 改为 RETURNED同时 book 表对应图书状态回到可借。验证UPDATE borrow_record SET status RETURNED, return_time NOW() WHERE id ?;执行后刷新页面图书列表里那本书应该重新可借。如果状态没变看后端事务有没有提交或者前端调用的接口路径是不是写错了。4.4 查询功能验证搜索框输入书名关键词预期返回模糊匹配结果。后端 SQL 类似SELECT * FROM book WHERE title LIKE CONCAT(%, ?, %);输入「三体」能出结果、输入不存在的词返回空列表就算通过。分类筛选同理左侧分类点击后带 category_id 参数请求列表接口。5. 本篇常见错排查5.1 模型请求 401 或 403先检查 settings.json 里的 apiKey 是否完整复制有没有多余空格。再确认 baseUrl 是 https://taotoken.net/api 不要在后面加 /v1 或其他路径。如果 Key 没问题到控制台看下额度是否充足入口 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。5.2 模型名写错导致 404model 字段必须和平台支持的名称一致GLM-4.6 就写 glm-4.6。大小写、连字符都要对。写错时接口会返回模型不存在Trae 侧表现为生成中断。改回正确名称即可。5.3 数据库连接失败报错通常是 Access denied 或 Unknown database。先确认 books 库已建再确认用户名密码和 settings.json 里一致。MySQL 8 还要注意驱动版本Spring Boot 项目里 mysql-connector-java 版本太低会连不上。5.4 前端请求跨域浏览器控制台报 CORS 时在后端加全局跨域配置允许 5173 来源。开发阶段也可以在前端 vite.config.js 里配 proxy把 /api 转发到 8080这样最省事。5.5 Trae 生成代码不完整Builder 模式一次生成内容较多时可能中途截断。这时候切到 Chat 模式把缺失的文件名和功能点告诉它让它补全。别重新生成整个项目容易覆盖已有代码。6. 长期编码与 Agent 场景的通道选择如果你只是偶尔用 Trae 写个小项目按上面的 settings.json 配一次就够。但如果你长期用 Trae 做编码、跑 Agent 任务、频繁切换模型对比效果建议把通道固定到 TaoToken 的 Coding Plan入口 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。它的好处是 Key 和额度统一管理Trae 侧配置不用反复改换模型只动 model 字段。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 里面有各语言的调用示例和参数说明。Claude Code 相关的接入参考 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 如果你同时用多个编码工具统一通道能省不少切换成本。回到图书借阅这个项目第一版跑通后你可以继续用 Chat 模式加功能借阅超期提醒、用户借阅历史、图书封面上传。每次加功能前先让 Trae 输出改动点确认后再让它写代码比一次性大改要稳。数据库记得定期备份books 库不大mysqldump 一条命令的事。
返回列表