登录注册写文章

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

基于SpringBoot+Vue协同过滤视频推荐系统
1.技术介绍 java+springboot+mysql+mybatis+Vue 开发工具：eclipse或ide...
f168bc2b3926阅读 752评论 0赞 0
VUE的实现修改用户、退出登录、完善删除
在上一章的request.js的里面添加更新用户信息： import {httpServe} from '@/ht...
GGYY丶阅读 2,613评论 0赞 0
Vue 内容管理系统的搭建（一）
vue在最近一段时间火热起来，相比较于ng特别是ng1和rectjs， vue显得更加轻，它也迎合了前端模块化，组...
拿着号码牌徘徊阅读 5,058评论 4赞 43
基于vue登录界面的实现
以下布局代码 1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一...
小心222阅读 4,544评论 0赞 0
vue随机验证码组件的封装实现
原文地址：https://www.jb51.net/article/175603.htm 这篇文章主要为大家详细介...
zZ_d205阅读 780评论 0赞 0

赞1赞

赞赏

手机看全文