登录功能实现

我是小菜鸡

痛苦了很久的登录、注销登录功能终于解决了，期间从论坛里看了很多帖子，也发过贴寻求大神帮助，无奈没有获得具体的方法，后来从网上一位大神的博客里找到了解决问题的关键点：http://www.cnblogs.com/fangziffff123/p/6222920.html
下面将我的实现过程分享出来，希望以后像我一样的小白少走点弯路，也希望各位致力于WeX5开发的同鞋以后有好的方法可以分享出来，有空的时候到论坛里回答一些力所能及的问题；多想想自己在最开始学习的时候别人是怎么帮助我们的，自己有能力了也要多帮助后来的人。只有大家共同促进，WeX5才能够良好的发展，不断进步，这样对我们所有使用WeX5或者想要学习WeX5的人都有好处。

实现思路是WeX5提供的思路：http://docs.wex5.com/wex5-ui-question-list-2143/。
注：最好将物理返回键的操作方式改成关闭页面 http://docs.wex5.com/wex5-app-question-list-2003/
1. 主页
在index中通过justep.Shell.showPage('main')打开主页，如果已经登录过不再重新登陆，否则通过windowDialog打开登陆对话框。我要做的功能是根据不同用户身份打开不同的页面，所以在main页中放了一个windowContainer。

1. define(function(require) {
   
2.         var $ = require("jquery");
   
3.         var justep = require("$UI/system/lib/justep");
   
4.         var MD5 = require("$UI/system/lib/base/md5");
   
5. 
   
6.         var Model = function() {
   
7.                 this.callParent();
   
8.                 this.md5 = new MD5();
   
9.         };
   
10. 
    
11.         Model.prototype.modelParamsReceive = function(event) {
    
12.                 // 注销登录弹出登录对话框
    
13.                 if (this.params.operation == "reload") {
    
14.                         this.comp("loginDialog").open();
    
15.                         return;
    
16.                 }

复制代码

为了避面在登陆时没有选择记住密码（即localstorage中没有用户数据），在重新返回main页面时可能会再次弹出登陆窗口，可以添加justep.Shell.login参数，登陆成功后给它赋一个值true，modelParamsReceive事件中判断一下justep.Shell.login的值，如果已经登录就不必再加载页面。

2. 登陆
登陆页面逻辑就是根据用户输入账号信息在数据库中进行匹配，如果能匹配说明账号信息正确，返回到main页面，同时将用户信息传到main页面，main页面根据用户信息加载不同的页面。注册页面在登陆页通过windowDialog打开。

1. define(function(require) {
   
2.     var $ = require("jquery");
   
3.     var justep = require("$UI/system/lib/justep");
   
4.     var MD5 = require("$UI/system/lib/base/md5");
   
5.     var ILayer = require("./ILayer");
   
6. 
   
7.     var Model = function() {
   
8.         this.callParent();
   
9.         this.md5 = new MD5();
   
10.     };
    
11.     // 登录
    
12.     Model.prototype.loginBtnClick = function(event) {
    
13.         var Data = this.comp("userData");
    
14.         var phone = $.trim(this.comp("phoneInput").val());
    
15.         var password = $.trim(this.comp("passwordInput").val());
    
16.         // 用户密码为空提示
    
17.         if (phone === "") {
    
18.             ILayer.ShowWarnMsg('请输入用户名');
    
19.             return;
    
20.         }
    
21.         if (password === "") {
    
22.             ILayer.ShowWarnMsg('请输入密码');
    
23.             return;
    
24.         }
    
25.         Data.setFilter("filter", "phone='" + phone + "' AND password='"
    
26.                 + this.md5.hex_md5(password) + "'");
    
27.         Data.refreshData();
    
28.         if (Data.count() > 0) {
    
29.             // 全局变量
    
30.             var row = Data.getFirstRow();
    
31.             var userID = row.val('ID');
    
32.             var role = row.val('role');
    
33.             // 本地记住用户名密码
    
34.             var userUUID = {};
    
35.             userUUID.phone = phone;
    
36.             userUUID.password = password;
    
37.             if (this.comp("toggle1").val()) {
    
38.                 localStorage.setItem("userUUID", JSON.stringify(userUUID));
    
39.             } else {
    
40.                 localStorage.removeItem('userUUID');
    
41.             }
    
42.             justep.Shell.userID.set(userID);
    
43.             justep.Shell.userRole.set(role);
    
44. 
    
45.             ILayer.ShowMsg('登录成功');
    
46.             this.owner.send(userUUID);
    
47.             window.timeout = setTimeout(onTimeout, 3000);
    
48.         } else {
    
49.             ILayer.ShowWarnMsg('账号或密码输入错误');
    
50.             localStorage.removeItem('userUUID');
    
51.         }
    
52.         var self = this;
    
53.         function onTimeout() {
    
54.             self.close();
    
55.         }
    
56.     };
    
57.     // 页面加载
    
58.     Model.prototype.modelLoad = function(event) {
    
59.         var userLocal = (localStorage.getItem("userUUID") && JSON.parse(localStorage
    
60.                 .getItem("userUUID")))
    
61.                 || null;
    
62.         if (userLocal) {
    
63.             if (userLocal.phone)
    
64.                 this.comp("phoneInput").set({
    
65.                     value : userLocal.phone
    
66.                 });
    
67.             if (userLocal.password)
    
68.                 this.comp("passwordInput").set({
    
69.                     value : userLocal.password
    
70.                 });
    
71.             this.comp("toggle1").set({
    
72.                 value : true
    
73.             });
    
74.         }
    
75.     };
    
76.     // 跳转到注册页面
    
77.     Model.prototype.registerBtnClick = function(event) {
    
78.         this.comp("registerDialog").open();
    
79.     };
    
80.     // 跳转到忘记密码界面
    
81.     Model.prototype.forgetBtnClick = function(event) {
    
82.         this.comp("forgetPWDialog").open();
    
83.     };
    
84. 
    
85.     return Model;
    
86. });

复制代码

3. 个人信息页
想要根据用户登陆信息改变页面数据的一个重要操作就是添加modelParamsReceive事件，重新打开一个页面的时候，可能不会触发modelLoad事件，但是一定会触发modelParamsReceive事件，在modelParamsReceive事件中根据用户登陆信息对页面数据进行过滤即可。
注销重新登陆是重新返回到main页面再弹出登陆对话框，只需要让main页面接收到重新登陆这个操作即可，可以向main页面传一个参数，也可以将localstorage中的用户信息删除。

1. define(function(require) {
   
2.     var $ = require("jquery");
   
3.     var justep = require("$UI/system/lib/justep");
   
4. 
   
5.     var Model = function() {
   
6.         this.callParent();
   
7.     };
   
8. 
   
9.     // 跳转到编辑信息界面
   
10.     Model.prototype.EditInfoClick = function(event) {
    
11.         justep.Shell.showPage("EditInfo");
    
12.     };
    
13. 
    
14.     // 点击修改密码后弹出窗口输入旧密码。
    
15.     Model.prototype.editPwBtnClick = function(event) {
    
16.         justep.Shell.showPage("resetPW", {
    
17.             'type' : 'reset'
    
18.         });
    
19.     };
    
20. 
    
21.     // 点击"关于"按钮后弹窗
    
22.     Model.prototype.aboutBtnClick = function(event) {
    
23.         this.comp("about").show();
    
24.     };
    
25. 
    
26.     // 点击“帮助与反馈”后弹窗
    
27.     Model.prototype.helpBtnClick = function(event) {
    
28.         this.comp("help").show();
    
29.     };
    
30. 
    
31.     Model.prototype.modelLoad = function(event) {
    
32.         this.comp("userData").setFilter("filter1", "ID='" + justep.Shell.userID.latestValue + "'");
    
33.         this.comp("userData").refreshData();
    
34.     };
    
35. 
    
36.     Model.prototype.modelParamsReceive = function(event) {
    
37.         this.comp("userData").setFilter("filter1", "ID='" + justep.Shell.userID.latestValue + "'");
    
38.         this.comp("userData").refreshData();
    
39.     };
    
40.     //退出登录
    
41.     Model.prototype.logoutBtnClick = function(event){
    
42.         justep.Shell.showMainPage({"operation":"reload"});
    
43.     };
    
44. 
    
45.     return Model;
    
46. });

复制代码

如果有错误欢迎大家指正~
有问题可以联系我：QQ：654935984

我是小菜鸡

doudou459 发表于 2017-11-28 13:02
this.comp("userData").setFilter("filter1", "");
可以将你的filter 清空     
data做登录等操作不安全· ...

谢谢~就是数据库访问后台服务完全自己写吗？还是说登录的时候只要将登录信息发送到后台服务器，在服务器上判断登录信息是否正确？
这一块不是非常清楚~

wangjikuen

给你补充点吧，在任何通过页面映射打开的页面，都可以用

1. //自定义的弹窗
   
2. this.getParent().comp('returnloginDialog').show();
   
3. //windowDialog
   
4. this.getParent().comp('windowDialog').show();
   
5. 这种方式打开在index页面的弹窗，这就意味，在所有页面，当需要的时候，都可以让用户登录

复制代码

doudou459

this.comp("userData").setFilter("filter1", "");
可以将你的filter 清空     
data做登录等操作不安全····不建议直接使用wex5的后台     
建议自己做后台  
不然一个稍微懂一点JS的人都可以黑了你的网站   

我是小菜鸡

wangjikuen 发表于 2017-11-18 11:20
给你补充点吧，在任何通过页面映射打开的页面，都可以用

不太理解~this.getParent()是指index页面吗？然后在index页面中添加弹窗windowDialog绑定登录页面？

wangjikuen

我是小菜鸡 发表于 2017-11-29 10:05
不太理解~this.getParent()是指index页面吗？然后在index页面中添加弹窗windowDialog绑定登录页面？ ...

父级页面

qiuxinw66

不错 还做了忘记密码   顶一个