SpringBoot+Vue3+MySQL集群 开发健康体检双系统课程2023，视频+源码+电子书下载！14大业务模块设计，全流程双系统联动开发，全面掌握业务设计与核心技术。双系统联动+复杂功能设计+缜密业务开发，让你获得一个极具竞争力的面试作品
医疗行业是互联网发展前景极好的领域之一，对于初入职者、转行者来说都是很好的选择。课程以业务驱动技术栈，打造完整、全面的双系统项目，并采用前后端分离架构，业务功能完善（健康体检与健康管理两大业务），界面美观，可以高效积累大型医疗项目经验，快速提升医疗行业就业竞争力。
一、安装JDK
本课程云盘上面附带了JDK15.0.2的安装包，大家下载安装即可。因为从JDK16开始，Oracle移除了JDK中JavaSE的很多类。导致我们用JDK15以后的版本做项目，Maven导入的一些第三方依赖会出现找不到Java工具类的情况，而且更有甚者异常信息也没说找不到哪些类，直接就报运行错误。这就让我们调试程序无从下手，JDK几十万个工具类，我们不可能逐一排查，所以为了保证我们的项目能最大化的兼容Maven下载的依赖库，我们应该安装使用不高于JDK16的版本。相信很多人依然坚持使用JDK1.8，其实1.8这个版本的JDK真的太老了，比方说Activiti7.0工作流框架就不支持这么老的JDK，很多其他框架也都不支持1.8了。所以挑来挑去，只有JDK15.0.2这个版本最合适了。
二、为什么选用VirtualBox虚拟机？
VirtualBox虚拟机是Oracle提供的免费虚拟机软件，虽然知名度赶不上VMware虚拟机，但是凭借出色的稳定性还是得到了很多程序员的肯定，包括我自己在内。这两年VMware虚拟机版本更新很快，但是BUG越来越多，数不胜数。比方说SSH连接上传文件的时候，会突然掉速到10KB以下。像这样的BUG太多太多了，所以我建议大家还是用VirtualBox虚拟机吧，BUG少，还稳定。
三、关于数据库集群读写一致性的思考
我们使用主从同步机制搭建出来的MySQL集群，属于弱一致性的集群。也就是说在非常特殊的场景下，我们写入的数据和读取出来的数据可能不一致。我把会出现读写不一致的场景归纳出来了，我们一起看一下。
1. 写入和查询间隔时间太短
假设我们要执行的INSERT语句发送给了MySQL_1节点执行，但是紧接着马上执行了SELECT语句，这个查询语句被MyCat转发给MySQL_2执行。假设INSERT和SELECT语句之间的时间间隔短到1毫秒，导致MySQL_2还没有同步写入的数据，查询语句就来了，自然是查询不到刚刚插入的数据。
2. 主从同步失效
当MySQL_1和MySQL_2的主从同步失效，MySQL_2节点依然能应答MyCat心跳检测，所以MyCat依然认为MySQL_2节点是正常的节点。还是刚才的例子，MySQL_1写入数据后，因为主从同步失效，导致MySQL_2节点上没有新写入的数据，我们也就查询不到刚写入的数据了。那么有没有解决办法呢？我们只能写监控程序，每隔1秒钟执行一次show slave status语句，查看结果是不是包含两个YES字样。如果数据同步失效，就立即发送告警邮件，由运维人员及时处理。
也许有人好奇什么情况会导致主从同步失效？软硬件都有可能，比如说MyCat、MySQL_1和MySQL_2各自处在不同的机房中。MyCat与MySQL_1和MySQL_2的网络是通畅的，但是MySQL_1和MySQL_2机房之间网络却是不通的，可能是网线断了，也可能是交换机软件的故障。反正网络不通，主从同步自然也就失效了。
安装ElementPlus库
把EP组件库整合到前端项目的第一个步骤是安装依赖库。执行下面的命令，安装三个依赖库。
npm install element-plus
#安装图标库
npm install @element-plus/icons-vue
#安装sass，可以自定义样式覆盖ElementPlus自带样式
npm install sass
EP组件库的UI控件特别多，我们最好用哪个组件，就在页面里面引入该组件，而不是一次性把所有UI组件都引入到Vue页面中。一次性引入大量的UI组件会影响浏览器渲染页面的速度，所以我们一定要按需引入UI组件。为了能按需引入UI组件，我们需要安装两个依赖库。
npm install unplugin-vue-components -D
npm install unplugin-auto-import -D
四、定义前端验证函数
这节课我们先从前端验证函数开始做起。因为发送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);
}
五、设计“关于我们”的样式
编写main.less文件的内容，添加上“关于我们”区域的样式。有处细节大家必须注意，页脚的宽度是100%，但是其中主体信息的宽度是1200px，而且要居中显示，所以页脚区域里面两个DIV容器宽度是100%，而其中的列表宽度必须是1200px，还要水平居中显示。
footer {
margin-top: 50px;
.aboutus-container {
background-color: @bgc-1;
user-select: none;
.list {
width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
list-style: none;
padding: 0;
display: flex;
justify-content: space-between;
.item {
display: flex;
padding: 20px 10px;
width: 285px;
box-sizing: border-box;
img {
width: 58px;
height: 58px;
margin: 10px;
display: block;
}
div {
h3 {
font-size: 20px;
color: @fc-1;
margin: 10px 0 5px 0;
}
p {
font-size: 12px;
color: @fc-3;
margin: 0 0 0 0;
}
}
}
}
}
}
有疑问加站长微信联系（非本文作者）
