28.(前端)登录失败处理

1.概况

根据上几次文章讲解，大概的操作都用的差不多了。这里的改变就是判断一下状态码，返回的是不是为200，是的话做出登录操作，不是的话，抛出错误信息。

2.上代码

<!-- src/components/Login.vue -->
<template>
    <div class="login_container">
        <div class="login_box">
            <div class = "logo">
                <!-- 专门用于加载logo图标，创建一个单独的div -->
                <img src="../assets/logo.png" alt="">
            </div>
            <!-- 粘贴element中代码 -->
            <!-- 由于在这里element-ui引入了新的对象（el-form等等）需要去element中引入，来自form表单模块 -->
            <!-- 从form表单中获取数据使用 :model= v-mode= -->
            <!-- 从form表单中做数据验证使用 :rules= prop -->
            <!-- 通过ref绑定表单元素 -->
            <el-form ref="userRef" :model="userForm" :rules="rule" label-width="0px" class="form_style">
                <el-form-item prop="name">
                    <!-- 加入图标sufix-icon(放后面，我这用放前面)去form表单复制，想要什么图标去图标模块找 -->
                    <el-input v-model="userForm.name" prefix-icon="el-icon-user-solid" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input show-password v-model="userForm.pwd" prefix-icon="el-icon-unlock" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button @click="restForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import '../plugins/element.js'
// 默认导出
export default {
  name: 'Login',
  data(){
    return{
        userForm:{
            name:'',
            pwd:''
        },
        rule:{
            pwd:[
                { required: true, message: '请输入名称', trigger: 'blur' },
                { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
            ],
            name:[
                { required: true, message: '请输入密码', trigger: 'blur' }
            ]
        }
    }
  },
  methods: {
    restForm () {
        // 测试用：查看ref到底是什么
        // console.log(this);
        // 通过this获取到整个ref对象，找到我们在表单中设定的ref名，再调用内置重置方法
        this.$refs.userRef.resetFields()
    },
    login () {
        this.$refs.userRef.validate(async valid =>{
             // 测试用：输入框中全部存在数据则打印true
            // console.log(valid);
            if (!valid) return
            // 具体的登录操作
            // 由于发送请求是异步操作，希望等待完成再继续，转为同步操作 
            const { data: res } = await this.$axios.post('/api/user/login',this.$qs.stringify(this.userForm))
            if (res.status === 200) {
                // 1.登录成功后，获取到token，保存token，保存到sessionStorage中
                window.sessionStorage.setItem('token',res.data.token)
                // 登录成功抛出提示
                this.$msg.success(res.msg)
                // 跳转页面  等同于<router-link :to="..." replace></router-link>
                this.$router.push('/homeppp')
            }else{
                this.$msg.error(res.msg)
            }
        })
    }
  }
}
</script>

<style lang="less" scoped>
/*
scpoed：只针对当前组件的样式
less：语法格式
*/
.login_container{
    color: #FF8C00;
    background-color: #FF8C00;// 百度搜索颜色值
}
//  设计登录的方框
 .login_box{
    width: 450px;
    height: 300px;
    // 圆角
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    // 定位方框位置
    transform:translate(-50%,-50%);
 }
 .logo{
    height: 80px;
    width: 200px;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 10%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    // 阴影效果
    box-shadow: 0 0 10px #eee;
    img{
        // 充满整个边框
        width: 100%;
        height: 100%;
    }
 }
 .form_style{
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding: 0 10%;
    // 方框的盒子模型是要设置的，不然使用默认大小
    box-sizing: border-box;

 }
 .btns{
    display: flex;// 让他活动，然后置于右边
    justify-content: flex-end;
 }
</style>