资料
  • 资料
  • 专题
[23章附电子书]SpringBoot+Vue3+MySQL集群 开发健康体检双系统
推荐星级:
类别: 软件/EDA/IP
时间:2023-12-20
大小:4.4KB
阅读数:37
上传用户:开心就很好了
查看他发布的资源
下载次数
1
所需E币
0
ebi
新用户注册即送 300 E币
更多E币赚取方法,请查看
close
资料介绍
大家都知道医疗行业是互联网发展前景极好的领域之一,对于初入职者、转行者来说都是很好的选择,今天我将给大家讲解一个关于健康+体检双系统的项目,项目以业务驱动技术栈,打造完整、全面的双系统项目,并采用前后端分离架构,业务功能完善,界面美观,可以高效积累大型医疗项目经验,快速提升医疗行业就业竞争力。

项目开始前,我们先来安装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个节点。
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端框架页面的视图层代码我们要加以修改,比如说<main>标签的:class属性要根据isTab切换不同的样式。还有就是给<el-tabs>设置上v-if判断,如果isTab为true就用Tab控件引用Vue压面;反之就用<el-card>控件引用Vue页面。
<div class="site-content__wrapper">
    <main class="site-content"
        :class="{ 'site-content--tabs': $route.meta.isTab }">
        <el-tabs v-if="$route.meta.isTab"
            v-model="siteContent.mainTabsActiveName" :closable="true">
            <el-tab-pane v-for="item in siteContent.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-card v-else>
            <router-view :key="router.currentRoute.value.query.random" />
        </el-card>
    </main>
</div>
如果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页面引用。
<template>
    <div class="home">
        <div class="left">
            <h2>神州大健康体检系统</h2>
            <div class="desc">
                <p>医疗健康&nbsp;&nbsp;模式创新</p>
                <p>汇集名医&nbsp;&nbsp;让诊疗更简单</p>
            </div>
            <div class="bottom">
                <div class="remark-container">
                    <div class="ball blue">1</div>
                    <div class="remark">先进的技术</div>
                </div>
                <div class="remark-container">
                    <div class="ball red">2</div>
                    <div class="remark">强大的团队</div>
                </div>
                <div class="remark-container">
                    <div class="ball green">3</div>
                    <div class="remark">丰富的经验</div>
                </div>
            </div>
        </div>
        <div class="right">
            <img src="../../assets/home/banner.png" class="banner" />
        </div>
    </div>
</template>

<script></script>

<style lang="less" scoped="scoped">
    @import url('home.less');
</style>

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

版权说明:本资料由用户提供并上传,仅用于学习交流;若内容存在侵权,请进行举报,或 联系我们 删除。
相关评论 (下载后评价送E币 我要评论)
没有更多评论了
  • 可能感兴趣
  • 关注本资料的网友还下载了
  • 技术白皮书