vue实战（8）：完整开发登录页面（二）
接上一篇
放在一篇有点长，分第二篇
我错了！！给表演一个原地爆炸，说实话之前启动 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）退出登录
这一段大概就是这些，这边做的有点坑，以后再回头补！
下面是做商家详情页面，和这边没什么关系，应该不会再有什么问题。
