微信牛牛平臺搭建和 公眾號牛牛源碼搭建教程構成
下面的例子也是基於jackson解析的。如果你使用了SpringMVC，或者其他解析json的工具，或者其他語言如PHP，應該也是差不多的。
下面來看一下一個登錄過程的流程：
流程雖然比較多，但是很容易理解。先從客戶端看起。
首先就是通過Ajax的方式，將用戶名和密碼發送給客戶端。為了安全，我們不能直接發送明文的密碼，必須將密碼加密。可選擇的方式很多，一般都是不可逆的hash方式，如md5, sha1的方式加密。在本例中我們選擇 md5的方式加密。javascript裏的md5現成的方法很多，大家自己尋找一個合適的吧。但是標準就是：小，快，使用簡單。
接下來就是ajax的使用。mui 提供了ajax的使用方法，請參看這裏。
Js代碼
function postData(url, data, callback, waitingDialog) {
mui.ajax(url,{
data:‘data=‘+JSON.stringify(data),
dataType:‘json‘,
type:‘post‘,
contentType:"application/x-www-form-urlencoded; charset=utf-8",
timeout:60000,
success:callback,
error:function(xhr,type,errorThrown){
waitingDialog.close();
mui.alert("<網絡連接失敗，請重新嘗試一下>", "錯誤", "OK", null);
}
});
}
data 屬性：就是要傳遞給服務端的數據。之所以要加上 ‘data=‘ 這個東西，就是為了讓服務器端知道變量的名字是 "data" 。而傳遞的json 數據，也必須通過JSON.stringify方式轉換成字符串。
contentType屬性：這個很重要。如果沒有這個，你在後臺得到的中文字符串就會是亂碼。其實如果你熟悉Jquery，對這個屬性應該不會陌生。
error屬性：出錯的處理。這裏的 waitingDialog 是一個等待的對話框。在點擊登錄按鈕後，會顯示一個等待的對話框。無論出錯了，還是正常處理了，都必須要關閉這個等待的對話框。同時用 mui.alert 顯示了一個錯誤的消息。
以上就是 ajax 的請求函數。
接下來看看登錄按鈕的處理：
Js代碼
// 登錄處理，還記得我們上一篇寫得的按鈕關聯的事件吧
document.getElementById("loginBtn").addEventListener(‘tap‘, function(){
// 顯示一個等待的對話框
var wd = plus.nativeUI.showWaiting();
// 構造要傳遞的json數據
// $id 是一個通過 id 取得對象的方法，
// 內容就是 return document.getElementById();
var data = {"userName": $id(‘username‘).value,
"userPassword":md5Hash($id(‘userpassword‘).value)
};
// 調用ajax
postData(SERVER_HOST + MODULE_LOGIN, //服務端的URL
data,// json 數據
function(data) {
wd.close(); // 調用成功，先關閉等待的對話框
if(data.result != "checkOK") {
// 如果密碼錯誤，提示一下信息
mui.alert("用戶名或密碼錯誤", "登錄錯誤", "關閉");
return;
}
// 保存token，以便於下次自動登錄
localStorage.setItem(TOKEN_USER, $id(‘username‘).value);
localStorage.setItem(TOKEN_LOGIN, data.token);
// 清空用戶名，密碼
$id(‘username‘).value = "";
$id("userpassword").value = "";
// 打開下一個畫面
mui.openWindow(
{
url:‘mainShow.html‘,
id:‘mainShow‘,
}
);
},
wd//傳遞給postData的最後一個參數，失敗的時候關閉等待對話框
);
});
上面的代碼都有註釋，但是有的地方還是說明一下。
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代碼
ObjectMapper mapper = new ObjectMapper();
UserData userData = mapper.readValue(data, UserData.class);
UserData就是一個定義了用戶名和密碼變量的class，沒有任何的邏輯。（按照Domain Driven Desgin的概念，它就是一個值對象，而不是實體，此乃題外話）
接下來就是查詢數據庫，驗證用戶名，密碼是否有效。如果有效的話，我們要創建一個token返回給前臺。為了保持唯一性，這個token 最好是和用戶名相關聯的。簡單點的方法：md5(用戶名+系統時間+隨機數)。而且我們要把這個token保存在數據庫裏。為了安全，可以設置一個有效期。
處理完畢後，使用 jackson 構造json數據，返回就可以了，簡單的例子：
Java代碼
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
try {
response.getWriter().print(json);
response.getWriter().flush();
response.getWriter().close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
這樣，登錄的客戶端和服務器端的部分就完成了。
當用戶再次打開應用的時候，先判斷localstorage 裏是否保存有 token。如果有 token ，那麽就通過ajax發送給服務器，服務器判斷token 的有效性，如果驗證通過，那麽自動登錄就成功，否則失敗。
微信牛牛平臺搭建和 公眾號牛牛源碼搭建教程構成