淺入深出Vue：註冊

基本佈局已經有了， 如今咱們來開始作咱們的註冊頁面~
固然須要註冊才能發表文章啊（糟老頭子壞得很， 我能夠只有我一我的能發啊）。

這裏咱們設定只有註冊才能發表文章，也就淡化了管理員這個概念。在開發中先將原型作出來，而後再對其進行迭代、重構來達到咱們最終想要的效果。

準備

1. 新建 vue 組件，編寫註冊頁面的代碼

2. 爲這個組件創建路由對象

這裏咱們依舊是採用 ElementUI 中的組件，由於是註冊，須要提交表單。

所以咱們來看看 ElementUI 中表單組件相關的文檔：

官方文檔：點擊查看

實現登陸頁面

首先先在 views 目錄下新建 Signup.vue組件。

而後編寫視圖代碼：

<template>
    <div>
        <el-form>
            <el-form-item prop="username" label="用戶名">
                <el-input></el-input>
            </el-form-item>

            <el-form-item prop="password" label="密碼">
                <el-input type="password"></el-input>
            </el-form-item>

            <el-form-item prop="rePassword" label="確認密碼">
                <el-input type="password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="small">註冊</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

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

<style scoped>

</style>

這裏只是實現了頁面， 尚未實現其餘的邏輯。

創建路由對象

其實路由對象應該和組件創建一塊兒，當你的組件新建以後，就應該去爲它建一個路由對象。

這樣你可以邊寫代碼，邊看實際效果。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/signup',
      name: 'signup',
      component: () => import('./views/Signup.vue')
    }
  ]
})

好了， 如今咱們能夠來看看效果：

這個效果有點感人啊，整個元素所有鋪開在頁面上，徹底沒有用戶體驗了。

不行， 咱們得改改，雖然說不是專業的設計師。可是基本的設計仍是要有的

重構佈局

這裏咱們依舊在 ElementUI 中查找看是否有現成的解決方案：

佈局文檔：點擊查看

很好， 這裏咱們能夠利用 el-row, el-col 來進行佈局。

它是基於24分欄的柵欄佈局，咱們想要讓這個表單居中應該怎麼辦呢？

要居中的話， 左右兩邊的柵欄數相等便可，也就實現了表單這個塊元素是位於水平居中的。

代碼：

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

                    <el-form-item prop="password" label="密碼">
                        <el-input type="password"></el-input>
                    </el-form-item>

                    <el-form-item prop="rePassword" label="確認密碼">
                        <el-input type="password"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" size="small">註冊</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

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

<style scoped>

</style>

上面代碼中的 6 和 9都是計算得來的，總共是24，左右兩邊又要相等，那麼中間的表單佔用了 6格，還剩下18格。平分下來每邊就是9格了。

如今效果就好不少了：

編寫登陸邏輯

頁面已經完成， 剩下的就是編寫註冊邏輯：

• 點擊註冊，首先驗證密碼和確認密碼是否一致

• 密碼一致則向後端接口發起請求

這裏的接口咱們使用 postman 模擬出來的接口。

在這以前咱們先把數據定義一下， 而且綁定到表單元素中去：

data() {
    return {
        model: {
            username: '',
            password: '',
            rePassword: ''
        }
    };
},

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

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

                    <el-form-item prop="rePassword" label="確認密碼">
                        <el-input type="password" v-model="model.rePassword"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" size="small">註冊</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

首先給註冊按鈕添加對應事件：

<el-button type="primary" size="small" @click="submit">註冊</el-button>

而後在 methods 中實現此函數：

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("註冊成功");
            }
        });
}

實際效果：

這段邏輯中使用了 axios 庫用來向後端接口發起異步請求，具體的使用方式能夠查閱官方文檔：

看雲文檔

到底爲止，註冊功能算是完成了80%了，剩下的等把登陸頁面寫完以後，再加上：

• 註冊成功後跳轉到登陸頁面便可