uni-app 本地数据缓存建立用户注册登录状态退出实例

uni-app 本地数据缓存建立用户注册登录退出状态实例

本文章是通过缓存建立一个注册一个用户保存在本地缓存key中,在通过本地key对比用户和密码正确着跳转登入界面。登入界面有一个if判断,如本地用户没有登入着显示默认头像,用户登入着获取用户ID和头像等,退出用户清空本地缓存。这是简单的概述下思路。初步介绍uni.setStorage用法,后期在更新通过API让用户登入。

1.获取模板

a.uni-app插件市场有很多模板,我们直接下载不去自己写(偷懒Ing!)

Simple-login包含登录注册页面模版下载地址:https://ext.dcloud.net.cn/plugin?id=96

我们先看下目录结构和效果图

 

2.注册表单

下载好后导入到Hbuilder x中,register.vue界面中我们去建立一个表单 ,在按钮位置添加form-type=”submit”

<view class=" registerbtn has-radius has-mgtb-20">
				<button form-type="submit">注 册</button>
</view>

切在最外层添加一个submit触发一个名为tijiao的事件

<form @删除我submit="tijiao">
				<view class="has-mglr-10 ">
					<view class=" has-mgtb-10 ">
						<input name="username"  type="text" maxlength="11" placeholder="请输入手机号" class="is-input1 " />
					</view>

					<view class=" has-radius has-mgtb-10">
						<input name="password" placeholder="请输入登录密码" :password="true" class="is-input1" />

					</view>
					<view class=" registerbtn has-radius has-mgtb-20">
						<button form-type="submit">注 册</button>
					</view>
				</view>
			</form>

在methods方法中添加tijiao事件函数和本地缓存 uni.setStorageSync(‘key名字’,‘key内容’),在次位置下断点

methods: {
			tijiao (e) {
				uni.setStorageSync("userpass",userdata);
        debugger;
        }
}

运行到微信小程序或者模拟器(H5不能用切记)随意输入字母点击注册,在断点中查看是否有数据

uni-app 本地数据缓存建立用户注册登录状态退出实例

有数据那我们就意味着成功拉!如果大家要在控制台打印出来

var userdata = e.detail.value;
console.log(e.detail.value);

其实打不打印都差不多哈!当我们点击后需要一个提示告诉用户注册成功,直接在tiajiao方法中添加一个弹窗就好,枫瑞为了方便在弹窗点击确定后跳转到登录界面

uni.showModal({
					title: '友情提示',
					content: '注册成功!是请往登入界面',
					success: function (res) {
						//点击确定后跳转界面
						if (res.confirm) {
							uni.switchTab({
								url: 'login'
							})
						} 
					}
				});

3.登陆界面

登录界面会比注册难一点点,因为要获取用户输入的内容,然后和我们本地key对比,获取input框输入内容使用v-model,好像插件就写好了

	<input v-model="login.password" placeholder="请输入登录密码" class="is-input1"  @input="BindInput" data-val="password"/>

key是一个对象,我们首先在return中声明一下

return {
				login: {
					loading: false,
					phone:"",
					password:"",
					bendi:{}
					
				},

			};

随后我们得在这个界面获取到我们得本地uni-app数据缓存,写onLoad里面,为了验证我们先打印看下有没有数据

onLoad() {
			this.login.bendi = uni.getStorageSync("userpass");
			console.log(this.login.bendi)
		},

在插件中的登陆有一个tap事件 我们就直接用这个了

<button :loading="login.loading" @tap="defaultHandlerLogin"> {{ login.loading ? "登录中...":"登 录"}} </button>

methods中添加函数,第一步我们的先确定key是不是存在的(上面onLoad其实可以看出有的,但是安全嘛在验证一次)

this.login.loading = true;

第二步 对比key的用户名密码这里用if去对比,对比成功跳转个人中心。整体代码如下

defaultHandlerLogin:function(){
				this.login.loading = true;
				if (this.login.bendi.username === this.login.phone) {
					if (this.login.bendi.password == this.login.password) {
						console.log("登陆成功")
						uni.showModal({
							title: '友情提示',
							content: '登陆成功',
							success: function (res) {
								uni.switchTab({
									url: 'index'
								})
							}
						});
					}else {
						console.log("密码错误")
						uni.showModal({
							title: '友情提示',
							content: '密码错误',
							success: function (res) {
							}
						});
					}
				}else {
					console.log("密码或账号错误")
					uni.showModal({
						title: '友情提示',
						content: '密码或账号错误',
						success: function (res) {
						}
					});
				}
				setTimeout((e=>{
					this.login.loading = false;
				}),1500);
				console.log(JSON.stringify(this.login)); 
			},

其实if可以缩写,但是为了装逼就不简化了哈哈!如果大家要看本地得key在控制台中storage中就可以看到了

uni-app 本地数据缓存建立用户注册登录状态退出实例

 

4.个人中心

个人中心我写在index页面下,那么首先我们得在pages.json中声明下界面

{
		    "path" : "pages/ucenter/index",
		    "style" : {
				"navigationBarTitleText" : "个人中心",
				"app-plus":{
					"bounce":"none"
				}
			}
		},

和底部导航

{
				"pagePath": "pages/ucenter/index",
				"iconPath": "static/img/footer/footer-home.png",
				"selectedIconPath": "static/img/footer/footer-home-act.png",
				"text": "登入"
			},

首页在插件中是空白页面,老规矩先获取本地key


      var  info = uni.getStorageSync("userpass");
			console.log(info)

成功获取后,我们去写未登录样式,在给他一个判断如果是未登录就显示某个样式,以登录则显示用户头像 用if来判断(登录显示具体看源码)if得值则由return中布尔值来分别显示

return {
				panduan:true,
				info:{}
			};

key值是否为空来赋值true或flase

if(info != null && info != "" && info != undefined){
				this_s.panduan = false;
				this_s.info=info;
				// console.log(info.username)
				console.log("有数据")
			}else{
				// this_s.panduan = false;
				// this_s.info = {};
				console.log("没数据")
			}

5.退出

退出就是清除本地key

uni.removeStorageSync('userpass');

6.总结

uni-app 本地数据缓存建立用户注册登录状态退出实例大体思路,没有使用API导致我们在退出得时候界面不会自动刷新,所有会停留在有用户的状态下

 

 

 

 

 

(5)
枫瑞博客枫瑞博客
上一篇 2019-05-08 11:03
下一篇 2019-06-04 16:24

相关推荐

回复 南风和猫

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(13条)

  • 炫金呀
    炫金呀 2020-03-22 11:47

    主要是倒数第二步,【key值是否为空来赋值true或flase】这一步我出错了,不知道是什么问题

  • 炫金呀
    炫金呀 2020-03-22 11:45

    好的,谢谢

  • 炫金呀
    炫金呀 2020-03-21 14:23

    这个还有源码吗?

  • 杨小白
    杨小白 2020-01-07 13:57

    账号密码错误

  • 杨小白
    杨小白 2020-01-07 11:51

    为什么输入正确的账号密码,还是显示密码或账号错误

  • Sunrise
    Sunrise 2019-09-28 23:21

    不错不错

  • Sunrise
    Sunrise 2019-09-28 23:20

    收藏《uni-app 本地数据缓存建立用户注册登录状态退出实例》文章

  • 小有
    小有 2019-06-10 17:07

    谢谢

  • 你猜
    你猜 2019-06-10 16:12

    教程狠好

  • 滴滴
    滴滴 2019-06-03 10:43

    很棒

  • 南风和猫
    南风和猫 2019-06-03 10:39

    很奶思

  • 红红火火恍恍惚惚
    红红火火恍恍惚惚 2019-05-30 09:18

    不错

  • 夜猫
    夜猫 2019-05-29 15:27

    可以的