vue實(shí)戰(zhàn)（8）：完整開發(fā)登錄頁面（二）

接上一篇

放在一篇有點(diǎn)長搀罢，分第二篇

我錯(cuò)了；柔！給表演一個(gè)原地爆炸榔至，說實(shí)話之前啟動(dòng) MongoDB 有警告抵赢，本來以為影響不大，現(xiàn)在登錄請求 post 請求不到洛退，搞了不短時(shí)間瓣俯，我決定放棄這邊，再一次凸顯的是不懂 MongoDB 還真不行兵怯。

當(dāng)然彩匕，學(xué)習(xí)數(shù)據(jù)庫與后端語言的計(jì)劃在下個(gè)學(xué)習(xí)項(xiàng)目。

0. 其它

1. 動(dòng)態(tài)一次性短信驗(yàn)證碼

在 api 文件中補(bǔ)充完相關(guān)的接口

// [6宙攻、用戶名密碼登陸](#6用戶名密碼登陸)<br/>
export const reqPwdLogin = ({ name, pwd, captcha }) => ajax(`${BASE_URL}/login_pwd`, { name, pwd, captcha }, 'POST')

// [7奠货、發(fā)送短信驗(yàn)證碼](#7發(fā)送短信驗(yàn)證碼)<br/>
export const reqSendCode = (phone) => ajax(`${BASE_URL}/sendcode`, { phone })

// [8、手機(jī)號(hào)驗(yàn)證碼登陸](#8手機(jī)號(hào)驗(yàn)證碼登陸)<br/>
export const reqSmsLogin = ({ phone, code }) => ajax(`${BASE_URL}/login_sms`, { phone, code }, 'POST')

// [9座掘、根據(jù)會(huì)話獲取用戶信息](#9根據(jù)會(huì)話獲取用戶信息)<br/>
export const reqUserInfo = () => ajax(`${BASE_URL}/userinfo`)

// [10递惋、用戶登出](#10用戶登出)<br/>
export const reqLogout = () => ajax(`${BASE_URL}/logout`)

發(fā)短信借助容聯(lián).云通訊平臺(tái)
容聯(lián).云通訊平臺(tái)
使用這個(gè)平臺(tái)先要注冊，注冊完成后會(huì)送8元錢溢陪，測試的時(shí)候發(fā)一條短信收費(fèi)是6分錢萍虽，可以用不短時(shí)間

容聯(lián).云通訊平臺(tái)個(gè)人信息，這邊的信息比較重要形真，要用到

注冊完之后需要填寫測試號(hào)碼杉编，后面發(fā)送短信的時(shí)候要用到

填寫測試號(hào)碼
后臺(tái)代碼填寫個(gè)人信息
后臺(tái)代碼中，把這一部分的信息改成剛剛注冊后得到的信息

修改信息
發(fā)送 ajax 請求,發(fā)送手機(jī)驗(yàn)證碼
補(bǔ)充完前面的 ajax 請求

async righttime () {
      // 倒計(jì)時(shí)
      if (!this.timenum) {
        this.timenum = 30 // 初始值為30秒
        let clertime = setInterval(() => { // 計(jì)時(shí)器
          this.timenum--
          if (this.timenum <= 0) { // 如果減到0則清楚計(jì)時(shí)器
            clearInterval(clertime)
          }
        }, 1000)
        // ajax請求,發(fā)送手機(jī)驗(yàn)證碼
        const result = await reqSendCode(this.phone)
        if (result.code === 1) {
          // 如果發(fā)送失敗，顯示提示
          this.showalert(result.msg)
          // 并且停止倒計(jì)時(shí)
          if (this.timenum) {
            this.timenum = 0
            clearInterval(clertime)
            clertime = undefined
          }
        }
      }
    }

接受短信成功

收到驗(yàn)證碼

看一下后臺(tái)打印

后臺(tái)打印

2. 數(shù)據(jù)處理

引入封裝接口請求函數(shù)
在 Login.vue 頁面引入 import { reqPwdLogin, reqSendCode, reqSmsLogin } from '../../api/index'
發(fā)送 ajax 請求
const result = await reqSendCode(this.phone)
const result = await reqSmsLogin(phone, code)
統(tǒng)一處理數(shù)據(jù)結(jié)果

 if (result.code === 0) {
        const user = result.data
        // 保存user到vuex
        // 跳轉(zhuǎn)入個(gè)人中心界面
        this.$router.dispatch('Profile')
      } else {
        const msg = result.msg
        // 如果發(fā)送失敗邓馒，顯示提示
        this.showalert(msg)
        // 并且停止倒計(jì)時(shí)
        if (this.timenum) {
          this.timenum = 0
          clearInterval(this.clertime)
          this.clertime = undefined
        }
      }

關(guān)于this.$router.push嘶朱、replace、go的用法和區(qū)別
vue store存儲(chǔ)commit 和dispatch的區(qū)別

3. 結(jié)束

這面暫時(shí)無法進(jìn)行绒净，先跳過见咒。
這邊主要內(nèi)容為：
1）保存登錄信息到 vuex
2）改變我的頁面的信息狀態(tài)
3）保存登錄信息
4）退出登錄

這一段大概就是這些，這邊做的有點(diǎn)坑挂疆，以后再回頭補(bǔ)！

下面是做商家詳情頁面下翎，和這邊沒什么關(guān)系缤言，應(yīng)該不會(huì)再有什么問題。

點(diǎn)個(gè)贊唄视事！