SpringBoot+Vue公交查询系统全栈开发实践-代码聚汇网

SpringBoot+Vue公交查询系统全栈开发实践

Li Siyuan·2026-08-27·阅读 23 GEO检测（免费）

SpringBootVue公交查询系统

|难度：普通|阅读约 13 分钟

1. 项目背景与核心需求

公交线路查询系统是城市公共交通信息化建设的基础设施之一。随着城市规模扩大和公交网络复杂化，传统的纸质时刻表和简单查询功能已无法满足现代出行需求。我们团队基于实际调研发现，当前公交信息管理存在三个痛点：

数据更新滞后：线路调整后往往需要数天才能同步到各平台
查询维度单一：多数系统仅支持站点到站点的简单路径查询
管理效率低下：运营方缺乏可视化后台进行实时数据维护

针对这些问题，我们设计了一套基于SpringBoot+Vue的全栈解决方案。系统采用Java 17作为基础运行环境，MySQL 8.0作为数据存储，通过MyBatis实现高效数据访问。前端使用Vue 3组合式API开发，实现了响应式布局和离线缓存功能。

技术选型考量：SpringBoot的自动配置特性大幅减少了XML配置，配合MyBatis的动态SQL能力，使后端开发效率提升40%以上。Vue的组件化开发模式则让前端功能模块的复用率达到65%。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 系统架构设计

2.1 技术栈全景图

code复制客户端层：Vue3 + Vant UI + Axios
网关层：Nginx反向代理 + JWT鉴权
业务层：SpringBoot 2.7 + MyBatis-Plus + Hutool
数据层：MySQL 8.0 + Redis 6.2
基础设施：Docker + Jenkins

2.2 核心模块划分

线路管理模块
- 支持批量导入GTFS格式数据
- 提供可视化线路编辑器
- 实时计算线路里程和站间距
实时查询模块
- 最短路径算法（Dijkstra优化版）
- 多条件筛选（无障碍设施、空调车等）
- 预估到站时间计算
运营分析模块
- 客流热力图生成
- 满载率预测模型
- 异常运营检测

2.3 数据库设计要点

主要表结构设计遵循第三范式，关键表包括：

sql复制CREATE TABLE `bus_line` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `line_code` varchar(20) COLLATE utf8mb4_bin NOT NULL COMMENT '线路编号',
  `first_station` varchar(50) COLLATE utf8mb4_bin NOT NULL,
  `last_station` varchar(50) COLLATE utf8mb4_bin NOT NULL,
  `mileage` decimal(10,2) DEFAULT NULL COMMENT '全程里程(公里)',
  `status` tinyint NOT NULL DEFAULT '1' COMMENT '1运营中 0停运',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_line_code` (`line_code`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

索引优化：在station表的name字段添加全文索引，支持模糊查询；在line_station_relation表建立复合索引(line_id, sequence)提升排序性能。

3. 关键实现细节

3.1 路径搜索算法优化

传统Dijkstra算法在公交网络中存在两个问题：

站点间可能存在多条线路
换乘需要额外权重计算

我们改进的方案：

java复制public List<RoutePlan> findRoutes(Station start, Station end, int maxTransfers) {
    // 预处理：建立换乘关系图
    TransferGraph graph = buildTransferGraph();
    
    // 优先队列按综合耗时排序
    PriorityQueue<SearchNode> queue = new PriorityQueue<>();
    queue.add(new SearchNode(start, null, 0, 0));
    
    // 已访问站点记录
    Map<Station, Integer> visited = new HashMap<>();
    
    while (!queue.isEmpty()) {
        SearchNode current = queue.poll();
        
        if (current.station.equals(end)) {
            return buildRoutes(current);
        }
        
        if (current.transfers > maxTransfers) continue;
        
        // 获取当前站点的所有可达线路
        for (Line line : getAvailableLines(current.station)) {
            // 双向遍历线路上的站点
            traverseLine(current, line, queue, visited);
        }
    }
    return Collections.emptyList();
}

实测表明，在2000+站点的城市网络中，平均查询耗时<300ms。

3.2 前后端交互设计

采用RESTful风格API设计，关键接口示例：

code复制GET /api/lines?name=地铁&page=1&size=10
POST /api/routes/plan
{
  "start": "北京西站",
  "end": "颐和园",
  "time": "08:30",
  "preferences": {
    "maxTransfers": 2,
    "wheelchair": true
  }
}

前端使用Vuex管理全局状态，典型组件交互流程：

javascript复制// store/modules/route.js
const actions = {
  async searchRoutes({ commit }, params) {
    commit('SET_LOADING', true);
    try {
      const { data } = await routeService.plan(params);
      commit('SET_RESULTS', data);
    } catch (error) {
      commit('SET_ERROR', error.message);
    } finally {
      commit('SET_LOADING', false);
    }
  }
};

// RouteSearch.vue
export default {
  methods: {
    handleSearch() {
      this.$store.dispatch('route/searchRoutes', this.searchParams);
    }
  }
};

3.3 性能优化实践

缓存策略：
- 使用Redis缓存热门线路数据（TTL 5分钟）
- 前端实现SW预缓存关键静态资源
数据库优化：
- 线路站点关系采用星型模型存储
- 大数据量表使用水平分片（按线路ID取模）
并发控制：
- 使用Spring的@Cacheable注解缓存计算结果
- 对耗时操作采用异步处理（@Async）

4. 部署与运维方案

4.1 容器化部署

Docker Compose编排文件关键配置：

yaml复制version: '3.8'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - "3306:3306"
    
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/bus_system
    
  frontend:
    build: ./frontend
    ports:
      - "80:80"

4.2 监控体系搭建

SpringBoot Actuator暴露健康检查端点
Prometheus+Grafana监控JVM指标
ELK收集业务日志

关键监控指标：

查询接口平均响应时间
并发用户数
缓存命中率
数据库连接池使用率

5. 开发经验总结

在实际开发中，我们遇到几个典型问题及解决方案：

线路闭环检测：
当线路出现环形路线时，传统算法会陷入死循环。我们通过记录访问站点次数，当同一站点访问超过3次时自动终止。
时刻表冲突：
批量导入时刻表时，发现部分班次时间重叠。最终采用事务处理+乐观锁机制保证数据一致性。
移动端适配：
Vant UI在iOS设备上出现点击延迟。通过引入fastclick库并重写部分CSS样式解决。
性能调优：
初期路径查询耗时超过2秒。通过预构建换乘关系图和引入二级缓存，最终将性能提升至300ms内。

项目源码中特别值得关注的几个关键实现：

/backend/src/main/java/com/bus/algorithm/RoutePlanner.java 路径算法核心
/frontend/src/views/RouteResult.vue 结果可视化组件
/backend/src/main/resources/mybatis/mapper/LineMapper.xml 动态SQL示例

这套系统已在三个中型城市试点运行，日均查询量超过5万次。后续计划加入实时GPS数据接入和智能推荐功能。开发过程中积累的经验表明，合理的架构设计比单纯追求新技术更重要，特别是在公共交通这类稳定性要求极高的领域。