服务端:
基本框架
//方法名称:
tel: {
attribute: { //这里用来确定用户是否登录状态
},
method: function(e) {
var _ = this.apis;
//检查手机号码是否存在
app.awf.task({
//添加数据库sql方法
//成功进入下一个task
}).task({ //添加数据库sql方法
//成功进入下一个task
}).task({
//添加数据库sql方法
//成功进入下一个task
}).task({
//添加数据库sql方法
//成功进入下一个task
}).task({
//添加数据库sql方法
//成功进入下一个task
}).await({
//当返回成功或者失败 调用这里的函数来返回值});}
});
}
}
tel:{
},//注意这里
code:{
}
下面贴上我的服务端的js代码
/**
* sign应用auth处理类
*
* 用户授权处理类
*
*读取例子 http://127.0.0.1:9080/api/admin/passwordrecover.tel?params={"tel":"22222"}
*保存例子 http://127.0.0.1:9080/api/admin/person.save?params={"e":"lyb@wxy.com","t":"13811641164","s":"1","n":"lyb"}
* @category task
* @class auth
* @namespace task.sign
* @author SDark
* @since
* 2014.09.09 lyb创建邮箱找回和密码找回
*/
var task = {};
task.code = "admin.passwordrecover";
task.name = "admin.passwordrecover";
task.description = "验证手机号和验证码";
/**
* 依赖api项
*/
task.deps = {
sql: "common.sql",
sqlls: "common.biz",
msg: "common.msg"
};
/**
* 任务标记
* @attribute attribute
*/
task.attribute = {};
task.tasks = {
tel: {
attribute: {
//"user":true
},
method: function(e) {
var _ = this.apis;
//调用字段名处理
//var utype = 1;//e.action.user.utype;
//检查手机号码是否存在
app.awf.task({
code: "One",
method: function(ex) {
var sql = "select * from userbase where telphone=:telphone";
console.info(sql)
_.sqlls.query(sql, {
telphone: e.params.tel
}).success(function(rows) {
if (rows.length <= 0) {
ex.error("学生电话不存在!<br/>请确认您的手机号!");
ex.failure({
data: false
});
} else {
ex.success({
data: true
});
}
}).failure(function(err) {
ex.error(err);
});
}
/*
console.log(result);
function addNumber(_idx) {
var str = '';
for (var i = 0; i < _idx; i += 1) {
str += Math.floor(Math.random() * 10);
}
return str;
}
addNumber(6);
console.log(addNumber(6));
e.result({
status:1
//如果要返回结果,那么就去掉大括号{}
//status:1//如果想查看返回值都有什么,写a:status
});
}).failure(function(){
console.log("没查到数据!失败!failure");
e.result({
status:2
});
}*/
}).task({
code: "Two",
method: function(ex) { //检查该电话是否存在的验证码,如果不存在验证码,会不断的给手机发短信
var sql = "select * from user_check where telphone=:telphone and status=1 and :now<=timeout and :now>=createtime";
console.info(sql)
_.sqlls.query(sql, {
telphone: e.params.Tel,
now: Date.now() - 946684800000
}).success(function(rows) {
if (rows.length > 0) {
ex.error("当前验证码还处于有效状态,不能重复获取!");
} else {
ex.success({
data: true
});
}
}).failure(function(err) {
ex.error(err);
});
}
}).task({
code: "Three",
method: function(ex) { //重置验证码 可不要
var sql = "update user_check set status=3 where telphone=:telphone";
console.info(sql)
_.sqlls.query(sql, {
telphone: e.params.Tel
}).success(function(rows) {
ex.success({
data: true
});
}).failure(function(err) {
ex.error(err);
});
}
}).task({
code: "Four",
method: function(ex) { //短信发送
var syspassword = addNumber(6); //这里验证码,有可能重复和少几位数
function addNumber(_idx) {//这里可以单独为一个js文件来测试
var str = '';
for (var i = 0; i < _idx; i += 1) {
str += Math.floor(Math.random() * 10);
}
return str;
}<pre name="code" class="javascript"><span style="white-space:pre"> </span>// _.msg.send(e.params.Tel,
// syspassword
// ).success(function(rows) {
// ex.success({
// data: syspassword
// });
// }).failure(function(err) {
// ex.error(err);
// });
ex.success({
data: syspassword
});
}
}).task({
code: "Five",
method: function(ex) { //保存验证码
var sql = "insert into user_check(telphone,checkinfo,timeout,createtime,status) values(:telphone,:checkinfo,:timeout,:createtime,1);";
console.log(sql);
_.sqlls.query(sql, {
telphone: e.params.tel,
checkinfo: ex.get("Four").data,
timeout: Date.now() - 946684800000 + 100000,
createtime: Date.now() - 946684800000
}).success(function(rows) {
ex.success({
data: true
});
}).failure(function(err) {
ex.error(err);
});
}
}).await({
success: function(ex) {
e.result({
"successTag": true
});
},
failure: function(ex) {
e.result({
"successTag": false,
"msg": ex.toString().replace("Error:", "")
});
}
});
}
}, //方法与方法之间要添加逗号
//验证验证码
code: {
attribute: {
},
method: function(e) { //判断验证码是否正确
var _ = this.apis;
console.info(e.params.StuPhone);
console.info(e.params.ValidateCode);
var sql = "select iid from user_check where telphone=:telphone and status=1 and checkinfo=:checkinfo and :now<=timeout and :now>=createtime;";
//var sql = "select count(*) as a from user_check where telphone=:telphone and status=1 and checkinfo=:checkinfo"
_.sqlls.query(sql, {
telphone: e.params.StuPhone,
now: Date.now() - 946684800000,
checkinfo: e.params.ValidateCode
}).success(function(row) {
console.info(row);
if (row.length > 0) {
console.log("成功!" + row);
e.result(
row
);
} else {
console.log("验证码不正确!请仔细核对!");
e.result({
status: 2
});
}
/*if (rows[0]["a"] > 0) { 用于count(*)
console.log("成功!");
e.result({
status: 1
});
} else {
//e.error("验证码不正确!请仔细核对!");
console.log("验证码不正确!请仔细核对!");
e.result({
status: 2
});
};*/
}).failure(function() {
console.log("失败!");
e.result({
status: 3
});
});
}
},
//保存密码
save: {
attribute: {
},
method: function(e) {
var _ = this.apis;
var sql1 = "select iid from user_check where checkinfo=:checkinfo"
var sql = "update userbase set upassword=:pwd where telphone=:tel;";
console.log(e.params.tel);
console.log(e.params.code);
_.sqlls.query(sql1, {
checkinfo: e.params.code
}).success(function(result) {<pre name="code" class="javascript"><span style="white-space:pre"> </span>_.sqlls.save(sql, {
pwd: e.params.pwd,
tel: e.params.tel //符号
}).success(function(result) {
console.log("成功!!");
e.result({ //注意
"successTag": true
});
}).failure(function() {
console.log("失败!");
e.result({
"successTag": false
});
});
}).failure(function() {
console.log("失败!");
e.result({
"successTag": false
});
});
}
}
};
exports.task = task;
客户端的js
var RefreshTool = function(arg, tel, code) { //页面图片控制这里可以加参数,这里获得跳转之前的页面的参数传到跳转后的页面参数
_("#Last").attr("tel", "");//定义手机号码参数
_("#Last").attr("code", "");//定义手机号码参数
if (arg == 1) {
_("#Setp1").css("background", "url('Context/images/password/u6.png')")
_("#Setp2").css("background", "url('Context/images/password/u36.png')")
_("#Setp3").css("background", "url('Context/images/password/u0.png')")
_("#Setp1 img").attr("src", "Context/images/password/u4.png")
_("#Setp2 img").attr("src", "Context/images/password/u4.png")
_("#Setp3 img").attr("src", "Context/images/password/u44.png")
_("#Last").hide();
_("#First").show();
} else if (arg == 2) {
_("#Setp1").css("background", "url('Context/images/password/u36.png')")
_("#Setp2").css("background", "url('Context/images/password/u6.png')")
_("#Setp3").css("background", "url('Context/images/password/u0.png')")
_("#Setp1 img").attr("src", "Context/images/password/u44.png")
_("#Setp2 img").attr("src", "Context/images/password/u44.png")
_("#Setp3 img").attr("src", "Context/images/password/u4.png")
_("#First").hide();
} else {
_("#Setp1").css("background", "url('Context/images/password/u0.png')")
_("#Setp2").css("background", "url('Context/images/password/u36.png')")
_("#Setp3").css("background", "url('Context/images/password/u6.png')")
_("#Setp1 img").attr("src", "Context/images/password/u8.png")
_("#Setp2 img").attr("src", "Context/images/password/u8.png")
_("#Setp3 img").attr("src", "Context/images/password/u44.png")
_("#Email").hide();
_("#Phone").hide();
_("#Last").attr("tel", tel);//传手机号码参数值
_("#Last").attr("code", code);//传验证码参数值
_("#Last").show();
}
};
var wait = 0;
var events = {
ByEmail: function(sender, arg) { //通过邮箱找回
RefreshTool(2);
_("#Email").show();
},
ByTel: function(sender, arg) { //通过手机找回
RefreshTool(2);
_("#Phone").show();
},
EmailOK: function(sender, arg) { //填写好邮箱找回信息
RefreshTool(3);
},
CodeOK: function(sender, arg) {
if (wait > 0) return;
wait = 60;
var tel = _('[data-item="telphone"]', events.parent).val(); //选择器 [name="tel"]和[data-item="telphone"]都可以
if (tel.length < 1) {
//alert("请输入手机号!");
app.tpl("Admin->passwordrecover.alert", function(tpl, p) {
var infom = tpl({
itype: "warning", //发送itype 也就是改变class alert-xxxx
info: "请输入手机号!"
}, {});
p.html(infom);
wait = 0;
}, events.parent); //event代表事件,parent页面
return;
} else {
console.log(tel);
_.post("api/admin/passwordrecover/tel", { //注意这里的路径
tel: tel
}, function(r) {
console.info(r.successTag);
//alert("验证码已发送!请查看手机短信!");
if (r.successTag == false) {
app.tpl("Admin->passwordrecover.alert", function(tpl, p) {
var infom = tpl({
itype: "warning", //发送itype 也就是改变class alert-xxxx
info: "手机号码不存在,请仔细核对!!"
}, {});
p.html(infom);
wait = 0;
}, events.parent); //event代表事件,parent页面
return;
} else {
app.tpl("Admin->passwordrecover.alert", function(tpl, p) {
var infom = tpl({
itype: "success",
info: "验证码已发送!请查看手机短信!!"
}, {});
p.html(infom);
var intk;
function showalert() {
if (wait == 0) {
sender.html("重新获取验证码");
clearInterval(intk);
} else {
sender.html("重新发送(" + wait + ")");
wait--;
}
}
intk = setInterval(showalert, 1000);
}, events.parent); //event代表事件,parent页面
return;
}
//
//if(wait>0) return;
//分开
}, "json");
}
/* console.info(tel)
这个是setTimeout方法
if (wait > 0) return;
wait = 60;
function time(o) {
if (wait == 0) {
o.html("免费获取验证码");
} else {
o.html("重新发送(" + wait + ")");
wait--;
setTimeout(function() {
time(o)
},
1000)
}
}
time(sender);
*/
// var t=setTimeout("alert('5 秒!')",5000)//5秒后弹出提示框
/* var phone = document.getElementsByName("tel");
tel = phone.val();
alert(tel);*/
//window.location.href="http://www.baidu.com";
/*
var wait=60;
function time(o) {
}*/
},
TelOK: function(sender, arg) { //填写好手机找回信息
var code = _('[data-item="code"]', events.parent).val(); //选择器 [name="tel"]和[data-item="telphone"]都可以
var tel = _('[data-item="telphone"]', events.parent).val();
console.info(code);
console.info(tel);
if (tel.length < 1) {
if (code.length < 1) {
//alert("请输入验证码和手机号!!");
app.tpl("Admin->passwordrecover.alert", function(tpl, p) {
var infom = tpl({
itype: "warning", //发送itype 也就是改变class alert-xxxx
info: "请输入验证码和手机号!"
}, {});
p.html(infom);
}, events.parent); //event代表事件,parent页面
return;
} else {
//alert("请输入手机号!");
app.tpl("Admin->passwordrecover.alert", function(tpl, p) {
var infom = tpl({
itype: "warning", //发送itype 也就是改变class alert-xxxx
info: "请输入手机号!"
}, {});
p.html(infom);
}, events.parent); //event代表事件,parent页面
return;
};
} else {
if (code.length < 1) {
//alert("请输入验证码!");
app.tpl("Admin->passwordrecover.alert", function(tpl, p) {
var infom = tpl({
itype: "warning", //发送itype 也就是改变class alert-xxxx
info: "请输入验证码!"
}, {});
p.html(infom);
}, events.parent); //event代表事件,parent页面
return;
} else {
_.post("api/admin/passwordrecover/code", { //注意这里的路径
ValidateCode: code,
StuPhone: tel
}, function(r) {
console.log(r);
if (r.length > 0) {
//alert("验证成功!");
//在这里激发模态框
_('#myModal').modal('show');//激发模态框!
RefreshTool(3, tel, code);
// app.tpl("Admin->passwordrecover",function(){
// data-target:"#myModal";
// }
/*app.tpl("Admin->passwordrecover.alert", function(tpl, p) {
var infom = tpl({
itype: "success", //发送itype 也就是改变class alert-xxxx
info: "验证成功!"
}, {});
p.html(infom);
}, events.parent); //event代表事件,parent页面
RefreshTool(3, tel);
return;*/
} else {
//alert("验证码输入错误!请重新输入!");
app.tpl("Admin->passwordrecover.alert", function(tpl, p) {
var infom = tpl({
itype: "warning", //发送itype 也就是改变class alert-xxxx
info: "验证码输入错误!请重新输入!!"
}, {});
p.html(infom);
}, events.parent); //event代表事件,parent页面
return;
};
}, "json");
};
}
//填写随机生成验证码并发送服务端请求
/* var wait = 60;
time:function (o){
if (wait == 0) {
o.removeAttribute("disabled");
o.value="免费获取验证码";
wait = 60;
} else { // www.jbxue.com
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
},
1000)
}
};*/
//window.location.href="http://www.baidu.com";
//RefreshTool(3);
},
btnOK: function(sender, arg) { //修改密码
var pwd1 = _('[data-item="password1"]', events.parent).val(); //选择器 [name="tel"]和[data-item="telphone"]都可以
var pwd2 = _('[data-item="password2"]', events.parent).val();
console.info(pwd1);
console.info(pwd2);
if (pwd1 == pwd2) {
//alert("两者密码一致!");
_.post("api/admin/passwordrecover/save", { //注意这里的路径
pwd: pwd2,
tel: _("#Last").attr("tel"),
code: _("#Last").attr("code")
}, function(r) {
console.info(r);
//alert("修改密码成功!");
if (r.successTag == true) {
console.info(r.successTag);
app.tpl("Admin->passwordrecover.alert1", function(tpl, p) {
var infom = tpl({
itype: "success", //发送itype 也就是改变class alert-xxxx
info: "修改密码成功!!"
}, {});
p.html(infom);
}, events.parent); //event代表事件,parent页面
return;
} else {
console.info(r.successTag);
app.tpl("Admin->passwordrecover.alert1", function(tpl, p) {
var infom = tpl({
itype: "warning", //发送itype 也就是改变class alert-xxxx
info: "修改密码失败!!!"
}, {});
p.html(infom);
}, events.parent); //event代表事件,parent页面
return;
}
})
} else {
//alert("两者密码不一致,请重新输入!");
app.tpl("Admin->passwordrecover.alert1", function(tpl, p) {
var infom = tpl({
itype: "warning", //发送itype 也就是改变class alert-xxxx
info: "两者密码不一致,请重新输入!!!"
}, {});
p.html(infom);
}, events.parent); //event代表事件,parent页面
return;
}
_("#Last").attr("tel")
_("#Last").attr("code")
//RefreshTool(1);
}
};
tpl模板
<div class="cpage container projects" id="${cid}">
<div class="page-header-deai">
<div class="container">
<h1>
<span class="icon icon-home" event="back" url="paper" style="cursor: pointer;margin-right: 10px"></span>
密码找回
</h1>
</div>
</div>
<hr class="hr-deai" />
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="Setp1" style="float:left;font-size:16px;width:250px;height: 40px; background: url('Context/images/password/u6.png');">
<img style="left:0px;top:0px;width:26px;height:41px;"src="Context/images/password/u4.png"/>
<span >1.选择找回方式</span>
</div>
<div id="Setp2" style="float:left;font-size:16px;width:250px;height: 40px; background: url('Context/images/password/u36.png');">
<img style="left:0px;top:0px;width:26px;height:41px;"src="Context/images/password/u4.png"/>
<span >2.验证用户身份</span>
</div>
<div id="Setp3" style="float:left;font-size:16px;width:250px;height: 40px; background: url('Context/images/password/u2.png');">
<img style="left:0px;top:0px;width:26px;height:41px;"src="Context/images/password/u44.png"/>
<span >3.设置新密码</span>
</div>
</div>
</div>
<div class="row" >
<div class="col-sm-8 col-sm-offset-2" >
<div style="height:330px; BORDER-LEFT: 1px solid gray ;BORDER-RIGHT: 1px solid gray;BORDER-BOTTOM: 1px solid gray;BORDER-TOP: 1px solid gray;">
<br/>
<div id="First" class="row" style="display:true;" >
<div class="col-sm-6 ">
<div class="thumbnail" >
<img src="Context/images/paper/paper1.png" alt="试卷" style="width: 120px; margin-top: 20px;"/>
<div style="padding: 25px;">
<button type="button" class="btn btn-default btn-lg" on="ByEmail">通过邮箱找回</button>
</div>
<p><small>通过注册时填写的邮箱找回</small></p>
</div>
</div>
<div class="col-sm-6 ">
<div class="thumbnail" >
<img src="Context/images/paper/paper1.png" alt="试卷" style="width: 120px; margin-top: 20px;"/>
<div style="padding: 25px;">
<button type="button" class="btn btn-default btn-lg" on="ByTel">通过手机找回
</button>
</div>
<p><small>通过注册时填写的手机号找回</small></p>
</div>
</div>
</div>
<div id="Phone" style="text-align:center; display:none;" >
<div class="btn-group " style="width:350px;">
<h4 style="float: left;">请输入您的注册手机号
</h4>
<dl class="dl-horizontal" style="margin-top:50px;">
<dt>手机号:</dt>
<dd>
<input type="text" class="form-control " name="tel" placeholder="Tel" data-item="telphone" value="${Data.telphone}" />
</dd>
<br/>
<dt>验证码:</dt>
<dd>
<input type="text" class="form-control" data-item="code" value="${Data.code}"/>
<u id="btn" style="cursor: pointer;" on="CodeOK" value="免费获取短信">免费获取短信</u>
<small style="color:gray;">60s后重新获取</small>
</dd>
<br/>
<dt></dt>
<dd>
<button type="button" class="btn btn-default" style="padding-left:25px;padding-right:25px;" on="TelOK">确 定</button>
</dd>
</dl>
</div>
<div tpl="alert">
{@if info}
<tpl name="alert">
<div class="alert alert-${itype} fade in" role="alert">${info}</div>
</tpl>
{@/if}
</div>
</div>
<div id="Email" style="text-align:center; display:none;" >
<div class="btn-group " style="width:350px;">
<h4 style="float: left;">请填写您的注册邮箱</h4>
<dl class="dl-horizontal" style="margin-top:50px;">
<dt>注册邮箱:</dt>
<dd>
<input type="email" class="form-control" placeholder="Enter email"/>
</dd>
<br/>
<dt></dt>
<dd>
<button type="button" class="btn btn-default" style="padding-left:25px;padding-right:25px;" on="EmailOK">发送邮件</button>
</dd>
</dl>
</div>
</div>
<!--这是提示框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
提示
</h4>
</div>
<div class="modal-body">
验证成功!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
data-dismiss="modal">确定
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div id="Last" style="text-align:center;display:none;" >
<div class="btn-group " style="width:350px;">
<h4 style="float: left;">设置您的新密码</h4>
<dl class="dl-horizontal" style="margin-top:50px;">
<dt>新密码:</dt>
<dd>
<input type="password" class="form-control" data-item="password1" placeholder="Password"/>
</dd>
<br/>
<dt>再次输入:</dt>
<dd>
<input type="password" class="form-control" data-item="password2" placeholder="Password"/>
</dd>
<br/>
<dt></dt>
<dd>
<button type="button" class="btn btn-default" style="padding-left:25px;padding-right:25px;" on="btnOK">确 定</button>
</dd>
</dl>
</div>
<div tpl="alert1">
{@if info}
<tpl name="alert1">
<div class="alert alert-${itype} fade in" role="alert1">${info}</div>
</tpl>
{@/if}
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div tpl="modal"></div>
</div>