接上一篇
放在一篇有點長，分第二篇
我錯了！！給表演一個原地爆炸，說實話之前啟動 MongoDB 有警告，本來以為影響不大，現在登錄請求 post 請求不到，搞了不短時間，我決定放棄這邊，再一次凸顯的是不懂 MongoDB 還真不行。
當然，學習數據庫與后端語言的計划在下個學習項目。
0. 其它
vue實戰（1）：准備與資料整理
vue實戰（2）：初始化項目、搭建底部導航路由
vue實戰（3）：底部導航顯示、搭建各模塊靜態頁面、添加登錄頁頁面與路由
vue實戰（4）：postman測試數據、封裝ajax、使用vuex管理狀態
vue實戰（5）：總結一
vue實戰（6）：異步顯示數據、開發Star組件
vue實戰（7）：完整開發登錄頁面（一）
vue實戰（8）：完整開發登錄頁面（二）
vue實戰（9）：總結二
vue實戰（10）：開發店鋪詳情（一）
1. 動態一次性短信驗證碼
- 在 api 文件中補充完相關的接口
// [6、用戶名密碼登陸](#6用戶名密碼登陸)<br/>
export const reqPwdLogin = ({ name, pwd, captcha }) => ajax(`${BASE_URL}/login_pwd`, { name, pwd, captcha }, 'POST')
// [7、發送短信驗證碼](#7發送短信驗證碼)<br/>
export const reqSendCode = (phone) => ajax(`${BASE_URL}/sendcode`, { phone })
// [8、手機號驗證碼登陸](#8手機號驗證碼登陸)<br/>
export const reqSmsLogin = ({ phone, code }) => ajax(`${BASE_URL}/login_sms`, { phone, code }, 'POST')
// [9、根據會話獲取用戶信息](#9根據會話獲取用戶信息)<br/>
export const reqUserInfo = () => ajax(`${BASE_URL}/userinfo`)
// [10、用戶登出](#10用戶登出)<br/>
export const reqLogout = () => ajax(`${BASE_URL}/logout`)
-
發短信借助容聯.雲通訊平台
容聯.雲通訊 平台
使用這個平台先要注冊，注冊完成后會送8元錢，測試的時候發一條短信收費是6分錢，可以用不短時間
注冊完之后需要填寫測試號碼，后面發送短信的時候要用到
-
后台代碼填寫個人信息
后台代碼中，把這一部分的信息改成剛剛注冊后得到的信息
-
發送 ajax 請求,發送手機驗證碼
補充完前面的 ajax 請求
async righttime () {
// 倒計時
if (!this.timenum) {
this.timenum = 30 // 初始值為30秒
let clertime = setInterval(() => { // 計時器
this.timenum--
if (this.timenum <= 0) { // 如果減到0則清楚計時器
clearInterval(clertime)
}
}, 1000)
// ajax請求,發送手機驗證碼
const result = await reqSendCode(this.phone)
if (result.code === 1) {
// 如果發送失敗，顯示提示
this.showalert(result.msg)
// 並且停止倒計時
if (this.timenum) {
this.timenum = 0
clearInterval(clertime)
clertime = undefined
}
}
}
}
- 接受短信成功
看一下后台打印
2. 數據處理
- 引入封裝接口請求函數
在 Login.vue 頁面引入import { reqPwdLogin, reqSendCode, reqSmsLogin } from '../../api/index' - 發送 ajax 請求
const result = await reqSendCode(this.phone)
const result = await reqSmsLogin(phone, code) - 統一處理數據結果
if (result.code === 0) {
const user = result.data
// 保存user到vuex
// 跳轉入個人中心界面
this.$router.dispatch('Profile')
} else {
const msg = result.msg
// 如果發送失敗，顯示提示
this.showalert(msg)
// 並且停止倒計時
if (this.timenum) {
this.timenum = 0
clearInterval(this.clertime)
this.clertime = undefined
}
}
3. 結束
這面暫時無法進行，先跳過。
這邊主要內容為：
1）保存登錄信息到 vuex
2）改變 我的 頁面的信息狀態
3）保存登錄信息
4）退出登錄
這一段大概就是這些，這邊做的有點坑，以后再回頭補！
下面是做商家詳情頁面，和這邊沒什么關系，應該不會再有什么問題。
