简介：本资源是一套完整的基于Vue+SpringBoot的社区医疗服务系统毕业设计/课程设计项目，面向计算机专业本科生及全栈开发初学者，解决社区居民预约挂号、健康档案管理、线上问诊与药品配送等实际医疗信息化需求。压缩包共906个文件，涵盖153个Java后端业务逻辑与控制器代码、79个Vue组件页面、161个JS交互脚本、162个SVG图标资源、79个GIF动效素材，以及SQL建表脚本、YML配置、BAT一键部署脚本（如1-install.bat、2-run.bat）等工程化支持文件，整体大小24.25MB，结构规范，模块清晰。已有37人学习下载，适合用于期末大作业提交、毕设参考或SpringBoot+Vue全栈技术实践。读者可直接导入运行，获取含论文文档、数据库设计说明、完整前后端源码、权限分级（管理员/医生/患者）实现及RESTful接口定义的全套交付物，具备高复用性与可扩展性。
1. 这不是又一个“登录注册+增删改查”的毕设模板：Vue+SpringBoot社区医疗服务系统真能跑通挂号、问诊、处方、健康档案四条业务主线
去年带三个学生做毕业设计，翻了27个标着“社区医疗”的GitHub仓库，90%卡在首页轮播图+用户管理页面就再没下文——要么后端接口404，要么Vue路由跳转白屏，要么数据库脚本缺字段。但这个「基于Vue+SpringBoot的社区医疗服务系统设计.zip」我本地解压、npm install、mvn clean package、application.yml改端口、MySQL建库导入SQL，15分钟内跑通了真实业务流：居民扫码预约→医生接诊→开电子处方→生成PDF健康档案→家属端同步查看。它不是Demo，是按《国家基层医疗卫生信息系统功能规范（2023版）》拆解出的最小可行闭环：挂号模块支持时段冲突校验，问诊页集成Markdown编辑器写病历，处方模块对接HIS模拟接口（Mock），健康档案自动归档并支持按ICD-10编码检索。适合计算机/信管专业本科生做课程设计、期末大作业或毕设原型——你不用从零搭框架，但必须动手改业务逻辑；它不教Vue基础语法，但每行代码都带着真实医疗场景的约束：比如患者ID必须用身份证号校验规则，处方药品必须关联国家医保目录编码，时间戳全部强制UTC+8存储。别被“社区医疗”四个字骗了，这系统里藏着比电商系统更硬核的事务边界和数据一致性要求。
2. 搭建前先看清技术栈底牌：为什么选Vue 2.7+SpringBoot 2.7而非Vue3+SpringBoot 3.x
2.1 选型不是跟风，而是绕开毕业答辩现场翻车的坑
这个项目刻意锁定Vue 2.7.14 + SpringBoot 2.7.18 + MyBatis-Plus 3.5.3.1 + MySQL 5.7组合，不是技术落后，是精准踩中高校实验室环境现实：
- 大学机房IDEA版本普遍停留在2021.x，对SpringBoot 3.x要求JDK17+，而教学机预装JDK8；
- Vue 2.7是Vue2最后的LTS版本，兼容
vue-cli 3.x（学生最熟的脚手架），且支持Composition API语法糖（为后续升级留缝）； - MyBatis-Plus 3.5.x对MySQL 5.7的
datetime(3)毫秒精度支持稳定，而新版MP 4.x在部分学校服务器上会报Unknown column 'create_time' in 'field list'——因为MySQL 5.7默认关闭explicit_defaults_for_timestamp。
提示：如果你用IDEA 2023+且已配JDK17，想升级到Vue3+SpringBoot 3.x，千万别直接改pom.xml和package.json。先确认
src/main/resources/application.yml里spring.jpa.hibernate.ddl-auto: validate是否启用（生产环境必须关），再检查@TableField(fill = FieldFill.INSERT)注解在Vue3的<script setup>里是否仍生效——我试过，MyBatis-Plus 3.5.3.1的自动填充在Vue3组合式API中需额外加@TableName(autoResultMap = true)。
2.2 前端工程结构：src目录里藏着医疗业务的分层逻辑
解压后src目录不是常规的views/components/router三层，而是按医疗角色切分：
src/ ├── api/ # 接口层：按业务域分文件，非按HTTP方法 │ ├── appointment.js # 挂号相关：checkAvailableTime(), createOrder() │ ├── prescription.js # 处方相关：generatePdf(), syncToHIS() │ └── healthRecord.js # 健康档案：getByPatientId(), exportAsPDF() ├── assets/ # 静态资源：含医保药品目录JSON（data/insurance_drugs.json） ├── components/ # 可复用组件：MedicalRecordEditor.vue（带病历模板选择）、PrescriptionPrinter.vue（PDF生成入口） ├── router/ # 路由守卫严格：/doctor/*需token验证+角色=doctor，/patient/*需实名认证 └── store/ # Vuex状态：healthRecordModule.js里存患者ID、最近3次就诊记录、过敏史缓存关键点：api/appointment.js里checkAvailableTime()调用后端/api/v1/appointment/available接口时，参数不是简单传date，而是传{date: '2024-06-15', departmentId: 'DEP-001', doctorId: 'DOC-002'}`——因为社区医院排班是“科室+医生+日期”三维绑定，漏掉任一维度都会返回错误空数组。
2.3 后端核心模块：SpringBoot如何把医疗规则变成可配置的Bean
com.community.medical包下四个主模块：
appointment：挂号模块，用@Transactional(isolation = Isolation.REPEATABLE_READ)保证同一时段不超号；prescription：处方模块，PrescriptionService里generatePdf()方法调用itext7生成带数字签名的PDF，签名密钥路径硬编码在application.yml的pdf.sign.key-path: classpath:keys/medical-sign.p12；healthrecord：健康档案模块，HealthRecordServiceImpl的syncToCloud()方法用@Scheduled(cron = "0 0 2 * * ?")每日凌晨2点同步至模拟云存储（实际是本地/opt/healthcloud/目录）；security：权限模块，JwtTokenFilter里doFilterInternal()方法对/api/v1/prescription/**路径强制校验X-Auth-Role: doctor请求头——这是答辩时老师最爱问的“怎么防止患者伪造医生身份访问处方接口”。
注意：
application.yml里spring.datasource.url默认是jdbc:mysql://localhost:3306/community_medical?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai，如果MySQL时区没设成Asia/Shanghai，挂号时间会比实际晚8小时。执行SET GLOBAL time_zone = '+8:00';后重启MySQL服务。
3. 三步跑通全流程：从数据库初始化到医生接诊的真实链路
3.1 数据库初始化：别只导入SQL，要理解表间医疗约束
项目根目录database/community_medical.sql不是简单建表语句，包含三类关键约束：
- 外键级联：
appointment表的patient_id关联patient表，但ON DELETE CASCADE被禁用——因为删除患者需保留历史挂号记录； - 唯一索引防重复：
prescription表有UNIQUE KEY uk_patient_date (patient_id, visit_date)，确保同一患者同日只开一张处方； - 枚举字段校验：
health_record表的blood_type字段类型为ENUM('A','B','AB','O','UNK')，插入时若传'a'（小写）会直接报错，前端必须用大写字母。
执行步骤：
# 1. 创建数据库（字符集必须utf8mb4） mysql -u root -p -e "CREATE DATABASE community_medical CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;" # 2. 导入SQL（注意指定字符集） mysql -u root -p community_medical --default-character-set=utf8mb4 < database/community_medical.sql # 3. 验证关键数据（必须看到3条医生、5个科室、10个药品） mysql -u root -p -e "SELECT COUNT(*) FROM doctor; SELECT COUNT(*) FROM department; SELECT COUNT(*) FROM drug;"3.2 前端启动：Vue CLI 3.x的隐藏配置陷阱
运行npm install后，不要直接npm run serve——package.json里scripts定义了两个关键命令：
dev:patient：启动患者端（端口8080），路由前缀/patient；dev:doctor：启动医生端（端口8081），路由前缀/doctor。
这是因为医疗系统需隔离角色视图：患者看不到医生排班详情，医生看不到其他患者联系方式。启动命令：
# 先启动患者端（模拟居民预约） npm run dev:patient # 新终端启动医生端（模拟医生接诊） npm run dev:doctor此时访问http://localhost:8080看到患者首页，http://localhost:8081看到医生工作台。关键验证点：在患者端点击“预约挂号”，选择日期后，医生端/doctor/schedule页面应实时刷新可约时段——这依赖WebSocket连接/ws/notify，若没刷新，检查src/api/socket.js里const socket = io('http://localhost:8080/ws/notify');的端口是否与前端服务端口一致。
3.3 真实业务链路：从扫码预约到生成PDF健康档案
以张三（身份证11010119900307231X）预约李医生为例：
患者端操作：
- 扫码进入
/patient/appointment?code=QR20240615DEP001（二维码含科室ID）； - 选择日期
2024-06-15→ 系统调用api/appointment.js的checkAvailableTime()； - 返回时段列表
[{time: '08:00-08:30', doctor: '李医生', status: 'available'}]； - 提交后生成订单，
order_status字段写入'paid'（模拟微信支付回调）。
- 扫码进入
医生端响应：
- 李医生登录
http://localhost:8081，/doctor/dashboard显示新订单； - 点击进入问诊页，
MedicalRecordEditor.vue加载病历模板（assets/templates/chronic_disease.md）； - 输入诊断
高血压2级，保存后触发prescription/generatePdf()；
- 李医生登录
PDF生成与归档：
- 后端
PrescriptionController.generatePdf()调用PdfGenerator.createPrescriptionPdf()； - 生成文件存于
/opt/healthcloud/prescription/20240615/PR-20240615-001.pdf； - 同时向
health_record表插入新记录，record_type='prescription'，source_id='PR-20240615-001'。
- 后端
提示：PDF生成失败时，看
logs/prescription-error.log，90%是java.io.FileNotFoundException: /opt/healthcloud/prescription/20240615/目录不存在——需手动创建并赋权：sudo mkdir -p /opt/healthcloud/prescription/20240615 && sudo chown -R $USER:$USER /opt/healthcloud。
4. 避坑：答辩现场最常卡住的5个血泪问题及解法
4.1 现象：Vue页面空白，控制台报[Vue warn]: Error in created hook: "TypeError: Cannot read property 'list' of undefined"
原因：src/views/patient/Appointment.vue的created()钩子调用this.$store.dispatch('healthRecord/fetchRecords')，但store/modules/healthRecord.js里fetchRecordsaction未处理reject，且state.records初始值为null而非[]。
解决：在store/modules/healthRecord.js中修改：
// 原代码（错误） state: { records: null // ← 这里导致this.records.list报错 } // 改为 state: { records: { list: [], total: 0 } // ← 初始化为对象，避免undefined.list }4.2 现象：挂号成功但医生端不刷新，WebSocket连接显示failed: Error during WebSocket handshake
原因：src/api/socket.js里io('http://localhost:8080/ws/notify')的URL写死，而实际SpringBoot WebSocket端点配置在WebSocketConfig.java中为/ws/notify，但前端开发服务器代理未转发。
解决：在vue.config.js中添加代理：
module.exports = { devServer: { proxy: { '/ws': { target: 'http://localhost:8080', // ← 指向SpringBoot端口 ws: true, // ← 关键！必须开启WebSocket代理 changeOrigin: true } } } }4.3 现象：处方PDF生成后打开乱码，中文显示为方框
原因：PdfGenerator.java使用FontFactory.getFont("SimSun")，但Linux服务器无宋体字体，且iText7默认不嵌入字体。
解决：
- 将
src/main/resources/fonts/simsun.ttc复制到服务器/opt/fonts/； - 修改
PdfGenerator.getFont()方法：
// 原代码（错误） FontProgram fontProgram = FontProgramFactory.createFont("SimSun"); // 改为（指定路径+强制嵌入） FontProgram fontProgram = FontProgramFactory.createFont("/opt/fonts/simsun.ttc"); pdfFont = PdfFontFactory.createFont(fontProgram, "Identity-H", true); // ← true表示嵌入4.4 现象：MySQL导入SQL时报错ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes
原因：community_medical.sql中patient表的id_card字段为VARCHAR(18)，但MySQL 5.7默认innodb_large_prefix=OFF，utf8mb4编码下18字符占72字节，索引长度超限。
解决：
-- 执行以下SQL（需root权限） SET GLOBAL innodb_file_format = 'Barracuda'; SET GLOBAL innodb_file_per_table = ON; SET GLOBAL innodb_large_prefix = ON; -- 然后重启MySQL服务 sudo systemctl restart mysql4.5 现象：医生登录后提示无权限访问，但数据库role字段确为'doctor'
原因：SecurityConfig.java中authorizeRequests()配置了.antMatchers("/api/v1/doctor/**").hasRole("DOCTOR")，但数据库sys_user表的role字段存的是字符串'doctor'，而Spring Security的hasRole()会自动添加ROLE_前缀，匹配的是'ROLE_DOCTOR'。
解决：
- 方案A（推荐）：修改数据库，将
role字段值改为'DOCTOR'； - 方案B：改代码，在
SecurityConfig.java中用.antMatchers("/api/v1/doctor/**").access("hasAuthority('doctor')")，并确保UserDetailsServiceImpl.loadUserByUsername()返回的SimpleGrantedAuthority构造参数为'doctor'。
5. 进阶技巧：把系统变成答辩加分项的3个硬核改造
5.1 给挂号模块加“智能时段推荐”，让老师眼前一亮
社区医院常见痛点：老年人不会选时段，总约在高峰段。我们利用历史挂号数据做简单预测：
- 在
AppointmentService.java中新增方法：
public List<String> recommendTimeSlots(String date, String departmentId) { // 查询该科室近7天各时段挂号量 Map<String, Integer> slotCount = appointmentMapper.getSlotCountByWeek(departmentId); // 找出挂号量<均值80%的时段（即较空闲时段） double avg = slotCount.values().stream().mapToInt(v -> v).average().orElse(0.0); return slotCount.entrySet().stream() .filter(e -> e.getValue() < avg * 0.8) .map(Map.Entry::getKey) .collect(Collectors.toList()); }- 在
src/api/appointment.js暴露接口：
export function getRecommendedSlots(date, deptId) { return request({ url: `/api/v1/appointment/recommend?date=${date}&departmentId=${deptId}`, method: 'get' }) }- 在
src/views/patient/Appointment.vue的mounted()中调用，用<el-tag type="success">推荐时段</el-tag>高亮显示。
效果：答辩时演示“张爷爷预约”，系统自动推荐14:00-14:30（因上午时段已满），老师立刻问“这算法怎么来的？”——你答：“基于近7天挂号热力图，阈值可配置”，瞬间拉开和只会CRUD的同学差距。
5.2 用PDF模板引擎替换硬编码生成，让处方更专业
当前PdfGenerator.java用ColumnText逐行写文字，维护成本高。换成Thymeleaf模板：
- 创建
src/main/resources/templates/prescription.html：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <style> body { font-family: "SimSun"; } .header { text-align: center; border-bottom: 2px solid #000; } </style> </head> <body> <div class="header"> <h2 th:text="${hospitalName}">XX社区卫生服务中心</h2> <p>电子处方单</p> </div> <div class="content"> <p>患者：<span th:text="${patient.name}"></span>（<span th:text="${patient.idCard}"></span>）</p> <p>诊断：<span th:text="${diagnosis}"></span></p> <table> <tr th:each="drug : ${drugs}"> <td th:text="${drug.name}"></td> <td th:text="${drug.dosage}"></td> </tr> </table> </div> </body> </html>- 在
PrescriptionController.java中：
@GetMapping("/pdf/{id}") public void generatePdf(@PathVariable String id, HttpServletResponse response) throws IOException { Prescription prescription = prescriptionService.getById(id); Context ctx = new Context(); ctx.setVariable("hospitalName", "XX社区卫生服务中心"); ctx.setVariable("patient", prescription.getPatient()); ctx.setVariable("diagnosis", prescription.getDiagnosis()); ctx.setVariable("drugs", prescription.getDrugs()); String html = templateEngine.process("prescription", ctx); // 后续用ITextRenderer渲染HTML为PDF... }价值：老师问“处方格式能改吗？”，你打开prescription.html改两行CSS就能换皮肤，比改Java代码快10倍。
5.3 健康档案增加ICD-10编码检索，体现医学信息素养
当前health_record表只有diagnosis_text字段。加一个icd_code字段并建立索引：
ALTER TABLE health_record ADD COLUMN icd_code VARCHAR(10) DEFAULT NULL; CREATE INDEX idx_icd_code ON health_record(icd_code);然后在HealthRecordController.java中：
@GetMapping("/search") public Result<List<HealthRecord>> searchByIcd(@RequestParam String icdCode) { // 模糊匹配ICD-10编码（如输入"J45"查所有哮喘相关记录） List<HealthRecord> records = healthRecordService.lambdaQuery() .like(HealthRecord::getIcdCode, icdCode) .list(); return Result.success(records); }前端src/views/doctor/HealthRecord.vue加搜索框，输入J45（哮喘编码）秒出结果。这步改造让系统从“能用”升级为“懂医疗”——答辩时老师若懂医学信息学，会追问ICD版本，你答“当前用ICD-10-CM第2版，可通过配置切换ICD-11”，他大概率给你打满分。
从那以后我每次帮学生改毕设，都强制他们先跑通挂号→问诊→处方→归档全链路，再谈优化。因为答辩老师第一个问题永远是“你这个系统，到底能不能用？”——能用，才有资格谈智能推荐、PDF模板、ICD编码这些加分项。希望帮到你。
本文还有配套的精品资源，点击获取
