uni-app用户登录⑫

文章目录

- 十九、用户登录-账户名密码登录
- - - 一、前端数据整理
    - [二、使用 store 进行用户信息存储](#二、使用 store 进行用户信息存储)
- 二十、用户登录-手机验证码登录
- - - 一、验证码处理
    - 二、数据发送

十九、用户登录-账户名密码登录

一、前端数据整理

定义发送函数，将用户信息以及本次请求的用户登录类型传递给后端
react 复制代码
```
  this._sendUserInfo({ ...res, type: this.type })
```
创建请求方法 user_login

定义 user_login 函数

react 复制代码

'use strict';
// 获取数据库引用
const db = uniCloud.database()
exports.main = async (event, context) => {
  const { loginName, password, phone, type } = event;

  const { affectedDocs, data } = await db.collection('user')
    .aggregate()
    .match(type === 'account' ? { loginName, password } : { phone })
    .end()

  //返回数据给客户端
  return affectedDocs ? {
    code: 0,
    msg: "获取用户信息成功",
    data: data[0]
  } : {
    code: 1,
    msg: type === 'account' ? '获取用户信息失败，请检查用户名或密码' : '验证码或手机号码错误'
  }
};

前端接收返回信息，进行数据处理
1. 跳转界面到上一个历史记录
2. 存储用户信息

二、使用 store 进行用户信息存储

创建实例化 Store 对象

react 复制代码

import Vue from 'vue'
import VueX from 'vuex'
import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'


Vue.use(VueX)

export default new VueX.Store({
  state,
  actions,
  mutations
})

main.js 中进行 store 注册

获取用户信息之后，进行用户信息保存操作

javascript 复制代码

// login.vue

   async _sendUserInfo (data) {
      const res = await this.$http.user_login(data)
      if (res) {
        this.updateUserInfo(res)
        uni.showToast({
          title: '登录成功', icon: 'none',
        })
        setTimeout(() => {
           // #ifdef H5
          uni.switchTab({
            url: '/pages/index/index'
          })
          // #endif
          // #ifndef H5
          uni.navigateBack()
          // #endif
        }, 2000)
      }
    }

// mutation.js

export default {
  updateUserInfo(state,userInfo) {
    uni.setStorageSync('userInfo',userInfo);
    state.userInfo = userInfo;
  }
}

二十、用户登录-手机验证码登录

一、验证码处理

获取手机验证状态

保证 send-code 获取 form 对象

react 复制代码

// SendCode.vue
this.$emit('getForm', form => this._sendCode(form))

通过 form 进行手机号码单独验证，并获取手机号码
javascript 复制代码
```
const { phone } = await form.validateField(["phone"]);
```

启动定时器，调整文本显示内容

javascript 复制代码

const timeId = setInterval(() => {
  if (this.time === 1) {
    clearInterval(timeId);
    this.runTime = false;
    this.time = 60;
    return;
  }
  this.time--;
}, 1000);

二、数据发送

数据发送，创建云函数
定义 unicloud 短信服务
1. unicloud 开发中心地址：https://dev.dcloud.net.cn/uniSms
3. 短信参考配置地址：https://uniapp.dcloud.net.cn/uniCloud/send-sms
前端接受返回值，保存验证码，加入验证码验证规则
提交用户数据发送，指定参数 phone 及 type 类型