uni-app 之 短信验证码登录

uni-app 之 短信验证码登录

image.png

image.png

<template><view style="width: 100%; display: flex; flex-direction:column; align-items:center;"><view style="width: 300px; margin-top: 100px;"><!-- // --><!-- 1,输入手机号码,获取验证码 --><view style="display: flex; "><u-input placeholder="请输入手机号码" v-model="logon_phone" /><button @click="getphoneurl">验证码</button></view><!-- // --><!-- 2,输入验证码,登录 --><u-input placeholder="请输入验证码" v-model="logon_code" /><button @click="getcodeurl">登录</button></view><!-- 返回参数 --><text>retCode={{urlretCode}}; </text><text>retMsg={{curlretMsg}}; </text><text>retdata={{curlretdata}}; </text></view>
</template><script>export default {data() {return {// 返回參數urlretCode: "",curlretMsg: "",curlretdata: "",// 輸入框内容logon_phone: "",logon_code: "",};},methods: {// 按钮点击后执行的方法///// 1,输入手机号码,获取验证码getphoneurl() {// uni.showLoading({//  title: "加载中" // 加个进度条// })console.log("111 111 logon_phone 打印", this.logon_phone)uni.request({url: "https://api.xxx.com/sms/SendSms/" + this.logon_phone,success: res => {console.log("111 111 res 打印", res) // log打印获取的数据this.urlretCode = res.data.retCodethis.curlretMsg = res.data.retMsg// uni.hideLoading() // 加载出来后,关闭进度条}})},///// 2,输入验证码,登录getcodeurl() {// uni.showLoading({//  title: "加载中" // 加个进度条// })let params = {// "phone": "177128xxxxx",// "verificationCode": "5546","phone": this.logon_phone,"verificationCode": this.logon_code,}console.log("222 222 params 打印", params) // log打印获取的数据uni.request({method: 'post',url: "https://api.xxx.com/cusInfo/login",data: params,success: res => {console.log("222 222 res 打印", res) // log打印获取的数据this.urlretCode = res.data.retCodethis.curlretMsg = res.data.retMsgthis.curlretdata = res.data.data// 存储返回的tokenuni.setStorageSync('s_token', res.data.data);uni.setStorageSync('s_retCode', res.data.retCode);// 打印存储的tokenconst token = uni.getStorageSync('s_token'); //获取tokenconst g_phone = uni.getStorageSync('s_phone'); //获取tokenconsole.log("333 333 token>>>", token, g_phone) // log打印获取的数据if (token) {//存在则关闭前页面uni.navigateBack({//关闭当前页面,返回上一页面或多级页面。delta: 1});} else {//不存在则跳转至登录页// uni.reLaunch({//  url: "/pages/ldy_logon/ldy_logon",//  success: () => {//      plus.navigator.closeSplashscreen();//  }// })}}})},},onLoad() {// 页面刚进去就初始化的方法// this.getphoneurl(),// this.getcodeurl()},}
</script><style lang="scss"></style>

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

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

相关文章

JUnit介绍

JUnit是用于编写和运行可重复的自动化测试的开源测试框架&#xff0c; 这样可以保证我们的代码按预期工作。JUnit可广泛用于工业和作为支架(从命令行)或IDE(如Eclipse)内单独的Java程序。 JUnit提供&#xff1a; 断言测试预期结果。 测试功能共享通用的测试数据。 测试套件轻…

新闻报道的未来:自动化新闻生成与爬虫技术

概述 自动化新闻生成是一种利用自然语言处理和机器学习技术&#xff0c;从结构化数据中提取信息并生成新闻文章的方法。它可以实现大规模、高效、多样的新闻内容生产。然而&#xff0c;要实现自动化新闻生成&#xff0c;首先需要获取可靠的数据源。这就需要使用爬虫技术&#…

【AI视野·今日NLP 自然语言处理论文速览 第四十四期】Fri, 29 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 29 Sep 2023 Totally 45 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers MindShift: Leveraging Large Language Models for Mental-States-Based Problematic Smartphone Use Interve…

Source Insight 工具栏图标功能介绍

这篇文章并不介绍 Source Insight 的具体使用方法&#xff0c;这类教程网上有很多&#xff0c;这里只分析 Souce Insight 工具栏图标的功能。 文章目录 Source Insight 简介Souce Insight 工具栏文件操作新建&#xff08;CtrlN&#xff09;打开&#xff08;CtrlO&#xff09;保…

自学WEB后端02-基于Express框架完成一个交互留言板!

提示&#xff1a; 浏览器V8是JavaScript的前端运行环境 Node.js 是JavaScript 的后端运行环境 Node.js 中无法调用 DOM 和 BOM等浏览器内置 API 这个作业案例包含2部分内容&#xff0c; 第一部分是前端 前端完成界面内容CSS框架 第二部分是后端 完成用户留言存储&#xf…

overleaf杂谈-Springer文献格式问题

目录 overleaf写作问题记录1.Latex中的%问题&#xff08;文本变成灰色&#xff09;2.Springer文献格式问题2.1 新建reference.bib2.2 谷歌学术搜索文章并引用2.3 复制BibTex2.4 复制进reference.bib2.5 在sn-article.tex的\end{document}前添加语句2.6 引用文献2.7 Springer模板…

NLP 03(LSTM)

一、LSTM LSTM (Long Short-Term Memory) 也称长短时记忆结构,它是传统RNN的变体,与经典RNN相比&#xff1a; 能够有效捕捉长序列之间的语义关联缓解梯度消失或爆炸现象 LSTM的结构更复杂,它的核心结构可以分为四个部分去解析: 遗忘门、输入门、细胞状态、输出门 LSTM内部结构…

Android 使用Kotlin封装RecyclerView

文章目录 1.概述2.运行效果图3.代码实现3.1 扩展RecyclerView 3.2 扩展Adapter3.3 RecyclerView装饰绘制3.3.1 以图片实现分割线3.3.2 画网格线3.3.3空白的分割线3.3.4 不同方向上的分割线 3.4 使用方法 1.概述 在一个开源项目上看到了一个Android Kotlin版的RecyclerView封装…

Backblaze发布2023中期SSD故障数据质量报告

作为一家在2021年在美国纳斯达克上市的云端备份公司&#xff0c;Backblaze一直保持着对外定期发布HDD和SSD的故障率稳定性质量报告&#xff0c;给大家提供了一份真实应用场景下的稳定性分析参考数据。 本文我们主要看下Backblaze最新发布的2023中期SSD相关故障稳定性数据报告。…

[题]欧拉函数 #欧拉函数

目录 欧拉函数一、用公式求代码 二、线性筛法求欧拉函数扩展欧拉定理 欧拉函数 AcWing 873. 欧拉函数 一、用公式求 定义&#xff1a;1 ~ N 中与 N 互质的数的个数被称为欧拉函数&#xff0c;记为ϕ(N)。 怎么求呢&#xff1f;&#xff1f; 有一个公式&#xff1a; N p1a1 X…

RabbitMQ的工作模式——WorkQueues模式

1.工作队列模式 生产者代码 public class Producer_WorkQueues1 {public static void main(String[] args) throws IOException, TimeoutException {//1.创建连接工厂ConnectionFactory factory new ConnectionFactory();//2.设置参数factory.setHost("172.16.98.133&qu…

flutter开发实战-应用更新apk下载、安装apk、启动应用实现

flutter开发实战-应用更新apk下载、安装apk、启动应用实现 在开发过程中&#xff0c;经常遇到需要更新下载新版本的apk文件&#xff0c;之后进行应用更新apk下载、安装apk、启动应用。我们在flutter工程中实现下载apk&#xff0c;判断当前版本与需要更新安装的版本进行比对判断…

小谈设计模式(6)—依赖倒转原则

小谈设计模式&#xff08;6&#xff09;—依赖倒转原则 专栏介绍专栏地址专栏介绍 依赖倒转原则核心思想关键点分析abc 优缺点分析优点降低模块间的耦合度提高代码的可扩展性便于进行单元测试 缺点增加代码的复杂性需要额外的设计和开发工作 Java代码实现示例分析 总结 专栏介绍…

CIP或者EtherNET/IP中的PATH是什么含义?

目录 SegmentPATH举例 最近在学习EtherNET/IP&#xff0c;PATH不太明白&#xff0c;翻了翻规范&#xff0c;在这里记个笔记。下面的叙述可能是中英混合&#xff0c;有一些是规范中的原文我直接搬过来的。我翻译的不准确。 Segment PATH是CIP Segment中的一个分类。要了解PATH…

【JVM】第四篇 垃圾收集器ParNewCMS底层三色标记算法详解

导航 一. 垃圾收集算法详解1. 分代收集算法2. 标记-复制算法3. 标记-清除算法4. 标记-整理算法二. 垃圾收集器详解1. Serial收集器2. Parallel Scavenge收集器3. ParNew收集器4. CMS收集器三. 垃圾收集底层三色标记算法实现原理1. 垃圾收集底层使用三色标记算法的原因?2. 垃圾…

Konva基本处理流程和相关架构设计

前言 canvas是使用JavaScript基于上下文对象进行2D图形的绘制的HTML元素&#xff0c;通常用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。基于Canvas之上&#xff0c;诞生了例如 PIXI、ZRender、Fabric、Konva等 Canvas渲染引擎&#xff0c;兼顾易用的同时…

【论文极速读】Prompt Tuning——一种高效的LLM模型下游任务适配方式

【论文极速读】Prompt Tuning——一种高效的LLM模型下游任务适配方式 FesianXu 20230928 at Baidu Search Team 前言 Prompt Tuning是一种PEFT方法&#xff08;Parameter-Efficient FineTune&#xff09;&#xff0c;旨在以高效的方式对LLM模型进行下游任务适配&#xff0c;本…

基于SpringBoot的服装生产管理系统的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 登录界面的实现 系统主界面的实现 用户管理模块的实现 人事安排管理模块的实现 工资管理模块的实现 考勤管理模块的实现 样板管理模块的实现 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 本协力服装厂服装生…

AI编程助手 Amazon CodeWhisperer 全面解析与实践

目录 引言Amazon CodeWhisperer简介智能编程助手智能代码建议代码自动补全 提升代码质量代码质量提升安全性检测 支持多平台多语言 用户体验和系统兼容性用户体验文档和学习资源个性化体验系统兼容性 功能全面性和代码质量功能全面性代码生成质量和代码安全性 CodeWhisperer的代…

常见应用层协议

一.HTTP&#xff08;超文本传输协议&#xff09; HTTP 和 HTTPS 二.FTP&#xff08;文件传输协议&#xff09; 三.SMTP&#xff08;简单邮件传输协议&#xff09; 四.POP3&#xff08;邮局协议版本3&#xff09; 五.IMAP&#xff08;互联网消息访问协议&#xff09; 六.DNS&am…