基本佈局已經有了, 如今咱們來開始作咱們的註冊頁面~
固然須要註冊才能發表文章啊(糟老頭子壞得很, 我能夠只有我一我的能發啊)。javascript
這裏咱們設定只有註冊才能發表文章,也就淡化了管理員這個概念。在開發中先將原型作出來,而後再對其進行迭代、重構來達到咱們最終想要的效果。html
新建 vue
組件,編寫註冊頁面的代碼vue
爲這個組件創建路由對象java
這裏咱們依舊是採用 ElementUI
中的組件,由於是註冊,須要提交表單。webpack
所以咱們來看看 ElementUI
中表單組件相關的文檔:ios
官方文檔:點擊查看web
首先先在 views
目錄下新建 Signup.vue
組件。vue-router
而後編寫視圖代碼:axios
<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%
了,剩下的等把登陸頁面寫完以後,再加上: