企业官网建设流程全解析

简介：基于SpringBoot与Vue构建的医疗服务系统，是一份高分毕业设计项目，其答辩评审达到98分。系统采用前后端分离的开发模式，后端负责接口与业务处理，前端负责页面展示与用户交互，整体设计贴近真实医疗业务场景，能较好体现工程化开发流程。压缩包内含141个文件，整体大小约12.72MB，主要涵盖Java后端源码、Vue前端组件、SQL数据库脚本以及yml、properties等环境配置；各类文件分工明确，目录结构比较清晰，可快速完成环境搭建与运行。全部代码均经过调试测试，确保能够正常运行，当前已有73人学习下载。项目适合计算机、通信、人工智能等相关专业的学生作为课程设计、大作业或毕业设计参考；基础较强的读者还可基于现有模块调整扩展，以适配不同业务需求，从而获得更完整的前后端整合与二次开发经验。

1. 医疗服务系统源码：SpringBoot+Vue 毕业设计到底能不能拿来即用

每到毕业季，总有人拿着一份医疗服务系统的 SpringBoot+Vue 源码问我：这东西到底能不能跑？说实话，90% 的毕业设计源码都死在环境配置和数据库连接上，并不是代码本身有问题。我拆过不少这类项目，这份基于 SpringBoot + Vue 的医疗服务系统，用户端、医生端、管理端的核心流程是齐全的，挂号、病历、药品、公告这些模块都能闭环。它适合两类人：一类是打算用“医疗服务”做毕业课题，想快速搭出能演示的框架；另一类是已经有点 Java 基础，但没完整跑过一个前后端分离项目，想拿它当练手的真实业务样例。下面不吹不黑，从拆结构到跑通接口，再到躲开最常见的坑，按我的实际测试顺序写给你。

2. 技术栈与项目结构：先拆清楚后端分层和前端页面再动手

对于一个前后端分离的医疗服务系统，最怕的就是拿到源码直接 run，红灯一片还不知道去哪改。我的习惯是先在 IDE 里把目录结构摊开，弄清楚后端有多少个模块、前端路由挂在哪个页面、数据库有哪些表，然后再启动。这样后面报错时能直接定位到对应文件。

2.1 后端：SpringBoot 的 Controller-Service-Mapper 分层是给谁看的

这份源码的 Java 后端使用的是典型的三层架构。Controller 层只负责接收请求和返回 Json，Service 层放业务逻辑，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?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver

这里 url 里带的 characterEncoding=utf8 和 serverTimezone=Asia/Shanghai 是两处最容易被忽略的配置。前者负责中文不乱码，后者负责时间类型不偏移。我遇到过一个系统，登录接口动不动报“CST 时区错误”，最后就是少了 serverTimezone 导致的。另外注意 drive-class-name，MySQL 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.vue

router/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 看有几张表。常见医疗服务系统的核心表大概是下面这些：

它们之间的关系很好理解：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.Driver，8.0 用 com.mysql.cj.jdbc.Driver。这份源码大概率是 8.0 的新驱动，因为现在主流教程都这样写。

下面是我实测推荐的版本组合：

这里有个血泪经验：不要一上来就装最新 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 password='123456' WHERE username='admin';

注意：这里改的是明文密码还是 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?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/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?userId=1

返回的数组里应该能看到刚提交的记录。接着测试修改和删除：修改是把状态字段从“已预约”改成“已取消”，删除是调一个 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 -DskipTests

5.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。

原因：创建数据库时没有指定 utf8mb4，MySQL 默认可能用了 latin1；或者 JDBC 连接串里少了 characterEncoding=utf8。

解决：保证三个地方都是 utf8mb4。一是创建库时指定：

CREATE DATABASE medical_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

二是启动时加上 -Dfile.encoding=UTF-8。三是 JDBC url 里带 useUnicode=true&characterEncoding=utf8。改完后重启后端，再把表里已有的乱码数据先清掉重新插入，否则旧数据还是乱码。

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 导入到前后端联调的完整流程。这份医疗服务系统我按同样流程拆完，也把验证步骤都放在了上面，希望帮到你。

本文还有配套的精品资源，点击获取