学习地址1:https://pan.baidu.com/s/1WWeuY50AZ0d3rbJ0LJ4-pg 提取码: kubm 学习地址2:https://share.weiyun.com/74nsFIu0 密码:ih38qp
大家都知道医疗行业是互联网发展前景极好的领域之一,对于初入职者、转行者来说都是很好的选择,今天我将给大家讲解一个关于健康+体检双系统的项目,项目以业务驱动技术栈,打造完整、全面的双系统项目,并采用前后端分离架构,业务功能完善,界面美观,可以高效积累大型医疗项目经验,快速提升医疗行业就业竞争力。
项目开始前,我们先来安装JDK
如果你本地有其他版本的JDK,一定要先卸载所有JDK,然后再安装JDK15.0.2,并且配置PATH
和JAVA_HOME
环境变量,否则JDK版本会出现错乱。
第二步就是部署Maven工具
配置的repository目录地址,你根据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端框架页面的视图层代码我们要加以修改,比如说
标签的:class属性要根据isTab切换不同的样式。还有就是给 设置上v-if判断,如果isTab为true就用Tab控件引用Vue压面;反之就用 控件引用Vue页面。 神州大健康体检系统
医疗健康 模式创新
汇集名医 让诊疗更简单
1先进的技术2强大的团队3丰富的经验
以下就是本项目的开发流程,希望我的文章对大家的学习有所帮助!感谢大家的阅读