vue+element-ui开发通用的登录以及注册页面

  实现登录页面的效果:

        所实现的功能需求就是，通过axios发送请求去验证有不有账户信息，如果有才可以登录，否则不允许登录

有强硬的验证规则，通过后台服务器实现验证用户信息，不存在是无法登录，以及不输入账户和密码会判断为空，也是无法登录。

        在看一下注册页面 

可以通过登录页面上面的账户注册按钮去注册页面查看，实现多页面跳转操作。

         一个相当简洁的注册页面就呈现出来了。这里也有强硬的检验规则，还有发送qq验证码功能等其他验证功能

发送验证码时候就可以开始验证了

 

        废话就不多说啦，代码如下:

 登录部分的:

<template>
<div class="box">
    <div class="head">节能时光云平台</div>
  <div class="Loginhome">
    <div class="centers">
        <label for="">用户名</label>
    <el-input
    type="text"
    placeholder="请输入内容"
    v-model.number="text"
    maxlength="10"
    show-word-limit
    class="user"
    prefix-icon="el-icon-s-custom"
    >
    </el-input>
    <br>
     <label for="">密&nbsp;&nbsp;码</label>
     <el-input 
     placeholder="请输入密码" 
     v-model="input" 
     show-password 
     class="password"
     prefix-icon="el-icon-lock"
     ></el-input>
     <el-button  type="success" round class="btn" @click="Login">登录</el-button>
    </div>

  </div>
<el-dropdown class="droplist">
  <span class="el-dropdown-link">
    没账号立即注册<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="sign">立即注册</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<el-dropdown class="droplist2">
  <span class="el-dropdown-link">
    用户协议<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item :disabled=true>还未开发</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<el-dropdown class="droplist3">
  <span class="el-dropdown-link">
    帮助中心<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>帮助中心</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    data () {
        return {
            text:'',
            input:'',
        }
    },
    methods:{
        sign(){
            // window.location.href="sign.html";
            this.$router.push("/sign")
        },
        Login(){
          if(this.text==''||this.input==''){
            this.$message.error('账号或密码为空,请重新输入');
            return;
          }
          axios({
            url:"http://127.0.0.1:5000/logincheck",
            method:"POST",
            data:{
              account:this.text,
              code:this.input
            }
          }).then((res)=>{
            if(res.data=="没有此账号,请重新登录"){
              this.$message.error('没有此账号,请去注册一个吧');
            }
            if(res.data=="密码错误,请重新输入"){
              this.$message.error('密码错误,请重新输入');
            }
            if(res.data=="登录成功"){
              this.$message({
                 message: '登录成功',
                  type: 'success'
              })
              setTimeout(() => {
                this.$router.push("/homepage")
              }, 1500);
            }
            console.log(res.data);
          },(err)=>{
            this.$message.error('请求服务器失败');
            console.log("请求服务器错误");
          })
        }
    }
    
};
</script>

<style scoped>
  .box{
    background: url(../assets/bgc.jpg) no-repeat;
    height: 100%;
    background-size: 100% 100%;
  }
 .head{
    position: absolute;
    color: #409EFF;
    font-size: 50px;
    font-family: "宋体";
}
.Loginhome{
    position: absolute;
    width: 70%;
    height: 70%;
    /* background-color: #fff; */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* opacity: .3; */
}
.user{
    width: 100%;
}
label{
    font-weight: 400;
    font-size: 25px;
    font-family: "仿宋";
    margin-right: 8px;
    margin-top: 15px;
}
.password{
    width: 100%;
}
.centers{
    width: 30%;
    height: 50%;
    position: absolute; 
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.btn{
    width: 100%;
    margin-top: 35px;
    outline: none !important;
}
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
        position: absolute;
  }
  .droplist{
    position: absolute;
    right: 5%;
  }
    .droplist2{
    position: absolute;
    right: 15%;
  }
    .droplist3{
    position: absolute;
    right: 22%;
  } 
</style>

         注册部分的:

<template>
  <div class="box">
    <div class="register">
        <footer>注册</footer>
    <el-form ref="form" :model="form" :rules="rules"  label-width="30px" class="from">
        <el-form-item label="">
        <el-input prefix-icon="el-icon-user" placeholder="注册的账号" v-model.number="form.name"></el-input>
        </el-form-item>
        <el-form-item label="">
        <el-input maxlength="5" prefix-icon="el-icon-film" placeholder="验证码" v-model.number="form.verify" class="inputtow"></el-input>
        </el-form-item>
        <el-form-item label="" prop="psw">
        <el-input autocomplete="off" prefix-icon="el-icon-lock" placeholder="至少6位字母和数字" show-password v-model.number="form.psw"></el-input>
        </el-form-item>
        <el-form-item label="" prop="pswok">
        <el-input autocomplete="off" prefix-icon="el-icon-lock" placeholder="至少6位字母和数字" show-password v-model.number="form.pswok"></el-input>
        </el-form-item>
        <el-form-item label=""  prop="email"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
        <el-input validate-event prefix-icon="el-icon-message" placeholder="邮箱地址" v-model="form.email"></el-input>
        </el-form-item>
  </el-form>
  <div class="buttonVerify">
        <el-button type="primary" :disabled='isforbidden' @click="verificationcode">获取验证码</el-button>
    </div>
    <el-button type="primary" :round=false :plain=false class="buttonres" @click="reg('form')">注册</el-button>
    <div class="login">已有账号，
        <router-link to="/login">登录</router-link>
        <span style="margin-left: 10%; font-size:13px">注册即代表您已阅读并同意《使用协议》</span>
    </div>
    </div>
  </div>
</template>

<script>

import axios from 'axios'
export default {
    data () {
         var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.form.pswok !== '') {
            this.$refs.form.validateField('pswok');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.psw) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        return {
            isforbidden:false,
            form:{
            name: '',
            verify:'',
            psw:'',
            pswok:'',
            email:""
            },
            rules: {
                psw: [
            { validator: validatePass, trigger: 'blur' }
          ],
                pswok: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        }
        };
    },
    
    methods:{
        reg(form){
          this.$refs[form].validate((valid) => {
          if (valid) {
            axios({
            url:"http://127.0.0.1:5000/logmessage",
            params:{
                usename : this.form.name,
                password : this.form.psw,
                email:this.form.email,
                verify:this.form.verify
            },
            method:"GET"
           }).then((res)=>{
            if(res.data==true){
                this.$router.push("/login")
            this.$alert('恭喜,注册成功了', '提示', {
          confirmButtonText: '确定',
             });
             }else{
                this.$alert(res.data, '提示', {
                confirmButtonText: '确定',
             });
             }
            // console.log(res.data);
           },(err)=>{
            this.$alert('注册失败，请重新注册', '提示', {
          confirmButtonText: '确定',
             });
           })
          } else {
            this.$alert('请输入完整内容', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'error',
              message: `错误: ${ "请输入完整信息" }`
            });
          }
        });
            return false;
          }
        });
            // console.log(this.form.name);
        },
        //发送验证码
        verificationcode(e){
          if(this.form.email==''){
            this.$message.error('没有输入邮箱');
          }else{
            axios({
              url:"http://127.0.0.1:5000/emails",
              method:"POST",
              data:{
                email : this.form.email,
              }
            }).then((res)=>{
              console.log(res.data);
            },(err)=>{
              console.log("请求错误");
            })
            this.isforbidden=true;
            let k = 60;
            let time = setInterval(()=>{
              if(k==0){
                e.target.innerHTML="获取验证码";
                this.isforbidden = false;
                clearInterval(time);
              }else{
                e.target.innerHTML="还剩"+k+"秒";
                k--;
              }
            },1000)
          }
        }
    }
}
</script>

<style scoped>
.box{
    height: 100%;
    background-image: url(../assets/sign.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.register{
    width: 35%;
    height: 80%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}
footer{
    font-family: '宋体';
    font-size: 24px;
    text-align: center;
    padding-top: 50px;
}
.from{
    width: 75%;
    margin: 0 auto;
    margin-right: 15%;
    margin-top: 8%;
}
.inputtow{
    width: 65%;
}

.buttonVerify{
    position: absolute;
    left: 64%;
    top: 31%;
}
.buttonres{
    width: 70%;
    margin-left: 15%;
    margin-top: 5%;
}
.login{
    margin-left: 15%;
    margin-top: 5%;
    color: #ccc;
    font: size 13px;
}
</style>