今天跟大家讲一个关于体检+健康双系统的项目，这个项目用到SpringBoot+Vue3+MySQL的技术，我会带着大家一步步去实现这样的项目，希望对大家的技术有所提升。本项目包含MIS系统、体检人系统在内的前后端分离式全栈双系统作品，主流框架+最新技术，界面美观、体系完整。

首先，我们先来搭建环境：
大家创建轻量云主机的时候，一定要选择CentOS 7.X镜像，这个版本的Linux兼容性和安全性很好，很多企业级项目都是部署在这个版本的CentOS上面。因为CentOS 8.0的兼容性极差，所以强烈反对同学们使用这个版本。另外，Ubuntu在安全性上没有CentOS做得好，所以不推荐在运营环境中使用。

使用虚拟机的同学，我们要给虚拟机设置好端口转发，然后在Windows电脑上面才能通过这些端口访问到Linux上面的程序。

接下来我们创建Minio容器，设定的访问帐户是root，密码为abc123456，一会儿我们可以用浏览器访问Web管理画面。注意密码必须是8位以上，否则Minio容器创建出来会闪退。

以下是代码实战：

docker run -it -d --name minio \
-p 9000:9000 -p 9001:9001 \
--net mynet --ip 172.18.0.12 -m 400m \
-v /root/minio/data:/data \
-e TZ=Asia/Shanghai --privileged=true \
--env MINIO_ROOT_USER="root" \
--env MINIO_ROOT_PASSWORD="abc123456" \
--env MINIO_SKIP_CLIENT="yes" \
bitnami/minio:latest
在src/views/front/main.vue文件中，添加这个DIV和它的子元素。
@import url('../style.less');
.container {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
header {
    ……
    .search-container {
        float: left;
        margin-top: 5px;
        margin-left: 100px;
        .keyword-input {
            width: 400px;
            margin-bottom: 10px;
        }
        .tag {
            margin-right: 10px;
        }
    }
}
ElementPlus组件库的菜单控件用起来并不复杂，我们看一个简单的例子。下面的菜单是可以左右折叠的，如果变量isCollapse为true，菜单就会向左折叠。
<div class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebar.sidebarFold }"
    v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
    <nav>
        ……
    </nav>
    <aside class="site-sidebar site-sidebar--dark">
        <div class="site-sidebar__inner">
            <el-menu :default-active="siteContent.menuActiveName || 'Home'"
                :collapse="sidebar.sidebarFold" :collapseTransition="false"
                class="site-sidebar__menu" background-color="#263238"
                active-text-color="#fff" text-color="#8a979e">
                <el-menu-item index="Home"
                    @click="$router.push({ name: 'MisHome' })">
                    <el-icon>
                        <SvgIcon name="home" class="icon-svg" />
                    </el-icon>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-sub-menu index="组织管理"
                    :popper-class="'site-sidebar--' + sidebar.sidebarLayoutSkin + '-popper'">
                    <template #title>
                        <el-icon>
                            <SvgIcon name="users_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">组织管理</span>
                    </template>
                    <el-menu-item index="MisDept"
                        v-if="proxy.isAuth(['ROOT', 'DEPT:SELECT'])"
                        @click="$router.push({ name: 'MisDept' })">
                        <el-icon>
                            <SvgIcon name="company_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">部门管理</span>
                    </el-menu-item>
                    <el-menu-item index="MisRole"
                        v-if="proxy.isAuth(['ROOT', 'ROLE:SELECT'])"
                        @click="$router.push({ name: 'MisRole' })">
                        <el-icon>
                            <SvgIcon name="role_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">角色管理</span>
                    </el-menu-item>
                    <el-menu-item index="MisUser"
                        v-if="proxy.isAuth(['ROOT', 'USER:SELECT'])"
                        @click="$router.push({ name: 'MisUser' })">
                        <el-icon>
                            <SvgIcon name="user_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="业务管理"
                    :popper-class="'site-sidebar--' + sidebar.sidebarLayoutSkin + '-popper'">
                    <template #title>
                        <el-icon>
                            <SvgIcon name="trust_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">业务管理</span>
                    </template>
                    <el-menu-item index="MisGoods"
                        v-if="proxy.isAuth(['ROOT', 'GOODS:SELECT'])"
                        @click="$router.push({ name: 'MisGoods' })">
                        <el-icon>
                            <SvgIcon name="goods_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">体检套餐</span>
                    </el-menu-item>
                    <el-menu-item index="MisRule"
                        v-if="proxy.isAuth(['ROOT', 'RULE:SELECT'])"
                        @click="$router.push({ name: 'MisRule' })">
                        <el-icon>
                            <SvgIcon name="rule_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">促销规则</span>
                    </el-menu-item>
                    <el-menu-item index="MisCustomer"
                        v-if="proxy.isAuth(['ROOT', 'CUSTOMER:SELECT'])"
                        @click="$router.push({ name: 'MisCustomer' })">
                        <el-icon>
                            <SvgIcon name="customer_fill"
                                class="icon-svg" />
                        </el-icon>
                        <span slot="title">客户档案</span>
                    </el-menu-item>
                    <el-menu-item index="MisOrder"
                        v-if="proxy.isAuth(['ROOT', 'ORDER:SELECT'])"
                        @click="$router.push({ name: 'MisOrder' })">
                        <el-icon>
                            <SvgIcon name="order_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="MisCustomerIm"
                        v-if="proxy.isAuth(['ROOT', 'CUSTOMER_IM:SELECT'])"
                        @click="$router.push({ name: 'MisCustomerIm' })">
                        <el-icon>
                            <SvgIcon name="im_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">客服IM</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="体检管理"
                    :popper-class="'site-sidebar--' + sidebar.sidebarLayoutSkin + '-popper'">
                    <template #title>
                        <el-icon>
                            <SvgIcon name="night_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">体检管理</span>
                    </template>
                    <el-menu-item index="MisAppointment"
                        v-if="proxy.isAuth(['ROOT', 'APPOINTMENT:SELECT'])"
                        @click="$router.push({ name: 'MisAppointment' })">
                        <el-icon>
                            <SvgIcon name="appointment_fill"
                                class="icon-svg" />
                        </el-icon>
                        <span slot="title">体检预约</span>
                    </el-menu-item>
                    <el-menu-item index="MisCustomerCheckin"
                        v-if="proxy.isAuth(['ROOT', 'CUSTOMER_CHICKIN:SELECT'])"
                        @click="$router.push({ name: 'MisCustomerCheckin' })">
                        <el-icon>
                            <SvgIcon name="checkin_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">体检签到</span>
                    </el-menu-item>
                    <el-menu-item index="MisAppointmentRestriction"
                        v-if="proxy.isAuth(['ROOT', 'APPOINTMENT_RESTRICTION:SELECT'])"
                        @click="$router.push({ name: 'MisAppointmentRestriction' })">
                        <el-icon>
                            <SvgIcon name="setting_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">预约设置</span>
                    </el-menu-item>
                    <el-menu-item index="MisCheckup"
                        v-if="proxy.isAuth(['ROOT', 'CHECKUP:SELECT'])"
                        @click="$router.push({ name: 'MisCheckup' })">
                        <el-icon>
                            <SvgIcon name="doctor_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">医生检查</span>
                    </el-menu-item>
                    <el-menu-item index="MisCheckupReport"
                        v-if="proxy.isAuth(['ROOT', 'CHECKUP_REPORT:SELECT'])"
                        @click="$router.push({ name: 'MisCheckupReport' })">
                        <el-icon>
                            <SvgIcon name="file_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">体检报告</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="系统设置"
                    :popper-class="'site-sidebar--' + sidebar.sidebarLayoutSkin + '-popper'"
                    v-if="proxy.isAuth(['ROOT', 'SYSTEM:SELECT'])">
                    <template #title>
                        <el-icon>
                            <SvgIcon name="system_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">系统设置</span>
                    </template>
                    <el-menu-item index="MisFlowRegulation"
                        v-if="proxy.isAuth(['ROOT', 'FLOW_REGULATION:SELECT'])"
                        @click="$router.push({ name: 'MisFlowRegulation' })">
                        <el-icon>
                            <SvgIcon name="people_fill" class="icon-svg" />
                        </el-icon>
                        <span slot="title">人员限流</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
    </aside>
    <!-- 避免路由引用页面的时候浏览器不刷新内容，所以给URL添加随机数参数 -->
    <router-view :key="router.currentRoute.value.query.random" />
</div>
在application.yml文件中，配置MongoDB连接。因为MongoDB自带数据库连接池，所以我们不需要在Java项目中重复配置连接池。
spring:
  ……
  redis:
    database: 0
    host: localhost
    port: 6379
    password: abc123456
    jedis:
      pool:
        #连接超时的最大时间
        max-active: 1000
        #等待空闲连接的最大等待时间（负数代表一直等待）
        max-wait: -1ms
        max-idle: 16
        min-idle: 8
因为SpringBoot Data中默认的RedisTemplate存在序列化机制的问题，向Redis里面保存Hash类型数据通常是乱码的，为了解决这个问题，我们需要自己定义配置类，修改RedisTemplate使用的序列化机制。

在com.example.his.api.config包中，创建RedisTemplateConfig类。
package com.example.his.api.config.sa_token;

import java.util.List;

import org.springframework.stereotype.Component;

import cn.dev33.satoken.SaManager;
import cn.dev33.satoken.fun.SaFunction;
import cn.dev33.satoken.listener.SaTokenEventCenter;
import cn.dev33.satoken.session.SaSession;
import cn.dev33.satoken.stp.SaLoginModel;
import cn.dev33.satoken.stp.SaTokenInfo;
import cn.dev33.satoken.stp.StpLogic;

/**
 * Sa-Token 权限认证工具类 （业务端使用）
 */
@Component
public class StpCustomerUtil {

    private StpCustomerUtil() {
    }

    /**
     * 账号类型标识
     */
    public static final String TYPE = "customer";

    /**
     * 底层的 StpLogic 对象
     */
    public static StpLogic stpLogic = new StpLogic(TYPE);

    /**
     * 获取当前 StpLogic 的账号类型
     *
     * @return See Note
     */
    public static String getLoginType() {
        return stpLogic.getLoginType();
    }

    /**
     * 重置 StpLogic 对象
     * <br> 1、更改此账户的 StpLogic 对象
     * <br> 2、put 到全局 StpLogic 集合中
     * <br> 3、发送日志
     *
     * @param newStpLogic /
     */
    public static void setStpLogic(StpLogic newStpLogic) {
        // 重置此账户的 StpLogic 对象
        stpLogic = newStpLogic;

        // 添加到全局 StpLogic 集合中
        // 以便可以通过 SaManager.getStpLogic(type) 的方式来全局获取到这个 StpLogic
        SaManager.putStpLogic(newStpLogic);

        // $$ 全局事件
        SaTokenEventCenter.doSetStpLogic(stpLogic);
    }

    /**
     * 获取 StpLogic 对象
     *
     * @return /
     */
    public static StpLogic getStpLogic() {
        return stpLogic;
    }

关于这个项目我就讲到这里，感谢大家！