今天晚上趁着自己的一个应用开发完成了完整贯穿流程的一步，在休息之余来写一下这篇登录实现的文章；首先要感谢一下聚云网的CEO何凌云对我遇到的问题的积极帮助，聚云网后端云真的是一个不错的平台，省去了大部分后端工作，需要实现自己的逻辑和模型的时候只需自定义SQL、js和建立自己的模型就可以了，大家可以体验一下。好了，进入正题：
- 首页要完成登录表单的html模板页面，在这里我贴出我用“百小僧”的hui框架http://git.oschina.net/monksoul/Hui-2.x 写的注册表单代码,代码如下:
hello
Hui
注册账号忘记密码？
- 登录页模板写好后，我们就要在页面中的两个input标签中分别加入id="username"、id="password"，还要在登录按钮上添加一个点击事件onclick="login()",如上面代码中。
- 引入聚云网后端云的sdk和jquery，因为后端云注册时接收的密码是要进行md5加密的，所以还要加入md5.js，代码如下：
- 编写js代码，首先要获取登录表单中输入的值，然后加入后端云的调用代码把数据提交到服务器端，这样就可以获取到服务端返回的是否登录成功的不同数据，代码如下：
function login(){
var username = hui.byId("username").value;
var password = hui.byId("password").value;
var appid = '';
var token = '';
$(document).ready(function(){
//获取token，调用API服务
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项完成了基本登录的整个功能，那怎么添加表单验证呢？请求执行成功后怎么根据返回数据分别相应提示呢？
if (username.length==0) {
hui.toast("用户名不能为空");
}else if (password.length==0) {
hui.toast("密码不能为空");
}else{
var appid = '';
var token = '';
$(document).ready(function(){
//获取token，调用API服务
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]);//存储sessionkey到本地，你也可以使用存储cookie的方法，以便于在其他页面验证登录状态时候使用
}else if(jo[1]=="错误的用户名或密码"){
alert("用户名或密码错误");
}
},
error: function(json){
console.log("err:"+json);
}
});
}
}
这样一个登录包含的一些操作就完成了，代码中还有相应提示请仔细查看，至于还要添加更多验证只要根据上面示例添加就可以了。 好了就写到这里了，码字太耗时了，下篇文章内容《apicloud结合聚云网后端云开发app之登录状态验证取出用户名》。