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对象。类加载器分为启动类加载器、扩展类加载器…

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…

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…

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

在软件工程中,协程(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…

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开启蓝牙设置工程信息工程文件设置结果演示 概述 本项目旨…

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

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

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

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

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

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

内网渗透-搭建域环境

声明 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 ✍🏻作者简介:致力于网络安全领域,目前作为一名学习者,很荣幸成…

【Qt】使用QString的toLocal8Bit()导致的问题

问题 使用Qt发送一个Http post请求的时候,服务一直返回错误和失败信息。同样的url以及post参数,复制黏贴到postman里就可以发送成功。就感觉很神奇。 原因 最后排查出原因是因为参数中含有汉字而导致的编码问题。 在拼接post参数时,使用了…

H.265流媒体播放器EasyPlayer.js H.264/H.265播放器chrome无法访问更私有的地址是什么原因

EasyPlayer.js H5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)、WS、WEBRTC、FMP4视频直播与视频点播等多种协议,支持H.264、H.265、AAC、G711A、MP3等多种音视频编码格式,支持MSE、WASM、WebCodec等多种解码方…

【HarmonyOS】Hdc server port XXXX has been used.Configure environment variable

【HarmonyOS】Hdc server port XXXX has been used.Configure environment variable 一、 问题背景: 无法调试debug应用,IDE右下角显示该弹窗: Hdc server port XXXX has been used.Configure environment variable ‘OHOS_HDC_SERVER_POR…

AdaBoost 二分类问题

代码功能 生成数据集: 使用 make_classification 创建一个模拟分类问题的数据集。 数据集包含 10 个特征,其中 5 个是有用特征,2 个是冗余特征。 数据集划分: 将数据分为训练集(70%)和测试集(3…

初识Linux · 信号保存

目录 前言: Block pending handler表 信号保存 前言: 前文我们已经介绍了信号产生,在时间的学习线上,信号的学习分为预备知识,信号产生,信号保存,信号处理,本文我们学习信号保存…

01 最舒适的python开发环境

0 前言 我自己经过尝试,总结出python3开发环境的最舒适方式。 python3安装创建虚拟环境 venvjupyter notebook 笔记本安装vscode插件(Python, Pylance, Jupyter) 1 python3安装 ubuntu系统下安装最新版本的python3 sudo apt update sudo apt install python32 …