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

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

happy最紧要

1. 项目背景与核心价值

公交线路查询系统是城市公共交通信息化建设的基础组成部分。作为一名长期从事交通行业信息化开发的工程师，我发现传统公交查询系统普遍存在几个痛点：响应速度慢、数据更新滞后、用户体验差。而基于SpringBoot+Vue的技术栈组合，恰好能系统性解决这些问题。

这个毕设项目的独特之处在于：

完整实现了前后端分离架构
采用RESTful API设计规范
整合了公交线路数据可视化展示
包含标准的SQL数据库设计
提供完善的接口文档

对于计算机专业毕业生而言，这个项目能完整覆盖：

后端SpringBoot开发全流程
Vue前端工程化实践
数据库设计与优化
前后端联调技巧
项目文档编写规范

2. 技术栈选型解析

2.1 SpringBoot后端框架

选择SpringBoot而非传统SSM框架的主要考虑：

内嵌Tomcat容器：简化部署流程，application.properties中通过server.port=8080即可配置端口
自动配置：通过@SpringBootApplication注解自动完成Bean扫描和配置加载

Starter依赖：公交系统特有的依赖包括：

xml复制<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
  <groupId>com.baomidou</groupId>
  <artifactId>mybatis-plus-boot-starter</artifactId>
  <version>3.5.2</version>
</dependency>

2.2 Vue前端框架

采用Vue 3的组合式API相比选项版API的优势：

更好的TypeScript支持
更灵活的逻辑复用
更小的打包体积

关键配置示例（vite.config.js）：

javascript复制export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

3. 数据库设计与实现

3.1 核心表结构

sql复制CREATE TABLE `bus_line` (
  `id` int NOT NULL AUTO_INCREMENT,
  `line_number` varchar(20) NOT NULL COMMENT '线路编号',
  `start_station` varchar(50) NOT NULL,
  `end_station` varchar(50) NOT NULL,
  `first_time` time NOT NULL COMMENT '首班车时间',
  `last_time` time NOT NULL COMMENT '末班车时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_line_number` (`line_number`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE `station` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `longitude` decimal(10,7) NOT NULL,
  `latitude` decimal(10,7) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_name` (`name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 查询性能优化实践

对于线路-站点关联查询，我们采用以下优化策略：

建立复合索引：

sql复制ALTER TABLE `line_station_relation` 
ADD INDEX `idx_line_station` (`line_id`, `station_id`);

使用MyBatis-Plus的查询优化：

java复制@Select("SELECT * FROM bus_line WHERE line_number = #{lineNumber}")
@Options(useCache = true)
BusLine getByLineNumber(@Param("lineNumber") String lineNumber);

4. 核心功能实现细节

4.1 线路查询接口

Controller层示例：

java复制@RestController
@RequestMapping("/api/lines")
public class LineController {
    
    @Autowired
    private LineService lineService;

    @GetMapping("/search")
    public Result<List<LineVO>> searchLines(
            @RequestParam(required = false) String keyword,
            @RequestParam(defaultValue = "1") Integer page,
            @RequestParam(defaultValue = "10") Integer size) {
        QueryWrapper<BusLine> wrapper = new QueryWrapper<>();
        if (StringUtils.isNotBlank(keyword)) {
            wrapper.like("line_number", keyword)
                   .or().like("start_station", keyword)
                   .or().like("end_station", keyword);
        }
        Page<BusLine> pageInfo = new Page<>(page, size);
        IPage<BusLine> linePage = lineService.page(pageInfo, wrapper);
        return Result.success(linePage);
    }
}

4.2 前端地图集成

使用高德地图API实现线路可视化：

vue复制<template>
  <div id="map-container"></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const map = new AMap.Map('map-container', {
    zoom: 12,
    center: [116.397428, 39.90923]
  });
  
  // 绘制公交线路
  const line = new AMap.Polyline({
    path: lineData.value.stations.map(s => [s.longitude, s.latitude]),
    strokeColor: "#3366FF", 
    strokeWeight: 6
  });
  map.add(line);
});
</script>

5. 项目部署与运维

5.1 后端打包配置

关键pom.xml配置：

xml复制<build>
  <plugins>
    <plugin>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-maven-plugin</artifactId>
      <configuration>
        <excludes>
          <exclude>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
          </exclude>
        </excludes>
      </configuration>
    </plugin>
  </plugins>
</build>

打包命令：

bash复制mvn clean package -DskipTests

5.2 前端部署优化

通过nginx配置解决跨域和生产环境路由问题：

nginx复制server {
    listen       80;
    server_name  bus.example.com;

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
    }
}

6. 常见问题解决方案

6.1 跨域问题处理

SpringBoot后端配置：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .maxAge(3600);
    }
}

6.2 接口文档生成

使用Swagger配置：

java复制@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.bus.system.controller"))
                .paths(PathSelectors.any())
                .build()
                .apiInfo(apiInfo());
    }
}

7. 项目扩展方向

7.1 实时公交功能

通过WebSocket实现车辆位置更新：

java复制@ServerEndpoint("/ws/position")
@Component
public class BusPositionEndpoint {
    @OnOpen
    public void onOpen(Session session) {
        // 连接建立逻辑
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 处理位置更新
    }
}

7.2 移动端适配

使用Vant组件库快速构建移动端界面：

vue复制<template>
  <van-search v-model="searchValue" placeholder="输入线路号或站点名" />
  <van-list>
    <van-cell 
      v-for="line in lineList"
      :key="line.id"
      :title="line.lineNumber"
      :label="`${line.startStation} → ${line.endStation}`"
    />
  </van-list>
</template>

在项目开发过程中，我发现公交数据的准确性直接影响用户体验。建议建立数据校验机制，对线路的站点顺序、经纬度信息进行规则校验。同时，前端地图展示时要注意坐标系的统一，避免出现位置偏移问题。