# 二、用戶登錄## 功能介紹測試賬號：- 13911111111 - 246810也可以通過我們這個應用的移動端注冊一個自己的賬號：地址：http://vue-toutiao-m.lipengzhou.com/#/login- 手機號：你自己的- 驗證碼：- 246810- 也可以動態接收真實的驗證碼## 創建組件并配置路由1、創建 `src/views/login/index.vue````html <template><div class="login-container">登錄頁面</div> </template><script>export default {name: 'LoginIndex',components: {},props: {},data() {return {}},computed: {},watch: {},created() {},mounted() {},methods: {}} </script><style scoped lang="less"></style> ```> 自定義代碼段：百度一下。 > > Sublime: Sublime 自定義代碼段 > > Visual Studio Code：Visual Studio Code 代碼段2、將登陸頁面組件配置到路由中```js import Vue from 'vue' import VueRouter from 'vue-router' + import Login from '@/views/login'Vue.use(VueRouter)// 路由配置表 const routes = [ + { + path: '/login', + name: 'login', + component: Login + } ]const router = new VueRouter({routes })export default router```3、最后手動輸入 `/login` 訪問測試。## 頁面布局```html <template><div class="login-container"><!--el-form 表單組件每個表單項都必須使用 el-form-item 組件包裹--><div class="login-form-wrap"><div class="login-head"><div class="logo"></div></div><el-form class="login-form" ref="form" :model="user"><el-form-item><el-input v-model="user.mobile" placeholder="請輸入手機號"></el-input></el-form-item><el-form-item><el-input v-model="user.code" placeholder="請輸入驗證碼"></el-input></el-form-item><el-form-item><el-checkbox v-model="checked">我已閱讀并同意用戶協議和隱私條款</el-checkbox></el-form-item><el-form-item><el-button class="login-btn" type="primary" @click="onSubmit">登錄</el-button></el-form-item></el-form></div></div> </template><script>export default {name: 'LoginIndex',components: {},props: {},data() {return {user: {mobile: '', // 手機號code: '' // 驗證碼},checked: false // 是否同意協議的選中狀態}},computed: {},watch: {},created() {},mounted() {},methods: {onSubmit() {console.log('submit!')}}} </script><style scoped lang="less">.login-container {position: fixed;left: 0;top: 0;right: 0;bottom: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;background: url('./login_bg.jpg') no-repeat;background-size: cover;.login-form-wrap {min-width: 300px;padding: 30px 50px 10px;background-color: #fff;.login-head {display: flex;justify-content: center;.logo {width: 200px;height: 57px;background: url('./logo_index.png') no-repeat;background-size: contain;}}.login-form {.login-btn {width: 100%;}}}} </style> ```## 實現基本登錄功能思路：- 給登陸按鈕注冊點擊事件 - 獲取表單數據 - 請求登錄 - 處理后端響應結果- 成功處理- 失敗處理```js onLogin () {// 獲取表單數據（根據接口要求綁定數據）const user = this.user// 表單驗證// 驗證通過，提交登錄request({method: 'POST',url: '/mp/v1_0/authorizations',// data 用來設置 POST 請求體data: user}).then(res => {console.log(res)// 登錄成功}).catch(err => {console.log('登錄失敗', err)// 登錄失敗}) } ```## 登錄消息提示> 參考：[Message 消息提示](https://element.eleme.cn/#/zh-CN/component/message)```js // 普通提示消息 this.$message('這是一條消息提示')// 成功提示消息 this.$message({message: '恭喜你，這是一條成功消息',type: 'success' })// 警告提示消息 this.$message({message: '警告哦，這是一條警告消息',type: 'warning' })// 錯誤提示消息 this.$message.error('錯了哦，這是一條錯誤消息') ```下面是我們給登錄功能增加的消息提示：```js onLogin () {// 獲取表單數據（根據接口要求綁定數據）const user = this.user// 表單驗證// 驗證通過，提交登錄request({method: 'POST',url: '/mp/v1_0/authorizations',// data 用來設置 POST 請求體data: user}).then(res => {console.log(res)// 登錄成功this.$message({message: '登錄成功',type: 'success'})}).catch(err => { // 登錄失敗console.log('登錄失敗', err)this.$message.error('登錄失敗，手機號或驗證碼錯誤')}) } ```## 登錄中 loading 提示兩個作用：- 防止網絡請求慢出現用戶多次點擊觸發登錄請求- 一種方式是在請求期間把交互按鈕禁用不允許被點擊- 一種方式就是展示 loading 不允許被點擊 - 交互反饋1、在 data 中添加數據用來控制登錄按鈕的 loading 狀態<img src="assets/image-20200420190756031.png" alt="image-20200420190756031" style="zoom: 50%;" />2、給登錄按鈕綁定 loading 狀態<img src="assets/image-20200420190820427.png" alt="image-20200420190820427" style="zoom:50%;" />3、在登錄處理中```js onLogin () {// 獲取表單數據（根據接口要求綁定數據）const user = this.user// 表單驗證// 驗證通過，提交登錄// 開啟登陸中 loading...this.loginLoading = truerequest({method: 'POST',url: '/mp/v1_0/authorizations',// data 用來設置 POST 請求體data: user}).then(res => {console.log(res)// 登錄成功this.$message({message: '登錄成功',type: 'success'})// 關閉 loadingthis.loginLoading = false}).catch(err => { // 登錄失敗console.log('登錄失敗', err)this.$message.error('登錄失敗，手機號或驗證碼錯誤')// 關閉 loadingthis.loginLoading = false}) } ```## 表單驗證參考文檔：[Element - Form 表單 -> 表單驗證](https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan)Form 組件提供了表單驗證的功能，只需要通過 `rules` 屬性傳入約定的驗證規則，并將 Form-Item 的 `prop` 屬性設置為需校驗的字段名即可。校驗規則參見 [async-validator](https://github.com/yiminghe/async-validator)下面是內置的基本驗證規則：| 規則 | 說明 | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | required | 必須的，例如校驗內容是否非空 | | pattern | 正則表達式，例如校驗手機號碼格式、校驗郵箱格式 | | range | 使用 min 和 max 屬性定義范圍。對于字符串和數組類型，將根據長度進行比較，對于數字類型，數字不得小于 min，也不得大于 max。 | | len | 要驗證字段的確切長度，請指定 len 屬性。對于字符串和數組類型，對 length 屬性執行比較，對于數字類型，此屬性指示數字的完全匹配，即，它可能僅嚴格等于 len。如果 len 屬性與最小和最大范圍屬性組合，則 len 優先。 | | enum | 要從可能值列表中驗證值，請使用帶枚舉屬性的枚舉類型，列出該字段的有效值，例如：<br />var descriptor = { role: {type: "enum", enum: ['admin', 'user', 'guest']} } |如果內置的校驗規則不滿足，也可以自定義校驗規則，參見：[Element - Form 表單 -> 自定義校驗規則](https://element.eleme.cn/#/zh-CN/component/form#form-biao-dan)下面我們項目中登錄表單驗證的配置。（1）模板中的配置<img src="assets/image-20200421105927545.png" alt="image-20200421105927545" style="zoom:50%;" />> 1、給 el-from 組件綁定 model 為表單數據對象 > > 2、給需要驗證的表單項 el-form-item 綁定 prop 屬性 > > - 注意：prop 屬性需要指定表單對象中的數據名稱 > > 3、通過 el-from 組件的 rules 屬性配置驗證規則 > > 4、ref 的作用主要用來獲取表單組件手動觸發驗證（2）在 data 中定義驗證規則```js formRules: { // 表單驗證規則配置// 要驗證的數據名稱：規則列表[]mobile: [{ required: true, message: '請輸入手機號', trigger: 'change' },{ pattern: /^1[3|5|7|8|9]\d{9}$/, message: '請輸入正確的號碼格式', trigger: 'change' }],code: [{ required: true, message: '驗證碼不能為空', trigger: 'change' },{ pattern: /^\d{6}$/, message: '請輸入正確的驗證碼格式' }],agree: [{// 自定義校驗規則：https://element.eleme.cn/#/zh-CN/component/form#zi-ding-yi-xiao-yan-gui-ze// 驗證通過：callback()// 驗證失敗：callback(new Error('錯誤消息'))validator: (rule, value, callback) => {if (value) {callback()} else {callback(new Error('請同意用戶協議'))}},// message: '請勾選同意用戶協議',trigger: 'change'}] } ```（3）在登錄的時候調用驗證```js onLogin () {// 獲取表單數據（根據接口要求綁定數據）// const user = this.user// 表單驗證// validate 方法是異步的this.$refs['login-form'].validate(valid => {// 如果表單驗證失敗，停止請求提交if (!valid) {return}// 驗證通過，請求登錄this.login()}) },login () {// 開啟登陸中 loading...this.loginLoading = truerequest({method: 'POST',url: '/mp/v1_0/authorizations',// data 用來設置 POST 請求體data: this.user}).then(res => {console.log(res)// 登錄成功this.$message({message: '登錄成功',type: 'success'})// 關閉 loadingthis.loginLoading = false}).catch(err => { // 登錄失敗console.log('登錄失敗', err)this.$message.error('登錄失敗，手機號或驗證碼錯誤')// 關閉 loadingthis.loginLoading = false}) } ```## 封裝請求模塊對于項目中的請求操作：- 接口請求可能需要重用 - 實際工作中，接口非常容易變動，改起來麻煩我們建議的做法是把所有的請求都封裝成函數然后統一的組織到模塊中進行管理，這樣做的好處就是：管理維護更方便，也好重用。下面是我們優化封裝請求的具體操作。1、創建 `src/api/user.js`，封裝登錄請求方法```js /*** 用戶相關請求模塊*/ import request from '@/utils/request'// 用戶登錄 export const login = (data) => {return request({method: 'POST',url: '/mp/v1_0/authorizations',// data 用來設置 POST 請求體data}) } ```2、在登錄組件中加載使用```js import { login } from '@/api/user' ```<img src="assets/image-20200421113705729.png" style="zoom:50%;" />3、最后測試登錄功能是否正常## 總結

?

總結

以上是生活随笔為你收集整理的前端学习（2454）：用户登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。