甘肃龙网

  1. 首页 > 生活 > >

WeX5之登录注销功能实现

生活百科页面

痛苦了很久的登录、注销登录功能终于解决了 ， 期间从论坛里看了很多帖子 ， 也发过贴寻求大神帮助 ， 无奈没有获得具体的方法 ， 后来从网上一位大神的博客里找到了解决问题的关键点：
下面将我的实现过程分享出来 ， 希望以后像我一样的小白少走点弯路 。
实现思路是WeX5提供的思路： 。
注：最好将物理返回键的操作方式改成关闭页面
1. 主页
在index中通过.Shell.('main')打开主页 ， 如果已经登录过不再重新登陆 ， 否则通过打开登陆对话框 。我要做的功能是根据不同用户身份打开不同的页面 ， 所以在main页中放了一个 。

WeX5之登录注销功能实现

文章插图

WeX5之登录注销功能实现

文章插图
define(function(require) {var $ = require("jquery");var justep = require("$UI/system/lib/justep");var MD5 = require("$UI/system/lib/base/md5");var Model = function() {this.callParent();this.md5 = new MD5();};Model.prototype.modelParamsReceive = function(event) {if (this.params.operation == "reload") {this.comp("loginDialog").open();return;}// 登陆后不需要重新加载if (justep.Shell.login.latestValue) {return;}var userLocal = (localStorage.getItem("userUUID") && JSON.parse(localStorage.getItem("userUUID")))|| null;if (userLocal && userLocal.phone && userLocal.password) {var usrData = http://www.kingceram.com/post/this.comp("userData");usrData.setFilter("filter", "phone='" + userLocal.phone + "' AND password='"+ this.md5.hex_md5(userLocal.password) + "'");usrData.refreshData();if (usrData.count() > 0) {var row = usrData.getFirstRow();justep.Shell.userID.set(row.val('ID'));justep.Shell.userRole.set(row.val('role'));this.openMain();} else {this.comp("loginDialog").open();}} else {this.comp("loginDialog").open();}};Model.prototype.loginDialogReceive = function(event) {this.openMain();};Model.prototype.openMain = function() {if (justep.Shell.userRole.latestValue =http://www.kingceram.com/post/= '教职工') {this.comp("mainContainer").set({"src" : "$UI/TeacherAssist/Teacher/Lesson/teacherMainMain.w"});} else {this.comp("mainContainer").set({"src" : "$UI/TeacherAssist/Student/studentMain.w"});}justep.Shell.login.set(true);this.comp("mainContainer").load();};return Model;});
为了避面在登陆时没有选择记住密码（即中没有用户数据） ， 在重新返回main页面时可能会再次弹出登陆窗口 ， 可以添加.Shell.login参数 ， 登陆成功后给它赋一个值true ， 事件中判断一下.Shell.login的值 ， 如果已经登录就不必再加载页面 。
2. 登陆
登陆页面逻辑就是根据用户输入账号信息在数据库中进行匹配 ， 如果能匹配说明账号信息正确 ， 返回到main页面 ， 同时将用户信息传到main页面 ， main页面根据用户信息加载不同的页面 。注册页面在登陆页通过打开 。
WeX5之登录注销功能实现

文章插图
define(function(require) {var $ = require("jquery");var justep = require("$UI/system/lib/justep");var MD5 = require("$UI/system/lib/base/md5");var ILayer = require("./ILayer");var Model = function() {this.callParent();this.md5 = new MD5();};// 登录Model.prototype.loginBtnClick = function(event) {var Data = http://www.kingceram.com/post/this.comp("userData");var phone = $.trim(this.comp("phoneInput").val());var password = $.trim(this.comp("passwordInput").val());// 用户密码为空提示if (phone === "") {ILayer.ShowWarnMsg('请输入用户名');return;}if (password === "") {ILayer.ShowWarnMsg('请输入密码');return;}Data.setFilter("filter", "phone='" + phone + "' AND password='"+ this.md5.hex_md5(password) + "'");Data.refreshData();if (Data.count() > 0) {// 全局变量var row = Data.getFirstRow();var userID = row.val('ID');var role = row.val('role');// 本地记住用户名密码var userUUID = {};userUUID.phone = phone;userUUID.password = password;if (this.comp("toggle1").val()) {localStorage.setItem("userUUID", JSON.stringify(userUUID));} else {localStorage.removeItem('userUUID');}justep.Shell.userID.set(userID);justep.Shell.userRole.set(role);ILayer.ShowMsg('登录成功');this.owner.send(userUUID);window.timeout = setTimeout(onTimeout, 3000);} else {ILayer.ShowWarnMsg('账号或密码输入错误');localStorage.removeItem('userUUID');}var self = this;function onTimeout() {self.close();}};// 页面加载Model.prototype.modelLoad = function(event) {var userLocal = (localStorage.getItem("userUUID") && JSON.parse(localStorage.getItem("userUUID")))|| null;if (userLocal) {if (userLocal.phone)this.comp("phoneInput").set({value : userLocal.phone});if (userLocal.password)this.comp("passwordInput").set({value : userLocal.password});this.comp("toggle1").set({value : true});}};// 跳转到注册页面Model.prototype.registerBtnClick = function(event) {this.comp("registerDialog").open();};// 跳转到忘记密码界面Model.prototype.forgetBtnClick = function(event) {this.comp("forgetPWDialog").open();};return Model;});


上一篇：耗时三年，投入数千人 华为实现ERP自主可控 公司：“有史以来复杂性最高的项目”

下一篇：自拍的照片不太清晰怎么办？拍摄的模糊照片如何修复高清？