在医院管理这类课题里SpringBoot Vue 的组合可以说是近五年热度最高的毕设选题之一。GitHub 上随便一搜就是一堆XX医院管理系统源码但真正能讲清楚怎么跑起来、怎么改、怎么答辩的内容反而不多。这篇文章我打算换个角度不简单堆功能列表而是把这套系统的技术架构、数据库设计、前后端交互的细节以及从零跑通的完整流程全拆开讲。无论你是准备拿它当毕业设计还是想借着课设把 SpringBoot 和 Vue 的实战能力补起来都可以直接参考。我踩过的坑、走过的弯路也会一并说清楚。1. 医院后台管理系统整体设计与思路拆解1.1 为什么这套技术栈能成为毕设常青树先说结论这套组合能火不是因为技术多新而是因为它在工作量大不大和技术含量够不够之间找了一个很舒服的平衡点。SpringBoot 负责后端接口内置 Tomcat省掉了传统 SSM 项目里一大坨 XML 配置MyBatis-Plus 又在 MyBatis 基础上把单表 CRUD 简化到了极致写一个 BaseMapper 接口就能继承十几张表的增删改查方法这对赶毕设进度的同学来说非常友好。Vue 作为前端框架采用组件化开发配合 Element UI 组件库几天的功夫就能搭出一个看起来像那么回事的管理后台界面。MySQL 这边医院管理涉及患者、医生、科室、药库、挂号、收费、住院、检查检验表结构天然复杂建表、写 SQL、设计外键关系的素材非常充足。一句话总结这套系统的广度足以撑起毕设的篇幅要求深度又足以在答辩时讲出几个像样的技术点还不会把你拖到做不完的境地。1.2 系统模块拆解一个完整的医院后台需要哪些功能拿我实际见过的一份医院后台源码举例标准的功能结构大致可以分成这几块系统管理管理员账号、角色权限、菜单权限、操作日志。这是每个后台系统的地基答辩时被问权限怎么设计的就靠这部分撑场子。门诊管理科室管理、医生排班、挂号记录、门诊病历。挂号是整个医院业务的起点排班表的时间冲突判断是一个很好的技术亮点。药房管理药品信息、库存台账、入库/出库记录、药品过期预警。药品数量的流水记录能体现事务控制的功底。住院管理入院登记、病房分配、床位管理、出院结算。收费管理收费项目设置、收费单生成、退费处理。统计分析门诊量统计、收入统计、科室工作量排名。这一步通常会引入 ECharts 做图表是展示项目完成度的加分项。每个模块都不是孤立的比如挂号会关联患者档案开药会关联药房库存收费单会关联门诊病历。模块之间的这种关联关系既是数据库设计时的难点也是答辩时能讲十分钟的素材。1.3 数据库设计表怎么建关系怎么理医院管理系统属于典型的多表关联场景核心表不下十几张。我建议主要表按这个思路设计用户体系管理员表、医生表、患者表三张表分开。如果你做的是后台管理通常不需要开放患者端注册患者信息由挂号人员统一录入。业务主链路科室表dept→ 医生表doctor带 dept_id 外键→ 排班表schedule→ 挂号表registration→ 病历表medical_record→ 收费表payment。辅助链路药品表drug→ 入库单表drug_in→ 出库单表drug_out→ 库存表drug_stock。药库的表尽量做成流水账形式也就是每次入库出库各一条记录库存数量由流水汇总得出而不是直接在药品表上改库存数字——这么做的好处是账目可追溯答辩时可以专门讲为什么不做冗余字段而是用流水表。主键统一用自增 id外键字段命名统一加_id后缀比如dept_id、doctor_id字段类型保持一致性。别小看这些习惯数据库表设计得规范后面写 SQL 联表查询的时候会轻松很多。1.4 前后端分离这套玩法的优势前后端分离不是新鲜词但把这套结构用明白确实能省不少事。前端 Vue 项目跑在 8080 端口后端 SpringBoot 跑在 8081 端口两边通过 RESTful API 交换 JSON 数据。这样做的好处是后端只管 SQL 和业务逻辑前端只管渲染和交互分工明确调试时不容易互相拖累。前端启动用npm run serve改了代码热更新秒级生效不用像传统 JSP 项目那样频繁重启 Tomcat。一套后端接口可以复用给管理后台、患者端小程序等多个终端这一点在答辩时讲系统的可扩展性非常加分。2. 核心技术细节与实操要点从框架到认证逐层拆2.1 SpringBoot 后端分层架构和关键注解不能写错你拿到的源码不管是什么样后端代码基本都会按这个分层结构组织Controller 层负责接收前端请求、校验参数、调用 Service。Service 层核心业务逻辑全在这一层重点是事务管理。Mapper 层通过 MyBatis-Plus 的 BaseMapper 继承单表 CRUD复杂查询自己写 XML 或使用条件构造器。Entity 层数据库表的映射实体字段与表字段一一对应。关键注解做个小结这些答辩时必问RestController // 标识这是一个返回 JSON 的控制器 RequestMapping(/api) // 类级别的路径前缀 Autowired // 依赖注入Service 注入到 Controller Transactional // 事务注解加在 Service 类或方法上 TableName(sys_user) // MyBatis-Plus 实体与表名的映射 TableId(type IdType.AUTO) // 主键自增策略一个典型的 Controller 方法长这样GetMapping(/doctor/list) public Result getDoctorList(Integer pageNum, Integer pageSize) { PageDoctor page new Page(pageNum, pageSize); PageDoctor doctorPage doctorService.page(page); return Result.success(doctorPage); }注意分页这里直接用 MyBatis-Plus 的Page类配合MybatisPlusInterceptor配置分页插件不用自己写LIMIT省时省力。2.2 JWT 登录认证这套系统的安全门面大多数医院后台源码的登录方案是 JWTJSON Web Token配合 SpringBoot 拦截器。JWT 的好处是无状态服务器不用存 session前端拿到 token 存进 localStorage每次请求在请求头里带上Authorization: Bearer token就行。token 的生成逻辑大概是String token Jwts.builder() .setSubject(username) .claim(role, user.getRole()) .setExpiration(new Date(System.currentTimeMillis() 1000 * 60 * 60 * 2)) .signWith(SignatureAlgorithm.HS256, secretKey) .compact();拦截器这边通常会写一个JwtInterceptor实现HandlerInterceptor在preHandle里校验 token 是否有效如果无效直接返回 401。配置层用WebMvcConfigurer注册拦截器同时通过addPathPatterns和excludePathPatterns放行登录接口和静态资源。有个细节需要留神token 过期时间别设太长也别太短。两小时是一个比较常见的值但有的源码里写的是 24 小时这在平时学习没问题答辩时如果被问到 token 过期了怎么办就有点答不上来。可以在 Refresh Token 或强制重新登录这两个方案里选一个能讲清楚的写进论文里作为改进点。2.3 Vue 前端页面怎么搭、请求怎么发Vue 端核心看两块第一块是路由。编写后台系统的标准姿势是用动态路由配合布局组件左侧菜单点击后右侧内容区域通过router-view渲染对应页面。常见的配置长这样const routes [ { path: /login, component: Login }, { path: /, component: Layout, children: [ { path: dashboard, component: Dashboard }, { path: doctor, component: DoctorManage } ]} ]第二块是请求封装。源码里一般会自己封装一个 request.js基于 axios 创建实例设置baseURL指向后端地址然后在请求拦截器里把 token 加到请求头在响应拦截器里统一处理 401 跳转登录页。核心代码片段service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; }, error Promise.reject(error));一个小提醒前后端地址别写死。很多人报错网络请求失败十有八九是接口地址写死成了别人的 IP。建议在项目根目录建一个.env.development文件写上VUE_APP_BASE_URL http://localhost:8081/api用环境变量管理换环境时改一行配置就行。2.4 前端 Vue 组件的复用理念医院后台页面很多比如医生管理、药品管理、科室管理页面结构高度相似顶部是搜索条件中间是表格底部是分页。如果用原生 JS 写每个页面复制一遍代码能累死。Vue 的做法是把搜索栏 表格 分页封装成通用组件通过 props 传入 URL 和列配置就能复用到所有列表页面。此处只讲思路实际上手时用 Element UI 的el-table、el-pagination、el-form组合再抽出一个PageWrapper.vue组件每个业务页面的代码量能减少一半。这部分也是你论文里前端组件化设计这一章的重要素材。3. 从零跑通项目的完整实操过程环境、导入、启动全记录3.1 前置环境准备版本选择是第一个坑拿到源码的第一件事不是急着打开 IDEA而是先确认环境版本。版本不匹配导致的报错能查到你怀疑人生。我实际跑通这套系统的推荐环境如下软件推荐版本说明JDK1.8 或 11很多老源码基于 JDK 8 开发直接用 JDK 8 最稳Maven3.6.xIDEA 自带即可注意镜像源配置MySQL5.7 或 8.08.0 需要注意驱动名和时区设置Node.js14.x 或 16.xVue CLI 项目对高版本 Node 有兼容问题IDEA / VSCode任意较新版本后端用 IDEA前端用 VSCode各干各的互不干扰Node 版本这一点值得单独强调。如果你直接用 Node 18 去跑一个两年前写的 Vue 项目十有八九会报下面这个错Error: error:0308010C:digital envelope routines::unsupported原因很简单就是高版本 Node 的 OpenSSL 和旧版 Webpack 不兼容。解决办法有两个一是按推荐装 Node 16二是在 package.json 的启动命令里加set NODE_OPTIONS--openssl-legacy-provider。相比之下直接换 Node 版本更省心。3.2 初始化 MySQL 数据库这一步是整个项目能不能跑通的关键。别急着一上来就启动后端先把数据库建好。推荐流程用 Navicat 或命令行连接 MySQL。创建一个名为hospital的数据库字符集选 utf8mb4排序规则选 utf8mb4_general_ci。utf8mb4 和 utf8 的区别是前者支持 emoji 表情和更多生僻字门诊病历里出现特殊符号时不会乱码。找到源码里的sql文件夹通常有一个hospital.sql文件直接右键运行 SQL 文件。运行完成后检查表数量一般十几张到二十几张表正常如果只有两三张表说明 SQL 文件没导入彻底仔细检查报错日志。一个小技巧导入 SQL 前用记事本打开文件头看一眼如果里面有CREATE DATABASE语句那执行时会自动建库。如果没有你就得先手动建库再导入不然会一直报 1046 错误。3.3 修改后端配置并启动项目打开 IDEA用 Maven 导入后端项目等依赖下载完成后找到application.yml文件重点检查这几项配置server: port: 8081 spring: datasource: url: jdbc:mysql://localhost:3306/hospital?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver有几个注意事项serverTimezone必须设否则 MySQL 8.0 连接时会报时区错误。数据库密码改成你自己的这个不用多说。端口如果被占用别硬碰硬换个没被占用的端口就行。配置改完后找到启动类类名通常是xxxApplication右键 Run。看到 SpringBoot 的启动日志刷出来后如果没有打印 ERROR后端就启动成功了默认端口就是 8081。3.4 启动前端项目前端项目一般是独立的文件夹用 VSCode 打开在终端执行npm install这一步会经历一段漫长的等待如果下载速度感人先检查有没有配置淘宝镜像npm config set registry https://registry.npmmirror.com装完后执行npm run serve看到Compiled successfully的提示后浏览器访问http://localhost:8080用默认管理员账号通常在源码的 README 或者 SQL 的sys_user表里能找到登录。如果你看到的页面是 Vue 默认首页而不是登录页那大概率是后端启动失败前端路由守卫拦不住空接口先去检查后端日志。3.5 打通前后端联调前端页面能打开只是一个起点真正的联调环节才是问题重灾区。打开浏览器控制台的 Network 面板刷新页面看请求列表如果接口状态是 200且返回的是 JSON 数据说明前后端联通正常。如果接口是 404说明路径不对去后端 Controller 里查看实际的RequestMapping路径和前端 axios 请求路径对比。如果接口是 403说明权限拦截器干的检查登录状态和 token 是否传到后端。如果接口是 500去 IDEA 控制台看具体的异常堆栈通常是 SQL 问题或者 NullPointerException。这一套排查流程顺手一跑很多问题都能自己动手解决这个过程本身就是学习 web 开发最有价值的部分。4. 常见问题与排查技巧实录4.1 IDEA 插件升级后项目突然无法编译怎么办我在本地跑通一个医院管理系统源码时遇到过非常典型的问题项目下载下来能跑第二次打开突然编译报错提示无法解析com.baomidou.mybatisplus.core.mapper.BaseMapper。排查之后发现原因是两个版本不同的 MyBatis-Plus 依赖同时存在于 Maven 仓库IDEA 的缓存把旧版本 jar 认成了新版本的依赖。解决办法IDEA 菜单 File → Invalidate Caches → 勾选 Clear file system cache and Local History → Invalidate and Restart。重启后项目会自动重新索引依赖也能重新解析。4.2 前端页面 404路由刷新后失效怎么处理初学者用 Vue Router 最容易踩的坑是部署后刷新页面直接白屏或者 404。原因在于 Vue Router 默认使用 history 模式这个模式需要后端配合做 URL 回退。开发环境下没这个问题但如果你用npm run build打包后放到 Tomcat 或者 Nginx 上就得做处理。实际项目里很简单修改路由模式为 hash 模式把createWebHistory()换成createWebHashHistory()。虽然路径上会多一个#/但对后台管理系统完全无所谓却能让部署省掉一堆配置。4.3 MySQL 连接时报错 1129 Host is blocked这个报错很多人第一次见会慌。原因是连接失败次数太多MySQL 自动加了缓存锁。解决办法是登录 MySQL 后执行FLUSH HOSTS;如果是 Host xxx is blocked because of many connection errors执行这条命令可以解除封锁。如果想治本把 max_connect_errors 调到 1000SET GLOBAL max_connect_errors 1000;4.4 启动后端报端口被占用怎么快速查找SpringBoot 默认端口 8081 被占用时的提示一般是Port 8081 was already in use。Windows 用户按 WinR 输入 cmd执行netstat -ano | findstr 8081最后一列是 PID再执行taskkill /PID 你查到的PID /FMacOS 用户则用lsof -i :8081 kill -9 PID4.5 npm install 报错 ERESOLVE unable to resolve dependency tree这个报错本质上是因为项目里的依赖版本和当前 npm 版本解析冲突。大多数源码项目都会遇到。处理方式是执行npm install --legacy-peer-deps建议直接在 package.json 的 scripts 里也写好这一条scripts: { install:force: npm install --legacy-peer-deps }这样后面再遇到这个报错就能一键重装不用每次敲一长串命令。4.6 前后端联调出现跨域报错浏览器控制台报Access-Control-Allow-Origin相关错误说明后端没启用跨域策略。解决方式是在后端配置类加一个跨域配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:8080) .allowedMethods(*); } }这种方案是全局生效比在每个 Controller 上加 CrossOrigin 省事得多。5. 毕业设计答辩高频追问与低成本加分改造5.1 这些问题提前想好答辩不慌医院后台管理系统的答辩提问方向比较固定提前对着镜子讲几遍起码能捞回十分印象分。为什么用 JWT 而不是 Session答要点无状态、易扩展、适合前后端分离。分页查询怎么实现的答要点MyBatis-Plus 的分页插件拦截 SQL自动拼 LIMIT再封装 Page 对象返回记录数和当前页数据。多表查询怎么做的答要点Maven 项目里用 XML 写自定义 SQL 联表查询或者用 MyBatis-Plus 的 QueryWrapper 做单表查询后再内存组装。建议把 SQL 写法记清楚被追问的概率非常高。权限怎么设计的答要点用户表 → 角色表 → 菜单表的 RBAC 模型登录时查询用户角色根据角色返回可访问的菜单和按钮权限。5.2 低成本但高价值的几个改造方向如果你答完基础问题还想体现点额外工作量这几个改造方向成本很低但非常能撑场面给挂号模块加号源控制—— 每天每个医生的可挂号总数是有限的挂满之后提示剩余号源为 0。这个功能用一张schedule表加一个剩余号源字段就能实现改动量小但能展示你对业务细节的理解。接入 ECharts 做统计报表—— 管理员首页放两个图表门诊量折线图、科室收入排行榜柱状图。前端引入 ECharts 很快后端写两个聚合查询接口回答大数据统计这一层的提问就有实例了。导出 Excel 报表—— 用 EasyExcel 把收费记录导出成 Excel 文件。前后端各写十几行代码但能展示文件导出、流处理、下载响应这些前端之外的能力。写在最后的几点经验跑通一套医院后台管理系统可能只需要半天真正把它变成答辩时拿得出手的项目需要的是把每一块代码的运行逻辑都搞明白。我个人建议拿到源码后按这个顺序去读先看数据库表结构和表关系再看登录模块的 JWT 完整链路然后挑一个核心业务模块比如挂号或者药房把 Controller → Service → Mapper → SQL 的前后台调用链路走一遍。读完后哪怕功能没改一行你对整个项目的理解已经远超那些只会复制粘贴的同学。最后再分享一个小技巧跑通项目后把源码在本地 Git 仓库里打个初始版本之后每次改动都留个 commit答辩时把提交记录展示出来比口头说我改了很多地方更有说服力。GitHub 和 Gitee 都能建私有仓库这点操作成本换来的是一个肉眼可见的完整开发记录非常值得。
SpringBoot+Vue医院后台管理系统：从数据库设计到前后端联调全解析
在医院管理这类课题里SpringBoot Vue 的组合可以说是近五年热度最高的毕设选题之一。GitHub 上随便一搜就是一堆XX医院管理系统源码但真正能讲清楚怎么跑起来、怎么改、怎么答辩的内容反而不多。这篇文章我打算换个角度不简单堆功能列表而是把这套系统的技术架构、数据库设计、前后端交互的细节以及从零跑通的完整流程全拆开讲。无论你是准备拿它当毕业设计还是想借着课设把 SpringBoot 和 Vue 的实战能力补起来都可以直接参考。我踩过的坑、走过的弯路也会一并说清楚。1. 医院后台管理系统整体设计与思路拆解1.1 为什么这套技术栈能成为毕设常青树先说结论这套组合能火不是因为技术多新而是因为它在工作量大不大和技术含量够不够之间找了一个很舒服的平衡点。SpringBoot 负责后端接口内置 Tomcat省掉了传统 SSM 项目里一大坨 XML 配置MyBatis-Plus 又在 MyBatis 基础上把单表 CRUD 简化到了极致写一个 BaseMapper 接口就能继承十几张表的增删改查方法这对赶毕设进度的同学来说非常友好。Vue 作为前端框架采用组件化开发配合 Element UI 组件库几天的功夫就能搭出一个看起来像那么回事的管理后台界面。MySQL 这边医院管理涉及患者、医生、科室、药库、挂号、收费、住院、检查检验表结构天然复杂建表、写 SQL、设计外键关系的素材非常充足。一句话总结这套系统的广度足以撑起毕设的篇幅要求深度又足以在答辩时讲出几个像样的技术点还不会把你拖到做不完的境地。1.2 系统模块拆解一个完整的医院后台需要哪些功能拿我实际见过的一份医院后台源码举例标准的功能结构大致可以分成这几块系统管理管理员账号、角色权限、菜单权限、操作日志。这是每个后台系统的地基答辩时被问权限怎么设计的就靠这部分撑场子。门诊管理科室管理、医生排班、挂号记录、门诊病历。挂号是整个医院业务的起点排班表的时间冲突判断是一个很好的技术亮点。药房管理药品信息、库存台账、入库/出库记录、药品过期预警。药品数量的流水记录能体现事务控制的功底。住院管理入院登记、病房分配、床位管理、出院结算。收费管理收费项目设置、收费单生成、退费处理。统计分析门诊量统计、收入统计、科室工作量排名。这一步通常会引入 ECharts 做图表是展示项目完成度的加分项。每个模块都不是孤立的比如挂号会关联患者档案开药会关联药房库存收费单会关联门诊病历。模块之间的这种关联关系既是数据库设计时的难点也是答辩时能讲十分钟的素材。1.3 数据库设计表怎么建关系怎么理医院管理系统属于典型的多表关联场景核心表不下十几张。我建议主要表按这个思路设计用户体系管理员表、医生表、患者表三张表分开。如果你做的是后台管理通常不需要开放患者端注册患者信息由挂号人员统一录入。业务主链路科室表dept→ 医生表doctor带 dept_id 外键→ 排班表schedule→ 挂号表registration→ 病历表medical_record→ 收费表payment。辅助链路药品表drug→ 入库单表drug_in→ 出库单表drug_out→ 库存表drug_stock。药库的表尽量做成流水账形式也就是每次入库出库各一条记录库存数量由流水汇总得出而不是直接在药品表上改库存数字——这么做的好处是账目可追溯答辩时可以专门讲为什么不做冗余字段而是用流水表。主键统一用自增 id外键字段命名统一加_id后缀比如dept_id、doctor_id字段类型保持一致性。别小看这些习惯数据库表设计得规范后面写 SQL 联表查询的时候会轻松很多。1.4 前后端分离这套玩法的优势前后端分离不是新鲜词但把这套结构用明白确实能省不少事。前端 Vue 项目跑在 8080 端口后端 SpringBoot 跑在 8081 端口两边通过 RESTful API 交换 JSON 数据。这样做的好处是后端只管 SQL 和业务逻辑前端只管渲染和交互分工明确调试时不容易互相拖累。前端启动用npm run serve改了代码热更新秒级生效不用像传统 JSP 项目那样频繁重启 Tomcat。一套后端接口可以复用给管理后台、患者端小程序等多个终端这一点在答辩时讲系统的可扩展性非常加分。2. 核心技术细节与实操要点从框架到认证逐层拆2.1 SpringBoot 后端分层架构和关键注解不能写错你拿到的源码不管是什么样后端代码基本都会按这个分层结构组织Controller 层负责接收前端请求、校验参数、调用 Service。Service 层核心业务逻辑全在这一层重点是事务管理。Mapper 层通过 MyBatis-Plus 的 BaseMapper 继承单表 CRUD复杂查询自己写 XML 或使用条件构造器。Entity 层数据库表的映射实体字段与表字段一一对应。关键注解做个小结这些答辩时必问RestController // 标识这是一个返回 JSON 的控制器 RequestMapping(/api) // 类级别的路径前缀 Autowired // 依赖注入Service 注入到 Controller Transactional // 事务注解加在 Service 类或方法上 TableName(sys_user) // MyBatis-Plus 实体与表名的映射 TableId(type IdType.AUTO) // 主键自增策略一个典型的 Controller 方法长这样GetMapping(/doctor/list) public Result getDoctorList(Integer pageNum, Integer pageSize) { PageDoctor page new Page(pageNum, pageSize); PageDoctor doctorPage doctorService.page(page); return Result.success(doctorPage); }注意分页这里直接用 MyBatis-Plus 的Page类配合MybatisPlusInterceptor配置分页插件不用自己写LIMIT省时省力。2.2 JWT 登录认证这套系统的安全门面大多数医院后台源码的登录方案是 JWTJSON Web Token配合 SpringBoot 拦截器。JWT 的好处是无状态服务器不用存 session前端拿到 token 存进 localStorage每次请求在请求头里带上Authorization: Bearer token就行。token 的生成逻辑大概是String token Jwts.builder() .setSubject(username) .claim(role, user.getRole()) .setExpiration(new Date(System.currentTimeMillis() 1000 * 60 * 60 * 2)) .signWith(SignatureAlgorithm.HS256, secretKey) .compact();拦截器这边通常会写一个JwtInterceptor实现HandlerInterceptor在preHandle里校验 token 是否有效如果无效直接返回 401。配置层用WebMvcConfigurer注册拦截器同时通过addPathPatterns和excludePathPatterns放行登录接口和静态资源。有个细节需要留神token 过期时间别设太长也别太短。两小时是一个比较常见的值但有的源码里写的是 24 小时这在平时学习没问题答辩时如果被问到 token 过期了怎么办就有点答不上来。可以在 Refresh Token 或强制重新登录这两个方案里选一个能讲清楚的写进论文里作为改进点。2.3 Vue 前端页面怎么搭、请求怎么发Vue 端核心看两块第一块是路由。编写后台系统的标准姿势是用动态路由配合布局组件左侧菜单点击后右侧内容区域通过router-view渲染对应页面。常见的配置长这样const routes [ { path: /login, component: Login }, { path: /, component: Layout, children: [ { path: dashboard, component: Dashboard }, { path: doctor, component: DoctorManage } ]} ]第二块是请求封装。源码里一般会自己封装一个 request.js基于 axios 创建实例设置baseURL指向后端地址然后在请求拦截器里把 token 加到请求头在响应拦截器里统一处理 401 跳转登录页。核心代码片段service.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[Authorization] Bearer token; } return config; }, error Promise.reject(error));一个小提醒前后端地址别写死。很多人报错网络请求失败十有八九是接口地址写死成了别人的 IP。建议在项目根目录建一个.env.development文件写上VUE_APP_BASE_URL http://localhost:8081/api用环境变量管理换环境时改一行配置就行。2.4 前端 Vue 组件的复用理念医院后台页面很多比如医生管理、药品管理、科室管理页面结构高度相似顶部是搜索条件中间是表格底部是分页。如果用原生 JS 写每个页面复制一遍代码能累死。Vue 的做法是把搜索栏 表格 分页封装成通用组件通过 props 传入 URL 和列配置就能复用到所有列表页面。此处只讲思路实际上手时用 Element UI 的el-table、el-pagination、el-form组合再抽出一个PageWrapper.vue组件每个业务页面的代码量能减少一半。这部分也是你论文里前端组件化设计这一章的重要素材。3. 从零跑通项目的完整实操过程环境、导入、启动全记录3.1 前置环境准备版本选择是第一个坑拿到源码的第一件事不是急着打开 IDEA而是先确认环境版本。版本不匹配导致的报错能查到你怀疑人生。我实际跑通这套系统的推荐环境如下软件推荐版本说明JDK1.8 或 11很多老源码基于 JDK 8 开发直接用 JDK 8 最稳Maven3.6.xIDEA 自带即可注意镜像源配置MySQL5.7 或 8.08.0 需要注意驱动名和时区设置Node.js14.x 或 16.xVue CLI 项目对高版本 Node 有兼容问题IDEA / VSCode任意较新版本后端用 IDEA前端用 VSCode各干各的互不干扰Node 版本这一点值得单独强调。如果你直接用 Node 18 去跑一个两年前写的 Vue 项目十有八九会报下面这个错Error: error:0308010C:digital envelope routines::unsupported原因很简单就是高版本 Node 的 OpenSSL 和旧版 Webpack 不兼容。解决办法有两个一是按推荐装 Node 16二是在 package.json 的启动命令里加set NODE_OPTIONS--openssl-legacy-provider。相比之下直接换 Node 版本更省心。3.2 初始化 MySQL 数据库这一步是整个项目能不能跑通的关键。别急着一上来就启动后端先把数据库建好。推荐流程用 Navicat 或命令行连接 MySQL。创建一个名为hospital的数据库字符集选 utf8mb4排序规则选 utf8mb4_general_ci。utf8mb4 和 utf8 的区别是前者支持 emoji 表情和更多生僻字门诊病历里出现特殊符号时不会乱码。找到源码里的sql文件夹通常有一个hospital.sql文件直接右键运行 SQL 文件。运行完成后检查表数量一般十几张到二十几张表正常如果只有两三张表说明 SQL 文件没导入彻底仔细检查报错日志。一个小技巧导入 SQL 前用记事本打开文件头看一眼如果里面有CREATE DATABASE语句那执行时会自动建库。如果没有你就得先手动建库再导入不然会一直报 1046 错误。3.3 修改后端配置并启动项目打开 IDEA用 Maven 导入后端项目等依赖下载完成后找到application.yml文件重点检查这几项配置server: port: 8081 spring: datasource: url: jdbc:mysql://localhost:3306/hospital?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver有几个注意事项serverTimezone必须设否则 MySQL 8.0 连接时会报时区错误。数据库密码改成你自己的这个不用多说。端口如果被占用别硬碰硬换个没被占用的端口就行。配置改完后找到启动类类名通常是xxxApplication右键 Run。看到 SpringBoot 的启动日志刷出来后如果没有打印 ERROR后端就启动成功了默认端口就是 8081。3.4 启动前端项目前端项目一般是独立的文件夹用 VSCode 打开在终端执行npm install这一步会经历一段漫长的等待如果下载速度感人先检查有没有配置淘宝镜像npm config set registry https://registry.npmmirror.com装完后执行npm run serve看到Compiled successfully的提示后浏览器访问http://localhost:8080用默认管理员账号通常在源码的 README 或者 SQL 的sys_user表里能找到登录。如果你看到的页面是 Vue 默认首页而不是登录页那大概率是后端启动失败前端路由守卫拦不住空接口先去检查后端日志。3.5 打通前后端联调前端页面能打开只是一个起点真正的联调环节才是问题重灾区。打开浏览器控制台的 Network 面板刷新页面看请求列表如果接口状态是 200且返回的是 JSON 数据说明前后端联通正常。如果接口是 404说明路径不对去后端 Controller 里查看实际的RequestMapping路径和前端 axios 请求路径对比。如果接口是 403说明权限拦截器干的检查登录状态和 token 是否传到后端。如果接口是 500去 IDEA 控制台看具体的异常堆栈通常是 SQL 问题或者 NullPointerException。这一套排查流程顺手一跑很多问题都能自己动手解决这个过程本身就是学习 web 开发最有价值的部分。4. 常见问题与排查技巧实录4.1 IDEA 插件升级后项目突然无法编译怎么办我在本地跑通一个医院管理系统源码时遇到过非常典型的问题项目下载下来能跑第二次打开突然编译报错提示无法解析com.baomidou.mybatisplus.core.mapper.BaseMapper。排查之后发现原因是两个版本不同的 MyBatis-Plus 依赖同时存在于 Maven 仓库IDEA 的缓存把旧版本 jar 认成了新版本的依赖。解决办法IDEA 菜单 File → Invalidate Caches → 勾选 Clear file system cache and Local History → Invalidate and Restart。重启后项目会自动重新索引依赖也能重新解析。4.2 前端页面 404路由刷新后失效怎么处理初学者用 Vue Router 最容易踩的坑是部署后刷新页面直接白屏或者 404。原因在于 Vue Router 默认使用 history 模式这个模式需要后端配合做 URL 回退。开发环境下没这个问题但如果你用npm run build打包后放到 Tomcat 或者 Nginx 上就得做处理。实际项目里很简单修改路由模式为 hash 模式把createWebHistory()换成createWebHashHistory()。虽然路径上会多一个#/但对后台管理系统完全无所谓却能让部署省掉一堆配置。4.3 MySQL 连接时报错 1129 Host is blocked这个报错很多人第一次见会慌。原因是连接失败次数太多MySQL 自动加了缓存锁。解决办法是登录 MySQL 后执行FLUSH HOSTS;如果是 Host xxx is blocked because of many connection errors执行这条命令可以解除封锁。如果想治本把 max_connect_errors 调到 1000SET GLOBAL max_connect_errors 1000;4.4 启动后端报端口被占用怎么快速查找SpringBoot 默认端口 8081 被占用时的提示一般是Port 8081 was already in use。Windows 用户按 WinR 输入 cmd执行netstat -ano | findstr 8081最后一列是 PID再执行taskkill /PID 你查到的PID /FMacOS 用户则用lsof -i :8081 kill -9 PID4.5 npm install 报错 ERESOLVE unable to resolve dependency tree这个报错本质上是因为项目里的依赖版本和当前 npm 版本解析冲突。大多数源码项目都会遇到。处理方式是执行npm install --legacy-peer-deps建议直接在 package.json 的 scripts 里也写好这一条scripts: { install:force: npm install --legacy-peer-deps }这样后面再遇到这个报错就能一键重装不用每次敲一长串命令。4.6 前后端联调出现跨域报错浏览器控制台报Access-Control-Allow-Origin相关错误说明后端没启用跨域策略。解决方式是在后端配置类加一个跨域配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:8080) .allowedMethods(*); } }这种方案是全局生效比在每个 Controller 上加 CrossOrigin 省事得多。5. 毕业设计答辩高频追问与低成本加分改造5.1 这些问题提前想好答辩不慌医院后台管理系统的答辩提问方向比较固定提前对着镜子讲几遍起码能捞回十分印象分。为什么用 JWT 而不是 Session答要点无状态、易扩展、适合前后端分离。分页查询怎么实现的答要点MyBatis-Plus 的分页插件拦截 SQL自动拼 LIMIT再封装 Page 对象返回记录数和当前页数据。多表查询怎么做的答要点Maven 项目里用 XML 写自定义 SQL 联表查询或者用 MyBatis-Plus 的 QueryWrapper 做单表查询后再内存组装。建议把 SQL 写法记清楚被追问的概率非常高。权限怎么设计的答要点用户表 → 角色表 → 菜单表的 RBAC 模型登录时查询用户角色根据角色返回可访问的菜单和按钮权限。5.2 低成本但高价值的几个改造方向如果你答完基础问题还想体现点额外工作量这几个改造方向成本很低但非常能撑场面给挂号模块加号源控制—— 每天每个医生的可挂号总数是有限的挂满之后提示剩余号源为 0。这个功能用一张schedule表加一个剩余号源字段就能实现改动量小但能展示你对业务细节的理解。接入 ECharts 做统计报表—— 管理员首页放两个图表门诊量折线图、科室收入排行榜柱状图。前端引入 ECharts 很快后端写两个聚合查询接口回答大数据统计这一层的提问就有实例了。导出 Excel 报表—— 用 EasyExcel 把收费记录导出成 Excel 文件。前后端各写十几行代码但能展示文件导出、流处理、下载响应这些前端之外的能力。写在最后的几点经验跑通一套医院后台管理系统可能只需要半天真正把它变成答辩时拿得出手的项目需要的是把每一块代码的运行逻辑都搞明白。我个人建议拿到源码后按这个顺序去读先看数据库表结构和表关系再看登录模块的 JWT 完整链路然后挑一个核心业务模块比如挂号或者药房把 Controller → Service → Mapper → SQL 的前后台调用链路走一遍。读完后哪怕功能没改一行你对整个项目的理解已经远超那些只会复制粘贴的同学。最后再分享一个小技巧跑通项目后把源码在本地 Git 仓库里打个初始版本之后每次改动都留个 commit答辩时把提交记录展示出来比口头说我改了很多地方更有说服力。GitHub 和 Gitee 都能建私有仓库这点操作成本换来的是一个肉眼可见的完整开发记录非常值得。
