ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

SpringBoot+Vue医疗服务系统毕设源码:从环境配置到前后端联调全攻略

SpringBoot+Vue医疗服务系统毕设源码:从环境配置到前后端联调全攻略 简介基于SpringBoot与Vue构建的医疗服务系统是一份高分毕业设计项目其答辩评审达到98分。系统采用前后端分离的开发模式后端负责接口与业务处理前端负责页面展示与用户交互整体设计贴近真实医疗业务场景能较好体现工程化开发流程。压缩包内含141个文件整体大小约12.72MB主要涵盖Java后端源码、Vue前端组件、SQL数据库脚本以及yml、properties等环境配置各类文件分工明确目录结构比较清晰可快速完成环境搭建与运行。全部代码均经过调试测试确保能够正常运行当前已有73人学习下载。项目适合计算机、通信、人工智能等相关专业的学生作为课程设计、大作业或毕业设计参考基础较强的读者还可基于现有模块调整扩展以适配不同业务需求从而获得更完整的前后端整合与二次开发经验。1. 医疗服务系统源码SpringBootVue 毕业设计到底能不能拿来即用每到毕业季总有人拿着一份医疗服务系统的 SpringBootVue 源码问我这东西到底能不能跑说实话90% 的毕业设计源码都死在环境配置和数据库连接上并不是代码本身有问题。我拆过不少这类项目这份基于 SpringBoot Vue 的医疗服务系统用户端、医生端、管理端的核心流程是齐全的挂号、病历、药品、公告这些模块都能闭环。它适合两类人一类是打算用“医疗服务”做毕业课题想快速搭出能演示的框架另一类是已经有点 Java 基础但没完整跑过一个前后端分离项目想拿它当练手的真实业务样例。下面不吹不黑从拆结构到跑通接口再到躲开最常见的坑按我的实际测试顺序写给你。2. 技术栈与项目结构先拆清楚后端分层和前端页面再动手对于一个前后端分离的医疗服务系统最怕的就是拿到源码直接 run红灯一片还不知道去哪改。我的习惯是先在 IDE 里把目录结构摊开弄清楚后端有多少个模块、前端路由挂在哪个页面、数据库有哪些表然后再启动。这样后面报错时能直接定位到对应文件。2.1 后端SpringBoot 的 Controller-Service-Mapper 分层是给谁看的这份源码的 Java 后端使用的是典型的三层架构。Controller 层只负责接收请求和返回 JsonService 层放业务逻辑Mapper 层直接操作 MySQL。为什么毕业设计几乎都用这个结构因为答辩老师问“你的系统怎么设计的”时你可以画一张调用链浏览器请求 - Controller - Service - Mapper - 数据库。这个链能走通架构分就有了。我拿到源码后第一件事不是看代码而是看包命名。正常情况下会看到这样的目录src/main/java/com/example/medical/ ├── MedicalApplication.java ├── controller │ ├── UserController.java │ ├── DoctorController.java │ ├── AppointmentController.java │ └── MedicalRecordController.java ├── service │ ├── IUserService.java │ └── impl │ └── UserServiceImpl.java ├── mapper │ ├── UserMapper.java │ └── DoctorMapper.xml └── entity ├── User.java ├── Doctor.java └── Appointment.java这里的 controller/service/mapper 各自只做一类事。UserController 里放注册、登录、修改用户信息等接口DoctorController 放医生列表、科室排班AppointmentController 放挂号预约。如果你打算改成自己的课题这个分层不用动只需要替换实体字段和业务方法。Mapper.xml 里的 SQL 是单独目录我一般会先打开看一眼确认表名和实体类字段对应因为很多报错是字段映射不一致导致的。后端配置里和数据库相关的部分建议先看 application.yml。常见写法是spring: datasource: url: jdbc:mysql://localhost:3306/medical_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver这里 url 里带的 characterEncodingutf8 和 serverTimezoneAsia/Shanghai 是两处最容易被忽略的配置。前者负责中文不乱码后者负责时间类型不偏移。我遇到过一个系统登录接口动不动报“CST 时区错误”最后就是少了 serverTimezone 导致的。另外注意 drive-class-nameMySQL 8.0 必须用 com.mysql.cj.jdbc.Driver老版本用的 com.mysql.jdbc.Driver 在新驱动下会直接提示过时。2.2 前端Vue 的页面组织与路由前端用的是 Vue配 Element UI 之类的组件库。很多毕业设计前端页面看似很多实际就三类用户端页面、医生端页面、管理端页面。Vue Router 负责把路径映射到组件。前端目录一般长这样src/ ├── main.js ├── App.vue ├── router/index.js ├── api/ │ ├── user.js │ ├── appointment.js │ └── request.js ├── views/ │ ├── login.vue │ ├── register.vue │ ├── user/ │ │ ├── index.vue │ │ └── appointment.vue │ ├── doctor/ │ │ └── record.vue │ └── admin/ │ └── manage.vue └── components/ └── Header.vuerouter/index.js 里通常会在路由守卫中做登录拦截判断本地有没有存 Token。api/request.js 里封装 axios把每次请求都带上 Authorization 头。如果你要改路径改 router/index.js 和对应 views 目录下的文件就行不用动后端。前端路由有两种模式hash 模式和 history 模式。毕业设计项目大部分用的是 hash 模式地址栏里会带 #好处是部署到任何静态环境都不容易 404。如果源码用的是 history 模式后面第 5 章的白屏问题就要特别注意。前端启动时还需要注意请求转发配置。因为前后端分离开发时后端跑在 8080前端跑在 8081前端请求 /api 开头路径必须转发到后端。这个配置放在根目录的 vue.config.js 里。这是开发环境的关键我放到第三章细讲。2.3 数据库user、doctor、appointment 这几张核心表先认清数据库是这套系统的“黑匣子”很多新手一听说要导入 SQL 就慌。其实这份源码里一般都会带一个 .sql 文件里面同时包含了建库、建表和初始数据。我不急着导而是用 Navicat 或 DataGrip 打开脚本文件搜索 CREATE TABLE 看有几张表。常见医疗服务系统的核心表大概是下面这些表名主要字段作用userid, username, password, role存放用户、医生、管理员的统一账号departmentid, name, location科室信息doctorid, user_id, department_id, title医生信息与科室关联appointmentid, user_id, doctor_id, time, status挂号预约medical_recordid, patient_id, doctor_id, diagnosis, prescription病历与处方drugid, name, price, stock药品管理noticeid, title, content, create_time公告信息它们之间的关系很好理解user 表通过 role 字段区分角色doctor 表通过 user_id 关联到具体账号appointment 是核心业务表一张挂号记录同时关联用户和医生medical_record 挂到预约和患者上。只要把这六张表的关系在纸上画一遍后端接口的业务逻辑就基本清楚了。后续如果你要加“健康资讯”之类的模块照着一张新表加对应实体、Mapper、Service、Controller 和前端页面即可。这里还要注意一个细节很多毕业设计项目的登录校验并不复杂user 表里直接存明文密码或者用 MD5 存密文。你拿到 SQL 后先看一下 password 字段的长度如果长度是 32那说明是 MD5 加密过的直接改表里的密码为明文反而会导致登录失败。这属于数据库层的“增删改查”基本功答辩时也经常被问。3. 把环境跑起来从 JDK/Node 到数据库初始化的完整步骤拿到源码后不建议直接双击运行。我一般按“数据库 - 后端 - 前端”的顺序来因为后端启动时就要连数据库前端启动则依赖后端的接口。顺序反了容易产生“明明是前端报错其实后端还没起”的错觉。3.1 环境清单JDK、MySQL、Node 的版本怎么选先看源码里的 pom.xml而不是装最新版。很多毕业设计都是 SpringBoot 2.3.x 或 2.4.x对应 JDK 8。如果你电脑上装的是 JDK 17 或更高SpringBoot 2.x 跑起来会直接报错。我的建议是电脑上保留一个 JDK 8专门跑这类老项目。前端 Vue 部分同理看 package.json 里 vue 和 vue-cli 的版本。vue 2.x 项目用 Node 14 或 16 兼容性更好Node 18 以上有时会提示 OpenSSL 错误。MySQL 用 5.7 或 8.0 都行但驱动不同5.7 用 com.mysql.jdbc.Driver8.0 用 com.mysql.cj.jdbc.Driver。这份源码大概率是 8.0 的新驱动因为现在主流教程都这样写。下面是我实测推荐的版本组合组件推荐版本备注JDK1.8兼容 SpringBoot 2.xMaven3.6.xIDEA 自带也可以用MySQL8.0注意驱动类名Node14.x 或 16.xVue 2.x 项目兼容性更好npm随 Node 安装不用单独装这里有个血泪经验不要一上来就装最新 SpringBoot 3.x。SpringBoot 3 必须配 JDK 17而且很多老 mybatis 框架的 starter 写法直接不兼容。你下载的这份医疗服务系统源码如果是 2.x请老老实实用 JDK 8。3.2 数据库导入执行 SQL 脚本的正确姿势SQL 脚本一般在源码根目录的 sql 文件夹下文件名可能是 medical.sql 或 hospital.sql。先别急着整个导入我习惯先用命令行创建数据库指定 utf8mb4 编码再导入脚本。mysql -u root -p -e CREATE DATABASE IF NOT EXISTS medical_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; mysql -u root -p medical_db sql/medical.sql说明第一句创建数据库 medical_db字符集用 utf8mb4这是为了能存中文和表情符号。第二句把 sql/medical.sql 里的建表和插入数据全部执行到 medical_db 库里。如果你用 Navicat操作等价于“新建数据库 - 选择 utf8mb4 - 右键运行 SQL 文件”。注意执行完以后在表列表里看到 user、doctor、appointment 这些表再继续看不到说明脚本权限或者编码有问题。导入成功后我还习惯改一下初始账号密码。因为你答辩演示时要用自己的账号登进去如果源码里默认账号是 admin / 123456最好在 user 表里改成一个好记的。用 SQL 直接 UPDATE 即可UPDATE user SET password123456 WHERE usernameadmin;注意这里改的是明文密码还是 md5 值取决于源码里登录接口怎么校验。如果登录接口用了 MD5 加密你直接 UPDATE 成明文反而登不进去。正确做法是看注册接口的加密方式用同样的方式生成密文再写进去。我一般先去数据库看已有用户的 password 字段格式是 32 位 md5 还是明文再决定怎么改。3.3 后端启动修改 application.yml 里的三项配置后端启动前必须把数据库连接改成你自己的环境。打开 src/main/resources/application.yml确认下面这几项server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/medical_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: yourpassword driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.medical.entity这里最容易被忽略的是密码改成你自己的 MySQL 密码。url 里的 medical_db 要和上一步建库名保持一致。如果你 MySQL 端口不是 3306也要改。mapper-locations 是指定 MyBatis 的 XML 文件路径如果源码里 Mapper 没用注解而是 XML这个配置必须有。用 IDEA 打开项目后等待 Maven 依赖下载完成然后运行 MedicalApplication.java 的 main 方法。看到类似 “Started MedicalApplication” 的日志说明后端已经起来了。如果启动过程中报数据库连接失败先别急着改代码用命令行敲一句mysql -u root -p -e select 1能输出 1 说明数据库正常那就检查 url、账号、密码。如果连 1 都输出不了是 MySQL 服务本身没起来或者账号密码错。这一步能省很多无意义的时间。3.4 前端启动npm install 与 vue.config.js 转发配置后端起来后打开终端切到前端目录一般是 medical-web 或 frontend。先安装依赖npm install如果 npm install 卡住可以换淘宝镜像源npm config set registry https://registry.npm.taobao.org npm install安装完成后修改 vue.config.js 里的转发配置这是开发环境下前端和后端通信的桥梁module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }说明devServer.port 指定前端访问端口我习惯用 8081避免和后端 8080 冲突。proxy 里的配置表示前端发起的所有以 /api 开头的请求都会被转发到后端的 8080 端口。changeOrigin 设置为 true 是为了让后端收到的请求头看起来来自 8080防止个别后端代码做来源校验时拦截。然后执行npm run dev看到 “Compiled successfully” 后浏览器打开 http://localhost:8081就能进入系统登录页。输入初始账号密码如果页面跳转成功、列表有数据那说明整条链路已经通了。如果接口 404检查后端是否启动如果接口 500大概率是 Mapper 对应 SQL 有问题重点看控制台报的 SQL 异常信息。4. 联调与验证把挂号、病历、公告等核心流程走通环境跑起来只是开始。能不能答辩取决于接口是否真的能增删改查。我一般会拿 Postman 把典型业务串一遍从前端页面也能点一遍双保险。4.1 登录接口拿到 Token 才能干别的大多数前后端分离项目使用 JWT 或 Token 机制。登录接口一般长这样POST http://localhost:8080/api/login Content-Type: application/json { username: admin, password: 123456 }成功后返回的 JSON 里会带一个 token 字段。前端拿到这个 token 后存到 localStorage之后的请求都带上GET http://localhost:8080/api/user/info Authorization: Bearer eyJhbGciOiJIUzI1NiJ9...这里要注意登录和注册接口通常不需要 token其他接口都需要。如果你用 Postman 测试业务接口时忘了带 Authorization 头会返回 401 或“未登录”。这是前后端分离项目最常见的拦截逻辑。有些源码里 token 的 key 叫 token有些叫 accessToken要以前端 request.js 里的取值为准。4.2 挂号与病历典型业务的增删改查怎么测医疗服务系统的核心业务是挂号。一张挂号记录表 appointment 涉及用户、医生、时间段和状态。以“新增预约”为例接口通常定义成POST http://localhost:8080/api/appointment Content-Type: application/json Authorization: Bearer token { userId: 1, doctorId: 2, appointmentDate: 2025-06-10, timeSlot: 09:00-10:00 }提交成功后可以再用一个列表接口验证数据是否插入GET http://localhost:8080/api/appointment/list?userId1返回的数组里应该能看到刚提交的记录。接着测试修改和删除修改是把状态字段从“已预约”改成“已取消”删除是调一个 DELETE 接口。这四步做完等于把 MyBatis 的 insert/select/update/delete 都覆盖了一遍也是答辩时最常演示的“增删改查”闭环。病历模块和药品管理类似区别在于病历详情接口通常会返回多张表的关联数据比如医生姓名、科室名称、诊断内容和药品清单。你测的时候注意看返回 JSON 的结构如果某个字段是 null不代表接口错误可能是那一条数据本身没有关联到上级记录。另外公告模块更简单管理端通常直接复用一套 NewsController发布公告后到用户端首页刷新一下就能看到。这样做一次完整演示相当于把数据库增删改查和前端联动都展示了一遍。4.3 跨域与请求转发前端跑通后要注意的两个细节开发环境下前端走的是 vue.config.js 里的转发配置所以不会遇到跨域。但如果你把前端打包成静态文件放到 Nginx 或 SpringBoot 里就可能遇到两个问题一是请求地址没有 /api 前缀导致转发配置无效二是 Nginx 配置里没有加跨域响应头前端拦截报 CORS。对于这份源码最简单的方式是开发时就用转发答辩演示也用开发模式避免部署到别的环境引入新问题。前端的 request.js 里有一段核心逻辑我打开源码后一定会确认它是怎么把 token 放到请求头里的import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) export default service说明baseURL 统一加了 /api 前缀这样开发环境的转发规则只匹配 /api 开头的请求。拦截器每次请求前从 localStorage 拿 token有就放到 Authorization 头。如果你在页面上看到登录成功但列表刷新报 401先去浏览器的 Application 面板看 token 是否真的存进去了再点开 Network 看请求头有没有 Authorization。这个排查顺序能解决大部分“登录了又像没登录”的问题。5. 避坑排查这套医疗服务系统最常见的五个翻车点这一章写五个具体问题每条都按“现象 - 原因 - 解决”的顺序来都是我平时帮人调这类项目时反复踩过的。5.1 SpringBoot 版本太高MyBatis 直接报错现象运行 MedicalApplication 时控制台出现 Invalid bound statement 或 Failed to load driver class。原因我见过不止一次有人把 pom.xml 里的 SpringBoot 版本从 2.x 升到 3.x结果 MyBatis starter 还停留在老版本导致 Mapper 的 XML 没被扫描到。SpringBoot 3 的包名从 javax 改成 jakarta老代码编译都不一定过。解决不改代码把 pom.xml 的 SpringBoot 版本改回源码原来的版本。如果源码没写版本常见做法是统一用 2.7.18配 JDK 8 或 JDK 11 都能跑。改完版本后强制刷新 Maven 依赖mvn clean install -DskipTests5.2 Vue 打包后放进 SpringBoot 出现白屏现象前端 npm run build 后生成 dist把 dist 拷贝到 SpringBoot 的 static 目录访问后端端口只有白屏控制台报找不到 JS 文件。原因Vue 默认的 publicPath 是根路径 /而打包后的 JS 引用了 /js/app.js 这样的绝对路径。后端部署时项目没有挂在根路径或者 SpringBoot 拦截了前端路由就会白屏。解决在 vue.config.js 里把 publicPath 改成相对路径module.exports { publicPath: ./, outputDir: dist }重新打包dist 里的 index.html 引用路径就会变成相对路径。这样即使后端配置了 context-path 也不会找不到资源。另外如果使用 history 路由模式刷新页面会 404应改为 hash 模式或者在后端写一个 index 转发 Controller。毕业设计演示不建议部署 jar直接用开发模式最省事。5.3 数据库中文乱码与连接失败现象页面中文都是问号或者创建数据库时直接报 Unknown character set。原因创建数据库时没有指定 utf8mb4MySQL 默认可能用了 latin1或者 JDBC 连接串里少了 characterEncodingutf8。解决保证三个地方都是 utf8mb4。一是创建库时指定CREATE DATABASE medical_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;二是启动时加上 -Dfile.encodingUTF-8。三是 JDBC url 里带 useUnicodetruecharacterEncodingutf8。改完后重启后端再把表里已有的乱码数据先清掉重新插入否则旧数据还是乱码。5.4 端口被占用8080 和 8081 的玄学现象启动后端提示 Port 8080 was already in use启动前端提示 8081 被占用。原因本地开发时有其他服务占用了端口。也可能是你之前启动过一次后端没关掉再次运行同一个项目。解决查看占用端口的进程并结束或者改端口。Windows 下的处理netstat -ano | findstr 8080 taskkill /pid 进程号 /f如果不想杀进程也可以把后端 server.port 改成 8082同时改前端 vue.config.js 里 proxy 的 target 端口。注意端口改成非默认后Postman 里的请求地址也要同步改不然又变成“接口不通”。5.5 npm install 装不上依赖node-sass 和 Python 的问题现象前端执行 npm install 时node-sass 报错提示需要 Python 和 Visual Studio C Build Tools。原因老 Vue 2 项目通常依赖 node-sass它在安装时要本地编译依赖 Python 和 C 环境。现在很多人装的是 Node 18和旧版 node-sass 不兼容。解决看 package.json 里 sass 相关依赖是 node-sass 还是 sass。如果是 node-sass尝试升级为 sass 或 dart-sass改一行引用即可如果不想改代码就装 Node 14。另一个办法是删除 node_modules 和 package-lock.json 后重新安装rm -rf node_modules package-lock.json npm install一般换了 Node 14 后node-sass 安装成功率会高很多。这是我在前端环境上翻车最多的一次后来养成了“先看 package.json再决定用哪个 Node”的习惯。6. 进阶技巧把模板项目改成你自己的高分毕设6.1 静态资源路径改成相对路径前面 5.2 已经提到 publicPath: ./这里给一个完整的 vue.config.js 参考const { defineConfig } require(vue/cli-service) module.exports defineConfig({ publicPath: ./, outputDir: dist, devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })这样开发和生产两种场景下资源路径都不会丢。6.2 加一张“健康资讯”表如果你想在答辩时多讲一个“我自己扩展的功能”最简单的就是加资讯表。CREATE TABLE notice_info ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100), content TEXT, create_time DATETIME );加一份 SQL、一个实体类、一个 Mapper、一个 Controller前端再放一个页面。注意扩展时不要动原有核心表只做增量答辩演示时更有说服力。6.3 答辩演示顺序建议我的建议是先展示系统运行效果再讲技术架构。具体顺序输入账号登录 - 进入首页看统计数字 - 演示挂号流程 - 查看病历 - 切到管理端添加一条公告 - 用 Postman 当场再调用一次新增接口。这样可以证明前后端是真实联通的而不是背下来的死流程。最后说一句自己的习惯之前我帮人改一个就诊模块就是漏改了 application.yml 里的时区数据库连接反反复复报错最后才发现根本不是网络问题。从那以后我每次拿陌生源码都会先看配置再看代码强制走一遍从 SQL 导入到前后端联调的完整流程。这份医疗服务系统我按同样流程拆完也把验证步骤都放在了上面希望帮到你。本文还有配套的精品资源点击获取
返回列表