[23章附电子书]SpringBoot+Vue3+MySQL集群开发健康体检双系统-面包板社区

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

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

第二步就是部署Maven工具
配置的repository目录地址，你根据Maven解压缩的位置，修改这个文件夹地址即可。
<localRepository>Maven解压缩路径\repository</localRepository>
有时候可能由于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端框架页面的视图层代码我们要加以修改，比如说<main>标签的:class属性要根据isTab切换不同的样式。还有就是给<el-tabs>设置上v-if判断，如果isTab为true就用Tab控件引用Vue压面；反之就用<el-card>控件引用Vue页面。
<div class="site-content__wrapper">
<main class="site-content"
:class="{ 'site-content--tabs': $route.meta.isTab }">
<el-tabs v-if="$route.meta.isTab"
v-model="siteContent.mainTabsActiveName" :closable="true">
<el-tab-pane v-for="item in siteContent.mainTabs"
:label="item.title" :name="item.name">
<el-card>
<router-view :key="router.currentRoute.value.query.random" />
</el-card>
</el-tab-pane>
</el-tabs>
<el-card v-else>
<router-view :key="router.currentRoute.value.query.random" />
</el-card>
</main>
</div>
如果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页面引用。
<template>
<div class="home">
<div class="left">
<h2>神州大健康体检系统</h2>
<div class="desc">
<p>医疗健康  模式创新</p>
<p>汇集名医  让诊疗更简单</p>
</div>
<div class="bottom">
<div class="remark-container">
<div class="ball blue">1</div>
<div class="remark">先进的技术</div>
</div>
<div class="remark-container">
<div class="ball red">2</div>
<div class="remark">强大的团队</div>
</div>
<div class="remark-container">
<div class="ball green">3</div>
<div class="remark">丰富的经验</div>
</div>
</div>
</div>
<div class="right">
<img src="../../assets/home/banner.png" class="banner" />
</div>
</div>
</template>

<script></script>

<style lang="less" scoped="scoped">
@import url('home.less');
</style>

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

最新资讯