电商管理后台的登录流程

**一 登录的流程

1.登录的form表单

    <!-- ref="loginFormRef" 代表重置表单 -->
    <el-form class="wzl_login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
        <!-- 用户名 -->
        <!-- prop="username 代表验证" -->
        <el-form-item prop="username">
            <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
            <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item class="wzl_btns">
             <el-button type="primary" @click="login">登录</el-button>
             <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- 登录表单区域结束-->

2.登录的表单校验

data() {
    return {
        // 这是登录表单的数据绑定对象
        loginForm:{
            username:'',
            password:'',
        },
        //这是表单的验证正则的对象55
        loginFormRules:{
            username:[
                { required: true, message: '请输入登录用户名', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password:[
                { required: true, message: '请输入登录密码', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 6 个字符', trigger: 'blur' }
            ],
        }
    };
  },

3.登录的接口调用

 methods: {
    //   点击重置按钮，重置登录表单
      resetLoginForm(){
          this.$refs.loginFormRef.resetFields();
      },
      login(){
              if(this.loginForm.username == "" || this.loginForm.password == ""){
                  this.$message.error("用户名和密码不能为空");
                  return false;
              }
              //获取线上接口
              this.$axios.post("https://www.liulongbin.top:8888/api/private/v1/login",{
                  username:this.loginForm.username,//用户名
                  password:this.loginForm.password,//用户密码
              }).then(res=>{
                  console.log(res)
                  if(res.meta.status == 200){
                      //成功信息提示
                      this.$message.success(res.meta.msg);
                    // 登录成功吧token值存到本地
                      sessionStorage.setItem("wangzhaolong",res.data.token);
                      //登录成功跳转到后台首页
                      this.$router.push('/admin/wanghome')
                  }else{
                      //失败提示的信息
                      this.$message.error(res.meta.msg)
                  }
              })
      }
  }

4.你对登录的流程以及总结？

• 我们先在data中定义一个loginForm数组，数组里面存放登录的用户名username和登录的密码password
• 在通过el-form :model 进行双向绑定 ，然后在input框内 绑定对应的属性名
• 然后我们在methods方法里进行掉接口
• 我们通过this.$axios.get(“路径名”,后面跟上对应的参数)，然后判断他后台返回来的状态 如果等于200的情况下，让他跳转到后台的首页并且把他的token值存储到本地，然后提示用户登录成功，不等于200的情况下让他，提示用户登录失败