[23章附电子书]springboot vue3 mysql集群开发健康体检双系统 -欧洲杯足彩官网

主题：[23章附电子书]springboot vue3 mysql集群开发健康体检双系统精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
天天学等级: 性别: 文章: 110 积分: 1180 来自: 杭州	发表时间：2023-12-20 相关推荐: 更多相关推荐 linux 学习地址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解压缩的位置，修改这个文件夹地址即可。 maven解压缩路径\repository 有时候可能由于maven下载的依赖库丢包了，导致java项目中没能识别某些java类的时候。你可以把maven的repository文件夹清空，然后重新启动idea工具，让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 is { 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页面。 :class="{ 'site-content--tabs': $route.meta.istab }"> v-model="sitecontent.maintabsactivename" :closable="true"> :label="item.title" :name="item.name"> 如果home页面显示的时候，应该销毁所有的tab控件。为了实现这个效果，我们可以清空maintabs数组的元素，并且清理maintabsactivename属性值。 function routehandle(route) { //判断是否要创建tab控件 if (route.meta.istab) { / 创建tab控件之前，先判断maintabs[]数组中是否存在该vue页面的tab控件。 * 比如我们要访问角色管理页面，程序先要判断是否存在角色管理页面的tab控件。 * 如果不存在就创建tab控件；如果存在就不创建新的tab控件，直接切换到现有的tab控件 */ let tab = 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页面引用。以下就是本项目的开发流程，希望我的文章对大家的学习有所帮助！感谢大家的阅读声明：iteye文章欧洲杯足彩官网的版权属于作者，受法律保护。没有作者书面许可不得转载。推荐链接

主题：[23章附电子书]springboot vue3 mysql集群开发健康体检双系统

精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)

作者

正文

天天学
等级:
性别:
文章: 110
积分: 1180
来自: 杭州

发表时间：2023-12-20

相关推荐:

更多相关推荐

linux

学习地址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解压缩的位置，修改这个文件夹地址即可。
maven解压缩路径\repository
有时候可能由于maven下载的依赖库丢包了，导致java项目中没能识别某些java类的时候。你可以把maven的repository文件夹清空，然后重新启动idea工具，让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 is {
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页面。

:class="{ 'site-content--tabs': $route.meta.istab }">

v-model="sitecontent.maintabsactivename" :closable="true">

:label="item.title" :name="item.name">

如果home页面显示的时候，应该销毁所有的tab控件。为了实现这个效果，我们可以清空maintabs数组的元素，并且清理maintabsactivename属性值。
function routehandle(route) {
    //判断是否要创建tab控件
    if (route.meta.istab) {
        /* 创建tab控件之前，先判断maintabs[]数组中是否存在该vue页面的tab控件。
         * 比如我们要访问角色管理页面，程序先要判断是否存在角色管理页面的tab控件。
         * 如果不存在就创建tab控件；如果存在就不创建新的tab控件，直接切换到现有的tab控件
         */
        let tab = 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页面引用。

以下就是本项目的开发流程，希望我的文章对大家的学习有所帮助！感谢大家的阅读

声明：iteye文章欧洲杯足彩官网的版权属于作者，受法律保护。没有作者书面许可不得转载。

推荐链接

[23章附电子书]springboot vue3 mysql集群 开发健康体检双系统 -欧洲杯足彩官网

神州大健康体检系统

[23章附电子书]springboot vue3 mysql集群开发健康体检双系统 -欧洲杯足彩官网