零基础学小程序005---小程序登陆注册功能实现
时间:2022-07-28
本文章向大家介绍零基础学小程序005---小程序登陆注册功能实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上一节虽然有提到小程序用户注册与登陆功能,但是篇幅有限,就没详细写。今天就来给大家详细讲解下小程序的注册与登陆功能实现。
不多说,先看效果图
▲小程序登陆与注册实现
先说下登陆和注册的基本原理
"
登陆和注册,肯定需要我们获取输入的用户名和密码。然后把用户名和密码传到服务器后台,后台把用户名和密码存到数据库里,存入成功就返回注册成功的信息, 以后登陆时就可以直接查询用户是否存在,存在就比对密码,如果密码一致,就返回登陆成功的信息。
"
本节实现功能点
- 获取输入内容
- 注册功能
- 登陆功能
下面就逐个功能点给大家讲解。
获取输入内容
先看下布局index.xml
<!--index.wxml-->
<input class='inputA' placeholder="请输入用户名" bindinput="inputName" />
<input class='inputA' placeholder="请输入密码" password='true' bindinput="inputPassword" />
<button wx:if="{{!isLogin}}" type='primary' bindtap='register'>注册</button>
<button wx:if="{{isLogin}}" type='primary' bindtap='login'>登陆</button>
注意点:
- bindinput="inputName" 中的inputName对应index.js里的inputName()函数,用来获取输入的用户名
- bindinput="inputPassword" 中的inputPassword对应index.js里的inputPassword()函数,用来获取输入的用户名 下面贴出这两个函数
//获取用户输入的值a
inputName: function(e) {
inputName = e.detail.value;
}, //获取用户输入的值b
inputPassword: function(e) {
inputPassword = e.detail.value;
console.log("输入的密码:" + inputPassword);
},
到这里我们就可以获取到输入的用户名和密码了。
接下来,需要对输入的用户名和密码做校验
注意校验用户名不能为空,密码不能为空,密码不能少于6位数。 校验代码如下:
//检测输入值
checkInput: function() {
if (inputName == "" || inputName == null ||
inputName == undefined) {
this.showErrorToastUtils('请输入用户名');
} else if (inputPassword == "" || inputPassword == null || inputPassword == undefined) {
this.showErrorToastUtils('请输入密码');
} else if (inputPassword.length < 6) {
this.showErrorToastUtils('密码至少要6位');
}
return true;
},
当用户名和密码都符合规则时,返回true。说明输入的用户名和密码合法。
注册功能
注册就需要我们请求后台注册接口了。
// 注册
register: function() {
var that = this;
var isrightful = that.checkInput();
if (isrightful) {
wx.request({
url: 'http://localhost:8080/user/testSave',
header: { "Content-Type": "application/x-www-form-urlencoded"
},
method: "POST",
data: {
name: inputName,
password: inputPassword
},
success: function(res) {
console.log(res);
if (res.statusCode != 200) {
wx.showToast({ //这里提示失败原因
title: res.data.message,
icon: 'loading',
duration: 1500
})
} else {
wx.showToast({
title: '注册成功', //这里成功
icon: 'success',
duration: 1000
});
that.setData({
isLogin: true,
}
)
}
},
fail: function(res) {
console.log(res)
wx.showToast({
title: '请求失败',
icon: 'none',
duration: 1500
})
}
});
}
},
注意点: if (res.statusCode != 200) 这里我们判断后台返回的statusCode,只有statusCode等于200时,才说明我们注册成功,下面时注册成功后后台返回的信息
▲注册成功
登录功能
登陆其实和注册都是把用户名和密码传到后台,只不过登陆时,先那用户名去数据库里查,看是否存在这个用户。
如果存在,就去比对我们传的密码和数据库里存的密码是否一样,如果一样就登陆成功,返回登陆信息。
到此我们的小程序注册与登陆功能就实现了。
- 使用Python抓取欧洲足球联赛数据
- python爬取百度新闻:分析共享单车火爆背后有哪些规则?
- Python爬虫(urllib2+bs4)数据采集:分析找出百度贴吧谁是水贴王
- 学界 | OpenAI 发布稀疏计算内核,更宽更深的网络,一样的计算开销
- 【手把手教你做项目】自然语言处理:单词抽取/统计
- Kaggle赛题解析:逻辑回归预测模型实现
- R语言 使用BP神经网络进行银行客户信用评估
- 使用R语言挖掘QQ群聊天记录
- 解析滴滴算法大赛---GBDT进行数据预测
- 数据迁移中的数据库检查和建议(r2笔记71天)
- 决策树案例:基于python的商品购买能力预测系统
- 数据迁移前的准备和系统检查 (r2笔记70天)
- 数据处理的统计学习(scikit-learn教程)
- 机器学习实战,使用朴素贝叶斯来做情感分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- css 文字隐藏
- 【-Flutter绘制集录-】第一画: 随机对称点头像
- TorchScript使用的注意事项和常见错误
- Scoped 样式穿透
- 你不知道的this(1)
- PyTorch模型转TVM模型全流程记录
- 一次 Node.js http 连接无法复用的问题排查
- 基于UE4/Unity绘制地图基础元素-线(上篇)
- 编码、R 与 Windows (一)
- 【5分钟玩转Lighthouse】Python绘制图表
- Matt Dowle 演讲节选(二)
- 帝国CMS的sitemap.xml设置和生成
- 【推荐】搭建你的免费 R 云端服务器
- ShareX 对接tu.my图床实现截图和图片自动上传
- 【技巧】如何快速按照日期分组