SpringBoot+Vue实现体质测试数据分析系统

2022-06-14 23:02:17 阅读：125 来源： 互联网

标签：__ el Vue SpringBoot color 数据分析系统 width background border

1.技术介绍
java+springBoot+spring+mysql+mybatis+Vue
开发工具：eclipse或IDEA
2.主要功能说明：
1）学生
2）老师
注册、登录、首页、论坛信息、公告信息、个人中心、后台管理、师生沟通
3）管理员
个人中心、学生管理、教师管理、日常运动管理、运动分析管理、成绩信息管理、论坛管理、轮播图管理、公告信息管理
3.部分代码展示
注册页面
```<template>
<div>
<div class="container">
<div class="login-form" style="backgroundColor:rgba(229, 238, 229, 0.07);borderRadius:10px">
<h1 class="h1" style="color:rgba(24, 103, 228, 1);fontSize:28px;">体质测试数据分析及可视化设计注册</h1>
<el-form ref="rgsForm" class="rgs-form" :model="rgsForm" label-width="120px">

<el-form-item label="学号" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.xuehao" autocomplete="off" placeholder="学号" type="text" />
</el-form-item>

<el-form-item label="密码" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
</el-form-item>

<el-form-item label="姓名" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.xingming" autocomplete="off" placeholder="姓名" type="text" />
</el-form-item>

<el-form-item label="学院" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.xueyuan" autocomplete="off" placeholder="学院" type="text" />
</el-form-item>

<el-form-item label="手机" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" type="text" />
</el-form-item>

<el-form-item label="工号" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.gonghao" autocomplete="off" placeholder="工号" type="text" />
</el-form-item>

<el-form-item label="密码" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
</el-form-item>

<el-form-item label="教师姓名" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.jiaoshixingming" autocomplete="off" placeholder="教师姓名" type="text" />
</el-form-item>

<el-form-item label="学院" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.xueyuan" autocomplete="off" placeholder="学院" type="text" />
</el-form-item>

<el-form-item label="电话" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.dianhua" autocomplete="off" placeholder="电话" type="text" />
</el-form-item>
<el-button class="btn" type="primary" @click="login()">注册</el-button>
</el-form>
</div>

</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
},
tableName:"",
rules: {}
};
},
mounted(){
let table = this.$storage.get("loginTable");
this.tableName = table;
},
methods: {
// 获取uuid
getUUID () {
return new Date().getTime();
},
// 注册
login() {
if((!this.ruleForm.xuehao) && `xuesheng` == this.tableName){
this.$message.error(`学号不能为空`);
return
}
if((!this.ruleForm.mima) && `xuesheng` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if(`xuesheng` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
this.$message.error(`手机应输入手机格式`);
return
}
if((!this.ruleForm.gonghao) && `jiaoshi` == this.tableName){
this.$message.error(`工号不能为空`);
return
}
if((!this.ruleForm.mima) && `jiaoshi` == this.tableName){
this.$message.error(`密码不能为空`);
return
}
if(`jiaoshi` == this.tableName && this.ruleForm.dianhua&&(!this.$validate.isMobile(this.ruleForm.dianhua))){
this.$message.error(`电话应输入手机格式`);
return
}
this.$http({
url: `${this.tableName}/register`,
method: "post",
data:this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "注册成功",
type: "success",
duration: 1500,
onClose: () => {
this.$router.replace({ path: "/login" });
}
});
} else {
this.$message.error(data.msg);
}
});
}
}
};
</script>
<style lang="scss" scoped>
.el-radio__input.is-checked .el-radio__inner {
border-color: #00c292;
background: #00c292;
}

.el-radio__input.is-checked .el-radio__inner {
border-color: #00c292;
background: #00c292;
}

.el-radio__input.is-checked+.el-radio__label {
color: #00c292;
}

.h1 {
margin-top: 10px;
}

body {
padding: 0;
margin: 0;
}

// .container {
// min-height: 100vh;
// text-align: center;
// // background-color: #00c292;
// padding-top: 20vh;
// background-image: url(../assets/img/bg.jpg);
// background-size: 100% 100%;
// opacity: 0.9;
// }

// .login-form:before {
// vertical-align: middle;
// display: inline-block;
// }

// .login-form {
// max-width: 500px;
// padding: 20px 0;
// width: 80%;
// position: relative;
// margin: 0 auto;

// .label {
// min-width: 60px;
// }

// .input-group {
// max-width: 500px;
// padding: 20px 0;
// width: 80%;
// position: relative;
// margin: 0 auto;
// display: flex;
// align-items: center;

// .input-container {
// display: inline-block;
// width: 100%;
// text-align: left;
// margin-left: 10px;
// }

// .icon {
// width: 30px;
// height: 30px;
// }

// .input {
// position: relative;
// z-index: 2;
// float: left;
// width: 100%;
// margin-bottom: 0;
// box-shadow: none;
// border-top: 0px solid #ccc;
// border-left: 0px solid #ccc;
// border-right: 0px solid #ccc;
// border-bottom: 1px solid #ccc;
// padding: 0px;
// resize: none;
// border-radius: 0px;
// display: block;
// width: 100%;
// height: 34px;
// padding: 6px 12px;
// font-size: 14px;
// line-height: 1.42857143;
// color: #555;
// background-color: #fff;
// }

// }
// }

.nk-navigation {
margin-top: 15px;

a {
display: inline-block;
color: #fff;
background: rgba(255, 255, 255, .2);
width: 100px;
height: 50px;
border-radius: 30px;
text-align: center;
display: flex;
align-items: center;
margin: 0 auto;
justify-content: center;
padding: 0 20px;
}

.icon {
margin-left: 10px;
width: 30px;
height: 30px;
}
}

.register-container {
margin-top: 10px;

a {
display: inline-block;
color: #fff;
max-width: 500px;
height: 50px;
border-radius: 30px;
text-align: center;
display: flex;
align-items: center;
margin: 0 auto;
justify-content: center;
padding: 0 20px;

div {
margin-left: 10px;
}
}
}

.container {
background-image: url("http://codegen.caihongy.cn/20210101/9f60ced860414569896912ced6fbf47b.jpg");
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;

.login-form {
right: 50%;
top: 50%;
height: auto;
transform: translate3d(50%, -50%, 0);
border-radius: 10px;
background-color: rgba(255,255,255,.5);
width: 420px;
padding: 30px 30px 40px 30px;
font-size: 14px;
font-weight: 500;

.h1 {
margin: 0;
text-align: center;
line-height: 54px;
font-size: 24px;
color: #000;
}

.rgs-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

.input {
width: 100%;

& /deep/ .el-form-item__label {
line-height: 40px;
color: rgba(30, 144, 255, 1);
font-size: #606266;
}

& /deep/ .el-input__inner {
height: 40px;
color: rgba(42, 102, 221, 1);
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #606266;
border-radius: 4px;
background-color: #fff;
}
}

.btn {
width: 88px;
height: 44px;
color: #fff;
font-size: 14px;
border-width: 0px;
border-style: solid;
border-color: #409EFF;
border-radius: 4px;
background-color: rgba(24, 144, 255, 1);
}
}
}
}
</style>

在这里插入代码片
```
4.系统演示地址：
链接：https://pan.baidu.com/s/1_NJcUTtkE08rdibN-xAWkw
提取码：hmal

标签：__,el,Vue,SpringBoot,color,数据分析系统,width,background,border
来源： https://www.cnblogs.com/xiao123456789/p/16376766.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

SpringBoot+Vue实现体质测试数据分析系统