欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-08 16:02:52
...

引言

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

实现代码

<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>

注:记得配置路由 ( ´・ω・)ノ(._.`)

相关标签: Vue vue vue.js