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）：开发店铺详情（一）
vue实战（11）：开发店铺详情（二）
vue实战（12）：完结 + 附学习视频

1. 动态一次性短信验证码

---

• 在 api 文件中补充完相关的接口

// [6、用户名密码登陆](#6用户名密码登陆)

export const reqPwdLogin = ({ name, pwd, captcha }) => ajax(`${BASE_URL}/login_pwd`, { name, pwd, captcha }, 'POST')

// [7、发送短信验证码](#7发送短信验证码)

export const reqSendCode = (phone) => ajax(`${BASE_URL}/sendcode`, { phone })

// [8、手机号验证码登陆](#8手机号验证码登陆)

export const reqSmsLogin = ({ phone, code }) => ajax(`${BASE_URL}/login_sms`, { phone, code }, 'POST')

// [9、根据会话获取用户信息](#9根据会话获取用户信息)

export const reqUserInfo = () => ajax(`${BASE_URL}/userinfo`)

// [10、用户登出](#10用户登出)

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
        }
      }

• 关于this.$router.push、replace、go的用法和区别

• vue store存储commit 和dispatch的区别

3. 结束

这面暂时无法进行，先跳过。
这边主要内容为：
1）保存登录信息到 vuex
2）改变 我的 页面的信息状态
3）保存登录信息
4）退出登录

这一段大概就是这些，这边做的有点坑，以后再回头补！

下面是做商家详情页面，和这边没什么关系，应该不会再有什么问题。

点个赞呗！