uni-app用户登录⑫

文章目录

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

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

一、前端数据整理
  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.vueasync _sendUserInfo (data) {const res = await this.$http.user_login(data)if (res) {this.updateUserInfo(res)uni.showToast({title: '登录成功', icon: 'none',})setTimeout(() => {// #ifdef H5uni.switchTab({url: '/pages/index/index'})// #endif// #ifndef H5uni.navigateBack()// #endif}, 2000)}}// mutation.jsexport 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
    2. 短信参考配置地址:https://uniapp.dcloud.net.cn/uniCloud/send-sms
  3. 前端接受返回值,保存验证码,加入验证码验证规则
  4. 提交用户数据发送,指定参数 phone 及 type 类型

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/60786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日八股——JVM组成

直接上图 JVM(Java虚拟机)是运行Java字节码的虚拟机。它主要由以下几个部分组成: 1. 类加载器(ClassLoader) 负责加载class文件到内存中,并生成对应的Class对象。类加载器分为启动类加载器、扩展类加载器…

ElementUI的日期组件中禁止选择小时、分钟、秒

分不同版本,如果你是elementplus,也就是vue3版本,你就直接可用方案1;如果你是vue2版本(扒拉了一下源码,组间不支持),方案2、3都行,具体看自己需求。 1、‌使用:disable-…

Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在城市化进…

Linux(CentOS 7) yum一键安装mysql8

1、通过yum安装 (1)下载mysql 在Linux找个地方输入以下命令 wget https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm (2)安装mysql yum 仓库配置文件 [rootVM-8-15-centos ~]# sudo rpm -Uvh mysql80-c…

PySpark3:Row对象常见操作以及Row、RDD、DataFrame互相转换

目录 一、Row对象常见操作 二、Row、RDD、DataFrame互相转换 1、RDD—>DataFrame 2、DataFrame—>RDD 3、DataFrame—>Row 4、Row—>DataFrame 一、Row对象常见操作 from pyspark.sql import Row# 创建一个Row对象 row Row(name"张三", age25)# …

K8S单节点部署及集群部署

1.Minikube搭建单节点K8S 前置条件:安装docker,注意版本兼容问题 # 配置docker源 wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo# 安装docker环境依赖 yum install -y yum-utils device-m…

PyQt入门指南六十 与Python其他库的集成方法

PyQt是一个强大的GUI库,它可以与Python的其他库无缝集成,以实现更复杂的功能。以下是一些常见的集成方法和示例: 1. NumPy NumPy是Python中用于科学计算的基础库。您可以在PyQt应用程序中使用NumPy来处理数据和进行数值计算。 import sys …

说说软件工程中的“协程”

在软件工程中,协程(coroutine)是一种程序运行的方式,可以理解成“协作的线程”或“协作的函数”。以下是对协程的详细解释: 一、协程的基本概念 定义:协程是一组序列化的子过程,用户能像指挥家…

Android从Drawable资源Id直接生成Bitmap,Kotlin

Android从Drawable资源Id直接生成Bitmap,Kotlin val t1 System.currentTimeMillis()val bmp getBmpFromDrawId(this, R.mipmap.ic_launcher_round)Log.d("fly", "1 ${bmp?.byteCount} h${bmp?.height} w${bmp?.width} cost time${System.currentTimeMillis…

shell命令笔记

一、shell基本基础知识 1. shell命令中捕获上一个命令执行是否成功,通过判断 $? 是否为0,为0则表示成功,其他错误码则表示执行失败。 2. sheel命令中,变量赋值时默认都是字符串类型。赋值时须注意单引号与双引号的区别&#xf…

MySql 日期周处理方式

MySql 日期周处理方式 最近在做数仓相关工作,最近遇到 几个问题, 1、计算指定日期是一年中的第几周,周一为周的第一天 2、计算周的开始时间,结束时间 3、计算周对应的年 比如 2023-01-01 WEEKOFYEAR(2023-01-01) 是2022年的52周&…

多模态大模型简介

多模态大模型是机器学习领域的一个新兴趋势,它结合了文本、图像、音频等多种数据模态,以实现更全面和深入的信息理解和处理。这种模型能够处理跨模态任务,如图像标注、视觉问答、文本到图像的生成等,是人工智能领域的重要进展。 技…

微服务即时通讯系统的实现(客户端)----(1)

目录 1. 项目整体介绍1.1 项目概况1.2 界面预览和功能介绍1.3 技术重点和服务器架构 2. 项目环境搭建2.1 安装Qt62.3 安装vcpkg2.3 安装protobuf2.4 构建项目2.5 配置CMake属性 3. 项目核心数据结构的实现3.1 创建data.h存放核心的类3.2 工具函数的实现3.3 创建编译开关 4. 界面…

STM32WB55RG开发(3)----生成 BLE 程序连接手机APP

STM32WB55RG开发----3.生成 BLE 程序连接手机APP 概述硬件准备视频教学样品申请源码下载参考程序选择芯片型号配置时钟源配置时钟树RTC时钟配置RF wakeup时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙设置工程信息工程文件设置结果演示 概述 本项目旨…

MongoDB自定义顺序排序

自定义顺序排序方法 以下是在MongoDB中实现自定义顺序排序的方法: 在数据集中添加一个自定义字段。使用update命令或$set操作符为每个文档添加自定义字段。在我们的例子中,我们可以通过以下命令为每个学生添加”grade”字段: db.students.…

Unity类银河战士恶魔城学习总结(P124 CharacterStats UI玩家的UI)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址:https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了玩家属性栏,仓库,物品栏UI的制作 UI_StatSlot.cs 这个脚本是用来在Unity的UI上显示玩家属性&#xf…

uniapp小程序分享使用canvas自定义绘制 vue3

使用混入结合canvas做小程序的分享 在混入里面定义一个全局共享的分享样式,在遇到特殊页面需要单独处理 utils/share.js import { ref } from vue; export default {onShow() {// 创建时设置统一页面的默认值uni.$mpShare {title: 分享的标题,path: /pages/home/…

Python实现PSO粒子群优化算法优化CNN-Transformer回归模型(优化权重和阈值)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 本项目旨在利用粒子群优化(PSO)算法优化卷积神经网络(CNN&…

kafka消费数据太慢了,给优化下

原代码 public class KafkaConsumerDemo {public static void main(String[] args) {int numConsumers 5; // 增加消费者的数量for (int i 0; i < numConsumers; i) {new Thread(new KafkaConsumerThread()).start();}}static class KafkaConsumerThread implements Runn…

【linux】如何扩展磁盘容量(VMware虚拟机)-转载

如何扩展磁盘容量(VMware虚拟机) 一、前置准备工作 扩展虚拟机磁盘前&#xff0c;需要先把虚拟机关机才能进行扩展磁盘操作 1.选择虚拟机设置&#xff0c;如下图所示 2.输入你想扩展的磁盘容量&#xff0c;以本次实操为例&#xff0c;我这里输入的30G&#xff08;具体按照实…