Vue后台管理——登录模块

后台管理登录模块的核心思路

获取用户输入框的value，对用户的value先进行一个值的校验可以用正则，或ui组件的参数
将获取的数据，通过后台接口传参去请求，根据返回数据判断请求是否成功 ，成功让用户登录并存储token。

静态布局

Element-ui https://element.eleme.cn/#/zh-CN/component/installation 跳转

<template>
  <div class="login">
    <div class="content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm('ruleForm')" type="primary">登录</el-button>
          <el-button @click="resetForm('ruleForm')" type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style lang="scss" >
.login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #330066;
  .content {
    width: 30%;
    height: 34%;
    display: flex;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    align-items: center;
    .el-form-item__label {
      text-align: center;
      letter-spacing: 8px;
    }
  }
}
</style>

这里使用的技术栈——element-ui，scss

逻辑处理

<script >
export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 5, max: 14, message: "长度在 5 到 14 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = "https://www.liulongbin.top:8888/api/private/v1";
          this.http.post(`${url}/login`, this.ruleForm).then(res => {
            console.log(res);
            // let {token,status}={{res.data},{res.mets}}
            if (res.data.data) {
              let { token } = res.data.data;
              let { status } = res.data.meta;       
              if (status === 200) {
                this.$router.push({ name: "Home" });
              } 
            }else{
                alert("登录失败")
                this.ruleForm={
                    username:"",
                    password:""
                }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

结合element提供给我们的属性，进行一个数据的校验
：model 绑定输入的数据
：reles 绑定校验规则
ref 绑定事件传递数据

  data() {
    return {
    // 定义数据
      ruleForm: {
        username: "",
        password: ""
      },
      //验证规则
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 5, max: 14, message: "长度在 5 到 14 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
        ]
      }
    };
  },

请求逻辑处理(核心)

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = "https://www.liulongbin.top:8888/api/private/v1";
          this.http.post(`${url}/login`, this.ruleForm).then(res => {
            console.log(res);
            // let {token,status}={{res.data},{res.mets}}
            if (res.data.data) {
              let { token } = res.data.data;
              let { status } = res.data.meta;       
              if (status === 200) {
                this.$router.push({ name: "Home" });
              } 
            }else{
                alert("登录失败")
                this.ruleForm={
                    username:"",
                    password:""
                }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }

通过axios请求数据

this.$refs[formName].validate(valid=>{})
//绑定形参中btn传入的数据
// 他会校验数据，valid会返回true和false

判断值为true时，发送请求，进行下一步判断

 if (valid) {
          let url = "https://www.liulongbin.top:8888/api/private/v1";
          //min.js中定义的axios 请求
          this.http.post(`${url}/login`, this.ruleForm).then(res => {
          	//数据请求，判断它不为null（隐式true的一种使用）
            if (res.data.data) {
              let { token } = res.data.data;
              let { status } = res.data.meta;     
              //判断后台数据的返回状态码  
              if (status === 200) {
                this.$router.push({ name: "Home" });
              } 
            }else{
                alert("登录失败")
                this.ruleForm={
                    username:"",
                    password:""
                }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }