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)退出登录

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

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

点个赞呗!

你可能感兴趣的:(vue实战(8):完整开发登录页面(二))