浅入深出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 上去,让大家可以直接下载下来运行,修改。

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券