接手这个基于SpringBoot Vue的交通感知与车路协同系统时我的第一反应是这类项目真正的难点不在增删改查而在“数据怎么接进来、消息怎么推出去、页面怎么看得明白”。这两年车路协同的概念被反复提起实际落地到毕设或课题里往往就是一个带大屏展示、设备上报、事件处理和信息推送的完整web系统。我用这套SpringBoot Vue的源码把项目从零跑通又做了二次开发过程里踩了不少坑也总结了一些可以直接“抄作业”的路子。这篇就把技术选型、模块设计、核心实现、启动步骤和问题排查完整拆一遍适合正在做相关课题、或者想快速上手一整套前后端分离项目的朋友参考。整个系统的技术栈不复杂但涉及的点很多后端SpringBoot负责接口和数据处理前端Vue负责地图、图表和实时面板数据库存储车辆、设备、事件和用户数据。下面我按自己开发时的顺序来讲大家可以直接顺着这个思路复现。1. 项目整体设计与技术选型解读1.1 为什么是SpringBoot Vue这套组合前后端分离是现在大多数管理系统的主流姿势。后端用SpringBoot最直接的好处是简化了Spring的配置内嵌Tomcat打一个jar就能跑不用单独去部署容器。而且在做RESTful API的时候SpringBoot配合Spring MVC非常顺手写一个Controller就能把数据以JSON格式抛给前端这对交通感知系统里高频的接口交互很有帮助。Vue这边选它是因为组件化开发适合做地图、图表、表格混排的大屏页面。页面里需要同时展示实时路况、设备状态、告警列表如果用传统的jQuery拼字符串后期改需求就是灾难。Vue的双向绑定和组件复用能把这块的维护成本压下来。再加上Element UI或Ant Design Vue这类现成的UI库做后台管理页面基本就是搭积木。这套组合背后的逻辑是前端要轻、后端要稳、接口要清晰。交通感知系统不像互联网高并发业务它更看重实时性、稳定性和数据完整性SpringBoot Vue正好是投入产出比最高的方案。如果你有微服务的需求SpringBoot也方便拆分成Spring Cloud的模块后面再扩展也不会推翻重来。1.2 系统能做什么核心功能模块清单我拿到的这套系统功能模块划分得很清楚大致有六个部分交通感知数据接入模拟路侧设备或车辆终端通过HTTP上报车速、车流量、拥堵等级、天气、能见度等数据。路侧设备管理设备信息的增删改查、在线状态监测、设备类型管理摄像头、雷达、RSU等。车路协同消息发布平台向路侧单元或车辆推送事件消息比如前方事故、施工提醒、红绿灯状态等。交通事件管理用户上报或系统自动监测到的事件记录包括事件类型、位置、图片、处理状态。可视化大屏基于地图和图表展示实时路况、车流趋势、告警统计、设备在线率。用户与权限登录认证、角色区分管理员、操作员、普通用户不同角色看到不同的菜单和数据操作权限。为什么这些功能是“标配”因为车路协同本质上就是一个“感知-通信-控制”的闭环。感知层对应数据接入通信层对应消息推送应用层对应大屏展示和事件处置。你做一个项目如果只是堆CRUD评委或面试官一问“你的车路协同体现在哪”你会答不上来。有了消息推送和可视化大屏才真正把“协同”两个字落地了。1.3 数据库设计最核心的几张表直接说表结构。这个系统的数据库我用的是MySQL字符集选了utf8mb4。表不算多但每一张都很关键尤其是下面这几张车辆信息表vehicle_info字段包括车辆ID、车牌号、车辆类型、所属车队、当前经纬度、速度、方向角、在线状态。这张表主要给地图车辆点位用。经纬度建议用DECIMAL(10,6)存到小数点后6位定位精度在米级以内不要用float容易失真。路侧设备表device_info字段包括设备ID、设备编码、设备名称、设备类型1-摄像头2-雷达3-RSU4-信号机、经纬度、安装位置、状态、最近上线时间。设备类型的枚举值建议用tinyint前端映射成文字别直接存中文方便扩展。感知数据表sensor_data字段包括ID、设备编码、车速、车流量、平均等待时间、拥堵指数、能见度、天气状况、采集时间。这张表是典型的时序数据数据量会越来越大项目里会做按天分表或者定期清理的策略这里不多说但至少要给采集时间加索引。事件信息表event_info字段包括事件ID、事件标题、事件类型1-事故2-施工3-拥堵4-天气严重级别、发生地点、经纬度、描述、上报人、图片地址、状态0-待处理1-处理中2-已处理、创建时间、处理时间。消息推送表push_message字段包括消息ID、消息内容、消息类型、推送范围指定车辆/指定路段/全部、推送时间、是否已读。这张表主要做消息记录留痕前端可以展示历史推送。用户表sys_user和角色表sys_role这两张是后台管理的标配注意密码一定要加密存储我用的是BCrypt。设计这些表的时候有几个容易忽略的细节所有表的创建时间、更新时间字段建议加上并设置默认值状态字段统一用tinyint0和1不要混用多种类型外键不要建太多逻辑外键就够通过代码控制不然删除数据的时候会很痛苦。2. 核心功能实现与难点拆解2.1 感知数据接入从模拟设备到HTTP上报交通感知数据怎么来真实项目中是通过路侧传感器、摄像头、雷达网络回传但在没有硬件的情况下我们通常做一个模拟设备模块后台启动一个定时任务每隔几秒向接口POST一条数据模拟多辆车的轨迹和道路状态。后端的接收接口长这样RestController RequestMapping(/api/sensor) public class SensorDataController { Autowired private SensorDataService sensorDataService; PostMapping(/report) public Result report(RequestBody SensorDataDTO dto) { // 简单校验设备是否存在 if (!deviceService.isDeviceOnline(dto.getDeviceCode())) { return Result.error(设备未注册或已离线); } sensorDataService.saveData(dto); // 数据入库后再判断是否需要触发预警 eventService.checkAlert(dto); return Result.success(); } }这里有两个点值得注意。一是设备合法性校验不能随便一个请求就能写入数据至少得校验设备编码是否存在、是否启用真实项目还会加token或签名二是数据入库后要立刻做一次阈值判断比如车速超过120km/h或者能见度低于50米就自动生成一条预警事件这就是“感知”变“行动”的关键一环。模拟设备端我写了一个简单的定时任务用Java的Scheduled注解每隔5秒生成一条数据经纬度沿着一条道路匀速偏移这样在地图上能看到车辆在“动”演示效果很好。2.2 车路协同消息推送WebSocket 心跳保活车路协同里最核心的是“实时”。用户在前端大屏上看到的事件、预警、车辆位置变化不能靠手动刷新必须由后端主动推送到前端。这里我用的是WebSocket。后端配置一个WebSocket端点Component ServerEndpoint(/ws/collaboration) public class CollaborationWebSocket { private static CopyOnWriteArraySetSession sessions new CopyOnWriteArraySet(); OnOpen public void onOpen(Session session) { sessions.add(session); } OnClose public void onClose(Session session) { sessions.remove(session); } public static void sendMessage(String message) { for (Session session : sessions) { try { session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } } } }在需要推送的地方调用CollaborationWebSocket.sendMessage(...)比如新事件产生时、感知数据超过阈值时就把JSON字符串广播出去。前端Vue里再封装一个WebSocket的全局连接收到消息后更新页面数据。WebSocket本身不难坑都在断线重连上。网络抖动、后端重启都会导致连接断开前端如果不在onclose里做重连页面就一直不更新而大家会误以为是后端没推送。我一般在Vue的mounted里初始化连接onclose之后设置3秒重连并加上心跳机制每30秒发送一个ping后端返回pong确保连接是活的。2.3 可视化大屏ECharts 地图实时点位大屏是这类项目的脸面。我用的是ECharts加一个简易地图组件展示三个核心指标实时车辆分布、道路拥堵等级、最近告警列表。车辆分布用散点图实现把车辆经纬度作为坐标点越低级的车辆颜色越深配合定时更新。拥堵等级用渐变色块叠加在路段上这需要把路段折线数据处理成ECharts的series。告警列表左边用轮播表格展示最新的事件置顶。关键代码Vue组件里的ECharts初始化initMap() { this.chart echarts.init(this.$refs.mapContainer); this.chart.setOption({ tooltip: { trigger: item }, geo: { map: world, roam: true, itemStyle: { areaColor: #1a2a4a, borderColor: #3a5f8a } }, series: [ { type: effectScatter, coordinateSystem: geo, data: this.vehiclePoints, symbolSize: 8, rippleEffect: { brushType: stroke } } ] }); }注意地图的JSON数据需要自己加载如果不引入地图注册文件map: world会报警告。这里可以直接用阿里云DataV的GeoJSON也可以顺便做一个地方行政区域的地图。大屏的实时更新最稳妥的方式是每个组件各自维护一个定时器每隔5秒调用后端接口获取最新数据再setOption更新比全部依赖WebSocket要简单得多。2.4 权限与事件闭环Spring Security JWT权限模块不要自己造轮子Spring Security加JWT是成熟方案。用户登录成功后后端签发一个Token前端每次请求在Header里带Authorization: Bearer token。Spring Security的过滤器里校验Token并解析出用户角色再通过注解控制权限。自定义注解加AOP的方式也可以如果你不想引入Spring Security那么重可以直接用拦截器。不过从项目完整度来说Spring Security写在简历里会好看很多。事件闭环这里顺便提一句如果系统里的事件需要“上报-审核-派单-处理-完成”这样的流转流程可以集成Flowable工作流引擎把每一步的状态流转交给流程定义去管而不是用一堆if/else写死。二次开发的时候可以往这个方向扩展能让项目层次高不少。3. 实操过程从源码到运行的完整步骤3.1 环境准备清单下面这些环境是我实际跑通这套系统的版本组合理论上兼容性最好大家可以直接照抄工具版本说明JDK1.8 或 11建议1.8稳定不要一上来就JDK 17SpringBoot版本容易踩坑Maven3.6依赖管理用IDEA自带的也行Node.js14.x 或 16.xVue项目构建建议1618也有兼容问题MySQL5.7 或 8.08.0注意驱动和时区问题下面会讲Redis可选如果做缓存或Session共享没用到可以不装IDEIDEA VSCode后端IDEA前端VSCode分开开我现在用的SpringBoot版本是2.7.x注意不要用3.x因为3.x要求JDK 17很多旧依赖组件的包名都改了网上大部分参考代码跑不起来。3.2 后端启动步骤与配置详解拿到源码后先改数据库连接打开application.yml把下面的配置替换成自己的数据库账号server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/traffic_collab?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update show-sql: true这里有两个最容易报错的地方。第一个是MySQL 8.0以上的驱动类名要写成com.mysql.cj.jdbc.Driver写com.mysql.jdbc.Driver会报驱动加载失败第二个是serverTimezone不配或者配成UTC会导致数据库时间比本地时间差8小时新手经常在时间上对不上数据。如果遇到Public Key Retrieval is not allowed在url后面加一个allowPublicKeyRetrievaltrue。然后执行项目根目录下的traffic_collab.sql脚本把数据库和表结构建好。接着直接用IDEA打开后端项目等Maven下载完依赖运行TrafficApplication.java里的main方法。看到Started TrafficApplication的日志说明启动成功。这里可以先用浏览器访问http://localhost:8080/api/user/login接口用Postman测一下登录能返回Token就说明后端已经通了。3.3 前端Vue项目搭建与联调前端项目一般在frontend目录下打开终端先执行npm install注意npm install很容易卡住或报错如果报网络错误直接把镜像源切到淘宝npm config set registry https://registry.npmmirror.com装完依赖后启动开发服务器npm run serve默认端口是8080但和后端冲突了所以我在vue.config.js里把前端端口改成了3000并配置了开发代理把/api开头的请求转发到后端的8080端口module.exports { devServer: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这样前端请求/api/user/login就相当于请求http://localhost:8080/api/user/login前后端联调时不用担心跨域。如果你不配代理而是在后端写CrossOrigin或全局CORS配置也可以但代理的方式更贴近真实部署。访问http://localhost:3000应该会跳转到登录页。我这里初始账号是admin/admin123登录进去后就能看到整个大屏和各个管理页面。3.4 接口联调与测试数据导入系统里需要一些测试数据才能看到效果。SQL脚本里其实已经预置了一百条车辆数据和一些历史感知数据但为了演示我写了一个数据模拟工具类通过调用sensor/report接口每5秒生成一条新的感知数据。如果你不想改代码直接手动在数据库里insert也能看到效果。测试几个核心接口接口方法作用返回/api/user/loginPOST登录获取Token{ token, userInfo }/api/vehicle/listGET获取车辆列表可传关键词{ total, rows }/api/sensor/reportPOST上报感知数据success/api/event/pageGET分页查询事件列表{ total, rows }/api/device/listGET获取设备列表{ total, rows }建议大家在Postman里创建一个Collection把这几个接口都测一遍尤其是带Token的请求。实际上很多项目跑不起来不是代码问题而是前端请求头没带Token后端返回401页面就一直转圈。登录之后把Token存到Vuex或localStorage里在axios拦截器里统一设置headeraxios.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer token; } return config; });4. 常见问题与排查技巧实录4.1 SpringBoot版本太高导致依赖冲突这个太典型了。我一开始手头有个项目用的SpringBoot 3.0.2JDK也换成了17结果发现连接MySQL的驱动包、JPA、Thymeleaf这些依赖全都提示版本冲突或不兼容。后来回退到2.7.6配合JDK 8一次跑通。建议有心做源码二次开发的朋友全程统一版本不要因为想尝新就升SpringBoot大版本生产项目和毕设都以稳定为王。如果一定要用高版本注意javax包全部变成了jakarta比如import javax.servlet要改成import jakarta.servlet很多老代码在这一步就挂了。4.2 Vue安装依赖慢和版本不兼容npm install卡在node-gyp或者提示crypto错误多半是Node版本和依赖版本不匹配。这里没有别的花招最有效的方案是先删掉node_modules和package-lock.json再用淘宝镜像重新安装。如果某个库报版本冲突比如vue-router报了错误可以直接指定一个稳定的版本号不用追求最新。我是用Vue 2.6.14配Element UI 2.15.6非常稳。Vue 3的生态虽然也成熟了但很多开源后台模板还是Vue 2写的。后端跨域也是一个高频问题。如果前端配置了代理但请求还是跨域检查一下后端是不是设置了全局CORS两者不要同时用否则会重复响应CORS头导致浏览器拦截。二选一就行。4.3 数据库连接失败、时区、编码问题我遇到过的问题按出现频率排序如下Access denied for user用户名密码不对或者账号没有远程访问权限。Public Key Retrieval is not allowedMySQL 8默认使用caching_sha2_password插件连接时需要在url加allowPublicKeyRetrievaltrue。Unknown database数据库没创建或者连接字符串里的库名写错了。中文乱码建库时没指定utf8mb4执行SQL之前要检查数据库字符集。这些问题的排查思路都是看启动日志。SpringBoot的报错信息其实已经写得比较明白了很多人上来就百度其实认真看一眼第一行提示就能定位。我建议把项目的日志级别调成DEBUG在application.yml里加一行logging: level: com.example: debug这样能看到SQL语句和详细错误堆栈排查效率翻倍。4.4 WebSocket实时推送经常断连大屏页面挂久了数据不更新十有八九是WebSocket断了没有重连。原因很多后端空闲超时断开、浏览器tab切后台被系统休眠、项目重启后session失效。前端这边要写一个完整的重连机制。直接给个简单模板大家可以直接用connectWebSocket() { this.ws new WebSocket(ws://localhost:8080/ws/collaboration); this.ws.onmessage (e) { const data JSON.parse(e.data); this.handlePushData(data); }; this.ws.onclose () { setTimeout(() { this.connectWebSocket(); }, 3000); }; }另外如果部署到Nginx上Nginx默认会关闭长时间没数据传输的连接所以还要在Nginx的配置里加上proxy_read_timeout 3600s或者让前端定时发心跳包。我在项目里写了一个setInterval每30秒发送一个{type:ping}服务端回{type:pong}这样既能保活也能感知链路是否正常。5. 这套系统还能怎么扩展5.1 接入视频监控流Vue中播放m3u8交通感知系统里摄像头是重要的感知设备。如果项目需要展示实时监控画面一个很常见的需求是在网页里播放m3u8视频流。很多摄像头厂商输出的就是m3u8流地址前端要播放的话可以用video.js配合videojs-contrib-hls插件或者用hls.js。在Vue里用hls.js播放很简单npm install hls.jsimport Hls from hls.js; playVideo(url) { const video this.$refs.videoPlayer; if (Hls.isSupported()) { const hls new Hls(); hls.loadSource(url); hls.attachMedia(video); } }这个扩展往系统里一加大屏上就能同时看到车辆点位和实时画面演示效果会提升一个档次。5.2 引入工作流引擎处理复杂事件流转如果交通事件的处置不再只是改一个状态而是需要多部门协同审批这时候可以考虑集成Flowable工作流。SpringBoot集成Flowable不算复杂引入依赖后写一个流程图XML然后调用RuntimeService开启流程、完成审批节点即可。Flowable能让“事件上报-审核-派单-回执-归档”这些步骤变成可配置的流程而不是写死在代码里。这样后期改流程不用改Java代码只要换一版流程图就行适合系统功能越来越复杂之后做模块化演进。当然如果当前系统只是单机版演示加Flowable会显得重大家按需选择。另外感知数据的数据量变大以后还可以把时序数据拆出去用TDengine或InfluxDB存储再配合Kafka做缓冲。后端架构上也能拆分成设备接入服务、事件处理服务、消息推送服务几个独立模块这就是从单体向微服务演进的路线。不过这些都是后话了先把手上的SpringBoot Vue跑顺把每一个功能点吃透再谈架构升级才有意义。最后再分享一点我个人的体会这类带源码、数据库和文档的项目拿到手一定不要急着跑先花半天把数据库脚本、接口文档和后端目录结构看一遍心里有个地图后面出了问题才知道去哪里找。跑通之后找一个自己感兴趣的功能点比如消息推送或者数据可视化从底层到前端完整走一遍代码流程把它改成你自己的实现。只有这样项目才不是仓库里的一份源码而是你真正能做演示、能说清楚、能应付提问的作品。