所需E币: 0
时间: 2023-12-20 15:06
大小: 4.4KB
大家都知道医疗行业是互联网发展前景极好的领域之一,对于初入职者、转行者来说都是很好的选择,今天我将给大家讲解一个关于健康+体检双系统的项目,项目以业务驱动技术栈,打造完整、全面的双系统项目,并采用前后端分离架构,业务功能完善,界面美观,可以高效积累大型医疗项目经验,快速提升医疗行业就业竞争力。项目开始前,我们先来安装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个节点。dockerrun-it-d--nameminio\-p9000:9000-p9001:9001\--netmynet--ip172.18.0.12-m400m\-v/root/minio/data:/data\-eTZ=Asia/Shanghai--privileged=true\--envMINIO_ROOT_USER="root"\--envMINIO_ROOT_PASSWORD="abc123456"\--envMINIO_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根路径letbaseUrl='http://localhost:7700/his-api';app.config.globalProperties.$baseUrl=baseUrl;//设置全局变量$baseUrl//Minio服务器地址letminioUrl='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{ letstatus=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文件,然后定义若干验证函数。/** *验证是否为空或者空字符串 */exportfunctionisBlank(s:string){returns==null||s.length==0;}/** *验证邮箱 */exportfunctionisEmail(s:string){return/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s);}/** *验证手机号码 */exportfunctionisMobile(s:string){return/^1[1-9]\d{9}$/.test(s);}/** *验证URL地址 */exportfunctionisURL(s:string){return/^http[s]?:\/\/.*/.test(s);}/** *验证用户名 */exportfunctionisUsername(s:string){return/^[a-zA-Z0-9]{5,50}$/.test(s);}/** *验证密码 */exportfunctionisPassword(s:string){return/^[a-zA-Z0-9]{6,20}$/.test(s);}/** *验证手机短信验证码 */exportfunctionisSmsCode(s:string){return/^\d{6}$/.test(s);}MIS端框架页面的视图层代码我们要加以修改,比如说<main>标签的:class属性要根据isTab切换不同的样式。还有就是给<el-tabs>设置上v-if判断,如果isTab为true就用Tab控件引用Vue压面;反之就用<el-card>控件引用Vue页面。<divclass="site-content__wrapper"> <mainclass="site-content" :class="{'site-content--tabs':$route.meta.isTab}"> <el-tabsv-if="$route.meta.isTab" v-model="siteContent.mainTabsActiveName":closable="true"> <el-tab-panev-for="iteminsiteContent.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-cardv-else> <router-view:key="router.currentRoute.value.query.random"/> </el-card> </main></div>如果Home页面显示的时候,应该销毁所有的Tab控件。为了实现这个效果,我们可以清空mainTabs数组的元素,并且清理mainTabsActiveName属性值。functionrouteHandle(route){ //判断是否要创建Tab控件 if(route.meta.isTab){ /*创建Tab控件之前,先判断mainTabs[]数组中是否存在该Vue页面的Tab控件。 *比如我们要访问角色管理页面,程序先要判断是否存在角色管理页面的Tab控件。 *如果不存在就创建Tab控件;如果存在就不创建新的Tab控件,直接切换到现有的Tab控件 */ lettab=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> <divclass="home"> <divclass="left"> <h2>神州大健康体检系统</h2> <divclass="desc"> <p>医疗健康 模式创新</p> <p>汇集名医 让诊疗更简单</p> </div> <divclass="bottom"> <divclass="remark-container"> <divclass="ballblue">1</div> <divclass="remark">先进的技术</div> </div> <divclass="remark-container"> <divclass="ballred">2</div> <divclass="remark">强大的团队</div> </div> <divclass="remark-container"> <divclass="ballgreen">3</div> <divclass="remark">丰富的经验</div> </div> </div> </div> <divclass="right"> <imgsrc="../../assets/home/banner.png"class="banner"/> </div> </div></template><script></script><stylelang="less"scoped="scoped"> @importurl('home.less');</style>以下就是本项目的开发流程,希望我的文章对大家的学习有所帮助!感谢大家的阅读