1. 项目概述
这个线上医院挂号系统采用前后端分离架构，前端使用Vue.js框架，后端基于SpringBoot+MyBatis技术栈，数据库选用MySQL。系统实现了医院科室管理、医生排班、患者预约挂号、订单支付等核心功能模块。
我在实际开发过程中发现，这种架构组合特别适合医疗类信息系统的开发。SpringBoot提供了快速构建后端服务的能力，Vue.js则让前端交互更加流畅，而MyBatis+MySQL的组合则保证了数据处理的稳定性和灵活性。
2. 技术选型解析
2.1 后端技术栈
SpringBoot作为后端框架的选择主要基于以下几点考虑：
- 自动配置特性大大简化了项目初始配置
- 内嵌Tomcat服务器，部署便捷
- 丰富的starter依赖，快速集成各种功能
- 完善的文档和活跃的社区支持
MyBatis作为ORM框架的优势在于：
- 灵活的SQL编写能力，便于处理复杂查询
- 动态SQL支持，适应多变的业务需求
- 与SpringBoot集成简单，配置方便
2.2 前端技术栈
Vue.js框架的选择理由：
- 组件化开发模式，提高代码复用率
- 响应式数据绑定，简化DOM操作
- 丰富的生态系统（Vuex、Vue Router等）
- 渐进式框架，学习曲线平缓
3. 系统架构设计
3.1 整体架构
系统采用典型的三层架构：
- 表现层：Vue前端应用
- 业务逻辑层：SpringBoot后端服务
- 数据访问层：MyBatis+MySQL
前后端通过RESTful API进行通信，使用JSON格式交换数据。
3.2 数据库设计
核心表结构包括：
- 用户表（patients）
- 医生表（doctors）
- 科室表（departments）
- 排班表（schedules）
- 预约表（appointments）
- 支付记录表（payments）
注意：在设计数据库时特别注意了数据一致性和事务处理，特别是预约和支付相关的操作。
4. 核心功能实现
4.1 用户认证模块
采用JWT（JSON Web Token）实现认证和授权：
- 用户登录成功后生成token
- 前端将token存储在localStorage
- 每次请求携带token进行验证
- 后端通过拦截器校验token有效性
关键代码示例（SpringBoot）：
java复制@Configuration
public class JwtConfig {
@Bean
public FilterRegistrationBean<JwtFilter> jwtFilter() {
FilterRegistrationBean<JwtFilter> registration = new FilterRegistrationBean<>();
registration.setFilter(new JwtFilter());
registration.addUrlPatterns("/api/*");
return registration;
}
}
4.2 预约挂号流程
挂号业务流程实现：
- 患者查询科室和医生信息
- 选择可预约时间段
- 提交预约申请
- 系统生成预约订单
- 患者完成支付
- 预约确认
这个流程中特别注意了并发控制，防止同一时间段被重复预约。
5. 系统部署方案
5.1 后端部署
使用Docker容器化部署SpringBoot应用：
- 编写Dockerfile
- 构建镜像
- 推送至镜像仓库
- 在服务器上拉取并运行
示例Dockerfile：
dockerfile复制FROM openjdk:8-jdk-alpine
VOLUME /tmp
ADD target/hospital-registration.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
5.2 前端部署
Vue项目部署步骤：
- 执行npm run build生成静态文件
- 配置Nginx作为Web服务器
- 设置反向代理解决跨域问题
Nginx配置示例：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
root /var/www/hospital-frontend;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:8080;
}
}
6. 开发中的经验总结
6.1 前后端协作要点
- 使用Swagger生成API文档，保持前后端沟通顺畅
- 定义统一的数据返回格式
- 制定规范的错误码体系
- 使用Mock数据进行并行开发
6.2 性能优化实践
- 使用Redis缓存热门科室和医生信息
- 数据库查询优化，添加必要索引
- 前端采用懒加载和分页技术
- 启用Gzip压缩减少传输数据量
7. 安全注意事项
- SQL注入防护：使用MyBatis的参数绑定方式
- XSS防护：前端使用vue-sanitize处理用户输入
- CSRF防护：虽然使用JWT可以减轻风险，但仍建议添加CSRF token
- 敏感数据加密：患者个人信息和支付数据加密存储
重要提示：医疗系统涉及敏感个人信息，必须严格遵守相关数据保护法规。
8. 常见问题解决方案
8.1 跨域问题
解决方案：
- 后端配置CORS
- 使用Nginx反向代理
- 开发环境配置proxyTable
SpringBoot CORS配置示例：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}
8.2 时区问题
MySQL时区设置：
- 确保数据库服务器时区正确
- 在JDBC连接字符串中添加时区参数
properties复制spring.datasource.url=jdbc:mysql://localhost:3306/hospital?useSSL=false&serverTimezone=Asia/Shanghai
9. 项目扩展方向
- 微信小程序端开发，拓展移动端访问渠道
- 接入第三方支付平台，支持更多支付方式
- 增加智能推荐功能，根据患者历史预约推荐医生
- 开发管理端数据分析看板
- 实现短信/邮件提醒功能
在实际开发过程中，我发现这种前后端分离的架构确实能够提高开发效率，特别是在团队协作方面。前端和后端可以并行开发，通过定义好的接口规范进行集成，大大缩短了项目周期。