Vibe Coding 实战：路线规划工具开发全攻略

一、项目概述

本文将详细介绍如何基于 Spring Boot + Vue + 高德地图 API 开发一个完整的路线规划工具。通过本文，你将学会如何利用 AI 辅助编程（Vibe Coding）快速完成项目开发与调试。

二、如何提问与使用

2.1 有效提问技巧

在开发过程中，向 AI 助手提出清晰、具体的问题是高效开发的关键：

❌ 不好的提问："帮我做一个地图应用"

✅ 好的提问："基于当前 Spring Boot 项目，添加一个使用高德地图的轨迹展示页面，要求：1) 从后端接口获取轨迹点 2) 在地图上绘制轨迹路线 3) 标记起点和终点"

2.2 提问结构建议

复制代码

1. 目标描述：明确要实现的功能
2. 技术约束：使用的框架、语言、API等
3. 输入输出：需要处理的数据格式、接口规范
4. 特殊要求：样式、交互、性能等

2.3 典型提问示例

bash 复制代码

# 添加日志配置
"添加日志配置文件，配置日志保存在文件中"

# 修复内存溢出问题
"优化 batchCompareAllRoutes 方法，解决 OutOfMemoryError 错误"

# 添加新功能
"在 map.html 增加坐标拾取功能，将拾取的点坐标通过接口 /api/waypoints/polyline 批量保存"

# 修复接口调用问题
"/api/route/driving 接口请求方式不对，参数也检查下"

三、项目开发实战

3.1 项目初始化

首先，让 AI 助手帮我们创建一个基础的 Spring Boot 项目结构：

bash 复制代码

"创建一个 Spring Boot 项目，包含以下依赖：
- Spring Web
- MyBatis Plus
- MySQL 驱动
- Lombok
- SpringDoc OpenAPI"

3.2 数据库设计

bash 复制代码

"设计路线规划工具的数据库表结构，包含：
1. 最优路径表（consume_tally_optimal_rule）
2. 轨迹点表（optimal_route_track）
3. 必经点表（route_waypoint）
4. 路线规划记录表（route_record）
5. 路线比对结果表（route_compare_result）"

3.3 后端接口开发

步骤1：创建实体类

bash 复制代码

"创建 ConsumeTallyOptimalRule 实体类，包含字段：
- id、enterPosition、exitPosition、vehicleAxles、vehiclePlate、consumeMonetery、exitTime、state"

步骤2：创建 Mapper 接口

bash 复制代码

"创建 ConsumeTallyOptimalRuleMapper，继承 BaseMapper"

步骤3：创建 Service 层

bash 复制代码

"创建 ConsumeTallyOptimalRuleService 接口和实现类，包含分页查询方法"

步骤4：创建 Controller

bash 复制代码

"创建 ConsumeTallyOptimalRuleController，提供 REST API：
- GET /api/optimal-rule/{id}
- GET /api/optimal-rule/page
- POST /api/optimal-rule"

3.4 核心业务功能开发

功能1：路线比对

bash 复制代码

"实现 batchCompareAllRoutes 方法：
1. 分页查询所有路线
2. 对每条路线调用高德地图路径规划
3. 使用 Fréchet 距离算法比对轨迹一致性
4. 保存比对结果到数据库"

功能2：路径规划

bash 复制代码

"实现 /api/route/driving 接口：
1. 接收起点和终点坐标
2. 调用高德地图驾车路径规划 API
3. 返回规划路线的坐标点序列"

功能3：坐标拾取与保存

bash 复制代码

"实现 /api/waypoints/polyline 接口：
1. 接收路径ID和坐标串
2. 解析坐标串并批量保存必经点
3. 返回保存结果"

3.5 前端页面开发

页面1：路线列表页

bash 复制代码

"创建 index.html 页面，包含：
1. 分页展示路线列表
2. 搜索筛选功能（入口、出口、车轴数、状态）
3. 查看路线和比对路线按钮"

页面2：地图展示页

bash 复制代码

"创建 map.html 页面，包含：
1. 高德地图初始化
2. 轨迹路线绘制
3. 坐标拾取功能
4. 必经点保存"

页面3：路线比对页

bash 复制代码

"创建 compare.html 页面，包含：
1. 同时展示轨迹路线和规划路线
2. 路线一致性比对结果展示"

四、调试技巧

4.1 后端调试

日志排查

bash 复制代码

# 检查日志配置
"查看当前 logback-spring.xml 配置"

# 添加调试日志
"在 RoutePlanningServiceImpl 的关键方法中添加详细日志"

断点调试

bash 复制代码

"在 IDE 中设置断点：
1. RoutePlanningServiceImpl.compareSingleRoute 方法入口
2. AmapApiClient.drivingRoutePlanning 方法
3. Controller 的接口入口"

4.2 前端调试

控制台日志

打开浏览器开发者工具（F12），查看 Console 面板：

javascript 复制代码

console.log('轨迹点数据:', trackRes.data)
console.log('转换后的轨迹点:', this.trackPoints)

网络请求调试

在 Network 面板中查看：

请求 URL 和参数是否正确
响应状态码和响应体
请求头是否包含正确的 Content-Type

地图渲染调试

javascript 复制代码

// 在关键位置添加调试信息
console.log('像素点数量:', pixelPoints.length)
console.log('绘制条件:', {map: !!this.map, ctx: !!this.ctx})

4.3 常见问题排查

问题1：ID 精度丢失

bash 复制代码

# 现象：前端接收到的 ID 与数据库不一致
# 原因：JavaScript Number 类型精度限制
# 解决方案：后端使用 String 类型接收，BigInteger 转换
"修复 ID 精度丢失问题，后端接口改为 String 类型接收"

问题2：地图不显示

bash 复制代码

# 现象：地图容器为空，控制台报错
# 排查步骤：
1. 检查高德 API Key 是否正确
2. 检查脚本加载是否成功
3. 检查容器元素是否存在
"检查 map.html 中的高德地图 API 配置"

问题3：接口请求失败

bash 复制代码

# 现象：控制台显示 404 或 500 错误
# 排查步骤：
1. 检查请求 URL 是否正确
2. 检查请求方法是否匹配（GET/POST）
3. 检查参数格式是否正确
"检查 compare.html 中的 /api/route/driving 接口调用"

五、部署与运行

5.1 编译打包

bash 复制代码

cd e:\IdeaProjects\hly_routetool
mvn clean package -DskipTests

5.2 启动应用

bash 复制代码

java -jar target/hly_routetool-1.0.0-SNAPSHOT.jar

5.3 访问地址

页面	URL
路线列表	http://localhost:8080/routetool/index.html
地图展示	http://localhost:8080/routetool/map.html?id={routeId}
路线比对	http://localhost:8080/routetool/compare.html?id={routeId}
API 文档	http://localhost:8080/routetool/doc.html

六、总结

通过 Vibe Coding 的方式，我们高效地完成了一个完整的路线规划工具开发，包括：

后端服务：Spring Boot + MyBatis Plus + MySQL
前端页面：Vue + Element UI + 高德地图 API
核心功能：轨迹展示、路线规划、坐标拾取、路线比对

关键是循序渐进，数据库表驱动方式开发，表设计好，让AI基于表生成对应的接口，再生成每个功能页面，页面指定具体调用哪个接口，AI会基于接口数据格式开发，成功率也更高。

关键技巧

提问要具体：明确目标、约束和输入输出
利用 AI 的代码能力：让 AI 生成重复的样板代码
分阶段验证：每完成一个功能就测试验证
善用调试工具：IDE 断点、浏览器控制台、日志