SpringBootVue 心脏病数据分析系统这类题目在毕业设计里其实一直不缺关注度。一是医疗健康方向自带加分项二是前后端分离架构在就业市场上是主流形态三是数据分析可视化做出来效果直观、答辩好讲。我这些年帮学生评审、调优过不少类似项目自己也完整搭过几套今天就把这个项目从选题逻辑、技术选型到前后端实现、部署排错一条线捋清楚给准备做毕设或正在学全栈的同学一份可以直接抄作业的参考。1. 项目选题与整体架构拆解1.1 为什么心脏病数据分析是毕设/课设的好选题先聊聊选题这件事。很多同学选毕设题目的时候容易走到两个极端一是选太普通的某某信息管理系统需求就是增删改查做完自己也觉得没劲答辩老师问两句深一点的问题就卡壳二是选太前沿的基于深度学习的某某预测平台数据得不到、模型调不通、硬件跑不动最后把自己坑进去。心脏病数据分析系统正好落在中间地带。它有三个天然优势有公开真实数据集可用。Framingham心脏研究数据集是全球公开的经典数据集包含年龄、性别、静息血压、血清胆固醇、最大心率等十几个特征字段以及是否患有心脏病的标签列。这意味着你不是在编数据而是基于真实医疗研究数据做分析和展示数据来源是站得住脚的。功能层次丰富可深可浅。基础版是患者数据的增删改查和图表展示进阶版可以引入相关性分析、数据分布统计再往上还能做简单的风险预测模型逻辑回归、决策树等。功能开发量可以按自己的时间和水平灵活裁剪。可视化效果好演示价值高。医生问诊场景里一堆数字没人爱看但转成年龄分布柱状图、患病率饼图、特征相关性热力图之后整个系统的专业感立刻就上来了答辩时的演示效果完全不一样。这套做下来你获得的不是又一届毕设的复制品而是一个同时覆盖后端API开发、前端交互设计、数据库建模、数据分析可视化的完整全栈项目简历上也能实实在在写一笔。1.2 前后端分离架构的核心思路这套项目采用的是目前业界主流的前后端分离架构。后端用SpringBoot提供RESTful风格API只负责业务逻辑和数据处理前端用Vue构建单页应用只负责页面渲染和用户交互两者之间通过JSON格式的数据交互互不干预。这个架构选择不是跟风而是因为它切切实实解决了两类问题。第一分工清晰。后端开发和前端开发可以完全并行。做毕设虽然大多数时候是你一个人写两端但模块边界划清楚之后你的思路会非常清晰——先定义好API接口的URL、请求参数和响应结构前端和后端各自照着这个契约实现就不容易出现两边代码互相纠缠的混乱状态。我当时带的几个学生凡是先写接口文档再动手写代码的联调阶段基本都顺顺利利上来就闷头写写到哪算哪的后期改接口累到想哭。第二部署灵活演示不容易出状况。开发和测试阶段前端跑在8080端口Vue默认后端跑在8081或9090互不干扰任何一端崩了都可以单独重启。到了要部署演示的时候用nginx做一层反向代理或者直接把Vue打包后的静态文件交给SpringBoot托管一个端口搞定演示时不会出现CORS疯狂报错现场翻车的尴尬。2. 技术栈选型SpringBootVueMySQL为什么是黄金组合2.1 SpringBoot凭什么成为Java后端首选很多人刚接触Java Web的时候被Servlet、JSP、SSH、SSM这一堆框架绕得头晕。等到SpringBoot出来以后整个开发体验完全变了。SpringBoot的核心价值就一句话约定大于配置。传统SSM项目里你要写一大堆XML配置文件配置数据源、配置MyBatis的Mapper扫描、配置事务管理器、配置视图解析器……SpringBoot把这些全部内聚成自动装配机制你只需要在pom.xml里引入对应的starter依赖再在application.yml里写明数据库连接串它就能自动帮你把项目跑起来。对一个毕设项目来说SpringBoot带来的效率提升是决定性的。你不需要在让项目启动这件事上浪费两天时间可以把精力全部放在业务功能本身。另外SpringBoot 2.6.x以上的版本内置了Tomcat打包成jar之后一个命令就能启动不再需要单独装一个Tomcat再部署war包这对接下来的虚拟机演示、远程答辩都友好得多。工具箱里还有两个高频搭档Spring Data JPA或MyBatis-Plus。我个人在毕设项目里更推荐MyBatis-Plus因为它的单表CRUD方法直接开箱即用你不需要手写基础的insert、update、delete SQL复杂查询才需要自己写XML或注解SQL。这意味着你的代码量能少一截出bug的概率也相应降低。2.2 Vue适合这个场景的前端方案前端框架里React和Vue常年被拿来比较但在毕设和学习场景下Vue的优势非常明显。Vue的渐进式设计是它最大的特点——你不需要一开始就掌握完整的工程化体系可以先写几个简单的组件然后慢慢引入路由、状态管理。它的模板语法非常接近原生HTML的写法中文文档质量高上手门槛在主流框架里是最低的。一个从没写过前端的小白认真学一周就能写出有模有样的管理后台界面。配套组件库方面Element UIVue 2或Element PlusVue 3是首选。这个组件库里的表格、表单、弹窗、分页组件都是企业级后台通用的风格直接拿过来组装页面比从零写一套CSS风格统一、交互完备的UI要省太多功夫。做管理平台类项目Element Plus ECharts这套组合基本能覆盖你90%的界面需求。版本选择这里多提醒一句这个问题我在多个学生项目里踩过坑如果你是照着网上的旧教程学习很多教程用的是Vue 2 Element UI vue-router 3的组合这时候不要强行升级到Vue 3因为Element Plus和旧教程的写法有较大差异教程里的代码没法直接复制。做毕设的目的是稳定交付不是追新版本。2.3 MySQL小项目里最可靠的数据搭档数据存储选了MySQL不是因为别的就是因为它够用、可靠、资料多。心脏病患者数据集的特征字段是结构化数据对事务有要求比如并发修改患者记录时要保证数据一致这种场景下关系型数据库天然就是正确答案。MySQL在个人项目和中小型系统里的地位相当于轿车里的家用经济型——不花哨但各方面都均衡怎么开都不会出大问题。可能有人会问用Oracle是不是更高级我劝你趁早打消这个念头。Oracle在毕设场景里属于典型的过度设计安装包几个G起步配置复杂而且和SpringBoot的集成资料远不如MySQL丰富。遇到一个问题百度一搜全是MySQL的解决方案Oracle的可能搜出来的都是十几年前的论坛帖子。做项目效率第一不要给自己加戏。3. 核心功能模块与数据库设计3.1 数据库表设计从分析需求反推表结构数据库设计是整个系统的基础。表设计得好不好直接决定后续业务代码写起来顺不顺手。我习惯的做法是先把系统功能模块列出来再从每个功能出发反推需要哪些表、哪些字段。这套系统的核心功能有四块用户管理、患者数据管理、数据可视化、分析报告。围绕这四块最核心的数据库表可以设计成这样-- 用户表 CREATE TABLE sys_user ( id int(11) NOT NULL AUTO_INCREMENT COMMENT 用户ID, username varchar(50) NOT NULL COMMENT 用户名, password varchar(255) NOT NULL COMMENT 密码BCrypt加密, nickname varchar(50) DEFAULT NULL COMMENT 昵称, role varchar(20) DEFAULT admin COMMENT 角色, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), UNIQUE KEY uni_username (username) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT系统用户表;用户表就没什么好说的标准的用户信息表。注意两点密码务必用BCrypt加密存储不要明文存库这既是安全意识也方便你在设计文档里写使用BCrypt对密码进行加密存储当作安全模块的亮点用户名一定要加唯一索引用来支撑登录时的唯一性校验。接下来是核心的patient表。这个表的字段设计直接参考了Framingham心脏病数据集的统计口径它包含了评估心血管风险的关键生理指标-- 心脏病患者数据表 CREATE TABLE patient_info ( id int(11) NOT NULL AUTO_INCREMENT COMMENT 主键ID, name varchar(50) NOT NULL COMMENT 患者姓名, gender tinyint(1) DEFAULT NULL COMMENT 性别1男 0女, age int(11) DEFAULT NULL COMMENT 年龄, cp tinyint(1) DEFAULT NULL COMMENT 胸痛类型(0~3), trestbps int(11) DEFAULT NULL COMMENT 静息血压(mmHg), chol int(11) DEFAULT NULL COMMENT 血清胆固醇(mg/dl), fbs tinyint(1) DEFAULT NULL COMMENT 空腹血糖120mg/dl(1是 0否), restecg tinyint(1) DEFAULT NULL COMMENT 静息心电图结果(0~2), thalach int(11) DEFAULT NULL COMMENT 最大心率(bpm), exang tinyint(1) DEFAULT NULL COMMENT 运动诱发心绞痛(1是 0否), oldpeak decimal(10,2) DEFAULT NULL COMMENT 运动相对休息ST段压低, slope tinyint(1) DEFAULT NULL COMMENT ST段峰值斜率(0~2), ca int(11) DEFAULT NULL COMMENT 荧光透视血管数(0~3), thal tinyint(1) DEFAULT NULL COMMENT 地贫类型(1~3), target tinyint(1) DEFAULT NULL COMMENT 是否患病(1是 0否), create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT心脏病患者数据表;这些字段如果你自己查过资料就会理解它们都是心脏病风险预测相关研究中最关键的特征。age是年龄cp是胸痛类型trestbps和chol分别反映血压和血脂状况thalach和exang来自运动负荷测试oldpeak反映的是心电图ST段的变化幅度。在答辩的时候如果你能讲清楚每个字段反映的医学含义老师对你的专业印象分会高很多。如果你觉得一张表太单薄可以再加一张查询分析记录表用来记录用户每次执行的数据筛选分析操作字段包括筛选条件、影响行数、生成时间等这就是给系统加了一层平台属性比单纯的数据管理显得更完整。3.2 核心功能模块拆解以及各自的实现要点用户认证模块登录、注册、退出。技术实现上有个选择——用传统的Session会话保持还是用JWT令牌。我的建议是直接上JWT。原因有几个前后端分离架构下JWT更契合无状态会话对服务端压力小JWT本身就是面试高频话题你在答辩中能把令牌生成、校验、过期刷新讲清楚是明显的加分项而且SpringBoot里集成JWT非常容易jjwt库只要几行代码就能完成签发和解析。患者数据管理模块这是系统的地基核心操作是患者信息的增删改查、分页查询、模糊搜索筛选。需要注意的不只是CRUD本身还有筛选条件的组装策略。实际做的时候患者数据可能上千条甚至更多全部接口结构上要支持按年龄范围、血压范围、是否患病等多个条件组合查询这就需要写动态SQL。MyBatis-Plus里有wrapper查询构造器可以很优雅地解决多条件拼接。加分操作是加一个数据批量导入功能支持上传CSV文件批量录入患者数据这在演示时会非常出彩——一张几百条数据的表你鼠标点点点肯定点不完一键导入就显得这个系统能扛数据。数据可视化模块这是整个项目视觉上的门面。这部分的内容是整套项目里我最想提醒你重视的部分因为答辩时老师对界面的直观感受往往比代码逻辑更先入为主。核心图表至少要做四张年龄段与患病人数的柱状图、患病/未患病占比的环形饼图、各特征与患病关系的横向对比图、特征相关性热力图。图表库选ECharts就行它提供完整的JavaScript API和详尽的示例前后端之间只需要约定好数据格式前端把后端返回的JSON数据填进ECharts的配置项就能出图做起来非常快。分析报告模块可视化是给数据看相分析报告是让数据说话。这一步不要求你做多高级的机器学习模型可以基于简单的统计学规则来做。举个例子系统可以根据患者数据计算年龄均值、血压均值、胆固醇偏高人群占比生成一段自动化的文本分析报告。进阶的玩法是做一个基于逻辑回归的风险预测接口——用训练好的模型权重接收前端传过来的患者指标返回患病概率。这个功能的实现不需要引入复杂的机器学习框架自己手写LinearRegression的预测公式都能完成但在项目功能描述里写上基于逻辑回归模型的风险评估就会显得很有深度。4. 从零搭建的实操过程与核心代码实现4.1 环境与版本选型别在版本号上栽跟头版本选型这件事看着不起眼实际是新手最容易翻车的地方。一个典型的场景教程里用的是SpringBoot 2.5 MyBatis-Plus 3.4你从官网下载了SpringBoot最新版一启动就报错去查发现是版本兼容性问题一查就是一下午。所以这里我给出经过验证的稳定组合技术组件推荐版本JDK1.8稳妥或 17较新SpringBoot2.6.13最稳妥教程资料最多MyBatis-Plus3.5.2MySQL5.7 或 8.0建议8.0Node.js14.x ~ 18.x建议16Vue CLI4.x对应Vue 2或 5.x对应Vue 3Element UI / Plus2.15.xVue2 / 2.2.xVue3这里要多说一句我看到很多学生项目启动不了最后原因都是springboot版本太高。SpringBoot 3.0是个分水岭它基于Jakarta EE 9规范需要JDK 17以上很多老教程里用的javax.*包名要改成jakarta.*。如果没经验直接上手3.x版本网上教程大多对不上号极其折磨人。做毕设求稳我推荐直接用SpringBoot 2.6.13 JDK 1.8这套经典组合遇到的每一个报错都能在网上找到确切答案。4.2 后端搭建的五个步骤以及关键代码我习惯把后端搭步骤拆成五步一步做完再走下一步这样出了问题好定位在IDEA里新建Spring Initializr工程填好Group和Artifact坐标勾选Web、MySQL Driver、MyBatis-Plus依赖生成工程骨架配置application.yml数据源和MyBatis-Plus相关参数使用MyBatis-Plus的代码生成器根据数据库表自动生成实体类、Mapper接口、Service类编写统一返回结果类Result、异常处理类、工具类逐模块写Controller层接口。application.yml里最核心的数据源配置长这样server: port: 9090 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/heart_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto几个细节值得展开说一下。url里的serverTimezoneAsia/Shanghai必须配不然数据库连接会报时区错误useSSLfalse加上不然高版本MySQL和JDBC驱动之间的SSL校验容易出幺蛾子这也是热门搜索里mysql ssl连接错误的源头。map-underscore-to-camel-case配成true之后数据库的create_time字段能自动映射到Java实体类的createTime属性省掉大量手写映射标签的时间。再来看一个典型的接口代码比如分页多条件查询患者数据RestController RequestMapping(/api/patient) public class PatientController { Autowired private PatientInfoService patientInfoService; /** * 分页查询患者数据支持多条件筛选 */ GetMapping(/page) public Result page(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) Integer ageStart, RequestParam(required false) Integer ageEnd, RequestParam(required false) Integer gender, RequestParam(required false) Integer target, RequestParam(required false) String name) { LambdaQueryWrapperPatientInfo wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(name), PatientInfo::getName, name) .ge(ageStart ! null, PatientInfo::getAge, ageStart) .le(ageEnd ! null, PatientInfo::getAge, ageEnd) .eq(gender ! null, PatientInfo::getGender, gender) .eq(target ! null, PatientInfo::getTarget, target) .orderByDesc(PatientInfo::getCreateTime); PagePatientInfo page patientInfoService.page(new Page(pageNum, pageSize), wrapper); return Result.success(page); } }这段代码核心就是LambdaQueryWrapper的链式条件组装。注意它是用lambda方法引用指向实体的getter编译期就检查字段名不会因为手写字符串拼错导致SQL语法报错如果根据条件是否为空决定要不要拼SQL会照条件是否存在条件为空就跳过。这个写法在实现查询功能时频繁使用务必掌握。前端拿到这个接口的返回结果结构是固定的{ code: 200, msg: 操作成功, data: { records: [...], total: 123, size: 10, current: 1 } }前端只需要针对这个结构一目了然地渲染表格和分页即可。4.3 前端搭建路由、封装、图表实战前端我建议直接使用Vue CLI创建工程然后按C:\项目目录\src\views这种方式组织页面。每个功能模块对应一个页面目录比如登录页Login.vue、首页Home.vue、患者管理PatientManage.vue、数据可视化ChartsView.vue结构清晰查起来也方便。先是路由配置。一个前后端分离项目路由是衔接页面跳转的骨架import Vue from vue import VueRouter from vue-router Vue.use(VueRouter) const routes [ { path: /login, component: () import(/views/Login.vue) }, { path: /, component: () import(/layout/Layout.vue), redirect: /dashboard, children: [ { path: dashboard, component: () import(/views/Dashboard.vue) }, { path: patient, component: () import(/views/PatientManage.vue) }, { path: analysis, component: () import(/views/AnalysisView.vue) } ] } ] const router new VueRouter({ mode: history, routes }) // 全局前置守卫未登录跳转登录页 router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.path ! /login !token) { next(/login) } else { next() } }) export default router路由守卫这段代码很重要。它实现的是没登录就不让进系统的效果这是每一套管理系统的标配能力。注意跳转逻辑写在beforeEach全局守卫里是当前页面跳转前统一拦截的比在页面里分散判断要优雅得多。然后是对axios做统一封装主要在请求头携带JWT令牌、统一处理响应码和错误提示import axios from axios import { Message } from element-ui import router from /router const request axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截器每个请求自动携带Token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) // 响应拦截器统一处理后端返回结果 request.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res }, error { if (error.response error.response.status 401) { Message.error(登录已过期请重新登录) router.push(/login) } else { Message.error(网络异常请稍后重试) } return Promise.reject(error) } ) export default request这套封装最大的好处是页面里调用接口时完全不需要关心Token怎么带、错误怎么弹页面里只需干净利落地写const res await request.get(/patient/page, { params: this.queryParams }) this.tableData res.data.records this.total res.data.total最后是可视化页面的核心操作。ECharts的用法可以分为三步走——先引入init初始化DOM节点再写option配置最后setOption渲染图表。以年龄分布柱状图为例import * as echarts from echarts mounted() { this.loadChartData() } async loadChartData() { const res await request.get(/analysis/age-distribution) const option { title: { text: 各年龄段患病人数分布 }, tooltip: {}, xAxis: { type: category, data: res.data.map(item item.ageRange) }, yAxis: { type: value, name: 人数 }, series: [ { name: 患病人数, type: bar, data: res.data.map(item item.count), itemStyle: { color: #409EFF } } ] } const chart echarts.init(this.$refs.chartRef) chart.setOption(option) }后端返回的数据结构是[{ageRange: 30-40, count: 23}, {ageRange: 40-50, count: 56}]这种列表结构前端一行map就能整合进图表的data里。图表的美化配置项有很多比如柱状图加渐变颜色、折线图加面积填充、饼图加环形半径这些在ECharts官方示例里都有模板花半小时挑一个改造成自己的配色整个系统的视觉效果就能提升一大截。5. 前后端联调与部署避坑实录5.1 联调第一步解决跨域问题前后端分离开发模式下最常见的第一道坎就是跨域。报错信息通常是这样的Access to XMLHttpRequest at http://localhost:9090/api/xxx from origin http://localhost:8080 has been blocked by CORS policy。产生的原因很简单前端跑在8080端口后端跑在9090端口两者不在同一个源协议、域名、端口任一不同就跨域。浏览器出于安全策略默认会拦截这种跨源请求。解决跨域有两个思路一个在后端加CORS全局配置一个在前端开发服务器配代理。后端方式直观在SpringBoot里写一个配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }特别注意allowedOriginPatterns这个东西如果你在SpringBoot 2.7以上版本用allowedOrigins(**)加allowCredentials同时启用是会被拦下来的因为这样配置不安全需要用allowedOriginPatterns替代。前端方式更推荐在vue.config.js里配置代理让前端环境里的接口请求转发到后端module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:9090, changeOrigin: true } } } }配置好以后前端请求/api/xxxdevServer会帮你转发到http://localhost:9090/api/xxx浏览器的请求源是8080但代理转发发生在服务端浏览器就感知不到跨域了。5.2 Vue打包后放进SpringBoot两种常见部署姿势开发完成之后最终部署一般有两种方案市面通用我都替你们试过。方案A用nginx部署前端反向代理后端接口正式点的项目普遍用这种。Vue执行npm run build后产出dist目录把dist丢给nginx托管nginx配置里把 /api 路径反向代理到后端的9090端口。这种方式下前端和后端是两个独立服务架构严谨、负载均衡方便线上真实项目都是这套。方案B把dist目录交给SpringBoot托管毕设演示场景更推荐这种方案因为最终交付物只是一个jar包双击就能跑不用额外装nginx。做法很简单把npm run build产出的dist目录里的文件全部复制到SpringBoot项目的src/main/resources/static目录下重新打包。SpringBoot会自动把static目录作为静态资源根路径默认直接访问localhost:9090就能看到前端页面。然后保证前端axios代码里baseURL直接用相对路径/或/api不需写死域名端口打包出来的前端资源就能和后端共用一个服务。这里有一个经典的大坑Vue路由用history模式部署后刷新页面404。原因在于history路由依赖浏览器的History API跳转到某个路径时是前端路由在接管处理但一刷新浏览器会向服务端请求该路径对应的资源而后端并没有这个路由对应的地址自然就404了。解决办法有两个方向。一是在后端加个简单的路由兜底让所有未知路径都转发到index.htmlController public class PageController { RequestMapping(value /{path:[^\\.]*}) public String forward() { return forward:/index.html; } }二是在vue.config.js里把打包output的publicPath配好同时考虑直接用hash模式路由url里带#号那种。hash模式丑是丑点但它是纯前端路由永远不涉及服务端路径匹配问题稳定性最高。演示场景求稳的话我甚至建议直接用hash模式。5.3 数据库连接和字符集从源头杜绝小毛病数据库这块有两个高频问题我想重点提一下。第一个是MySQL 8.0的驱动类变化。如果你是跟着旧教程写代码它引导你配的是com.mysql.jdbc.Driver但在MySQL 8.0里这个类已经过期了正确写法是com.mysql.cj.jdbc.Driver。如果项目能编译但启动报驱动类错误优先检查这里。第二个是字符集乱码问题。MySQL数据表字符集务必统一用utf8mb4连接串里也要显式加上characterEncodingutf8。前后端交互时的中文乱码很多来自这里。如果你导入数据后发现中文变成问号多半是表结构默认latin1导致的重建表并指定utf8mb4字符集就好。6. 常见问题与排查技巧实录为了让你们少走弯路我把这几年学生项目里遇到的高频问题梳理成一张速查表。每个问题都是真实场景排查思路和解决方法是验证过有效的现象根因排查思路与解决后端启动报端口被占用9090端口被其他进程占用用netstat -ano|findstr 9090查PID任务管理器结束后换端口前端请求接口报404后端没有对应URL映射核对Controller的GetMapping路径和前端调用的URL完全一致注意大小写和斜杠前端请求接口报405HTTP方法不匹配检查前端用的是GET还是POST后端接口是GetMapping还是PostMapping登录成功后下次访问又跳登录JWT Token没带或过期检查axios请求拦截器是否把Token加到Authorization头检查后端JWT过期时间设置表格日期显示成时间戳后端返回日期格式没处理在application.yml配置jackson的date-format前端再配合dayjs格式化显示数据导入时中文乱码CSV文件编码不是UTF-8Excel另存时选择UTF-8编码CSV或用代码强制按UTF-8读取文件部署后图表大小变成0容器或图表在隐藏状态渲染在mounted之后使用this.$nextTick渲染图表或在窗口resize事件中调用chart.resize()打包后刷新404vue-router history模式改用后端路由兜底或改用hash模式或配置nginx的try_filesMySQL启动后服务连不上服务没启动或端口被改Windows打开服务管理器确认MySQL服务状态确认端口不是3306而是其他项目运行慢首次请求卡顿MyBatis-Plus打印SQL日志过多生产环境关闭log-impl配置本地调试保留但分页查询检查是否全表扫代替索引排查问题这件事我劝你别急着改代码。先看报错信息再看日志最后定位到具体是前端问题、后端问题还是数据库问题然后再动手。很多同学一报错就这里改改那里改改结果越改越乱最后整个项目都改废了。二分定位法把请求从前到后划成浏览器→前端路由→后端Controller→Service→Mapper→MySQL几段逐步确认哪一段出了问题这是最高效的排错方式。比如前端点查询按钮没反应先打开浏览器F12看Network面板确认请求发出去了没有、返回的HTTP状态码是多少、响应体里有没有错误信息。如果请求都没发出去问题一定在前端代码请求发出去了但400/500再往后端日志找原因。这样做一次排错就能少浪费一两个小时。最后再分享一个经验这套项目从选题到落地我最大的体会是真正拉开差距的不是技术而是工程习惯。那些顺利通关的毕业生往往具备一个共同点——先想清楚再做先画架构图再写代码先定接口再联调每完成一个模块就及时测试。反观那些中途翻车的几乎都是打开IDE就写写哪算哪。所以作为参考你的项目可以这样安排节奏第一周做需求分析和数据库设计第二周完成后端基础CRUD和JWT登录第三周完成前端页面和接口联调第四周集中做可视化图表、系统测试和部署文档。这样安排进度压力可控质量也能保障。剩下的时间可以优化图表颜色、补充测试数据、完善README每一分投入都能让答辩表现更好。做毕设其实是在模拟你做真实项目的流程把上面这些环节都走扎实了你出去面试时发现的第一个收获会是这套全栈开发流程你已经真刀真枪跑通一遍了。