HBuilder 入门(5) 编写一个登录页面 - Ajax交互

2017-12-13 20:06:02来源:CSDN作者:chenzl0723人点击

分享
使用AJAX方式,页面不会因为刷新而现实大白页。 交互这部分可以分成两个部分:服务器端和客户端。         服务端以Java语言为例子(因为我只做过Java的)。其实 c#或者php等语言实现起来也都是基本一样的,可以当做参考。    如果你正在使用SpringMVC,那么就简单了,因为Spring已经封装了Ajax的调用方式。如果像我一样,没有使用SpringMVC,那么很遗憾,你需要一个能够解析json的库。经过比较,我选择了 jackson 这个工具。注意:在写这个文章的时间点,在网上搜索的jackson网站已经迁移到了github,所以,请使用本文提供的新的链接。     下面的例子也是基于jackson解析的。如果你使用了SpringMVC,或者其他解析json的工具,或者其他语言如PHP,应该也是差不多的。      下面来看一下一个登录过程的流程:    

     流程虽然比较多,但是很容易理解。先从客户端看起。    首先就是通过Ajax的方式,将用户名和密码发送给客户端。为了安全,我们不能直接发送明文的密码,必须将密码加密。可选择的方式很多,一般都是不可逆的hash方式,如md5, sha1的方式加密。在本例中我们选择 md5的方式加密。javascript里的md5现成的方法很多,大家自己寻找一个合适的吧。但是标准就是:小,快,使用简单。    接下来就是ajax的使用。mui 提供了ajax的使用方法,请参看这里。 不过如果你按照文档那样,每个ajax调用都写那么一堆代码,一会你的代码就会臃肿不堪。所以,我对ajax调用又做了一个简单的封装,避免每次都设置相同的参数: Js代码  
  1. function postData(url, data, callback, waitingDialog) {  
  2.       
  3.     mui.ajax(url,{  
  4.         data:'data='+JSON.stringify(data),  
  5.         dataType:'json',  
  6.         type:'post',  
  7.         contentType:"application/x-www-form-urlencoded; charset=utf-8",  
  8.         timeout:60000,  
  9.         success:callback,  
  10.         error:function(xhr,type,errorThrown){  
  11.             waitingDialog.close();  
  12.             mui.alert("<网络连接失败,请重新尝试一下>""错误""OK"null);  
  13.         }  
  14.     });  
  15. }  
 data 属性:就是要传递给服务端的数据。之所以要加上 'data=' 这个东西,就是为了让服务器端知道变量的名字是 "data" 。而传递的json 数据,也必须通过JSON.stringify方式转换成字符串。 contentType属性:这个很重要。如果没有这个,你在后台得到的中文字符串就会是乱码。其实如果你熟悉Jquery,对这个属性应该不会陌生。 error属性:出错的处理。这里的 waitingDialog 是一个等待的对话框。在点击登录按钮后,会显示一个等待的对话框。无论出错了,还是正常处理了,都必须要关闭这个等待的对话框。同时用 mui.alert 显示了一个错误的消息。    以上就是 ajax 的请求函数。    接下来看看登录按钮的处理: Js代码  
  1. // 登录处理,还记得我们上一篇写得的按钮关联的事件吧  
  2. document.getElementById("loginBtn").addEventListener('tap'function(){  
  3.   // 显示一个等待的对话框  
  4.   var wd = plus.nativeUI.showWaiting();  
  5.   // 构造要传递的json数据  
  6.   // $id 是一个通过 id 取得对象的方法,  
  7.   // 内容就是 return document.getElementById();  
  8.   var data = {"userName": $id('username').value,   
  9.           "userPassword":md5Hash($id('userpassword').value)  
  10.     };  
  11.   // 调用ajax  
  12.   postData(SERVER_HOST + MODULE_LOGIN, //服务端的URL  
  13.     data,// json 数据  
  14.     function(data) {  
  15.       wd.close(); // 调用成功,先关闭等待的对话框  
  16.       if(data.result != "checkOK") {  
  17.         // 如果密码错误,提示一下信息  
  18.         mui.alert("用户名或密码错误""登录错误""关闭");  
  19.         return;  
  20.       }  
  21.       // 保存token,以便于下次自动登录  
  22.       localStorage.setItem(TOKEN_USER, $id('username').value);  
  23.       localStorage.setItem(TOKEN_LOGIN, data.token);  
  24.       // 清空用户名,密码  
  25.       $id('username').value = "";  
  26.       $id("userpassword").value = "";  
  27.       // 打开下一个画面  
  28.       mui.openWindow(  
  29.         {  
  30.           url:'mainShow.html',  
  31.           id:'mainShow',  
  32.         }  
  33.       );  
  34.     },  
  35.     wd//传递给postData的最后一个参数,失败的时候关闭等待对话框  
  36.   );  
  37. });  
     上面的代码都有注释,但是有的地方还是说明一下。    plus.nativeUI.showWaiting(); 这是一个原生的调用,并非用 div 来模拟对话框。这也是HBuilder的强力武器之一:Native.js。Native.js的概念,在第一篇入门文章里有介绍。具体的API用法,请参照官方的文档,里边有一个 Native.js 的部分。    传递给服务器端的数据的部分,正如流程里所示,对密码进行了加密。对于 ajax 的调用,使用了之前封装的 postData 方法。    返回值是一个 json 对象,变量名字为 data。如果 data.result 不等于 "checkOK" ,那么就认为密码错误,提示错误信息。    注意:在实际的应用中,判断返回数据的有效性,最好不使用字符串,而是使用数字。如 1表示密码错误,0表示校验通过。并且,对于返回值的格式,最好有统一的格式定义。之前我为了尽快完成功能,只是随意地使用了各种字符串,各种变量来处理返回的状态,等到程序大到一定程度的时候,就发现这很混乱,不容易维护了。    保存 token ,是为了下次打开程序的时候能自动登录,无需再次输入用户名和密码。    之后,有一个清除用户名和密码的操作。为什么需要这个操作?在 webview 的理解这篇文章说过,页面的webview 创建完毕后,是不会自己销毁的。虽然你后面可以再次迁移到别的webview,但是新的webview也只是覆盖在了之前的webview上。当我们的程序有注销的功能的时候,需要再次显示登录画面。如果登录画面没有经过 销毁-> 再构建的过程,那么显示登录画面的时候,就会显示出来你上次输入的用户名和密码。所以,我们在这里手动清空一下。    之后,使用 mui.openWindow 打开下一个页面。     接下来是服务器端的部分。在ajax中,我们给服务器端传递的参数名字叫 data,那么无论你是使用java也好,还是php 也好,都需要从 request 中取出 "data" 这个变量。这个变量的值就是字符串化的json。    本例使用的 jackson 来解析 json 数据,代码很简单: Java代码  
  1. ObjectMapper mapper = new ObjectMapper();  
  2. UserData userData = mapper.readValue(data, UserData.class);  
     UserData就是一个定义了用户名和密码变量的class,没有任何的逻辑。(按照Domain Driven Desgin的概念,它就是一个值对象,而不是实体,此乃题外话)    接下来就是查询数据库,验证用户名,密码是否有效。如果有效的话,我们要创建一个token返回给前台。为了保持唯一性,这个token 最好是和用户名相关联的。简单点的方法:md5(用户名+系统时间+随机数)。而且我们要把这个token保存在数据库里。为了安全,可以设置一个有效期。    处理完毕后,使用 jackson 构造json数据,返回就可以了,简单的例子:Java代码  
  1. response.setContentType("application/json");  
  2. response.setCharacterEncoding("UTF-8");  
  3. try {  
  4.     response.getWriter().print(json);  
  5.     response.getWriter().flush();  
  6.     response.getWriter().close();  
  7.       
  8. catch (IOException e) {  
  9.     // TODO Auto-generated catch block  
  10.     e.printStackTrace();  
  11. }  
     这样,登录的客户端和服务器端的部分就完成了。     当用户再次打开应用的时候,先判断localstorage 里是否保存有 token。如果有 token ,那么就通过ajax发送给服务器,服务器判断token 的有效性,如果验证通过,那么自动登录就成功,否则失败。 

相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台