淺入深出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組件等方面的知識，看看代碼是如何組織的。在這裏並不會講解如何優雅的寫代碼，或者是有哪些坑，這些內容都會在提升篇和深刻篇進行詳細講解。

由於有對比才知道差距、好處、壞處。