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">
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">学号</div>
<div class="input-container">
<input v-model="ruleForm.xuehao" class="input" type="text" placeholder="学号">
</div>
</div> -->
<el-form-item label="学号" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.xuehao" autocomplete="off" placeholder="学号" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">姓名</div>
<div class="input-container">
<input v-model="ruleForm.xingming" class="input" type="text" placeholder="姓名">
</div>
</div> -->
<el-form-item label="姓名" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.xingming" autocomplete="off" placeholder="姓名" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">学院</div>
<div class="input-container">
<input v-model="ruleForm.xueyuan" class="input" type="text" placeholder="学院">
</div>
</div> -->
<el-form-item label="学院" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.xueyuan" autocomplete="off" placeholder="学院" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='xuesheng'" class="input-group">
<div class="label">手机</div>
<div class="input-container">
<input v-model="ruleForm.shouji" class="input" type="text" placeholder="手机">
</div>
</div> -->
<el-form-item label="手机" class="input" v-if="tableName=='xuesheng'">
<el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">工号</div>
<div class="input-container">
<input v-model="ruleForm.gonghao" class="input" type="text" placeholder="工号">
</div>
</div> -->
<el-form-item label="工号" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.gonghao" autocomplete="off" placeholder="工号" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">密码</div>
<div class="input-container">
<input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
</div>
</div> -->
<el-form-item label="密码" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">教师姓名</div>
<div class="input-container">
<input v-model="ruleForm.jiaoshixingming" class="input" type="text" placeholder="教师姓名">
</div>
</div> -->
<el-form-item label="教师姓名" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.jiaoshixingming" autocomplete="off" placeholder="教师姓名" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">学院</div>
<div class="input-container">
<input v-model="ruleForm.xueyuan" class="input" type="text" placeholder="学院">
</div>
</div> -->
<el-form-item label="学院" class="input" v-if="tableName=='jiaoshi'">
<el-input v-model="ruleForm.xueyuan" autocomplete="off" placeholder="学院" type="text" />
</el-form-item>
<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
<div class="label">电话</div>
<div class="input-container">
<input v-model="ruleForm.dianhua" class="input" type="text" placeholder="电话">
</div>
</div> -->
<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 class="nk-navigation">
<a href="#">
<div @click="login()">注册</div>
</a>
</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__inner {
border-color: #00c292;
background: #00c292;
}
.el-radio__input.is-checked+.el-radio__label {
color: #00c292;
}
.el-radio__input.is-checked+.el-radio__label {
color: #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
