先说结论如果你正在找一份能直接拿来交课程设计、写毕业设计、或者自己练手SpringBootVue前后端分离项目的完整源码那么“公交线路查询系统”这个题目是非常合适的。它不像电商系统那么臃肿又比“HelloWorld”级别的增删改查有含金量——线路查询、站点匹配、换乘方案这几个核心功能恰好能把后端接口设计、数据库关系建模、前端组件化交互全都串起来。我拿到这套SpringBootVueMySQL的源码之后从环境搭建到跑通前后端再到把换乘逻辑吃透整个过程踩了一些坑也把关键细节理清楚了下面完整记录一下。这套系统解决的是什么问题本质上是把“公交线网数据”变成“可查询的服务”。乘客输入线路编号或者起点终点系统返回经过的站点、首末班时间、票价以及换乘建议。它适合的读者很明确正在做Java课程设计的学生、想快速上手前后端分离项目的开发者、或者需要一套能二次开发的交通查询基础代码的人。项目的技术栈是SpringBoot做后端API、Vue做前端页面、MySQL存数据三件套都是国内就业市场最常用的一档跑通这个项目相当于把一条完整的技术链路走了一遍。1. 项目整体架构设计解读1.1 技术栈组合的原由与优劣刚开始我拿到这套源码时先看了目录结构典型的SpringBoot后端加Vue前端的分离式布局。后端用SpringBoot管理依赖和接口发布前端用Vue全家桶做页面渲染MySQL负责持久化存储。为什么这个组合会成为JavaWeb课程设计和毕业设计的“标配”背后是有实际道理的。SpringBoot最大的价值是“约定大于配置”。以前用SSM框架光配置Spring和MyBatis的XML文件就能让人头疼半天数据源、事务管理器、扫描路径、拦截器每一样都要手动装配。SpringBoot把这些都自动化了一个SpringBootApplication注解启动类加上application.yml里几行配置内置Tomcat就直接把服务跑起来了。对于公交查询这种业务复杂度适中的系统SpringBoot的自动配置能大幅缩短开发时间把精力放到业务逻辑而不是框架搭建上。Vue这边核心优势是组件化和响应式数据绑定。公交查询页面的典型交互是用户在搜索框输入内容下方列表实时更新结果。如果用传统jQuery需要手动操作DOM去更新列表代码一多非常容易乱。Vue的data里定义结果数组methods里写查询方法模板上用v-for渲染数据变化视图自动更新。这套模式在前端开发里是主流学了以后做其他项目也能直接用。MySQL更不用多说免费开源、生态成熟、大学课程里教的也是它。对于公交线路这种数据量在几百到几千行级别的场景MySQL的性能完全够用。选这个组合本质上就是用最小的成本学习成本搭建一套最具通用性的Web应用骨架。它的好处是生态资料多遇到问题搜索引擎随便一查就有答案坏处也是明摆着的——这套组合太常见了面试官一眼就能看出来你做的是标准课程设计所以还需要在业务功能上做出亮点比如换乘查询的算法设计才能让项目脱颖而出。1.2 系统核心业务与模块划分打开源码之后我把整个系统的业务功能梳理了一遍核心模块可以分为乘客端和管理端两部分。乘客端也就是前台页面需要实现的关键功能有四个第一是线路查询。用户输入线路编号比如“1路”或者“K1线”系统返回线路的基本信息包括起点站、终点站、全程票价、首末班时间以及经过的完整站点列表。这个是公交查询系统最基础的功能也是数据库里线路表和站点表关联关系的直接体现。第二是站点查询。反过来用户输入某个站点名称比如“幸福小区”系统返回所有经过该站点的线路列表。这个功能考验的是数据库表设计的合理性——一个站点可能有多条线路经过线路和站点之间是多对多的关系必须通过中间表来维护站点查询就是在这个中间表上做反向检索。第三是换乘查询这是整套系统的技术难点。用户输入两个站点系统需要规划出换乘方案。比如从A站到B站没有直达车时系统要推荐“先坐12路到C站换乘K3路到B站”这样的方案。这里涉及图的搜索算法也是我在看源码时花时间最多的地方。稍后我会开一节专门讲。第四是后台管理。管理员登录后可以维护线路数据、站点数据、调整线路站点顺序甚至管理公告信息。这块是标准的CRUD操作对应SpringBoot里的Controller、Service、Mapper三层结构代码套路一致学会了以后复用性极强。从代码层面看后端模块划分也比较清晰。controller包暴露RESTful接口service包写业务逻辑mapper包通过MyBatis操作MySQLentity包定义实体类。前端src/views目录按页面功能拆分有线路查询页、换乘查询页、后台管理页组件划分是比较规范的。1.3 项目结构与“可直接运行”的关键解读标题里明确写了“【可直接运行】”这点我在拿到源码后专门验证过。这个“可直接运行”不是说说而已它有具体的前提条件需要讲清楚。后端方面项目使用Maven管理依赖pom.xml里锁定的是SpringBoot 2.x版本MySQL驱动、MyBatis、Lombok这些关键依赖都已经声明好。application.yml里配置了数据库连接参数包括数据库地址、用户名、密码。我拿到源码后第一条要做的就是把自己的MySQL密码填进application.yml因为原作者不可能预知你的数据库密码这一处不改谁都跑不起来。前端方面项目自带package.json文件里面声明了Vue、Vue Router、Axios、Element UI这些依赖。按照“可直接运行”的标准前端只需要执行npm install把依赖装好然后npm run serve启动开发服务器就能通过默认的localhost:8080端口访问页面。数据库方面源码包中通常会附带bus_system.sql文件里面包含创建数据库、建表以及核心的测试数据。值得留意的是这套源码并不是空架子它已经预置了十几条公交线路和几十个站点的模拟数据打开系统就能直接出效果。这一点对做课程设计答辩很有帮助演示的时候不用临时造数据一点搜索就能看到结果。不过“可直接运行”也有前提——你的开发环境得是齐的。JDK、Maven、Node.js、MySQL这四个缺一不可。我见过很多同学说“运行不起来”一问才发现Node没装或者版本太旧。所以别把“可直接运行”理解为“双击就运行”它指的是代码层面不需要额外修改配置环境层面的基础依赖还是要自己准备好。2. 数据库设计与核心表结构2.1 数据库ER设计与表规划看数据库表结构之前我一般习惯先想清楚实体之间的关系。公交领域核心实体有两个一个是线路bus_line一个是站点bus_station。这两者之间的“多对多”关系是整个系统的地基而“线路-站点”中间表bus_line_station就是整个系统里最重要的表。理解多对多的方式很简单一条线路会经过多个站点一个站点也会有多个线路经过。就像三甲医院这个站可能有十几条公交线路都在这里停靠。如果只在站点表里存一个“所属线路”字段那数据就会大量冗余维护起来非常痛苦。正确做法是拆出中间表中间表里记录线路ID、站点ID以及这个站点在这条线路上所处的顺序。打开这份源码的SQL文件我看到它设计了如下几张表-- 线路表 CREATE TABLE bus_line ( line_id INT PRIMARY KEY AUTO_INCREMENT, line_name VARCHAR(50) NOT NULL COMMENT 线路名称如1路、K3线, start_station VARCHAR(50) NOT NULL COMMENT 起点站, end_station VARCHAR(50) NOT NULL COMMENT 终点站, first_time VARCHAR(10) COMMENT 首班时间, last_time VARCHAR(10) COMMENT 末班时间, ticket_price DECIMAL(4,2) DEFAULT 1.00 COMMENT 票价, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 站点表 CREATE TABLE bus_station ( station_id INT PRIMARY KEY AUTO_INCREMENT, station_name VARCHAR(50) NOT NULL COMMENT 站点名称, station_address VARCHAR(200) COMMENT 站点地址, lat DOUBLE COMMENT 纬度, lng DOUBLE COMMENT 经度 ); -- 线路站点中间表 CREATE TABLE bus_line_station ( relation_id INT PRIMARY KEY AUTO_INCREMENT, line_id INT NOT NULL, station_id INT NOT NULL, station_order INT NOT NULL COMMENT 站点在线路上的顺序, distance_to_next DOUBLE DEFAULT 0 COMMENT 到下一站距离公里 );这个设计里有个容易忽略但很重要的字段station_order。公交线路是有方向性的从起点站到终点站有明确的顺序。如果我查询K1路经过哪些站不能只看“有哪些站关联了K1路”还得按照station_order字段排序才能得到“第一站是A、第二站是B、第三站是C”的正确顺序。很多课程设计在中间表里只记录线路和站点的关联漏掉了顺序字段结果查询出来的站点列表是乱序的那系统就要闹笑话了。distance_to_next字段的设计是为里程计算做铺垫的这份源码里用到了换乘方案的推荐策略中后面会细说。除了这三张核心表还有管理员表admin_user和车辆表bus_vehicle车辆表主要是后台管理功能里用来展示车辆运行状态的属于锦上添花的模块。2.2 站点-线路多对多关系的查询技巧多对多关系建好了表查询逻辑就是最考验基本功的地方。我一开始看源码时最关心的是“线路详情”页面上那个站点列表是怎么查出来的。这个查询逻辑在Mapper XML里能直接看到本质上两张表做关联查询SELECT s.station_name, ls.station_order, ls.distance_to_next FROM bus_line_station ls LEFT JOIN bus_station s ON ls.station_id s.station_id WHERE ls.line_id #{lineId} ORDER BY ls.station_order ASC这个SQL虽然短但包含了一个容易被别的新手忽略的点为什么要用LEFT JOIN而不是INNER JOIN考虑到站点数据理论上应该都与线路关联用INNER JOIN也能查出结果但LEFT JOIN更稳妥它保证即使中间表中某条记录的站点ID在站点表里找不到对应数据查询结果也不会丢掉中间表的信息。在项目里养成这种边界思考的习惯对写后端接口很有帮助。反向的站点查询就更典型了。用户输入一个站点名要查出所有经过它的线路SQL大概是这样的SELECT l.line_name, l.start_station, l.end_station, l.first_time, l.last_time FROM bus_line_station ls LEFT JOIN bus_line l ON ls.line_id l.line_id LEFT JOIN bus_station s ON ls.station_id s.station_id WHERE s.station_name LIKE CONCAT(%, #{stationName}, %) ORDER BY l.line_name这段SQL用到了LIKE模糊查询CONCAT拼接百分号实现“包含”匹配。这样做的好处是用户体验更好用户输入“幸福”两个字虽然精确站点名是“幸福小区”但也能查出来。这里要注意的是LIKE %关键字%这种写法在数据量大的时候会导致全表扫描不过对于教学项目和公交站点的数据规模来说几十上百条数据完全够用。当你把线路查询和站点查询都跑通之后换乘查询就顺理成章地成为下一个重点。因为换乘的本质就是在线路和站点的这张关系网里做路径搜索。2.3 换乘查询的核心算法逻辑这是整套源码中含金量最高的部分。一开始我以为换乘查询很复杂毕竟涉及图论里的最短路径算法比如Dijkstra、Floyd之类的。但看了代码之后发现它采用的是广度优先搜索BFS的思路配合数据库查询来计算换乘方案。这个方案最适合公交场景——因为用户关心的主要不是“距离最短”而是“换乘次数最少”。换乘查询的问题可以抽象成这样给定起点站A和终点站B经过哪些线路可以直达如果没有直达经哪些线路和站点中转一次可以到达中转两次呢这本质上是一个在“线路网络图”上寻找路径的问题。这套源码的实现思路是这样的第一步查直达。搜索所有包含起点站A的线路再筛出这些线路中同时包含终点站B的线路。SQL逻辑就是在中间表上做两次条件匹配SELECT DISTINCT l.* FROM bus_line_station ls1 LEFT JOIN bus_line_station ls2 ON ls1.line_id ls2.line_id LEFT JOIN bus_line l ON ls1.line_id l.line_id WHERE ls1.station_id #{startStationId} AND ls2.station_id #{endStationId}这里有一个细节值得品味第2站和第3站都命中后就说明起点和终点在同一条线路的站点列表里。还得补充判断一下站序——如果startStation在endStation的后面那这趟车是反方向的在公交车场景里通常也认作可乘坐因为反方向线路依然从这里停经过。但能都列出来同时如果该车到不了用户自己会意识到需要换方向去对面坐车。第二步如果直达查询没有结果进入“一次换乘”匹配。思路是找出所有经过起点站A的线路记为集合LA再找出所有经过终点站B的线路记为集合LB。如果存在一条线路l1属于LA另一条线路l2属于LB并且l1和l2有共同经过的站点C那么就可以从A上车坐l1到C站换乘l2去B站。数据库层面的SQL实现可以简化为查找LA和LB的交集站点。在源码里这一步通常是用循环加查询完成的先查出经过A的所有线路再循环这些线路查每一条经过的全部站点放入内存同时查经过B的所有线路并查站点最后比对是否有相同元素。数据量小的时候这种方式简单直接逻辑也好懂适合课程设计答辩时讲解。第三步如果一次换乘也没有这两站之间可能需要两次换乘需要更深层的搜索。我在取数据时发现源码里对这种情况给出了“暂未找到直达或一次换乘方案”的提示没有继续做二次换乘的暴力搜索。这么做是合理的——对于一般城市公交两站之间如果两次换乘还到不了用户大概率会考虑换地铁或者打车了而且二次换乘的算法复杂度明显上升维护成本远超课程设计的需求边界。还有一点值得注意真正的换乘推荐还需要考虑方向性。比如起点站点在12路的第3站换乘站是12路的第8站那么乘车方向是顺着线路走的但如果在第8站上车行驶方向就是相反的。开发者需要在算法中加入两个站点在station_order字段上的大小比较来确认换乘方案的可行性。这套源码在直达查询里已经做了方向判断一次换乘的推荐结果为简洁起见未做严格方向校验可以算作是一个可二次优化的点。3. 环境准备与项目启动实操3.1 一次到位的开发环境清单把代码跑通之前先把环境准备好。我根据自己的实操经验整理了一份环境清单每个工具都标注了版本要求和注意事项。工具版本建议说明JDK1.8或11后端编译运行的基础SpringBoot 2.x对JDK8兼容最好Maven3.6.x管理后端依赖IDEA自带Maven时可用自带版本Node.js14.x或16.x前端构建工具链Vue2项目需要Node 14以上MySQL5.7或8.0数据库环境注意MySQL8的认证插件问题Navicat / SQLyog任意导入SQL、查看数据用图形化界面效率更高IDEA任意版本Java开发IDE舒服的快捷键能提升开发效率VS Code或WebStorm任意前端开发IDEVue插件建议装Vetur这里特别提醒几个坑。MySQL 8.0默认使用caching_sha2_password认证插件而老版本SpringBoot的MySQL驱动是com.mysql.jdbc.Driver可能连接失败。如果遇到Public Key Retrieval is not allowed错误需要在JDBC连接串后面加上allowPublicKeyRetrievaltrue这个参数。另外Java版本别太高JDK17跑SpringBoot2.x虽然也能跑但遇到Lombok版本不兼容时编译会报错老老实实用JDK8最省心。Node版本太新也有问题Vue CLI 4项目在Node 17以上版本执行npm install时会报Error: error:0308010C:digital envelope routines::unsupported的OpenSSL错误。这是因为Node 17内置的OpenSSL版本不兼容Webpack 4的加密算法。真要遇到临时方案是在package.json里加一句start: SET NODE_OPTIONS--openssl-legacy-provider vue-cli-service serveWindows下亲测有效。不过更稳妥的还是用Node 14。3.2 数据库初始化与navicat实操环境准备齐全后第一步就是导入数据库脚本。我习惯用Navicat操作图形化的方式对初学者友好核对数据也直观。在Navicat里新建连接填好主机名localhost、端口3306、用户名root和密码后先创建名为bus_system的数据库。字符集必须选utf8mb4否则站点名称里如果包含生僻字或者特殊符号存储时可能出现乱码。utf8mb4是utf8的超集能完整支持中文和emoji字符是现在的主流选择。创建好数据库之后选中数据库右键“运行SQL文件”选择源码包里的bus_system.sql导出完成后按F5刷新就能看到线路表、站点表、中间表、管理员表以及预置的测试数据。导入后我习惯先执行几条SQL验证一下比如SELECT * FROM bus_line;看看线路数据是否完整再查一下中间表的station_order字段是否合理。如果你用的是命令行也不复杂mysql -uroot -p create database bus_system default character set utf8mb4; use bus_system; source /你的路径/bus_system.sql;导入成功后还需要把数据库账号密码同步到后端的配置文件里。找到src/main/resources/application.yml核心配置长这样server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/bus_system?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密码 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.bus.system.entity这里有两个配置细节值得注意。serverTimezoneAsia/Shanghai必须指定否则SpringBoot连接MySQL时会因为默认UTC时区导致时间偏移8小时useSSLfalse则避免连接时由于本地证书问题产生警告或报错。mapper-locations指定MyBatis的XML映射文件位置这是源码能自动找到SQL映射的关键路径。3.3 后端项目启动与接口验证数据库准备好后用IDEA打开后端项目。等Maven把依赖下载完毕右下角进度条消失了就可以找启动类。启动类通常位于src/main/java下包名里带Application字样的Java类类上有SpringBootApplication注解点击运行按钮运行main方法。启动过程中观察控制台日志看到Started ....Application in x.xxx seconds这行字就表示后端启动成功。SpringBoot默认端口是8080如果电脑上8080端口被占用启动会直接报错。解决方式要么关掉占用程序要么在application.yml里把server.port改成别的端口比如8081然后前端请求的接口地址也要跟着改。后端跑起来之后先在浏览器地址栏直接访问接口验证一下。比如在浏览器打开http://localhost:8080/bus/line/list如果看到JSON格式的线路数据返回说明后端接口是通的。这一步极其重要因为它能把问题范围快速缩小——如果接口直接返回数据后端和数据库没问题接下来排查前端就有明确方向如果接口访问报404或者500说明问题出在后端的路径映射、SQL语句或数据库连接上先处理这一层。3.4 前端依赖安装与启动后端接口确认可访问后再处理前端。用VS Code打开名为busi-web或front-end的前端目录在终端里执行npm install安装项目依赖。这个过程的时间长短取决于网络状况有时需要几分钟因为它会从npm仓库拉取Vue核心库、Element UI、Axios等几十个依赖包。国内开发者建议用淘宝镜像加速安装速度能快好几倍npm install --registryhttps://registry.npmmirror.com装完依赖后执行npm run serve启动Vue开发服务器。默认端口是8080或8081如果和后端的8080端口冲突Vue CLI会提示是否自动切换端口输入Y确认即可。看到终端里输出App running at: http://localhost:8081就说明前端服务起来了。在浏览器访问这个地址就能看到系统的登录页面或者查询主界面。前端能打开不代表“彻底跑通”还得确认前后端联通。点击“线路查询”功能输入“1路”看页面是否正常展示线路信息和站点列表。这里有一个至关重要的配置需要在项目启动前确认——前端的接口地址是否指向后端。找到前端项目下utils或api目录中的请求封装文件常见配置是import axios from axios; // 创建一个 axios 实例并配置 baseURL所有请求都会以此为前缀 const request axios.create({ baseURL: http://localhost:8080, // 这里必须与后端服务地址一致 timeout: 10000 }); export default request;如果后端端口改成了8081这里也要同步修改否则前端请求会静默失败。接口联通正常会返回JSON页面列表渲染出来如果失败浏览器的F12开发者工具里的Network选项卡会显示红色请求一眼就能定位到问题。到这里完整项目就算跑起来了。整个过程对我来说大概二十分钟对于刚接触前后端分离的新手第一次跑通可能需要一个小时主要是依赖安装和配置调整会花时间。4. 核心功能模块的实现细节4.1 后端接口设计规范与Controller层解析我把后端几个核心接口的路径梳理了一下整体走的是标准的RESTful风格。表驱动设计非常规整GET用于查询POST用于新增PUT用于修改DELETE用于删除返回格式统一为ResultT对象。ResultT这个统一返回对象是整个项目的一个设计亮点。它包含三个字段code状态码、message提示信息、data返回数据。所有Controller方法都返回这个对象前端就能用统一的逻辑处理成功和失败不需要为每个接口单独写一套响应处理。源码里简化了判断约定200表示成功其他都视为异常。前端Axios的响应拦截器里只需判断res.code 200就进入正常逻辑异常提示也能统一弹出。RestController RequestMapping(/bus) public class BusLineController { Autowired private BusLineService busLineService; GetMapping(/line/list) public ResultListBusLine listAllLines() { return Result.success(busLineService.getAllLines()); } GetMapping(/line/detail) public ResultLineDetailVO getLineDetail(RequestParam Integer lineId) { return Result.success(busLineService.getLineDetail(lineId)); } GetMapping(/station/query) public ResultListBusLine queryStations(RequestParam String stationName) { return Result.success(busLineService.findLinesByStation(stationName)); } GetMapping(/transfer/plan) public ResultTransferPlanVO getTransferPlan(RequestParam String startStation, RequestParam String endStation) { return Result.success(busLineService.getTransferPlan(startStation, endStation)); } }分层架构方面Controller负责接收请求和参数校验Service层写业务逻辑Mapper层只操心数据库交互。以线路详情为例Service层先调用Mapper查出线路基本信息再根据lineId查询站点列表组装成LineDetailVO返回。这个拆分思想是JavaWeb面试高频考点也是实际项目中多人协作的基础。4.2 前端核心页面与组件交互前端页面我用Element UI组件快速搭建整体风格比较清爽。总共分三个核心视图线路查询页、换乘查询页、后台管理页。线路查询页是系统的门面主区域是一个带搜索功能的表格组件。搜索框支持输入模糊匹配比如输入“1”就能把“1路”“21路”“101路”都带出来。点某一行的“详情”按钮会弹出一张展示线路完整站点列表的卡片利用Element UI的Drawer抽屉组件实现向右滑出的交互比较现代。站点列表按station_order字段顺序展示每条记录还标注当前站点是第几站方便用户准确把握乘车方向。换乘查询页是系统的技术亮点展示区。两个输入框分别填起点和终点点“查询方案”按钮后前端提交请求到后端/bus/transfer/plan接口。返回结果分情况展示如果有直达线路直接展示线路乘车方案如果需要一次换乘展示两个乘车步骤第一步从A站坐到换乘站C第二步在C站换乘另一条线路去B站如果没有可用方案直接提示用户换乘其他交通方式。后台管理页需要登录才能进入。登录功能用JWTJSON Web Token实现前端登录成功后拿到token存到本地后续每次请求通过Authorization请求头发送给后端后端拦截器校验token合法性。这块是课程设计答辩时的高频提问点面试官一般会追问“你说用了JWT那JWT由几部分组成、怎么保证不被篡改”这类基础问题。源码里的登录流程写得透彻仔细读一遍这部分代码应对答辩绰绰有余。后台管理页面本身是标准的表格增删改查。线路管理支持新增、编辑、删除线路站点管理支持调整站点在线路上的顺序管理员列表支持修改密码。对课程设计来说这块是加分项展示出来让老师觉得项目功能完整管理闭环是齐全的。4.3 前后端数据联通原理前后端数据联通的本质是HTTP请求。Vue前端通过Axios发送Ajax请求到SpringBoot接口SpringBoot处理业务后返回JSON字符串Vue拿到JSON再把数据渲染到页面。整个通路的完整流程可以用一个实际场景来说明用户在换乘查询页输入“幸福小区”到“高铁站”点击查询。前端Axios发送GET请求到/bus/transfer/plan?startStation幸福小区endStation高铁站。后端Controller接收参数Service层执行查询算法把组装好的换乘方案转化成JSON格式通过HTTP响应返回。前端收到的JSON结构大概是这样的{ code: 200, message: success, data: { direct: null, oneTransfer: { startStation: 幸福小区, firstLine: 12路, transferStation: 文化广场, secondLine: K3路, endStation: 高铁站 } } }前端拿到这个JSON之后在data中定义好响应数据结构模板部分用v-if来判断是否有直达方案再通过插值表达式把firstLine、transferStation这些字段渲染到页面上。这套流程走通以后实际上已经掌握了一个通用能力——任何“前端请求后端接口做查询”的需求都是这么实现的。4.4 管理端权限控制简述后台管理模块最值得学习的点是JWT登录认证的完整闭环。后端用拦截器注册了需要认证的请求路径比如/admin/**以及线路和站点的管理接口。在前端登录组件校验用户名密码后请求/admin/login接口如果账号密码正确后端用io.jsonwebtoken.JwtBuilder生成一个包含用户ID和过期时间的token字符串返回给前端。前端拿到token后存储在localStorage中Axios请求拦截器统一在请求头里加上token。后端每次收到请求拦截器先从请求头解析token验证签名有效性和过期时间校验通过才放行到Controller。这个机制保证后台管理接口不能未授权访问是Web系统里非常典型的安全设计。在课程设计答辩环节你可以这样介绍系统采用无状态JWT认证机制前端登录后持有token每次请求携带token后端过滤器校验token有效性。无状态意味着服务器不需要存储会话数据这对比传统的Session机制更适合前后端分离架构。这一段话既体现了理解深度又能引出面试官关于安全性的追问有问有答就是加分项。5. 常见问题与排查技巧实录5.1 运行报错速查表这一节我把自己实际遇到过的、以及身边同学问得最多的几个问题整理成了速查表每个问题都给出了可直接复制的解决方案。报错信息原因分析解决办法Access denied for user rootlocalhost数据库密码错误或用户权限不足检查application.yml里的密码是否和本地MySQL一致Public Key Retrieval is not allowedMySQL 8.0认证插件问题在JDBC连接串末尾加allowPublicKeyRetrievaltruejava.lang.IllegalStateException: Port 8080 already in use后端端口被占用修改application.yml端口或netstat -ano查占用进程并结束npm install报error:0308010CNode版本过高与Webpack4不兼容用Node 14版本或配置NODE_OPTIONS--openssl-legacy-provider前端页面打不开Failed to fetch后端未启动或baseURL配置错误确认后端启动日志正常核对前端请求baseURL和后端端口一致页面中文显示乱码数据库字符集不是utf8mb4重建数据库并选utf8mb4特别是导入SQL时确认编码格式引入的依赖下载失败Maven报红Maven仓库连接不稳定在settings.xml里配置阿里云镜像仓库Table bus_system.bus_line doesnt exist数据库脚本没有导入成功检查数据库连接指向的是bus_system重新执行SQL脚本其中端口问题在开发中最常见。Windows下查找8080端口占用者可以用netstat -ano | findstr 8080命令看到进程PID后打开任务管理器找到对应进程并结束。Mac/Linux下用lsof -i:8080查看占用进程kill -9 PID强制结束。5.2 环境“半新不旧”的典型问题这里说一个比较隐蔽的问题本地MySQL版本是5.7但代码里的JDBC驱动是MySQL 8的com.mysql.cj.jdbc.Driver。这会导致驱动类加载失败吗实际上不会——8.0版本的驱动向后兼容5.7驱动加载完全没问题driver-class-name也不需要特意改回com.mysql.jdbc.Driver。但要注意MySQL 5.7默认的字符集可能不是utf8mb4查询结果出现???乱码时需要在SQL脚本或Navicat里统一调整数据库和表的字符集。另一个“半新不旧”的问题是JDK版本。有些同学的机器装的是JDK17代码里的Lombok注解在编译时会报Lombok version is older的错误。原因很简单Lombok版本太老不支持新版JDK的编译特性。解决办法是升级Lombok依赖版本到1.18.30以上或者直接把JDK切换到1.8。切换JDK后Maven可能缓存了旧编译结果记得在IDEA里执行mvn clean清一次缓存。5.3 前端联调排错心得前端联调是新手最容易卡住的一关这里分享三个排查思路按顺序走基本能解决90%的问题。第一步打开浏览器F12开发者工具切到Network选项卡刷新页面触发一次查询请求。观察请求列表里有没有红色标亮的请求。有红色请求点进去看Response内容后端返回的是报错堆栈还是404还是超时提示这一步能把问题定位到后端还是前端。404说明后端的路径写错了检查Controller的RequestMapping路径和Axios的请求URL是否一致500说明后端代码执行中抛了异常看堆栈信息定位到Service层还是Mapper层。第二步看Console控制台有没有报错信息。前端常见错误像是Cannot read properties of null多半是后端返回的data字段为null前端直接访问了它的属性。这种问题需要在模板里加v-if判断数据存在再渲染或者后端返回空对象而不是null。第三步如果请求没有任何红色页面也没反应看baseURL配置和后端端口是否匹配。这个是最容易疏忽的后端端口改成了8081前端还在请求8080请求会被浏览器直接拦截报CORS错误页面上只会显示一个加载失败。把baseURL改过来问题立刻消失。5.4 代码二次开发的高效路径跑通源码之后的下一步基本就是根据自己的课程设计要求改造成独一无二的功能。这里给出一条高效二次开发的路径。以“给系统加一个线路时刻表功能”为例。数据库层面在bus_line表加一个schedule字段存JSON字符串内容包含每个站点的到达时间。后端层面在BusLineVO类里加对应的schedule字段getLineDetail查询时把时刻表数据一并查出。前端层面在站点列表的公共数据上增加一列“预计到站时间”用插值表达式直接渲染。整个改造流程就是“数据库加字段、实体加成员、Service加逻辑、前端加表格列”一条线串下来。如果你想优化换乘算法这是最能拿高分的方向。源码目前支持直达和一次换乘你可以扩展出两次换乘的BFS搜索。在TransferService里遍历所有中间换乘点C如果A到C可达、C到B可达就筛选出可能性方案再做去重和评分排序。评分规则是换乘次数越少越靠前同样换乘次数时总乘坐站数越少越靠前。这个改动量并不大但答辩的时候讲出来就是“对算法有独立思考和扩展能力”的有力证明。如果想把UI做成更现代的深色风格可以在前端的全局样式文件里调整Element UI的主题色变量几十行代码就能让整个项目看起来完全不一样。或者引入ECharts展示客流数据图表只要后端补充接口返回统计数据前端用ECharts拖一个折线图视觉效果立刻上一个档次。这些改动都不需要伤筋动骨但对提升项目的“辨识度”非常有效。6. 调试心得与细节技巧调试这套项目的过程里我积累了一些零碎但实用的技巧单独写一节分享出来。关于断点调试IDEA里有一个高效动作在Service层的查询方法左侧行号区域点击红点启动后端后用F9添加断点浏览器访问接口时程序会停在断点处。此时按F7进入方法内部逐行查看变量值是排查复杂查询最好的方式。之前我排查一个“换乘查询偶发返回空方案”的问题就是靠断点一步步走发现是中间表里存在脏数据某条记录的line_id是空值导致线路关联失败。把脏数据清理掉问题就解决了。关于SQL日志SpringBoot的application.yml里可以加一段配置把MyBatis执行的SQL语句和参数打印在控制台logging: level: com.bus.system.mapper: debug这个配置的作用是每次Mapper方法执行时控制台都会输出完整SQL以及传入的参数值。给同学远程排查问题时我第一句话通常是“把SQL日志打开”因为90%的查询问题看SQL一眼就能发现错误。关于前端调试Chrome的Vue Devtools插件是必备工具。安装之后打开项目页面F12切到Vue面板能直接查看当前组件的data、props、computed状态。有一次前端页面列表一直空白接口数据明明正常返回我就是通过Vue Devtools发现数据存在了错误的变量里模板绑定的是另一个空数组前后端数据结构对不上。这类问题不借助Devtools很难定位。关于Git版本管理自己二次开发前先初始化一个Git仓库把原始源码做一次初始提交。后续每次改动提交一次出现问题就可以快速回退到上一个可用版本。我在给项目加夜间模式样式时因为误改了一个全局变量导致整站样式错乱当时如果没有Git回退估计得花半天时间手工排查样式问题。养成这个习惯开发效率能提升一个档次。7. 写在最后的实际体验从我拿到这套源码到完全跑通整个流程走完一遍后最大的感受是它非常适合作为前后端分离项目的第一个完整实战。技术栈主流、代码分层清晰、核心算法有真正的业务复杂度而且数据库设计里包含多对多关系和换乘搜索这种有含金量的内容完全可以在简历上和毕业设计中作为亮点写进去。如果你最终决定用这个项目做课程设计或毕业设计请一定不要停留在“跑通就行”。跑通只是及格线真正的加分项是你对代码的二次理解和二次开发。建议你一定要把换乘查询算法代码多读两遍把多对多的关联查询SQL亲手敲一遍把JWT的流程从头到尾梳理一遍并尝试加一个自己的想法在里面——哪怕是记录查询历史这样的小功能。一个小功能加上去你就从“会运行别人的项目”变成了“在别人的基础上做开发”在答辩和面试的表达中这层“我做”与“我改过”的距离往往就是评价差异的关键。