![1.png](https://static.golangjob.cn/231110/7dd35e2bb6ee71859208e63c619e1f9d.png)
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;
}
}
}
}
}
}
有疑问加站长微信联系(非本文作者)
![](https://static.golangjob.cn/static/img/footer.png?imageView2/2/w/280)