尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

医院后台管理系统实战:SpringBoot+Vue+MySQL前后端分离开发

发布时间:2026/9/29 11:19:37

资讯中心
01
ARTICLE

医院后台管理系统实战:SpringBoot+Vue+MySQL前后端分离开发

医院后台管理系统实战:SpringBoot+Vue+MySQL前后端分离开发
医院后台管理系统这种项目我前前后后接触过好几个版本从最早的 JSP Servlet到后来的 SSM再到现在的 SpringBoot Vue MySQL技术栈换了好几轮。这次分享的这套医院后台管理系统源码算是目前比较典型的组合形态SpringBoot 负责后端接口Vue 负责页面交互MySQL 做底层数据存储而且它是可以直接拉下来跑起来的完整项目不是那种缺配置文件、少依赖的半成品。这套系统解决什么问题一句话就能说清楚医院需要一个能把科室、医生、患者、挂号、病历、处方这些业务数据统一管起来的地方传统的手工记录和 Excel 管理早就撑不住了。对开发者而言它又是一个特别完整的练手项目——既能学到 SpringBoot 的后端分层写法也能体验 Vue 的前后端分离开发模式数据库表设计也跟着业务走理解起来不费劲。无论你是刚学完 SpringBoot 和 Vue 想做课程设计的学生还是在职想快速上手前后端分离项目的开发者这套源码都有参考价值。1. 项目概述与核心设计拆解1.1 医院后台管理系统的核心需求本质上医院后台管理系统属于典型的 MIS信息管理系统核心目标是把医院日常运营中产生的数据从“散落各地”变为“统一管理”。站在业务角度看它至少要覆盖两类人群的使用场景一类是前台工作人员比如挂号员他们需要快速完成患者建档、挂号、退号操作另一类是医生他们需要查看患者信息、写病历、开处方。管理员侧还要管着科室维护、医生排班、用户权限、系统日志这类基础设施。把这套系统拆开来看功能边界其实非常清晰基础数据管理、业务流程管理、系统管理、统计报表。基础数据管的是科室、医生、药品这些静态资源业务流程管的是挂号到就诊再到缴费这条主链路系统管理负责维护账号、角色和操作权限统计报表则是从数据库里把数据聚合出来给管理层做参考。需求理到这一步数据库表怎么设计、接口怎么划分心里基本就有谱了。值得多说一句的是这类项目最忌讳的就是一上来就写代码。我见过不少同学拿到类似需求直接从建表开始结果表建到一半发现功能对不上回头又要改。正确顺序是先按上文说的四种业务域去拆分画出功能清单再设计数据模型最后才动手写接口和页面。1.2 前后端分离架构的层级设计这套源码采用的是前后端分离结构后端跑在 SpringBoot 内置的 Tomcat 上默认端口一般是 8080前端是 Vue 开发服务器端口常是 8081 或者 8088。浏览器访问的是 Vue 页面页面里发出的请求通过代理或直接跨域请求到 SpringBoot 接口接口再操作 MySQL 把数据返回给前端渲染。后端本身按经典的三层结构组织Controller 层负责接收请求和参数校验Service 层处理业务逻辑Mapper 层DAO用 MyBatis 或 MyBatis-Plus 操作数据库。前端则按照 Vue 官方推荐的目录习惯组织components 放公共组件views 放页面级组件router 管理路由api 模块统一封装 axios 请求。这套分层设计的最大好处是职责单一。Controller 里不应该出现冗长的业务代码它只需要做参数接收和结果返回真正的业务规则全部沉淀在 Service 层这也方便后续加事务控制。我最开始写项目的时候容易犯一个毛病——把所有逻辑都堆在 Controller 里三个月以后再回去看代码自己都想不起来这段代码在干嘛。后来习惯了分层代码可读性和可维护性提升非常明显。1.3 数据库表之间的业务关联MySQL 在这套系统里担任的是“数据底座”角色。医院的后台管理系统数据关联性很强这不是 Redis 单纯缓存能替代的。比如挂号表要关联患者表和医生表病历表要关联患者表和挂号记录开出的处方又要关联药品表。这种强关系场景用外键加上规范的索引查起来快也好理解。从建表思路上看典型的设计如下sys_user 存后台登录用户sys_role 和 sys_menu 做权限控制hos_department 存科室hos_doctor 存医生基本信息同时通过 department_id 指向科室hos_patient 存患者档案hos_registration 存挂号记录里面同时存 patient_id、doctor_id、department_id 和就诊状态hos_medical_record 存病历核心字段包括主诉、诊断、医嘱并且用 registration_id 跟挂号记录关联。一张挂号单对应一条病历记录一次看病开出的多行药品又落到 hos_prescription_detail 表里。这里有个细节容易忽略患者表里的手机号、身份证号属于敏感信息虽然课程设计项目不强制加密但如果真要在生产环境上线建议至少对身份证号做加密存储或脱敏展示。后面我会再单独说合规的事。2. 技术栈选型为什么偏偏是这套组合2.1 后端选 SpringBoot 的三个直接理由现在做 Java 后端项目SpringBoot 基本是默认选择。核心原因是它把 Spring 生态里大量繁琐的配置变成了“默认值”原来要写一堆 XML 配置的事务、数据源、扫描包现在引入对应的 Starter 依赖就行。拿这套系统来说后端需要做 Web 接口、连 MySQL、执行 SQL、做权限校验这几件事对应的依赖无非是 spring-boot-starter-web、mybatis-spring-boot-starter、mysql-connector-java几个依赖一加配置就完成了大半。SpringBoot 内置 Tomcat 这一点简化了部署。以前做 SSM 项目要把 war 包丢到外部 Tomcat 的 webapps 下面中间不知道要踩多少坑现在 mvn package 打出一个可执行 jarjava -jar 直接运行对个人开发者和学习者极度友好。所以这套源码标着“可直接运行”本质上就是占了 SpringBoot 的便宜。还有一点SpringBoot 的自动装配机制对新人很友善。数据库连接、事务管理、参数校验这些常用功能都有对应的自动配置遇到问题去查官方文档也好查。我刚转 SpringBoot 那阵子光是把 DataSource 配置弄明白就省了不少事它比 SSH/SSM 时代着实容易太多。2.2 前端选 Vue 是因为组件化太适合后台后台管理系统跟 C 端官网不一样它的页面大部分是“表格 表单 弹窗”这三种模板来回组合。这种场景如果用原生 JS 写每个页面都要重新写一轮 DOM 操作重复劳动不说改起来还容易牵一发动全身。Vue 的组件化机制恰好解决这个问题——把表格封装成一个组件把表单封装成一个组件甚至把“搜索栏 表格 分页”这一整套查询布局拉成一个组件每个页面只需要传数据和方法进去就行。Vue 的数据双向绑定也让表单填写体验好很多用户输入什么数据对象里立刻就变了列表页的筛选条件同步给查询请求刷新表格数据写着很顺手。二点零版本是这个项目流行的时代但现在写 Vue 也大差不差只是组合式 API 和 setup 语法更简洁。如果你手里这套源码已经升级到 Vue3那更好如果还是 Vue2也不用觉得过时因为核心思想完全通用。前端和后端分离之后联调往往是个痛点。好在这套项目一般都会在 Vue 的 vue.config.js 里配置 devServer 代理开发时所有 /api 开头的请求自动转发到后端的 8080 端口这样页面永远不会遇到跨域问题。这个配置我在后面“快速启动”章节会单独展开。2.3 MySQL 到底强在哪MySQL 是这套系统里争议最小的组件。它能走到今天这么大用户量靠的是三点免费开源、资料多、稳定可靠。对于医院后台这种 OLTP在线事务处理类型的业务MySQL 的关系模型和事务机制完全压得住。挂号、病历、处方这类操作往往伴随着多表写入例如挂号成功还要更新当日号源剩余数一个业务里至少两条 SQL这时候必须依赖事务的原子性要么全成功要么全回滚。MySQL 的 InnoDB 引擎在这方面的表现非常成熟。数据库版本建议用 5.7 或 8.0。5.7 是老牌稳网上资料几乎能解决所有问题8.0 性能更好默认字符集就是 utf8mb4对中文存储更友好。唯一要注意的坑是 8.0 的加密插件改成了 caching_sha2_password老版本的 Navicat 甚至一些项目的数据库连接字符串没配上 useSSL 会报 SSL 连接错误。这些问题都见过了后面我会放到避坑章节仔细说。3. 功能模块与数据库设计解析3.1 核心功能模块逐项拆解如果功能模块用一句话概括这套系统的骨架是“入口管住流程理顺数据落地”。具体拆开是五个大模块。登录认证与权限管理。后台系统最先要解决的是“谁能进来”的问题。用户输入用户名密码后端校验通过以后生成一个 Token常见方案是 JWT前端把 Token 存到本地之后每次请求都在请求头里带上后端再用拦截器统一校验。权限模型一般是经典的 RBAC用户关联角色角色关联菜单和按钮权限。比如医生角色登录以后菜单里只有“我的患者、病历管理、处方管理”而管理员能看到“系统管理、数据统计”这些全部菜单。基础数据管理。科室和医生是医院运行的基础。科室维护一般包含科室名称、主任、位置、简介医生管理要维护姓名、职称、所属科室、擅长领域、出诊时间、号源总数。这些基础数据的质量直接影响后续挂号和排班所以后台要对输入做校验比如手机号格式、号源数字范围等避免脏数据进入业务流程。门诊挂号管理。这是整个系统里业务流程最核心的一条线。操作员选择科室、选择医生、选择就诊日期系统会展示剩余号源确认以后填写患者信息或从已有患者档案里直接选人挂号成功就生成一条挂号记录同时扣减号源。退号则做反向操作把号源加回去并更新记录状态。这里牵涉到并发问题同一时间好几个人抢最后一个号如果不做控制就会超号。常规做法是数据库更新时带上剩余号源数的条件判断比如 update hos_doctor set remainremain-1 where id1 and remain0。病历与处方管理。医生进入接诊工作台可以看到当天的挂号列表点开一个患者就能写病历记录主诉、现病史、既往史、诊断结论并开出药品处方。处方明细会关联药品表和剂量用法字段。这部分业务还牵涉到“同一份病历不能被两个人同时编辑”的并发控制课程设计版本可能不处理但至少值得在代码里留个锁的接口。统计报表。从挂号记录表里按日期聚合可以统计出门诊量从处方明细表聚合可以算出药品消耗和收入。这部分通常会用 SQL 的 GROUP BY 配合日期函数实现前端再用图表组件展示一眼就能看到趋势。3.2 关键表结构与字段设计参考真要动手建表时有几张表的字段设计例子很值得参考。用户在系统里扮演多重角色用户名和密码存 sys_user角色和菜单权限分别存 sys_role 和 sys_menu 以及关联表 sys_user_role、sys_role_menu。密码字段存的不应该是明文而是 MD5 或 BCrypt 加密后的字符串这一步无论项目大小都不要省。出诊医生的排班可以用一张表承载比如 hos_schedule 表存 doctor_id、work_date、am_remain、pm_remain上午和下午的号源数分开计算。挂号的表则记录 patient_id、doctor_id、schedule_id、visit_date、visit_time、statusstatus 用枚举值标记挂号、已就诊、已退号。这样统计每天门诊量时直接 count 挂号表里 visit_date 当天的非退号记录就行。药品表其实可以独立成一个模块来做字段包括药品编码、名称、规格、单位、库存量、售价。如果这套系统还做了药房库存扣减那处方表写好之后就要联动更新库存这是很多课程设计版本没做完整的地方倒是非常适合自己动手扩展。3.3 权限模型的前后端配合权限模型听起来高大上实现起来其实思路清晰。后端在用户登录成功后查询该用户拥有的角色和菜单标识生成一个权限集合放进 JWT 或响应体里前端拿到以后控制路由和按钮显示。也就是说前端“看不到”不代表安全后端的接口同样要做鉴权防止有人绕过页面直接调接口。这套系统能够在面试里加分的地方恰恰是前后端权限校验是否都做扎实了缺一侧都算不闭环。具体到后端最省力的方式是做一个拦截器或过滤器把需要登录的接口统一检查 Token 合法性再把需要特定权限的接口加上权限注解。前端则用 router.beforeEach 做路由守卫没有登录信息就踢到登录页页面上用自定义指令控制按钮的显示隐藏。我见过很多项目控制住了页面没控制住接口最后被用户拿着 Postman 直接调接口改数据这就是权限体系做成半吊子的后果。4. 环境准备与快速启动全流程4.1 本地环境版本怎么选项目要想跑起来第一步是环境版本要对得上。JDK 推荐 1.8 或者不低于 1.8 的版本早几年项目基本是在 JDK8 上写的如果手里是 JDK17 及以上需要留意 pom.xml 里编译版本和依赖兼容性。Maven 使用 3.6 以上版本Node.js 建议 14 到 16 之间别一上来就装最新的 Node 20老项目用到 node-sass 时常会因版本过高导致编译失败这个坑尤其常见。MySQL 的安装是新手最容易卡住的一环。MySQL 5.7 一路下一步安装到设置密码时记好自己设的密码MySQL 8.0 安装时选择默认认证方式的话有些旧驱动连接会报错要么换成 update 驱动版本要么在连接串上加 allowPublicKeyRetrievaltrue。装完之后建议再装一个可视化工具Navicat 挺好用但也可以用免费开源的 MySQL Workbench或者直接命令行操作也可以。工欲善其事后端开发建议用 IntelliJ IDEA社区版就够用前端用 VS Code 或者 IDEA 都行Vue 官方推荐的 VSCode 插件 Volar 记得装好。如果你之前没玩过前后端分离项目这些工具安装好以后整个环境准备环节就结束了接下来才是真正的项目运行。4.2 后端启动流程与关键配置拿到源码以后先在 IDEA 里打开后端目录等待 Maven 把依赖下载完。这个过程可能比较久国内网络环境建议给 Maven 配置阿里云镜像三个小时下不完依赖的痛我体验过后来改成镜像仓库以后基本三分钟搞定。接下来是关键动作修改数据库连接配置。在 src/main/resources/application.yml 里找到下面这一段改成你自己的数据库信息spring: datasource: url: jdbc:mysql://localhost:3306/hospital?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver建库的方式有两种。如果源码里附带 hospital.sql 脚本文件用 Navicat 或命令行执行 source hospital.sql 导入如果没有就手动创建数据库并让后端在启动时自动建表。前者更省心表和测试数据一次搞定。配置改好以后直接运行主类上的 main 方法。启动日志里看到 Tomcat started on port(s): 8080 就说明后端起来了。如果端口被占用可以在 application.yml 里改 server.port改成 8081 或别的空闲端口都行。后端这个环节最容易踩的坑就是数据库连接失败后面专门有一节讲。4.3 前端启动流程与常见操作打开前端目录先执行 npm install 安装依赖。这一步同样建议把 npm 源换成国内镜像速度提升明显npm config set registry https://registry.npmmirror.com依赖装完以后执行 npm run serve 或 npm run dev。控制台会输出一个本地访问地址一般是 http://localhost:8081浏览器打开这个地址就能看到登录页。首次登录使用的账号密码要看 README 里的说明一般会有管理员账号比如 admin/admin123 或 admin/123456。前端启动以后页面会向后端接口发请求。如果你发现页面有数据展示但登录不了优先看 F12 控制台里的请求是否报 404 或 401。404 意味着后端接口路径跟前端请求对不上401 则多是 Token 失效或没带上。遇到前端跨域报错检查 vue.config.js 里 devServer.proxy 配置是否把 /api 代理到后端地址devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }4.4 一键运行的整体节奏整个项目从下载到跑起来顺畅的话半小时内能完成。我通常建议按这个顺序推进先装 MySQL 并导入 SQL 脚本-再打开后端改数据源配置并启动-然后打开前端 npm install 并 npm run serve-最后浏览器登录系统逐个点击菜单按业务顺序从挂号走一遍到病历处方确认链路通畅。凡是中间出了问题先不要急着怀疑代码——环境配置和版本不匹配占了这类问题八成的比例把每一个报错截图存下来按错误关键字去搜基本都能快速定位。5. 常见问题与避坑实录5.1 数据库连接类报错这个类别是我见到的最高频问题。报错 Cant connect to local MySQL server through socket /tmp/mysql.sock 通常不是代码问题是 MySQL 服务根本没启动或者本地只装了客户端没装服务端。Windows 上检查“服务”里有没有 MySQL 服务Linux 上执行 systemctl status mysql 查看状态Mac 上则看 Homebrew 装的服务是否已经启动。另一个高频报错是 SSL 连接错误。MySQL 8.0 默认开了 SSL 相关校验旧驱动连的时候会报 javax.net.ssl.SSLHandshakeException。解决办法是在连接串后面加上 useSSLfalse 和 allowPublicKeyRetrievaltrue这也是我在上文配置里直接写进去的原因。还有 Unknown database 报错说明数据库名跟连接串里配置的名字不一致要么改配置要么去建同名数据库。如果你导入 SQL 时报错说文件路径或权限有问题建议直接把 .sql 文件的绝对路径写到 source 命令后面执行。Windows 下还要注意文件编码SQL 文件最好保存为 UTF-8否则导入中文会变成乱码。5.2 前端依赖与构建报错前端卡壳通常集中在 npm install 和 npm run serve 这两步。npm install 报 node-sass 安装失败问题基本是 Node 版本过高先检查 node -v如果大于 16可以考虑把 Node 降到 14 或 16或者把项目里的 node-sass 替换成 sass。还有种情况是依赖下载一半失败执行 npm cache clean --force 之后重装或者删掉 node_modules 和 package-lock.json 重新安装。前端启动成功但页面空白多半是路由问题或 JS 报错。按 F12 打开控制台看红色的报错信息。如果报错集中在某个组件文件先用注释法把可疑组件逐步定位如果页面能打开但接口数据不对那就是接口路径或跨域问题看 Network 面板里的实际请求地址和响应状态码最直观。需要额外吐槽的是有些项目默认端口是 8080前端也是 8080浏览器访问的“前端页面”实际上打到了后端接口上页面会直接显示 JSON 或者 404。解决方式就是给前端换个端口比如改 vue.config.js 里 devServer 的 port 为 8081或者改 back 端 server.port。5.3 SpringBoot 启动与打包的坑后端启动时如果报 ClassNotFound 或者依赖无法解析首先检查 Maven 的依赖是否完整下载。可以执行 mvn clean package -DskipTests 在项目根目录重新打包如果这里通过就说明代码本身没问题。有些项目会把本地依赖装到系统仓库里IDEA 打开时可能没识别到本地仓库路径在 Settings 里检查 Maven 的本地仓库配置即可。打包之后想部署到服务器直接把 jar 文件扔到服务器java -jar xxx.jar 就能运行。如果端口冲突用 nohup 启动时加 --server.port8081 参数。这里有一点要强调生产环境部署时不能再用开发阶段的 H2 或者本地 MySQL连接配置要改成服务器的数据库地址而且密码不要写明文到配置文件里可以改成环境变量占位比如 password: ${DB_PASSWORD}这个习惯越早养成越好。5.4 账号与权限的坑登录不了是这类系统最常见的问题之一。先检查密码是否正确再检查数据库里用户状态字段是不是被禁用。如果密码对但进不去系统再看用户角色有没有分配菜单权限没有角色和菜单权限的用户登录成功也会被踢出来或者一片空白。很多同学改完数据库里某个用户的密码以后忘记同步加密方式比如后端用的 BCrypt你在数据库里直接 UPDATE 成明文密码那永远登录不上正确做法是拿后端注册接口或写个测试类生成加密密码再 UPDATE。还有种情况是 Token 过期时间设置太短登录没几分钟就提示重新登录。如果是个人学习使用可以在 JWT 配置里把过期时间调长一点放到一天或更长如果你打算在面试里演示这个项目建议保持一个短过期时间并在前端做好 401 自动跳回登录页的逻辑——这个体验细节很加分。5.5 常见问题速查表为了方便后面的人排查我把上面这些问题整理成一个速查表保存下来遇到问题先对号入座。问题现象可能原因解决方案启动时数据库连接失败MySQL 未启动 / 连接串错误 / 账号密码错误检查服务状态核对 application.yml 数据源四项配置导 SQL 中文乱码文件编码不是 UTF-8用 UTF-8 编码重新保存 SQL 文件后导入npm install 卡住或报错镜像源慢 / node 版本不匹配换国内镜像切换 Node 到 14 或 16前端页面 404端口被后端占用 / 路由写错改前端 devServer 端口检查路由路径页面接口 404前端请求地址与后端接口路径不一致打开 Network 面板核对实际 URL 和映射路径请求报 401Token 缺失或过期重新登录检查后端拦截器放行规则跨域报错前端与后端端口不同且未配置代理配置 devServer.proxy 或后端加 CORS 配置密码正确但登录失败密码明文与加密不匹配 / 用户状态禁用用后端加密方式正确处理密码检查状态字段端口被占用其他程序占用 8080修改 server.port 或杀掉占用进程6. 安全合规与代码整洁的一些体会借着这套医院后台管理系统我想多说一点安全与合规的事。做任何包含患者个人信息的系统尤其是医疗健康数据一定要有隐私保护的意识。哪怕只是课程设计或者个人练习代码里也不要把真实身份证号、手机号写死在页面上更不要明文存储密码。能用加密就加密能脱敏就脱敏该做权限控制就要做权限控制。牙疼医院信息管理系统也在用户登录处加了 BCrypt 加密数据库里没有一条明文密码。把接口、数据库、前端三个层面过了一遍把硬编码的账号密码全部清理掉——这是一个好习惯也是一个加分项。关于代码整洁我的体会是这套系统运行成功只是第一步代码结构才是拉开差距的地方。建议拿到源码以后先不要着急改功能找一个模块从头到尾读一遍把 Controller、Service、Mapper 三层之间的调用关系画出来。然后试着给某个模块加上一个字段比如给科室表加一个“备注”字段走一遍数据库、后端实体类、VO、前端表单和表格的完整链路这个动作做完你会对“全栈开发”四个字有完全不一样的理解。再往后做可以试着把代码里写死的配置改成 application.yml 里的配置项把登录逻辑中的 Token 换掉或加一层刷新机制——这些改造每一步都能让你真正掌握这套源码。最后再分享一个我自己的习惯无论项目大小拿到手之后先跑通再增加一个小功能最后把部署上线走一遍。这个过程就是一套信息管理系统的完整生命周期。希望这篇分享能让你少踩几个坑早日把项目跑起来。
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。