关于APIcloud中的登录与注册的简单实现
2021-07-20 08:26
阅读:561
1、apiclou实现页面的登录方式,不适用自带的登录。
html代码
class="login_ipt_box"> class="login_pic_ipt" src="../../image/userName.png" /> class="ipt_login" name="userName" value="" id="userName" placeholder="请输入账户名"/>class="login_ipt_box"> class="login_pic_ipt" src="../../image/password.png" /> class="ipt_login" name="userPassword" type="password" value="" placeholder="请输入密码" id="password"/>"button" class="btn_login" onclick="loginIn()" value="登录" />
js方面
function loginIn(){ var userName = $api.val($api.byId(‘userName‘)), password = $api.val($api.byId(‘password‘)); if (!$api.trim(userName)) { api.toast({ msg: ‘请输入账号‘, duration: 1000, location: ‘middle‘ }); return; } if (!$api.trim(password)) { api.toast({ msg: ‘请输入密码‘, duration: 1000, location: ‘middle‘ }); return; } /*** 加载动画 ***/ api.showProgress({ title : ‘ ‘, text : ‘玩命加载中...‘, modal : true }); api.ajax({ url: ‘https://api.yazhuaa/?serAdmin.Login&username=‘+ userName +‘&password=‘+ password, timeout: 10, dataType: ‘json‘, method: ‘post‘ }, function(ret, err) { api.hideProgress(); if(ret.data.result == false){ api.toast({ msg: ‘登录失败‘, duration: 1000, location: ‘middle‘ }); }else{ if (ret.data.result.user_name) $api.setStorage(‘userName‘, ret.data.result.user_name); if (ret.data.result.id) $api.setStorage(‘id‘, ret.data.result.id); if (ret.data.result.member_id) $api.setStorage(‘member_id‘, ret.data.result.member_id); if (ret.data.sessionid) $api.setStorage(‘PHPSESSID‘, ret.data.sessionid); api.toast({ msg:‘登录成功‘, duration: ‘1200‘, localtion: ‘middle‘ }); $api.setStorage(‘isLogin‘, true); // api.sendEvent({ // name: ‘UserHasLogin‘ // }); setTimeout(function() { api.openWin({ name: ‘index‘, url: ‘../../index.html‘, bounces: false, animation:{ type: "push", duration:300 } }); }, 1000); } /*** 登录异常 ***/ if (err) { api.toast({ msg:‘网络异常,请稍后重试‘, duration: ‘1300‘, localtion: ‘middle‘ }); return; } }); }
2、广播事件的传播,有时候登录不止登录就结束了,登录之后还有一些相应的改变,例如显示什么隐藏什么这些的。
在登录界面登录成功后,广播登录成功事件并设置登录状态。登录成功后需要执行相关命令的界面(如移除登录相关按钮、显示登录用户可见内容、获取当前登录用户资料)需设置登录监听,以便登录成功后作出反馈。
//登录界面 //api.sendEvent广播登录成功事件 api.sendEvent({ name: ‘loginSuccess‘ }); //api.setPrefs设置登录成功状态 api.setPrefs({ key: ‘loginStatus‘, value: ‘loginSuccess‘ }); //修改界面 //api.addEventListener监听登录成功事件(需执行才可生效) api.addEventListener({ name: ‘loginSuccess‘ }, function(ret, err){ if( ret ){ //执行登录成功相关指令 } });
判断登录状态
判断登录状态可用于决定是否打开登录界面。
//api.getPrefs获取当前登录状态 api.getPrefs({ key: ‘loginStatus‘ }, function(ret, err) { //当偏好设置尚未设置或者曾设置后被移除后,返回值(ret.value)均为空。 var val = ret.value; if (val && val != "") { //已登录 } else { //未登录 } });
登出
在登出界面登出成功后,广播登出成功事件并移除登录状态。登出成功后需要执行相关命令的界面(如显示登录相关按钮、移除登录用户可见内容、清空登出用户数据及缓存)需设置登出监听,以便登出成功后作出反馈。
//登出界面 //api.sendEvent广播登出成功事件 api.sendEvent({ name: ‘logoutSuccess‘ }); //api.removePrefs移除登录状态 api.removePrefs({ key: ‘loginStatus‘ }); //修改界面 //api.addEventListener监听登出成功事件(需执行才可生效) api.addEventListener({ name: ‘logoutSuccess‘ }, function(ret, err){ if( ret ){ //执行登出成功相关指令 } });
评论
亲,登录后才可以留言!