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

一、前端数据整理

1. 定义发送函数，将用户信息以及本次请求的用户登录类型传递给后端

     this._sendUserInfo({ ...res, type: this.type })
   

2. 创建请求方法 user_login

3. 定义 user_login 函数

   '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' ? '获取用户信息失败，请检查用户名或密码' : '验证码或手机号码错误'
     }
   };
   

4. 前端接收返回信息，进行数据处理

   1. 跳转界面到上一个历史记录
   2. 存储用户信息

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

1. 创建实例化 Store 对象

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

1. main.js 中进行 store 注册

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

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

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

一、验证码处理

1. 获取手机验证状态

2. 保证 send-code 获取 form 对象

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

3. 通过 form 进行手机号码单独验证，并获取手机号码

   const { phone } = await form.validateField(["phone"]);
   

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

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

二、数据发送

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