浅入深出Vue：登录

上一篇我们实现了注册功能，现在我们来实现一下登录功能。

准备工作

• 新建登录组件

• 添加登录组件的路由对象

新建登录组件 Login.vue:

<template>
    <div>

    </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

添加路由对象：

{
    path: '/login',
    name: 'login',
    component: () => import('./views/Login.vue')
}

登录页面代码

这里就是一个熟悉的过程了， 可以依照注册的代码来写：

<template>
    <div>
        <el-row>
            <el-col :span="6" :offset="9">
                <el-form label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="model.username"></el-input>
                    </el-form-item>

                    <el-form-item label="密码">
                        <el-input type="password" v-model="model.password"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" size="small" @click="submit">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "Login",
        data() {
            return {
                model: {
                    username: '',
                    password: '',
                }
            }
        },

        methods: {
            submit() {
                axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/login', this.model)
                    .then(res => {
                        if(res.data.Code === 200) {
                            this.$message.success('登录成功');
                        }
                    })
            }
        }
    }
</script>

登录相比注册更简单一些， 因为这里无需在本地做判断，直接发起请求即可。

注册成功后跳转

上一篇中留了一个小坑， 那就是在注册成功之后跳转到登录页面：

代码：

submit() {
    if(this.model.password !== this.model.rePassword){
        this.$message.error('两次出入密码不一致.');
        return ;
    }

    axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/signup', this.model)
        .then(res => {
            if(res.data.Code === 200){
                this.$message.success("注册成功");
                this.$router.push('/login');
            }
        });
}

在请求成功后弹出提示消息后进行跳转，下面是效果：

写在后面

入门篇可能代码篇幅会较多一些，在后面若羽会将整个项目的代码传到 github 上去，让大家可以直接下载下来运行，修改。

入门篇主要是实践使用 axios、elementui、vue组件等方面的知识，看看代码是如何组织的。在这里并不会讲解如何优雅的写代码，或者是有哪些坑，这些内容都会在提高篇和深入篇进行详细讲解。

因为有对比才知道差距、好处、坏处。