SpringBoot+Vue3+MySQL集群 开发健康体检双系统（完结）

获课：weiranit.fun/134/

获取ZY↑↑方打开链接↑↑

一、项目概述

健康体检双系统主要包含面向客户的前台系统和面向体检机构工作人员的后台管理系统。前台系统让客户可以进行体检套餐浏览、预约、查看报告等操作；后台系统则方便工作人员管理体检项目、安排体检流程、录入体检结果等。本项目使用 Spring Boot 搭建后端服务，Vue 3 构建前端界面，MySQL 集群保障数据存储和读写性能。

二、技术选型

后端

• Spring Boot：简化 Spring 应用开发，提供自动配置，加快开发效率。

• Spring Data JPA：简化数据库操作，提供强大的数据库访问抽象层。

• Spring Security：负责系统的身份验证和授权，保障系统安全。

• MyBatis-Plus：在 JPA 基础上进一步简化数据库开发，提供更便捷的 CRUD 操作。

前端

• Vue 3：采用 Composition API，提高代码的可维护性和复用性。

• Vue Router：实现单页面应用的路由管理。

• Vuex：进行状态管理，方便组件间的数据共享。

• ElementPlus：基于 Vue 3 的 UI 组件库，提供丰富的界面组件。

数据库

• MySQL 集群：采用主从复制或 Galera 集群，提升数据库的读写性能和高可用性。

三、系统架构设计

整体架构

采用前后端分离架构，前端和后端通过 RESTful API 进行通信。前端负责用户界面展示和交互，后端负责业务逻辑处理和数据存储。

数据库架构

MySQL 集群采用主从复制模式，主节点负责写操作，从节点负责读操作，提高系统的并发处理能力。

四、数据库设计

主要数据表

1. 用户表（users）

sql

CREATE TABLE users (    id INT AUTO_INCREMENT PRIMARY KEY,    username VARCHAR(50) NOT NULL UNIQUE,    password VARCHAR(255) NOT NULL,    role ENUM('customer', 'staff') NOT NULL,    phone VARCHAR(20),    email VARCHAR(50));

1. 体检套餐表（packages）

sql

CREATE TABLE packages (    id INT AUTO_INCREMENT PRIMARY KEY,    package_name VARCHAR(100) NOT NULL,    description TEXT,    price DECIMAL(10, 2) NOT NULL);

1. 预约表（appointments）

sql

CREATE TABLE appointments (    id INT AUTO_INCREMENT PRIMARY KEY,    user_id INT NOT NULL,    package_id INT NOT NULL,    appointment_date DATE NOT NULL,    status ENUM('pending', 'completed', 'cancelled') NOT NULL,    FOREIGN KEY (user_id) REFERENCES users(id),    FOREIGN KEY (package_id) REFERENCES packages(id));

1. 体检报告表（reports）

sql

CREATE TABLE reports (    id INT AUTO_INCREMENT PRIMARY KEY,    appointment_id INT NOT NULL,    report_content TEXT,    doctor_name VARCHAR(50),    report_date DATE NOT NULL,    FOREIGN KEY (appointment_id) REFERENCES appointments(id));

五、后端开发

项目搭建

使用 Spring Initializr 创建 Spring Boot 项目，添加 Spring Web、Spring Data JPA、Spring Security、MyBatis-Plus、MySQL Driver 等依赖。

实体类和 DAO 层

创建与数据库表对应的实体类，使用 MyBatis-Plus 的

BaseMapper

接口进行数据库操作。

java

// User 实体类@Data@TableName("users")public class User {    private Integer id;    private String username;    private String password;    private String role;    private String phone;    private String email;}// UserMapper 接口public interface UserMapper extends BaseMapper<User> {}

服务层和控制器层

创建服务层处理业务逻辑，控制器层处理 HTTP 请求。

java

// UserService 类@Servicepublic class UserService {    @Autowired    private UserMapper userMapper;    public User getUserById(Integer id) {        return userMapper.selectById(id);    }}// UserController 类@RestController@RequestMapping("/api/users")public class UserController {    @Autowired    private UserService userService;    @GetMapping("/{id}")    public User getUserById(@PathVariable Integer id) {        return userService.getUserById(id);    }}

安全配置

使用 Spring Security 进行身份验证和授权。

java

@Configuration@EnableWebSecuritypublic class SecurityConfig extends WebSecurityConfigurerAdapter {    @Autowired    private UserDetailsService userDetailsService;    @Override    protected void configure(AuthenticationManagerBuilder auth) throws Exception {        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());    }    @Override    protected void configure(HttpSecurity http) throws Exception {        http          .authorizeRequests()              .antMatchers("/api/public/**").permitAll()              .anyRequest().authenticated()              .and()          .formLogin()              .and()          .logout()              .permitAll();    }    @Bean    public PasswordEncoder passwordEncoder() {        return new BCryptPasswordEncoder();    }}

六、前端开发

项目搭建

使用 Vue CLI 创建 Vue 3 项目，添加 Vue Router 和 Vuex 插件。

bash

vue create health-check-system --defaultcd health-check-systemvue add routervue add vuex

路由配置

在

src/router/index.js

中配置路由。

javascript

import { createRouter, createWebHistory } from 'vue-router';import Home from '../views/Home.vue';import Login from '../views/Login.vue';const routes = [    {        path: '/',        name: 'Home',        component: Home    },    {        path: '/login',        name: 'Login',        component: Login    }];const router = createRouter({    history: createWebHistory(process.env.BASE_URL),    routes});export default router;

状态管理

使用 Vuex 管理应用状态。

javascript

import { createStore } from 'vuex';const store = createStore({    state: {        isLoggedIn: false,        user: null    },    mutations: {        login(state, user) {            state.isLoggedIn = true;            state.user = user;        },        logout(state) {            state.isLoggedIn = false;            state.user = null;        }    },    actions: {        login({ commit }, user) {            // 调用后端登录接口            // 验证成功后提交 mutation            commit('login', user);        },        logout({ commit }) {            commit('logout');        }    }});export default store;

组件开发

使用 ElementPlus 组件开发页面。

vue

<template>    <el-form :model="loginForm" ref="loginFormRef" label-width="80px"

---