简介：这套基于Vue与SpringBoot的社区医疗服务系统设计资源，面向计算机相关专业毕业生、课程设计及期末大作业人群，可作全栈项目参考或二次开发基础。系统围绕社区居民医疗健康需求，涵盖预约挂号、健康档案、线上问诊、药品配送等典型业务，前端与后端代码分层清晰，适合希望从实际项目理解前后端协作与权限管理的学习者。压缩包共906个文件，包含Java、Vue、JavaScript、CSS、HTML等源码文件，以及SQL数据库脚本、XML配置、构建脚本、项目说明文档等，整体约24.25MB，结构完整且便于按目录检索。资源中附有系统设计论文、表结构说明、数据库脚本等文档，能帮助读者快速搭建环境、理解业务流转与权限控制，并作为毕业设计或课程报告的撰写支撑。该资源已有37人学习下载，对于需要快速上手SpringBoot+Vue全栈开发的人来说，是一份具备实践参考价值的案例包。1. 社区医疗服务系统：Vue+SpringBoot毕设资源值不值得下基于Vue+SpringBoot的社区医疗服务系统设计.zip，这不是一个只能跑个登录页的课程作业，而是一套能支撑答辩的前后端分离完整源码。它把社区居民健康档案、预约挂号、体检记录、医生排班这些业务塞进了一个可演示的系统里，前端用Vue + Element UI，后端用SpringBoot + MyBatis Plus，数据库用的MySQL。对正在找毕设题目的同学来说，这套东西最大的价值不是“能跑”，而是它能让你在短时间内理解一个实际业务系统是怎么从表结构到接口再到页面的。适合有Java和Vue基础、但还没完整做过前后端项目的人。下面我从拆包到跑通再到二次开发，把每一步的关键点和坑都讲清楚。2. 系统拆解：模块划分、数据表设计与前后端通信约定打开压缩包第一件事不是急着启动，而是先看目录结构。这类毕设资源普遍是三个文件夹：前端、后端、数据库脚本。你先把这三者对应关系理清，后面跑通和改代码都会快很多。2.1 功能模块与角色权限社区医疗服务系统的业务模型并不复杂，核心是围绕“居民健康档案”展开。角色通常分三种：管理员、医生、居民。管理员管系统配置和账号，医生管档案和接诊记录，居民管自己的预约和体检报告。权限这块在前后端都有控制，前端用路由守卫拦页面，后端用拦截器校验登录状态和角色标识。我一般会先看后端的拦截器或过滤器，确认哪些接口是放行的，哪些必须带token。这个系统的典型功能链是这样的：居民注册登录后，填写基础健康档案，然后可以查看社区医院的科室和医生排班，预约挂号；医生登录后能看到当天预约列表，给居民写诊断记录；管理员负责维护医生信息、科室信息和公告。整个流程在一个演示系统里闭环，正好对应答辩时老师最爱问的“业务闭环”问题。模块划分上，前端是按页面切的，通常是views目录下的home、appointment、record、user等；后端按Controller、Service、Mapper分层。我建议你画一张模块导图，把前端路由、后端Controller、数据库表三者对应起来，这张图就是你答辩时讲系统架构的底稿。2.2 核心数据表与字段设计数据库脚本是整个系统的地基。我先说几张核心表。居民表（resident）一般包含姓名、身份证号、手机号、既往病史、过敏史、家庭住址。医生表（doctor）包含所属科室、职称、排班时间段。预约表（appointment）是业务核心，包含居民ID、医生ID、预约日期、时间段、状态字段。这张表的设计直接决定了系统的演示深度——如果状态字段只有“已预约”和“已取消”，那逻辑就比较单薄；如果还有“已完成”，医生端就能做闭环操作。另一个容易被忽略的表是体检记录表（health_record），它通常和居民表是一对多关系。老师在答辩时很容易追问“你的档案数据是怎么维护历史版本的”，如果你只设计了单表，就得用更新覆盖的方式，这其实是个扣分点。我建议你拿到脚本后先看表关系里是否有时间字段和关联外键，没有的话自己在二次开发阶段补上。字段命名上，这套资源大概率用的是驼峰命名，比如residentName、doctorId。如果你用的是MyBatis Plus，注意实体类字段和表字段的映射关系，别因为下划线和驼峰对不上导致查出空值。这部分在避坑章节里还会细讲。2.3 前端路由与后端接口的对应关系前端Vue项目用的是Vue Router，路由配置在router目录下。你会发现登录页、首页、预约页、档案页的路由都带了懒加载，这是常规写法。重点看两个地方：第一，路由守卫里是否读取了localStorage里的token，如果没有就跳转登录页；第二，request工具类里是否做了axios拦截器，统一在请求头里加token，以及统一处理401状态码。后端接口的命名一般是Restful风格，比如/api/resident/info、/api/appointment/list。有一个细节我每次都会验证：前端调用的路径和后端Controller里的@RequestMapping是否一致。很多毕设资源是从不同模板拼凑的，前端请求路径和后端接口路径有一处字母大小写不一致，就足以让整个登录流程翻车。另外，后端有个容易踩的约定问题：返回给前端的Json格式。常见的封装是{code: 200, data: {...}, msg: "成功"}，但有些资源会直接返回裸对象。前端axios拦截器如果按封装格式解包，遇到裸对象就会拿不到data。所以跑通前，先打开后端的一个接口测试一下返回结构，再对一下前端工具类的解包逻辑。3. 本地跑通：从数据库初始化到前后端联调这一章是照着做就能复现的部分。无论你是要用这个系统交毕设，还是要二次开发，先把本地环境跑通，一切才有的聊。3.1 环境准备与项目结构我建议先看压缩包里的README或者部署说明文档，没有的话就按下面这套流程走。需要准备的环境是：JDK 1.8或更高、Maven 3.6+、Node.js 14以上、MySQL 5.7或8.0。这里有个细节：SpringBoot版本如果是2.x，JDK 1.8完全够用；如果项目用了SpringBoot 3.x，JDK必须切到17，否则启动直接报错。拿到代码先看pom.xml里的parent版本，再决定本地JDK装哪个。项目结构上，前端目录一般是front或vue-web，后端目录一般是backend或server。把两个目录分别放进IDE，前端用VSCode或WebStorm，后端用IDEA。数据库脚本通常在sql目录下，文件名类似community_medical.sql。打开脚本先确认有没有创建数据库的语句，比如CREATE DATABASE community_medical。如果没有，你自己先到MySQL里执行CREATE DATABASE community_medical DEFAULT CHARACTER SET utf8mb4;，再导入脚本。很多同学直接双击导入，结果报“No database selected”，就是少了这一步。3.2 数据库脚本执行与账号配置执行脚本时，我习惯用Navicat或者命令行。命令行执行方式如下：mysql -u root -p < community_medical.sql执行后进入数据库，查看表数量是不是和前后端业务对得上：USE community_medical; SHOW TABLES;如果你看到表名是英文复数形式，比如residents、appointments，别意外，这是常见的命名习惯。下一步是改后端数据库配置。打开application.yml，把数据库地址、账号、密码改成你自己的。spring: datasource: url: jdbc:mysql://localhost:3306/community_medical?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver参数说明：serverTimezone=Asia/Shanghai必须加，否则连接MySQL 8.0时会报时区错误；useSSL=false是避免本地开发时SSL握手警告。如果你用的是MySQL 5.7，驱动类可以保持com.mysql.jdbc.Driver，但最好改成com.mysql.cj.jdbc.Driver，新驱动向下兼容。改完配置后，到IDEA里执行Maven的clean和package，或者直接运行主类。如果启动日志里出现Tomcat started on port(s): 8080，后端就起来了。3.3 启动后端SpringBoot与前端Vue后端启动成功后，先别急着开前端。先用浏览器访问一个无需登录的接口，比如http://localhost:8080/api/health，确认能返回Json数据。如果接口是受保护的，会返回401或跳转提示，这也是正常的，说明拦截器在工作。接着启动前端。在终端进入前端目录，依次执行：npm install npm run servenpm install可能需要几分钟，如果网络慢出现超时，可以用npm install --registry=https://registry.npmmirror.com切换镜像源。npm run serve启动后，终端会输出一个本地访问地址，通常是http://localhost:8081或http://localhost:3000。这里有个关键配置：前端请求后端接口的地址。打开前端的.env.development文件或request.js，你会看到类似VUE_APP_BASE_URL = 'http://localhost:8080'的配置。确保这个端口和后端启动端口一致，否则前端请求会打在错误地址上。3.4 联调验证主流程前后端都启动后，按真实用户流程走一遍验证。我一般按这个顺序：注册一个居民账号，用该账号登录，进入首页看公告，去预约页面选科室和医生，提交预约，然后退出登录，切到医生账号查看预约列表。这一套走下来，如果能正常跳转和数据展示，说明核心链路没问题。中间任何一步报错，优先看浏览器控制台的Network请求，确认是404、500还是401。404是路径不对，500是后端逻辑异常，401是登录失效或鉴权失败。后端日志里出现异常时，把堆栈信息复制到搜索引擎里查一下，大部分坑都是依赖版本或数据库连接问题。如果是MyBatis的SQL报错，把控制台打印的SQL语句拿到Navicat里手动执行一遍，就能定位到是语法问题还是参数问题。4. 二次开发实战：替换首页轮播图与新增健康档案字段拿到别人的源码，最怕的就是不知道怎么改成自己的。这一章我挑两个典型需求来讲：替换首页展示内容和给档案表加字段。这两个操作覆盖了前端页面、后端实体、数据库表三层，做完你就知道这个系统的改造套路了。4.1 修改前端页面先看首页轮播图在哪个组件里。Vue项目页面一般在views/Home.vue，轮播图组件用的是Element UI的el-carousel。找到图片地址的绑定位置，通常是这样：<el-carousel> <el-carousel-item v-for="item in bannerList" :key="item.id"> <img :src="item.imageUrl" style="width: 100%; height: 400px"> </el-carousel-item> </el-carousel>这个bannerList可能来自接口，也可能写死在data()里。如果写死在data里，直接换成你自己的图片链接；如果来自接口，你得找到对应后端接口，要么改数据库里的图片地址，要么改接口返回的固定值。常见的做法是把bannerList改成静态数据，因为答辩演示时不需要动态维护轮播图。但注意图片地址不要用本地相对路径，启动后容易变成localhost:8081/static/img/xxx.png，如果图片不在前端assets目录下就访问不到。我一般是放到项目里的static目录或public目录，然后使用绝对路径/banner1.png。4.2 后端新增字段与接口假设你要给健康档案表新增一个“血型”字段。首先在数据库表里增加一列：ALTER TABLE health_record ADD COLUMN blood_type VARCHAR(10) DEFAULT '' COMMENT '血型';然后修改后端实体类，加上对应字段：private String bloodType;如果用了MyBatis Plus，实体类字段默认映射到表的同名字段，驼峰会转下划线，所以bloodType会映射到blood_type，没问题。但如果你写的是自定义Mapper XML，就得在resultMap里也加这个字段。接着修改新增和查询接口的逻辑。查询接口通常是selectById或selectList，MyBatis Plus会自动带上新字段。新增时前端传了bloodType，后端对象接收后，插入操作也会自动带上。如果前端传的是bloodType，而后端实体类写成了bloodtype，就会映射失败，这个很隐蔽。4.3 前端表单联动后端字段加好后，前端也要加输入框。找到档案编辑页面的表单组件，在el-form里加一个el-form-item：<el-form-item label="血型"> <el-select v-model="form.bloodType"> <el-option label="A型" value="A"></el-option> <el-option label="B型" value="B"></el-option> <el-option label="O型" value="O"></el-option> <el-option label="AB型" value="AB"></el-option> </el-select> </el-form-item>注意v-model绑定的字段名，必须和后端实体类字段名一致。表单提交时的数据对象如果经过赋值或转换，得把bloodType也带上，否则后端收到的就是null。验证的时候，在后端接口入口处打一个日志或者直接看数据库记录。如果前端提交成功但数据库里blood_type是空，先抓包看请求体里有没有bloodType字段，没有就是前端问题；有但没写入，就是后端实体类或SQL映射问题。这种排查思路对任何字段新增都适用。5. 避坑清单：三个让你怀疑人生的常见问题这套资源最大的风险不在代码本身，而在环境配置和细节遗漏。以下是我跑这类Vue+SpringBoot毕设时遇到过的真实问题，每个都按“现象 → 原因 → 解决”给你拆开。5.1 现象：启动前端后，所有请求都报CORS错误浏览器控制台显示Access-Control-Allow-Origin相关报错，或者请求出现在Network里是红色的，状态码是CORS error。原因是后端没有允许跨域。因为前端跑在8081端口，后端跑在8080端口，两个端口不同，浏览器会认为是跨域请求。解决方式有两种，推荐在后端加一个全局CORS配置类：@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8081") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true); } }参数说明：allowedOrigins写你前端的地址，如果最后要部署上线，改成服务器地址；allowCredentials(true)必须配合具体域名，不能写成*。加完配置文件重启后端，再刷新前端页面就好了。5.2 现象：登录成功后刷新页面就跳回登录页前端路由守卫在每次路由跳转前检查token，token存在localStorage里。刷新后token还在，但用户信息没存，检查的时候判断用户信息为空，就强制跳回登录页。原因是登录成功后只把token存了，没有把用户基本信息持久化。解决方式是在登录接口返回数据里，把用户ID、用户名、角色一起存到localStorage或sessionStorage。路由守卫改成同时检查token和用户信息。我一般把用户信息存sessionStorage，这样关闭浏览器就自动清空，更符合安全习惯。5.3 现象：数据库时间比本地时间早8小时预约记录里的时间显示的是凌晨两点，但操作时间是上午十点，看起来像“穿越”。原因是MySQL连接串里没有指定serverTimezone，导致Java和MySQL之间按系统默认时区转换。解决方式就是在application.yml的数据库连接URL里加上serverTimezone=Asia/Shanghai，问题就不会再出现。注意如果数据库存储的字段是datetime，也要确认后端的LocalDateTime类型正确接收，别用Date类型去接带时区的值。5.4 现象：上传的图片在页面上显示404管理员在首页公告里上传图片，上传成功后显示http://localhost:8080/upload/xxx.png，但访问这个地址404。原因是后端文件上传到了本地磁盘，但SpringBoot默认不会把磁盘路径映射成静态访问资源。解决方式是在application.yml里配置静态资源映射，或者在启动类里写一个资源映射，把/upload/**指向本地上传目录。我更常用的方式是在后端写一个配置类：@Configuration public class UploadConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/upload/**") .addResourceLocations("file:" + System.getProperty("user.dir") + "/upload/"); } }这样/upload/开头的请求会到项目根目录的upload文件夹找图片。上传时注意确保目标目录存在，没有就创建，否则仍然会报找不到文件。6. 把毕设改成答辩演示的五个关键动作源码跑通只是开始，真正决定成绩的是演示环节给老师看到的东西。以下五个习惯我每次带模拟项目给导师演示前都会强制做一遍，现在总结给你。第一，数据填充要有真实感。默认的数据库脚本往往只有几条测试数据，演示时页面空空如也，观感非常差。你要手动往表里灌几十条居民档案、医生排班、预约记录，时间尽量分散到最近一周。我习惯用SQL循环插入，比如生成20条居民档案，再生成30条预约记录，确保列表页有分页效果，医生端有可处理的任务。第二，演示路径要精心设计。不要从登录页开始乱点。先讲前端首页，展示社区公告和功能入口；然后进入居民端，演示注册、填档案、查排班、预约；再切到医生端，演示看到预约、写诊断、完成状态。每一步之前想好你要说的话，控制在10分钟以内。老师问“这系统有哪些创新点”，至少准备一个你二次开发的点，哪怕只是新增了一个字段也算。第三，后端接口的调试记录要保留。答辩时常常被问“你遇到过什么问题”。你提前准备一两个真实踩坑记录，比如CORS配置、时间差问题，讲清楚现象、原因、如何排查、如何解决。这个比讲技术细节更让老师觉得你有独立思考能力。第四，前端路由权限要提前检查。演示时最尴尬的就是用居民账号登录后，还停留在管理员的页面。你在答辩前把无头模式下所有角色都走一遍，确保路由守卫和后端拦截器都生效。有些资源虽然有权限代码，但只是前端隐藏了菜单，直接改URL还能访问，这会被老师追问。第五，数据库备份脚本要重新生成。你在里面加了那么多演示数据，最后要把数据库重新导出成一份新的SQL，替换掉原压缩包里的旧脚本。否则别人拿到你的代码跑起来还是空数据，什么演示效果都没了。导出时注意加上DROP TABLE IF EXISTS语句，保证可重复导入。从那以后我每次拿到新的毕设源码，都会先花半天时间把表结构和接口关系理清，再动手启动。这套流程虽然慢，但从来没因为环境问题卡壳超过半天。希望帮到你。本文还有配套的精品资源，点击获取
简介：这套基于Vue与SpringBoot的社区医疗服务系统设计资源，面向计算机相关专业毕业生、课程设计及期末大作业人群，可作全栈项目参考或二次开发基础。系统围绕社区居民医疗健康需求，涵盖预约挂号、健康档案、线上问诊、药品配送等典型业务，前端与后端代码分层清晰，适合希望从实际项目理解前后端协作与权限管理的学习者。压缩包共906个文件，包含Java、Vue、JavaScript、CSS、HTML等源码文件，以及SQL数据库脚本、XML配置、构建脚本、项目说明文档等，整体约24.25MB，结构完整且便于按目录检索。资源中附有系统设计论文、表结构说明、数据库脚本等文档，能帮助读者快速搭建环境、理解业务流转与权限控制，并作为毕业设计或课程报告的撰写支撑。该资源已有37人学习下载，对于需要快速上手SpringBoot+Vue全栈开发的人来说，是一份具备实践参考价值的案例包。1. 社区医疗服务系统：Vue+SpringBoot毕设资源值不值得下基于Vue+SpringBoot的社区医疗服务系统设计.zip，这不是一个只能跑个登录页的课程作业，而是一套能支撑答辩的前后端分离完整源码。它把社区居民健康档案、预约挂号、体检记录、医生排班这些业务塞进了一个可演示的系统里，前端用Vue + Element UI，后端用SpringBoot + MyBatis Plus，数据库用的MySQL。对正在找毕设题目的同学来说，这套东西最大的价值不是“能跑”，而是它能让你在短时间内理解一个实际业务系统是怎么从表结构到接口再到页面的。适合有Java和Vue基础、但还没完整做过前后端项目的人。下面我从拆包到跑通再到二次开发，把每一步的关键点和坑都讲清楚。2. 系统拆解：模块划分、数据表设计与前后端通信约定打开压缩包第一件事不是急着启动，而是先看目录结构。这类毕设资源普遍是三个文件夹：前端、后端、数据库脚本。你先把这三者对应关系理清，后面跑通和改代码都会快很多。2.1 功能模块与角色权限社区医疗服务系统的业务模型并不复杂，核心是围绕“居民健康档案”展开。角色通常分三种：管理员、医生、居民。管理员管系统配置和账号，医生管档案和接诊记录，居民管自己的预约和体检报告。权限这块在前后端都有控制，前端用路由守卫拦页面，后端用拦截器校验登录状态和角色标识。我一般会先看后端的拦截器或过滤器，确认哪些接口是放行的，哪些必须带token。这个系统的典型功能链是这样的：居民注册登录后，填写基础健康档案，然后可以查看社区医院的科室和医生排班，预约挂号；医生登录后能看到当天预约列表，给居民写诊断记录；管理员负责维护医生信息、科室信息和公告。整个流程在一个演示系统里闭环，正好对应答辩时老师最爱问的“业务闭环”问题。模块划分上，前端是按页面切的，通常是views目录下的home、appointment、record、user等；后端按Controller、Service、Mapper分层。我建议你画一张模块导图，把前端路由、后端Controller、数据库表三者对应起来，这张图就是你答辩时讲系统架构的底稿。2.2 核心数据表与字段设计数据库脚本是整个系统的地基。我先说几张核心表。居民表（resident）一般包含姓名、身份证号、手机号、既往病史、过敏史、家庭住址。医生表（doctor）包含所属科室、职称、排班时间段。预约表（appointment）是业务核心，包含居民ID、医生ID、预约日期、时间段、状态字段。这张表的设计直接决定了系统的演示深度——如果状态字段只有“已预约”和“已取消”，那逻辑就比较单薄；如果还有“已完成”，医生端就能做闭环操作。另一个容易被忽略的表是体检记录表（health_record），它通常和居民表是一对多关系。老师在答辩时很容易追问“你的档案数据是怎么维护历史版本的”，如果你只设计了单表，就得用更新覆盖的方式，这其实是个扣分点。我建议你拿到脚本后先看表关系里是否有时间字段和关联外键，没有的话自己在二次开发阶段补上。字段命名上，这套资源大概率用的是驼峰命名，比如residentName、doctorId。如果你用的是MyBatis Plus，注意实体类字段和表字段的映射关系，别因为下划线和驼峰对不上导致查出空值。这部分在避坑章节里还会细讲。2.3 前端路由与后端接口的对应关系前端Vue项目用的是Vue Router，路由配置在router目录下。你会发现登录页、首页、预约页、档案页的路由都带了懒加载，这是常规写法。重点看两个地方：第一，路由守卫里是否读取了localStorage里的token，如果没有就跳转登录页；第二，request工具类里是否做了axios拦截器，统一在请求头里加token，以及统一处理401状态码。后端接口的命名一般是Restful风格，比如/api/resident/info、/api/appointment/list。有一个细节我每次都会验证：前端调用的路径和后端Controller里的@RequestMapping是否一致。很多毕设资源是从不同模板拼凑的，前端请求路径和后端接口路径有一处字母大小写不一致，就足以让整个登录流程翻车。另外，后端有个容易踩的约定问题：返回给前端的Json格式。常见的封装是{code: 200, data: {...}, msg: "成功"}，但有些资源会直接返回裸对象。前端axios拦截器如果按封装格式解包，遇到裸对象就会拿不到data。所以跑通前，先打开后端的一个接口测试一下返回结构，再对一下前端工具类的解包逻辑。3. 本地跑通：从数据库初始化到前后端联调这一章是照着做就能复现的部分。无论你是要用这个系统交毕设，还是要二次开发，先把本地环境跑通，一切才有的聊。3.1 环境准备与项目结构我建议先看压缩包里的README或者部署说明文档，没有的话就按下面这套流程走。需要准备的环境是：JDK 1.8或更高、Maven 3.6+、Node.js 14以上、MySQL 5.7或8.0。这里有个细节：SpringBoot版本如果是2.x，JDK 1.8完全够用；如果项目用了SpringBoot 3.x，JDK必须切到17，否则启动直接报错。拿到代码先看pom.xml里的parent版本，再决定本地JDK装哪个。项目结构上，前端目录一般是front或vue-web，后端目录一般是backend或server。把两个目录分别放进IDE，前端用VSCode或WebStorm，后端用IDEA。数据库脚本通常在sql目录下，文件名类似community_medical.sql。打开脚本先确认有没有创建数据库的语句，比如CREATE DATABASE community_medical。如果没有，你自己先到MySQL里执行CREATE DATABASE community_medical DEFAULT CHARACTER SET utf8mb4;，再导入脚本。很多同学直接双击导入，结果报“No database selected”，就是少了这一步。3.2 数据库脚本执行与账号配置执行脚本时，我习惯用Navicat或者命令行。命令行执行方式如下：mysql -u root -p < community_medical.sql执行后进入数据库，查看表数量是不是和前后端业务对得上：USE community_medical; SHOW TABLES;如果你看到表名是英文复数形式，比如residents、appointments，别意外，这是常见的命名习惯。下一步是改后端数据库配置。打开application.yml，把数据库地址、账号、密码改成你自己的。spring: datasource: url: jdbc:mysql://localhost:3306/community_medical?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver参数说明：serverTimezone=Asia/Shanghai必须加，否则连接MySQL 8.0时会报时区错误；useSSL=false是避免本地开发时SSL握手警告。如果你用的是MySQL 5.7，驱动类可以保持com.mysql.jdbc.Driver，但最好改成com.mysql.cj.jdbc.Driver，新驱动向下兼容。改完配置后，到IDEA里执行Maven的clean和package，或者直接运行主类。如果启动日志里出现Tomcat started on port(s): 8080，后端就起来了。3.3 启动后端SpringBoot与前端Vue后端启动成功后，先别急着开前端。先用浏览器访问一个无需登录的接口，比如http://localhost:8080/api/health，确认能返回Json数据。如果接口是受保护的，会返回401或跳转提示，这也是正常的，说明拦截器在工作。接着启动前端。在终端进入前端目录，依次执行：npm install npm run servenpm install可能需要几分钟，如果网络慢出现超时，可以用npm install --registry=https://registry.npmmirror.com切换镜像源。npm run serve启动后，终端会输出一个本地访问地址，通常是http://localhost:8081或http://localhost:3000。这里有个关键配置：前端请求后端接口的地址。打开前端的.env.development文件或request.js，你会看到类似VUE_APP_BASE_URL = 'http://localhost:8080'的配置。确保这个端口和后端启动端口一致，否则前端请求会打在错误地址上。3.4 联调验证主流程前后端都启动后，按真实用户流程走一遍验证。我一般按这个顺序：注册一个居民账号，用该账号登录，进入首页看公告，去预约页面选科室和医生，提交预约，然后退出登录，切到医生账号查看预约列表。这一套走下来，如果能正常跳转和数据展示，说明核心链路没问题。中间任何一步报错，优先看浏览器控制台的Network请求，确认是404、500还是401。404是路径不对，500是后端逻辑异常，401是登录失效或鉴权失败。后端日志里出现异常时，把堆栈信息复制到搜索引擎里查一下，大部分坑都是依赖版本或数据库连接问题。如果是MyBatis的SQL报错，把控制台打印的SQL语句拿到Navicat里手动执行一遍，就能定位到是语法问题还是参数问题。4. 二次开发实战：替换首页轮播图与新增健康档案字段拿到别人的源码，最怕的就是不知道怎么改成自己的。这一章我挑两个典型需求来讲：替换首页展示内容和给档案表加字段。这两个操作覆盖了前端页面、后端实体、数据库表三层，做完你就知道这个系统的改造套路了。4.1 修改前端页面先看首页轮播图在哪个组件里。Vue项目页面一般在views/Home.vue，轮播图组件用的是Element UI的el-carousel。找到图片地址的绑定位置，通常是这样：<el-carousel> <el-carousel-item v-for="item in bannerList" :key="item.id"> <img :src="item.imageUrl" style="width: 100%; height: 400px"> </el-carousel-item> </el-carousel>这个bannerList可能来自接口，也可能写死在data()里。如果写死在data里，直接换成你自己的图片链接；如果来自接口，你得找到对应后端接口，要么改数据库里的图片地址，要么改接口返回的固定值。常见的做法是把bannerList改成静态数据，因为答辩演示时不需要动态维护轮播图。但注意图片地址不要用本地相对路径，启动后容易变成localhost:8081/static/img/xxx.png，如果图片不在前端assets目录下就访问不到。我一般是放到项目里的static目录或public目录，然后使用绝对路径/banner1.png。4.2 后端新增字段与接口假设你要给健康档案表新增一个“血型”字段。首先在数据库表里增加一列：ALTER TABLE health_record ADD COLUMN blood_type VARCHAR(10) DEFAULT '' COMMENT '血型';然后修改后端实体类，加上对应字段：private String bloodType;如果用了MyBatis Plus，实体类字段默认映射到表的同名字段，驼峰会转下划线，所以bloodType会映射到blood_type，没问题。但如果你写的是自定义Mapper XML，就得在resultMap里也加这个字段。接着修改新增和查询接口的逻辑。查询接口通常是selectById或selectList，MyBatis Plus会自动带上新字段。新增时前端传了bloodType，后端对象接收后，插入操作也会自动带上。如果前端传的是bloodType，而后端实体类写成了bloodtype，就会映射失败，这个很隐蔽。4.3 前端表单联动后端字段加好后，前端也要加输入框。找到档案编辑页面的表单组件，在el-form里加一个el-form-item：<el-form-item label="血型"> <el-select v-model="form.bloodType"> <el-option label="A型" value="A"></el-option> <el-option label="B型" value="B"></el-option> <el-option label="O型" value="O"></el-option> <el-option label="AB型" value="AB"></el-option> </el-select> </el-form-item>注意v-model绑定的字段名，必须和后端实体类字段名一致。表单提交时的数据对象如果经过赋值或转换，得把bloodType也带上，否则后端收到的就是null。验证的时候，在后端接口入口处打一个日志或者直接看数据库记录。如果前端提交成功但数据库里blood_type是空，先抓包看请求体里有没有bloodType字段，没有就是前端问题；有但没写入，就是后端实体类或SQL映射问题。这种排查思路对任何字段新增都适用。5. 避坑清单：三个让你怀疑人生的常见问题这套资源最大的风险不在代码本身，而在环境配置和细节遗漏。以下是我跑这类Vue+SpringBoot毕设时遇到过的真实问题，每个都按“现象 → 原因 → 解决”给你拆开。5.1 现象：启动前端后，所有请求都报CORS错误浏览器控制台显示Access-Control-Allow-Origin相关报错，或者请求出现在Network里是红色的，状态码是CORS error。原因是后端没有允许跨域。因为前端跑在8081端口，后端跑在8080端口，两个端口不同，浏览器会认为是跨域请求。解决方式有两种，推荐在后端加一个全局CORS配置类：@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8081") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true); } }参数说明：allowedOrigins写你前端的地址，如果最后要部署上线，改成服务器地址；allowCredentials(true)必须配合具体域名，不能写成*。加完配置文件重启后端，再刷新前端页面就好了。5.2 现象：登录成功后刷新页面就跳回登录页前端路由守卫在每次路由跳转前检查token，token存在localStorage里。刷新后token还在，但用户信息没存，检查的时候判断用户信息为空，就强制跳回登录页。原因是登录成功后只把token存了，没有把用户基本信息持久化。解决方式是在登录接口返回数据里，把用户ID、用户名、角色一起存到localStorage或sessionStorage。路由守卫改成同时检查token和用户信息。我一般把用户信息存sessionStorage，这样关闭浏览器就自动清空，更符合安全习惯。5.3 现象：数据库时间比本地时间早8小时预约记录里的时间显示的是凌晨两点，但操作时间是上午十点，看起来像“穿越”。原因是MySQL连接串里没有指定serverTimezone，导致Java和MySQL之间按系统默认时区转换。解决方式就是在application.yml的数据库连接URL里加上serverTimezone=Asia/Shanghai，问题就不会再出现。注意如果数据库存储的字段是datetime，也要确认后端的LocalDateTime类型正确接收，别用Date类型去接带时区的值。5.4 现象：上传的图片在页面上显示404管理员在首页公告里上传图片，上传成功后显示http://localhost:8080/upload/xxx.png，但访问这个地址404。原因是后端文件上传到了本地磁盘，但SpringBoot默认不会把磁盘路径映射成静态访问资源。解决方式是在application.yml里配置静态资源映射，或者在启动类里写一个资源映射，把/upload/**指向本地上传目录。我更常用的方式是在后端写一个配置类：@Configuration public class UploadConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/upload/**") .addResourceLocations("file:" + System.getProperty("user.dir") + "/upload/"); } }这样/upload/开头的请求会到项目根目录的upload文件夹找图片。上传时注意确保目标目录存在，没有就创建，否则仍然会报找不到文件。6. 把毕设改成答辩演示的五个关键动作源码跑通只是开始，真正决定成绩的是演示环节给老师看到的东西。以下五个习惯我每次带模拟项目给导师演示前都会强制做一遍，现在总结给你。第一，数据填充要有真实感。默认的数据库脚本往往只有几条测试数据，演示时页面空空如也，观感非常差。你要手动往表里灌几十条居民档案、医生排班、预约记录，时间尽量分散到最近一周。我习惯用SQL循环插入，比如生成20条居民档案，再生成30条预约记录，确保列表页有分页效果，医生端有可处理的任务。第二，演示路径要精心设计。不要从登录页开始乱点。先讲前端首页，展示社区公告和功能入口；然后进入居民端，演示注册、填档案、查排班、预约；再切到医生端，演示看到预约、写诊断、完成状态。每一步之前想好你要说的话，控制在10分钟以内。老师问“这系统有哪些创新点”，至少准备一个你二次开发的点，哪怕只是新增了一个字段也算。第三，后端接口的调试记录要保留。答辩时常常被问“你遇到过什么问题”。你提前准备一两个真实踩坑记录，比如CORS配置、时间差问题，讲清楚现象、原因、如何排查、如何解决。这个比讲技术细节更让老师觉得你有独立思考能力。第四，前端路由权限要提前检查。演示时最尴尬的就是用居民账号登录后，还停留在管理员的页面。你在答辩前把无头模式下所有角色都走一遍，确保路由守卫和后端拦截器都生效。有些资源虽然有权限代码，但只是前端隐藏了菜单，直接改URL还能访问，这会被老师追问。第五，数据库备份脚本要重新生成。你在里面加了那么多演示数据，最后要把数据库重新导出成一份新的SQL，替换掉原压缩包里的旧脚本。否则别人拿到你的代码跑起来还是空数据，什么演示效果都没了。导出时注意加上DROP TABLE IF EXISTS语句，保证可重复导入。从那以后我每次拿到新的毕设源码，都会先花半天时间把表结构和接口关系理清，再动手启动。这套流程虽然慢，但从来没因为环境问题卡壳超过半天。希望帮到你。本文还有配套的精品资源，点击获取