服务端:
基本框架
//方法名称: 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:{ }
/** * 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":"[email protected]","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>