SpringBoot+Vue實(shí)現(xiàn)體質(zhì)測試數(shù)據(jù)分析系統(tǒng)

1.技術(shù)介紹

java+springBoot+spring+mysql+mybatis+Vue

開發(fā)工具：eclipse或IDEA

2.主要功能說明：

1）學(xué)生

2）老師

注冊、登錄、首頁、論壇信息、公告信息、個(gè)人中心、后臺管理、師生溝通

3）管理員

個(gè)人中心、學(xué)生管理、教師管理、日常運(yùn)動管理、運(yùn)動分析管理、成績信息管理、論壇管理、輪播圖管理、公告信息管理

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;">體質(zhì)測試數(shù)據(jù)分析及可視化設(shè)計(jì)注冊</h1>

<el-form ref="rgsForm" class="rgs-form" :model="rgsForm" label-width="120px">

<!-- <div v-if="tableName=='xuesheng'" class="input-group">

? <div class="label">學(xué)號</div>

? <div class="input-container">

? ? <input v-model="ruleForm.xuehao" class="input" type="text" placeholder="學(xué)號">

? </div>

</div> -->

<el-form-item label="學(xué)號" class="input" v-if="tableName=='xuesheng'">

? <el-input v-model="ruleForm.xuehao" autocomplete="off" placeholder="學(xué)號" 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">學(xué)院</div>

? <div class="input-container">

? ? <input v-model="ruleForm.xueyuan" class="input" type="text" placeholder="學(xué)院">

? </div>

</div> -->

<el-form-item label="學(xué)院" class="input" v-if="tableName=='xuesheng'">

? <el-input v-model="ruleForm.xueyuan" autocomplete="off" placeholder="學(xué)院" type="text" />

</el-form-item>

<!-- <div v-if="tableName=='xuesheng'" class="input-group">

? <div class="label">手機(jī)</div>

? <div class="input-container">

? ? <input v-model="ruleForm.shouji" class="input" type="text" placeholder="手機(jī)">

? </div>

</div> -->

<el-form-item label="手機(jī)" class="input" v-if="tableName=='xuesheng'">

? <el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手機(jī)" 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">學(xué)院</div>

? <div class="input-container">

? ? <input v-model="ruleForm.xueyuan" class="input" type="text" placeholder="學(xué)院">

? </div>

</div> -->

<el-form-item label="學(xué)院" class="input" v-if="tableName=='jiaoshi'">

? <el-input v-model="ruleForm.xueyuan" autocomplete="off" placeholder="學(xué)院" 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(`學(xué)號不能為空`);

? ? ? ? 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(`手機(jī)應(yīng)輸入手機(jī)格式`);

? ? ? ? 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(`電話應(yīng)輸入手機(jī)格式`);

? ? ? ? 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.系統(tǒng)演示地址：

鏈接：https://pan.baidu.com/s/1_NJcUTtkE08rdibN-xAWkw

提取碼：hmal

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容