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

kuanmdboss · · 613 次点击 · 开始浏览    置顶

![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; } } } } } }

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

613 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传