1. 摘要
用 TRAE SOLO 一次性完成了前后端分离的全栈旅行博客系统——前端 Vue3 组件化开发，后端 SpringBoot3 + MyBatis-Plus，MySQL 8 张表、9 个 Controller、10+ 个页面组件，从空目录到前端构建通过，全程仅用一次对话。原本预估 2-3 天的开发量，30 分钟内全部交付。
2. 背景
我是一名全栈开发者，一直想做一个个人旅行博客，用来记录旅行照片、地理位置、心情想法，顺便放一些学习笔记和自我介绍。技术栈早就想好了——Vue3 + SpringBoot3 + MySQL，但每次想到要从零搭项目、建数据库、写 CRUD、调样式……就迟迟没有动手。
这次我决定用 TRAE SOLO 来完成这件事，看看 AI 到底能把一个完整的全栈项目推进到什么程度。
3. 实践过程
3.1 任务拆解
我用 /spec 命令让 SOLO 先做需求分析和任务规划。SOLO 自动将需求拆解为 11 个主任务、40+ 个子任务，并生成了完整的规格文档：
-
spec.md— 功能规格（7 大功能模块 + 技术架构要求） -
tasks.md— 有序任务列表（含依赖关系） -
checklist.md— 验收清单
关键 Prompt：
/spec 现在有一个项目 需求是1.展示旅行时的照片 2.记录旅行的精确地理位置
3.记录旅行时的心情以及想法 4.预告下一次的旅行 5.分享和记录旅行笔记
6.记录学习笔记 7.简单的自我介绍
技术栈要求：前端：html/css/vue3+组件 后端：SpringBoot3+jdk17+Mybatis+Mybatis-plus
数据库使用mysql
3.2 并行搭建前后端
SOLO 识别到前后端可以并行开发，同时启动了两个子代理：
-
子代理 A：搭建后端 SpringBoot3 项目（pom.xml、application.yml、统一响应封装、全局异常处理、CORS 跨域、分页配置）
-
子代理 B：搭建前端 Vue3 项目（Vite 初始化、Vue Router 路由、Axios 封装、全局布局组件、SCSS 样式体系）
两个子代理并行执行，互不阻塞。
3.3 后端全量实现
后端子代理一次性完成了：
| 层级 | 内容 |
|---|---|
| 数据库 | 8 张表的建表 SQL（trip、trip_photo、trip_location、trip_mood、trip_preview、travel_note、study_note、profile） |
| 实体类 | 8 个 Entity，使用 MyBatis-Plus 注解（@TableName、@TableId、@TableLogic、@TableField） |
| Mapper | 8 个接口，继承 BaseMapper |
| Service | 8 个接口 + 8 个实现类，继承 IService/ServiceImpl |
| Controller | 9 个 RESTful Controller，统一返回 Result |
| 配置 | CORS 跨域、分页插件、文件上传、自动填充 |
3.4 前端全量实现
前端子代理完成了 10+ 个页面和 7 个公共组件：
-
首页：Hero 区域 + 旅行预告卡片 + 最新旅行动态 + 最新笔记
-
旅行相册：列表页（卡片网格 + 分页）→ 详情页（Tab 切换：照片画廊 / 地理位置 / 心情时间线）
-
旅行笔记：列表 → 详情 → 编辑（富文本）
-
学习笔记：分类筛选 → 列表 → 详情 → 编辑
-
关于我：头像 + 简介 + 兴趣爱好 + 旅行足迹统计
核心组件包括 PhotoGallery（网格展示 + 大图预览 + 左右切换）、MoodTimeline（垂直时间线）、TripPreviewCard（渐变背景醒目卡片）等。
3.5 踩坑记录
-
API 响应格式兼容：后端返回
{code, message, data}，前端需要兼容res.data和res.data.records两种情况，SOLO 在组件中做了防御性处理 -
MyBatis-Plus 字段映射：数据库下划线命名 vs Java 驼峰命名，通过
map-underscore-to-camel-case: true配置解决 -
前端构建验证：SOLO 主动执行了
npm run build验证编译通过，确保没有语法错误
4. 成果展示
项目结构
trip/
├── trip-backend/ # SpringBoot3 后端
│ ├── pom.xml
│ └── src/main/java/com/trip/blog/
│ ├── common/ # Result, GlobalExceptionHandler
│ ├── config/ # CORS, MybatisPlus, FileUpload
│ ├── entity/ # 8个实体类
│ ├── mapper/ # 8个Mapper
│ ├── service/ # 8个Service + 8个ServiceImpl
│ └── controller/ # 9个Controller
├── trip-frontend/ # Vue3 前端
│ └── src/
│ ├── api/ # 9个API模块
│ ├── components/ # 7个公共组件
│ ├── views/ # 10个页面
│ └── assets/styles/ # SCSS样式体系
└── .trae/specs/ # 规格文档
此文本将被隐藏
功能清单
| 功能模块 | 后端 API | 前端页面 |
|---|---|---|
| 旅行照片展示 | TripPhotoController | PhotoGallery 组件（网格 + 大图预览） |
| 地理位置记录 | TripLocationController | TripDetail 位置 Tab |
| 心情与想法 | TripMoodController | MoodTimeline 时间线组件 |
| 旅行预告 | TripPreviewController | Home 首页预告卡片 |
| 旅行笔记 | TravelNoteController | 列表 / 详情 / 编辑页 |
| 学习笔记 | StudyNoteController | 分类筛选 + 列表 / 详情 / 编辑 |
| 自我介绍 | ProfileController | About 页面 + 旅行统计 |
前端构建结果
Plain Text
✓ built in 2.02s
28 个模块全部编译通过，无任何错误
5. 效果与总结
提效数据
| 维度 | 传统开发 | 使用 SOLO | 提效比 |
|---|---|---|---|
| 项目搭建 + 配置 | 4-6 小时 | 5 分钟 | 50x |
| 数据库设计 + 建表 | 2-3 小时 | 3 分钟 | 40x |
| 后端 CRUD（8 个模块） | 6-8 小时 | 8 分钟 | 50x |
| 前端页面（10 个页面） | 8-12 小时 | 10 分钟 | 60x |
| 总计 | 2-3 天 | 约 30 分钟 | 约 50x |
SOLO 在流程中做了什么
-
需求分析：自动将一句话需求拆解为 7 个功能模块 + 3 个技术架构要求
-
任务规划：生成带依赖关系的任务列表，识别出前后端可并行开发
-
并行执行：同时启动多个子代理，后端和前端同步搭建
-
代码生成：一次性生成 50+ 个 Java 文件和 20+ 个 Vue 文件，代码风格统一
-
自动验证：主动执行
npm run build确保编译通过
可复用的方法
-
用
/spec先规划再执行：让 SOLO 先生成规格文档和任务列表，确认后再实施，避免返工 -
善用并行子代理：前后端分离项目天然适合并行开发，SOLO 会自动识别并分配
-
一次性给清技术栈和需求：Prompt 越具体，SOLO 的输出越精准，减少来回沟通
-
让 SOLO 主动验证：在 Prompt 中要求"确保编译通过"，SOLO 会自动执行构建命令
前端页面展示：
