今天晚上趁著自己的一個(gè)應(yīng)用開發(fā)完成了完整貫穿流程的一步恃泪，在休息之余來寫一下這篇登錄實(shí)現(xiàn)的文章外臂；首先要感謝一下聚云網(wǎng)的CEO何凌云對(duì)我遇到的問題的積極幫助坐儿，聚云網(wǎng)后端云真的是一個(gè)不錯(cuò)的平臺(tái)，省去了大部分后端工作，需要實(shí)現(xiàn)自己的邏輯和模型的時(shí)候只需自定義SQL貌矿、js和建立自己的模型就可以了累铅，大家可以體驗(yàn)一下。好了站叼，進(jìn)入正題：
- 首頁要完成登錄表單的html模板頁面娃兽，在這里我貼出我用“百小僧”的hui框架http://git.oschina.net/monksoul/Hui-2.x 寫的注冊(cè)表單代碼,代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>hello</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
<style type="text/css">
</style>
</head>
<body class="hui-width-height-full hui-background-color-greenSea">
<div class="hui-position-absolute hui-position-col-middle hui-width-full hui-text-align-center">
<div class="hui-row-center hui-padding-row-25">
<div class="hui-text-align-center">
<div class="hui-font-size-18">Hui</div>
</div>
</div>
<div class="hui-margin-top-10 hui-padding-col-15">
<div class="hui-flexbox-row hui-border-all-e6e6e6-after">
<span class="hui-col-middle hui-padding-left-10">
<i class="hui-iconfont hui-icon-phone hui-font-size-18 hui-col-middle hui-font-color-white"></i>
</span>
<input type="text" id="username" class="hui-vertical-align-middle hui-col-middle hui-font-size-16 hui-flexbox-item hui-box-sizing-border-box hui-border-none hui-outline-none hui-padding-all-15 hui-background-color-transparent hui-font-color-white" placeholder="用戶名" />
</div>
<div class="hui-flexbox-row hui-border-bottom-e6e6e6-after hui-border-col-e6e6e6-after">
<span class="hui-col-middle hui-padding-left-10">
<i class="hui-iconfont hui-icon-lock hui-font-size-18 hui-col-middle hui-font-color-white"></i>
</span>
<input type="password" id="password" class="hui-vertical-align-middle hui-col-middle hui-font-size-16 hui-flexbox-item hui-box-sizing-border-box hui-border-none hui-outline-none hui-padding-all-15 hui-background-color-transparent hui-font-color-white" placeholder="密碼" />
<span onclick="xianshi()" id="box" class="hui-show hui-col-middle hui-padding-left-10 hui-padding-right-10">
<i id="yan" class="hui-iconfont hui-icon-find-null hui-font-size-20 hui-col-middle hui-font-color-black"></i>
</span>
</div>
<div class="hui-margin-top-10">
<button onclick="login()" class="hui-button hui-width-full hui-border-radius-3 hui-background-color-turquoise hui-outline-none hui-border-all-turquoise hui-padding-row-10 hui-background-color-turquoise-active hui-font-color-white hui-border-all-turquoise-active">
<label>登錄</label>
</button>
</div>
<div class="hui-margin-top-10">
<span tapmode="" onclick="hui.openWin('reg','reg.html')" class="hui-font-color-white hui-float-left hui-font-size-14">注冊(cè)賬號(hào)</span><span class="hui-font-color-white hui-float-right hui-font-size-14">忘記密碼？</span>
</div>
</div>
</div>
</body>
</html>
- 登錄頁模板寫好后尽楔，我們就要在頁面中的兩個(gè)input標(biāo)簽中分別加入id="username"投储、id="password"，還要在登錄按鈕上添加一個(gè)點(diǎn)擊事件onclick="login()",如上面代碼中阔馋。
- 引入聚云網(wǎng)后端云的sdk和jquery玛荞，因?yàn)楹蠖嗽谱?cè)時(shí)接收的密碼是要進(jìn)行md5加密的，所以還要加入md5.js呕寝，代碼如下：
<script src="../script/jquery-3.0.0.min.js"></script>
<script src="../script/mashup_sdk.js" type="text/javascript" charset="UTF-8"></script>
<script src="../script/md5.js" type="text/javascript" charset="UTF-8"></script>
- 編寫js代碼勋眯，首先要獲取登錄表單中輸入的值，然后加入后端云的調(diào)用代碼把數(shù)據(jù)提交到服務(wù)器端下梢，這樣就可以獲取到服務(wù)端返回的是否登錄成功的不同數(shù)據(jù)客蹋，代碼如下：
function login(){
var username = hui.byId("username").value;
var password = hui.byId("password").value;
var appid = '';
var token = '';
$(document).ready(function(){
//獲取token，調(diào)用API服務(wù)
auth();
});
function auth(){
$.ajax({
type:'get',
//async:false,
url:"http://v2.mashupcloud.cn/developer/auth.do",
data:{
appkey:'UotqFqitgOlLtisTMtMBwAfvmzPjdoTo' , //修改為自己appkey
appsecret: 'orBlqdwKIZOwiTvEWmrZfpKysvDLLIwn' //修改為自己的appsecret
},
//dataType: "json",
success: function(json){
var jo = eval(json);
var token = jo[1];
var appid = jo[2];
//用戶登錄
user_login(token,appid);
},
error: function(json){
console.log("err:"+json);
}
});
}
//用戶登錄
function user_login(token,appid){
$.ajax({
type:'get',
url:"http://v2.mashupcloud.cn/system/user_login.do",
dataType:"json",
data:{
appid: appid,
token: token,
username:username,
password:md5(password)
},
success: function(json){
console.log("returnInfo=="+json);
},
error: function(json){
console.log("err:"+json);
}
});
}
}
}
- 上面4項(xiàng)完成了基本登錄的整個(gè)功能孽江，那怎么添加表單驗(yàn)證呢讶坯？請(qǐng)求執(zhí)行成功后怎么根據(jù)返回?cái)?shù)據(jù)分別相應(yīng)提示呢？
if (username.length==0) {
hui.toast("用戶名不能為空");
}else if (password.length==0) {
hui.toast("密碼不能為空");
}else{
var appid = '';
var token = '';
$(document).ready(function(){
//獲取token岗屏，調(diào)用API服務(wù)
auth();
});
function auth(){
$.ajax({
type:'get',
//async:false,
url:"http://v2.mashupcloud.cn/developer/auth.do",
data:{
appkey:'UotqFqitgOlLtisTMtMBwAfvmzPjdoTo' , //修改為自己appkey
appsecret: 'orBlqdwKIZOwiTvEWmrZfpKysvDLLIwn' //修改為自己的appsecret
},
//dataType: "json",
success: function(json){
var jo = eval(json);
var token = jo[1];
var appid = jo[2];
//用戶登錄
user_login(token,appid);
},
error: function(json){
console.log("err:"+json);
}
});
}
//用戶登錄
function user_login(token,appid){
$.ajax({
type:'get',
url:"http://v2.mashupcloud.cn/system/user_login.do",
dataType:"json",
data:{
appid: appid,
token: token,
username:username,
password:md5(password)
},
success: function(json){
var jo=eval(json);
console.log("returnInfo=="+json);
if (jo[0]=="OK") {
alert("登錄成功");
hui.setStorage('SessionKey',jo[1]);//存儲(chǔ)sessionkey到本地辆琅，你也可以使用存儲(chǔ)cookie的方法，以便于在其他頁面驗(yàn)證登錄狀態(tài)時(shí)候使用
}else if(jo[1]=="錯(cuò)誤的用戶名或密碼"){
alert("用戶名或密碼錯(cuò)誤");
}
},
error: function(json){
console.log("err:"+json);
}
});
}
}
這樣一個(gè)登錄包含的一些操作就完成了这刷，代碼中還有相應(yīng)提示請(qǐng)仔細(xì)查看婉烟，至于還要添加更多驗(yàn)證只要根據(jù)上面示例添加就可以了。 好了就寫到這里了暇屋，碼字太耗時(shí)了似袁，下篇文章內(nèi)容《apicloud結(jié)合聚云網(wǎng)后端云開發(fā)app之登錄狀態(tài)驗(yàn)證取出用戶名》。
