Vue+ElementUi实现基础登录界面（含相关JS代码）

引言

由于没什么特别的，只是分享出来，所以直接贴代码了

实现代码

<template>
  <div class="login-container">
    <el-form :model="userLoginRuleForm" :rules="userLoginRules" status-icon ref="userLoginRuleForm" label-position="left" label-width="0px"
      class="demo-ruleForm login-page">
      <h3 class="title">欢迎使用本系统</h3>
      <el-form-item prop="userName">
        <el-input type="text" v-model="userLoginRuleForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="passWord">
        <el-input type="passWord" v-model="userLoginRuleForm.passWord" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <a href="/" id="wjPwd">忘记密码</a>
      <el-form-item style="width:100%;margin-top: 20px;">
        <el-button type="primary" style="width:100%;" @click="submitLoginRuleForm" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        logining: false,
        userLoginRuleForm: {
          userName: '',
          passWord: '',
        },
        userLoginRules: {
          userName: [{
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          }, {
            min: 6,
            max: 20,
            message: '用户名为6-20位，字母加数字',
            trigger: 'blur'
          }],
          passWord: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }, {
            min: 6,
            max: 20,
            message: '密码6-20位，字母加数字',
            trigger: 'blur'
          }]
        }
        /* ,checked: false */
      }
    },
    methods: {
      submitLoginRuleForm(event) {
        this.$refs.userLoginRuleForm.validate((valid) => {

          this.$axios.post("URL",this.userLoginRuleForm)
          .then(response=>{
              var resultCode=response.data.code
              var resultMsg=response.data.msg
              if(resultCode=='0'){
                this.$message({
                          message: '登录成功',
                          type: 'success'
                        });
                var resultUserList=response.data.list[0]
                sessionStorage.setItem("userName",resultUserList.userName)
                sessionStorage.setItem("realName",resultUserList.realName)
                sessionStorage.setItem("department",resultUserList.department)
                sessionStorage.setItem("userRole",resultUserList.userRole)
                this.$router.push({path:"/index"})
              }else if(resultCode=='-1'){
                this.$message({
                          message: resultMsg,
                          type: 'error'
                        });
              }else if(resultCode=='-2'){
                this.$message({
                          message: resultMsg,
                          type: 'error'
                        });
              }
          })
          .catch(error=>{
            console.log("系统异常请联系管理员")
          })
        })
      }
    }
  };
</script>

<style scoped>
  .login-container {
    width: 100%;
    height: 100%;
  }

  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 10px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

/*  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
  } */
  #wjPwd{
    text-decoration: none;
    color: #409EFF;
  }
  #wjPwd:hover{
    color: orange;
  }
</style>

注：记得配置路由 ( ´･ω･)ﾉ(._.`)