1. 项目概述
这个Java Web公交线路查询系统是一个典型的全栈开发项目，采用当前主流的技术栈组合：SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0。系统主要解决城市公交线路信息的数字化查询需求，为乘客提供便捷的线路检索、站点查询和换乘方案等功能。
我在实际开发这类交通信息系统时发现，核心难点不在于基础CRUD功能的实现，而在于如何高效处理公交网络这种图数据结构，以及如何优化前后端数据交互效率。这个技术栈的选择非常符合当前企业级应用开发的主流趋势：
- SpringBoot2提供了快速构建后端服务的脚手架
- Vue3作为前端框架具有优秀的响应式特性
- MyBatis-Plus极大简化了数据库操作
- MySQL8.0在JSON处理和窗口函数方面的增强特别适合此类场景
2. 技术架构解析
2.1 后端技术选型
SpringBoot2作为基础框架，我通常会配置以下核心依赖：
<dependencies> <!-- Web支持 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- MyBatis-Plus集成 --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.1</version> </dependency> <!-- MySQL驱动 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <!-- 其他必要依赖... --> </dependencies>注意：MySQL8.0需要特别注意时区配置，建议在连接URL中添加
serverTimezone=Asia/Shanghai参数
2.2 前端技术方案
Vue3的组合式API相比Options API更适合复杂交互场景。在公交查询系统中，我会这样组织核心模块：
// 线路查询组件 import { ref, computed } from 'vue' import { useRouteStore } from '@/stores/route' export default { setup() { const routeStore = useRouteStore() const searchParams = ref({ start: '', end: '', time: new Date() }) const routes = computed(() => routeStore.getRoutes(searchParams.value)) return { searchParams, routes } } }2.3 数据库设计要点
公交系统的核心是站点和线路的网状关系。MySQL8.0的表设计示例：
CREATE TABLE `bus_stop` ( `id` bigint NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, `location` point NOT NULL SRID 4326, `address` varchar(100) DEFAULT NULL, PRIMARY KEY (`id`), SPATIAL KEY `idx_location` (`location`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; CREATE TABLE `bus_route` ( `id` bigint NOT NULL AUTO_INCREMENT, `route_name` varchar(50) NOT NULL, `route_code` varchar(20) NOT NULL, `stops` json DEFAULT NULL COMMENT '站点ID序列', PRIMARY KEY (`id`), UNIQUE KEY `uk_route_code` (`route_code`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;提示：MySQL8.0的JSON类型和空间索引特别适合存储线路数据和地理位置查询
3. 核心功能实现
3.1 线路查询算法
公交网络本质是图结构，我通常采用改进的Dijkstra算法实现最短路径查询：
public List<RoutePlan> findRoutes(Long startStopId, Long endStopId, LocalDateTime departTime) { // 1. 构建换乘图 TransitGraph graph = buildTransitGraph(departTime); // 2. 执行算法 DijkstraEngine engine = new DijkstraEngine(graph); List<TransitPath> paths = engine.findPaths(startStopId, endStopId); // 3. 结果转换 return paths.stream() .map(this::convertToRoutePlan) .sorted(Comparator.comparingInt(RoutePlan::getTotalTime)) .limit(5) .collect(Collectors.toList()); }实际项目中还需要考虑：
- 首末班车时间约束
- 步行换乘距离
- 实时交通状况
3.2 前后端交互设计
采用RESTful API规范设计接口，关键接口示例：
| 接口路径 | 方法 | 描述 | 参数示例 |
|---|---|---|---|
/api/routes/query | POST | 线路查询 | {start: "北京西站", end: "颐和园"} |
/api/stops/nearby | GET | 附近站点 | ?lat=39.9&lng=116.3&radius=500 |
/api/routes/{id} | GET | 线路详情 | - |
前端使用axios封装请求：
const api = axios.create({ baseURL: import.meta.env.VITE_API_BASE, timeout: 10000 }) // 请求拦截器 api.interceptors.request.use(config => { if (store.state.token) { config.headers.Authorization = `Bearer ${store.state.token}` } return config })4. 性能优化实践
4.1 数据库优化
- 空间索引优化：对站点位置字段建立SPATIAL索引
ALTER TABLE bus_stop ADD SPATIAL INDEX(location);- 查询缓存：对热点查询结果缓存
@Cacheable(value = "routePlan", key = "#startStopId+'-'+#endStopId") public List<RoutePlan> getCachedRoutes(Long startStopId, Long endStopId) { return routeRepository.findRoutes(startStopId, endStopId); }4.2 前端性能技巧
- 使用Vue的keep-alive缓存路由组件：
<router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" /> </keep-alive> </router-view>- 对地图组件懒加载：
const MapComponent = defineAsyncComponent(() => import('./components/MapView.vue') )5. 部署与运维
5.1 后端部署
推荐使用Docker Compose部署：
version: '3' services: app: image: openjdk:11-jre ports: - "8080:8080" volumes: - ./app.jar:/app.jar command: ["java", "-jar", "/app.jar"] depends_on: - mysql mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: bus_system ports: - "3306:3306" volumes: - ./mysql-data:/var/lib/mysql5.2 前端部署
Vue项目构建优化：
# 安装依赖时指定生产环境 npm install --production # 构建时开启Gzip压缩 vite build --mode productionNginx配置示例：
server { listen 80; server_name bus.example.com; gzip on; gzip_types text/plain application/javascript application/x-javascript text/css; location / { root /var/www/bus-system; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; } }6. 常见问题解决
6.1 MySQL时区问题
症状：数据库时间与Java应用时间不一致
解决方案：
- 在JDBC连接字符串添加时区参数：
jdbc:mysql://localhost:3306/bus_system?serverTimezone=Asia/Shanghai- 在SpringBoot配置中设置：
spring.jpa.properties.hibernate.jdbc.time_zone=Asia/Shanghai6.2 Vue路由刷新404
问题：生产环境刷新页面返回404
解决：配置Nginx fallback到index.html
location / { try_files $uri $uri/ /index.html; }6.3 MyBatis-Plus批量插入性能
优化方案：
// 启用批量操作 @Configuration public class MyBatisConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return interceptor; } } // 使用Service的saveBatch方法 routeService.saveBatch(routes, 1000); // 每批1000条7. 项目文档要点
完善的文档应包含：
- 接口文档：使用Swagger或Apifox生成
@RestController @RequestMapping("/api/routes") @Tag(name = "线路管理") public class RouteController { @GetMapping("/{id}") @Operation(summary = "获取线路详情") public Result<RouteVO> getRoute(@PathVariable Long id) { // ... } }数据库字典：包含所有表结构的详细说明
部署手册：从环境准备到启动的完整流程
二次开发指南：代码规范、分支策略等
我在实际项目中总结的文档编写经验：
- 使用MkDocs等工具生成美观的文档网站
- 为每个接口添加真实的请求/响应示例
- 对复杂业务逻辑添加流程图说明
- 维护CHANGELOG记录重要变更
8. 扩展功能建议
基于核心系统可以扩展：
实时公交功能：
- 接入GPS数据接口
- 使用WebSocket推送实时位置
@GetMapping("/realtime/{routeId}") public SseEmitter streamRealtimeData(@PathVariable String routeId) { SseEmitter emitter = new SseEmitter(); realtimeService.addEmitter(routeId, emitter); return emitter; }智能推荐系统：
- 基于历史查询数据推荐热门线路
- 使用协同过滤算法实现个性化推荐
移动端适配：
- 开发微信小程序版本
- 使用uni-app跨平台方案
管理后台增强：
- 线路调整的版本控制
- 操作审计日志
这个技术栈的组合为系统扩展提供了良好基础，SpringBoot的模块化设计使得添加新功能非常方便，Vue3的Composition API也让前端复杂状态的管理更加可控。
