[23章附电子书]SpringBoot+Vue3+MySQL集群 开发健康体检双系统

学习地址1：pan.baidu.com/s/1WWeuY50A… 提取码: kubm 学习地址2：share.weiyun.com/74nsFIu0 密码：ih38qp

大家都知道医疗行业是互联网发展前景极好的领域之一，对于初入职者、转行者来说都是很好的选择，今天我将给大家讲解一个关于健康+体检双系统的项目，项目以业务驱动技术栈，打造完整、全面的双系统项目，并采用前后端分离架构，业务功能完善，界面美观，可以高效积累大型医疗项目经验，快速提升医疗行业就业竞争力。

项目开始前，我们先来安装JDK 如果你本地有其他版本的JDK，一定要先卸载所有JDK，然后再安装JDK15.0.2，并且配置PATH和JAVA_HOME环境变量，否则JDK版本会出现错乱。

第二步就是部署Maven工具 配置的repository目录地址，你根据Maven解压缩的位置，修改这个文件夹地址即可。 Maven解压缩路径\repository 有时候可能由于Maven下载的依赖库丢包了，导致Java项目中没能识别某些Java类的时候。你可以把Maven的repository文件夹清空，然后重新启动IDEA工具，让Maven重新下载依赖库。

第三步配置MySQL_1节点 在Navicat上面，到MySQL_1节点上执行4条SQL语句。以MySQL_4为主节点，订阅日志同步数据。

我们先在MyCat上面执行一个SQL语句，看看INSERT语句是否能转发给主节点，然后数据同步到其他5个节点。 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

每次发出Ajax请求的时候，我们要写很多JQuery语句。特别是处理后端返回的状态码，我们要做不同的处理。如果每次发送Ajax请求都要写一大堆代码，是不是太繁琐了。不如我们把发送Ajax请求给封装起来，以后调用这个封装函数就可以了，那该多好啊。在main.ts文件中，创建全局函数封装Ajax代码。 //导入JQuery库，因为Ajax用起来非常方便，支持同步和异步的Ajax请求 import $ from 'jquery';

//导入ElementUI的消息通知组件，下面封装全局Ajax的时候处理异常的时候需要弹出通知 import { ElMessage } from 'element-plus';

//后端项目的URL根路径 let baseUrl = 'http://localhost:7700/his-api'; app.config.globalProperties.$baseUrl = baseUrl; //设置全局变量$baseUrl

//Minio服务器地址 let minioUrl = 'http://localhost:9000/his'; app.config.globalProperties.$minioUrl = minioUrl;

//封装全局Ajax公共函数 app.config.globalProperties.http = function (url : string, method : string, data : JSON, async : boolean, fun : Function) { .ajax({ url: baseUrl + url, type: method, dataType: 'json', contentType: 'application/json', //上传的数据被序列化（允许Ajax上传数组） traditional: true, xhrFields: { //允许Ajax请求跨域 withCredentials: true }, headers: { token: localStorage.getItem('token') }, async: async, data: JSON.stringify(data), success: function (resp : any) { if (resp.code == 200) { fun(resp); } else { ElMessage.error({ message: resp.msg, duration: 1200 }); } }, error: function (e : any) { //ajax有语法错误的时候 if (e.status == undefined) { ElMessage.error({ message: '前端页面错误', duration: 1200 }); } else { let status = e.status; //没有登陆体检系统 if (status == 401) { if (url.startsWith('/front/')) { router.push({ name: 'FrontIndex' }); } else { router.push({ name: 'MisLogin' }); } } else { //后端没有运行，提交的数据有误，或者没有连接上后端项目 if (!e.hasOwnProperty('responseText')) { ElMessage.error({ message: '后端项目没有启动，或者HTTP请求类型以及参数错误', duration: 1200 }); } else { ElMessage.error({ message: e.responseText, duration: 1200 }); } } } } }); }; 我们先从前端验证函数开始做起。因为发送Ajax请求的时候，前端项目先做数据验证，这就离不开验证函数。在/src/utils目录中创建validate.ts文件，然后定义若干验证函数。 /**

• 验证是否为空或者空字符串 */ export function isBlank(s: string) { return s == null || s.length == 0; }

/**

• 验证邮箱 */ export function isEmail(s: string) { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s); }

/**

• 验证手机号码 */ export function isMobile(s: string) { return /^1[1-9]\d{9}$/.test(s); }

/**

• 验证URL地址 / export function isURL(s: string) { return /^http[s]?://./.test(s); }

/**

• 验证用户名 */ export function isUsername(s: string) { return /^[a-zA-Z0-9]{5,50}$/.test(s); }

/**

• 验证密码 */ export function isPassword(s: string) { return /^[a-zA-Z0-9]{6,20}$/.test(s); }

/**

• 验证手机短信验证码 */ export function isSmsCode(s: string) { return /^\d{6}$/.test(s); } MIS端框架页面的视图层代码我们要加以修改，比如说标签的:class属性要根据isTab切换不同的样式。还有就是给设置上v-if判断，如果isTab为true就用Tab控件引用Vue压面；反之就用控件引用Vue页面。

如果Home页面显示的时候，应该销毁所有的Tab控件。为了实现这个效果，我们可以清空mainTabs数组的元素，并且清理mainTabsActiveName属性值。 function routeHandle(route) { //判断是否要创建Tab控件 if (route.meta.isTab) { /* 创建Tab控件之前，先判断mainTabs[]数组中是否存在该Vue页面的Tab控件。 * 比如我们要访问角色管理页面，程序先要判断是否存在角色管理页面的Tab控件。 * 如果不存在就创建Tab控件；如果存在就不创建新的Tab控件，直接切换到现有的Tab控件 */ let tab = siteContent.mainTabs.filter(item => item.name === route.name)[0]; if (tab == null) { tab = { title: route.meta.title, name: route.name }; siteContent.mainTabs.push(tab); } //选中某个Tab控件 siteContent.mainTabsActiveName = tab.name; //选中某个菜单项 siteContent.menuActiveName = tab.name; } else { siteContent.mainTabs = [] //取消选中某个Tab控件 siteContent.mainTabsActiveName = ""; //选中某个菜单项 siteContent.menuActiveName = "Home"; } } 编写src/views/mis/home.vue页面的视图层标签，并且创建home.less文件，让Home页面引用。 @import url('home.less');

以下就是本项目的开发流程，希望我的文章对大家的学习有所帮助！感谢大家的阅读