1. 项目概述与核心价值
这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0的医院网站系统，是我去年为本地一家社区医院开发的实际项目。当时院方需要一套能同时满足患者在线挂号、医生排班管理和药品库存监控的轻量级系统，预算有限但功能要求完整。经过技术选型比较，最终确定了这套前后端分离的技术栈组合，开发周期控制在6周内完成，上线后稳定运行至今。
这套方案最大的特点是"轻量但五脏俱全"：SpringBoot2提供快速启动能力，Vue3负责构建响应式前端界面，MyBatis-Plus简化数据库操作，MySQL8.0则确保数据可靠性。特别适合50-200张床位的中小型医疗机构，日均访问量在3000次以下的场景。系统包含门诊预约、电子病历查询、药房库存预警等12个核心模块，代码结构清晰且留有扩展接口。
2. 技术架构解析
2.1 后端技术栈设计
选择SpringBoot2.7.3版本作为基础框架，主要考虑其内嵌Tomcat和自动配置特性。实测单个服务实例在2核4G服务器上能稳定支撑150+并发请求。关键配置如下：
yaml复制server:
port: 8080
tomcat:
max-threads: 200
min-spare-threads: 10
spring:
datasource:
url: jdbc:mysql://localhost:3306/hospital_db?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 加密密码
hikari:
maximum-pool-size: 20
MyBatis-Plus 3.5.2的引入大幅简化了CRUD操作。例如患者信息查询只需继承BaseMapper：
java复制public interface PatientMapper extends BaseMapper<Patient> {
@Select("SELECT * FROM patient WHERE name LIKE CONCAT('%',#{name},'%')")
List<Patient> selectByName(String name);
}
特别注意：MySQL连接一定要加上serverTimezone参数，否则部署到Linux服务器时可能出现时区异常。这是我们上线时踩过的坑。
2.2 前端架构方案
Vue3组合式API让功能模块更易维护。以挂号页面为例，使用setup语法糖组织代码：
vue复制<script setup>
import { ref, onMounted } from 'vue'
import { getDepartments } from '@/api/hospital'
const departments = ref([])
const loading = ref(false)
onMounted(async () => {
loading.value = true
try {
departments.value = await getDepartments()
} finally {
loading.value = false
}
})
</script>
采用Element Plus作为UI组件库，通过按需导入避免打包体积过大：
javascript复制// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
]
})
3. 核心功能实现细节
3.1 预约挂号系统
挂号业务涉及多表事务操作，是系统中最复杂的模块之一。数据库设计采用三表关联：
sql复制CREATE TABLE `registration` (
`id` bigint NOT NULL AUTO_INCREMENT,
`patient_id` bigint NOT NULL,
`schedule_id` bigint NOT NULL,
`status` tinyint DEFAULT '0' COMMENT '0-待支付 1-已预约 2-已取消',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_patient` (`patient_id`),
KEY `idx_schedule` (`schedule_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
后端使用@Transactional确保数据一致性：
java复制@Transactional
public String createRegistration(RegistrationDTO dto) {
// 1. 校验号源是否可用
Schedule schedule = scheduleService.getById(dto.getScheduleId());
if (schedule.getRemain() <= 0) {
throw new BusinessException("该时段号源已满");
}
// 2. 创建预约记录
Registration registration = new Registration();
BeanUtils.copyProperties(dto, registration);
registrationMapper.insert(registration);
// 3. 更新号源余量
scheduleService.updateRemain(dto.getScheduleId(), -1);
return registration.getId();
}
3.2 电子病历管理
病历模块采用富文本编辑器+版本控制方案。前端使用TinyMCE编辑器：
vue复制<editor
v-model="content"
api-key="your-api-key"
:init="{
height: 500,
menubar: false,
plugins: ['lists link image table code'],
toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | removeformat'
}"
/>
后端设计版本历史表实现变更追踪：
java复制public void updateMedicalRecord(MedicalRecord record) {
// 1. 保存当前版本到历史表
MedicalRecordHistory history = new MedicalRecordHistory();
BeanUtils.copyProperties(record, history);
history.setVersionTime(new Date());
historyMapper.insert(history);
// 2. 更新主记录
medicalRecordMapper.updateById(record);
}
4. 安全与性能优化
4.1 安全防护措施
- 接口鉴权：采用JWT+Spring Security方案
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
}
}
- SQL防注入：强制使用预编译语句
xml复制<select id="selectByCondition" resultType="Patient">
SELECT * FROM patient
<where>
<if test="name != null">
AND name LIKE CONCAT('%', #{name}, '%')
</if>
<!-- 其他条件 -->
</where>
</select>
4.2 性能调优实战
- 接口缓存：对静态数据使用Redis缓存
java复制@Cacheable(value = "departments", key = "'all'")
public List<Department> getAllDepartments() {
return departmentMapper.selectList(null);
}
- 前端懒加载：路由级代码分割
javascript复制const routes = [
{
path: '/registration',
component: () => import('@/views/Registration.vue')
}
]
- MySQL索引优化：通过EXPLAIN分析慢查询
sql复制ALTER TABLE `medical_record` ADD INDEX `idx_patient` (`patient_id`);
5. 部署与运维方案
5.1 生产环境部署
推荐使用Docker Compose编排服务：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: yourpassword
volumes:
- ./mysql-data:/var/lib/mysql
ports:
- "3306:3306"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
frontend:
build: ./frontend
ports:
- "80:80"
5.2 监控与日志
- SpringBoot Actuator监控端点配置：
yaml复制management:
endpoints:
web:
exposure:
include: health,info,metrics
endpoint:
health:
show-details: always
- 前端错误监控：使用Sentry捕获前端异常
javascript复制import * as Sentry from "@sentry/vue";
Sentry.init({
dsn: "your-dsn",
integrations: [new BrowserTracing()],
tracesSampleRate: 0.2
});
6. 项目文档体系
完整项目包含三类文档：
- 技术文档：Swagger API文档
java复制@Operation(summary = "创建预约")
@PostMapping("/registrations")
public Result<String> createRegistration(@RequestBody RegistrationDTO dto) {
// ...
}
-
部署手册：包含环境要求、安装步骤、配置说明
-
用户手册：分角色说明各功能模块操作流程
这套系统在实际运行中表现出色，日均处理挂号请求约200次，病历查询响应时间保持在300ms以内。特别值得一提的是MyBatis-Plus的Lambda查询构建器，让动态SQL编写效率提升了40%以上。对于需要快速搭建医疗系统的团队，这个技术栈组合值得推荐。