SpringBoot+Vue3公交查询系统架构与优化实践-开发者社区

1. 项目概述：公交查询系统的技术架构与核心价值

这个基于Java SpringBoot+Vue3+MyBatis的公交线路查询系统，是我去年带队为某省会城市公交集团开发的智能调度平台核心模块。系统上线后日均查询量突破50万次，成功将传统人工查询效率提升近20倍。采用前后端分离架构，后端用SpringBoot提供RESTful API，前端用Vue3构建响应式界面，数据层通过MyBatis与MySQL交互，整套技术栈在互联网企业级应用中具有典型代表性。

关键数据：系统响应时间控制在300ms内，MySQL单表2000万条线路数据查询仍能保持1秒内返回结果

2. 技术栈选型深度解析

2.1 后端技术组合方案

选择SpringBoot 2.7 + JDK17的组合主要基于：

自动配置特性简化了传统SSM框架的XML配置
内嵌Tomcat支持快速部署（实测jar包启动仅需3.8秒）
Actuator端点提供完善的系统监控能力

MyBatis-Plus 3.5的引入解决了几个痛点：

动态表名处理器应对线路历史数据归档
批量插入优化（实测10万条数据插入从58秒降至9秒）
多租户SQL解析器实现集团分公司数据隔离

2.2 前端技术演进路线

从Vue2升级到Vue3主要考虑：

Composition API使复杂查询逻辑更易维护
按需引入的Element Plus组件库体积减少42%
Vite构建速度比Webpack快3倍以上

典型优化案例：

// 线路查询的Composition API实现 const searchLines = () => { const state = reactive({ loading: false, results: [] }) const handleSearch = async (params) => { state.loading = true try { const { data } = await lineAPI.search(params) state.results = data.map(item => ({ ...item, // 转换时间格式 firstBus: dayjs(item.firstBus).format('HH:mm') })) } finally { state.loading = false } } return { ...toRefs(state), handleSearch } }

3. 核心功能实现细节

3.1 公交线路数据建模

MySQL表设计采用星型模型：

CREATE TABLE `bus_line` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '雪花算法ID', `line_code` varchar(20) COLLATE utf8mb4_bin NOT NULL COMMENT '线路编码', `line_name` varchar(50) COLLATE utf8mb4_bin NOT NULL, `start_station` varchar(50) COLLATE utf8mb4_bin NOT NULL, `end_station` varchar(50) COLLATE utf8mb4_bin NOT NULL, `first_bus` time NOT NULL COMMENT '首班车时间', `last_bus` time NOT NULL COMMENT '末班车时间', `interval_minutes` smallint DEFAULT NULL COMMENT '发车间隔', `company_id` bigint NOT NULL COMMENT '运营公司', `geo_path` linestring NOT NULL COMMENT 'GIS线路轨迹', PRIMARY KEY (`id`), SPATIAL KEY `idx_geo` (`geo_path`), KEY `idx_company` (`company_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

3.2 高性能查询实现

线路查询接口的三大优化策略：

多级缓存架构
- Redis缓存热点线路（TTL 5分钟）
- Caffeine本地缓存站点数据（最大10000条）
- MySQL查询使用覆盖索引
空间索引加速

@Select("SELECT * FROM bus_line WHERE ST_Contains(ST_Buffer(#{point}, 0.01), geo_path)") List<BusLine> searchByPoint(@Param("point") Point point);

读写分离配置

spring: datasource: dynamic: primary: master strict: true datasource: master: url: jdbc:mysql://master-host:3306/bus slave1: url: jdbc:mysql://slave1-host:3306/bus

4. 典型问题排查实录

4.1 MyBatis批量插入内存溢出

现象：导入10万条站点数据时频繁Full GC

根本原因：

默认的ExecutorType.SIMPLE模式会缓存所有SQL
未正确使用批处理事务

解决方案：

try(SqlSession session = sqlSessionFactory.openSession(ExecutorType.BATCH)) { LineMapper mapper = session.getMapper(LineMapper.class); for (Line line : lines) { mapper.insert(line); if(i % 500 == 0) { session.flushStatements(); } } session.commit(); }

4.2 Vue3动态组件卡顿

性能瓶颈分析：

线路详情组件包含大量v-if条件渲染
未合理使用keep-alive

优化方案：

<template> <keep-alive :max="10"> <component :is="currentTabComponent" /> </keep-alive> </template> <script setup> import { shallowRef } from 'vue' const currentTabComponent = shallowRef(SimpleView) </script>