发表于: 2017-11-25 22:21:55
1 707
今日完成的事情:
今天首先弄清楚了ajax传输数据的方法。
第一个后端向前端传输数据,ajax接收:
@ResponseBody
public String sendMessage(HttpServletRequest request) throws IOException {
//传输后台数据到前台,ajax接受数据(其中的一种方式)
// String sss="Hello World!";
// response.getWriter().write(sss);
String userPhone=request.getParameter("phone");
if(userPhone==""){
return "enter your cell phone number";
} else if(userService.showUserDetails(userPhone)!=null){
return "the cell phone number has been registered";
直接用@ResponseBody,然后return要传输的数据。
或者:
String sss="Hello World!";
// response.getWriter().write(sss);
用response.getWriter().write();方法。
两种方法都可以,然后在前台用:
success: function(data){
alert(data);
},
接受数据。
然后ajax向后台传输数据:
1)
document.getElementById("phone").value;
data: "phone="+ phone
2)
url: "${ctx}/sendMessage?phone="+$("#phone").val(),
然后后台就可以接收到前台传回来的数据:
request.getParameter("phone");
就可以顺利得到前台传回来的数据。
本来我是直接把荣联的短信jar包放在本地,直接导入进来,测试的时候可以用,但是打包的时候却出现了问题,不能打包。后来发现是自己导入本地jar包的时候出现了问题,然后正确的方式是:
mvn install:install-file -Dfile=my-jar.jar -DgroupId=org.richard -DartifactId=my-jar -Dversion=1.0 -Dpackaging=jar
用maven命令,在控制台进行本地导入。然后就可以顺利的添加到本地依赖。
然后就是注册模块,本来以为发送一个验证码,然后输入,进行验证就行了。但是师兄告诉我,要做短信防轰炸,这个刚开始听到的时候没有想到怎么做,然后百度了一波,原来就是做个定时器。
var InterValObj; //timer变量,控制时间
var count = 120; //间隔函数,1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
curCount = count;
//设置button效果,开始计时
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
//向后台发送处理数据
$.ajax({
type: "get",
url: "${ctx}/sendMessage?phone="+$("#phone").val(),
success: function(data){
alert(data);
},
error: function(){
alert("发送失败!");
}
});
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").val("重新发送验证码");
}
else {
curCount--;
$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
}
}
这个定时器,看代码基本上都知道是什么意思,但是自己写的话,写不出来。模板是从网上搜索的。刚开始搜索的几个都有错误,后来自己看了一下代码,了解了一下之后,自己稍加修改就可以用了。
然后是发送验证码模块:
@RequestMapping(value = "/sendMessage",method = RequestMethod.GET)
@ResponseBody
public String sendMessage(HttpServletRequest request) throws IOException {
//传输后台数据到前台,ajax接受数据(其中的一种方式)
// String sss="Hello World!";
// response.getWriter().write(sss);
String userPhone=request.getParameter("phone");
if(userPhone==""){
return "enter your cell phone number";
} else if(userService.showUserDetails(userPhone)!=null){
return "the cell phone number has been registered";
}else {
String sendCode=RandomStringUtils.random(6,false,true);//产生6位随机验证码
String phone=request.getParameter("phone");//获得前天输入的手机号码
SendSMS.sendMessage(phone,sendCode);//发送手机验证码
HttpSession session=request.getSession();//创建一个session
session.setAttribute("sendCode",sendCode);//把验证码保存在session中
session.setAttribute("phone",phone);//把手机号保存在session中
session.setMaxInactiveInterval(120);//设置过期时间为两分钟
return "success";
}
}
我是在后台做的产生验证码,并且验证。
然后是注册模块,添加了对验证码的验证:
@RequestMapping(value = "/register", method = RequestMethod.POST)
public String register(String phone,String passWord,String userCode,HttpServletRequest request,Model model) {
String salt=RandomStringUtils.random(10,true,true);
Long time=System.currentTimeMillis();
User user =new User();
String sessionPhone= (String) request.getSession().getAttribute("phone");//获取session中的phone
String sessionCode= (String) request.getSession().getAttribute("sendCode");//获取session中code
//对帐号和密码进行判断,如果为空返回错误
if(passWord==""|| phone==""){
model.addAttribute("msg","用户名或密码不能为空");
return "error";
//对手机号码进行判断,如果重复输入,返回错误
}else if (userService.showUserDetails(phone)!=null){
model.addAttribute("msg","此手机号码已存在");
return "error";
} else if(userCode==""){//对用户输入的验证码进行验证
model.addAttribute("msg","请输入验证码");
return "error";
//判断输入的手机号和获取code的手机号是否一致
}else if((sessionPhone!=phone)||(sessionCode!=userCode)){
model.addAttribute("msg","请输入正确的验证码");
return "error";
}else {
//密码加盐保存在数据库中
String newPassWord = Md5Util.getMd5(Md5Util.getMd5(passWord) + salt);
user.setPhone(phone);
user.setPassWord(newPassWord);
user.setSalt(salt);
user.setCreateUser(time);
user.setUpdateUser(time);
userService.addUser(user);
return "redirect:/login";
}
}
由于写这部分逻辑写得少,里面好多逻辑总是丢东忘西的,要不就是少了一个判空,要不就是返回数据错误。
只不过最后都算是完成了。
定时器效果图。然后是点击按钮受到的随机6位数字的验证码:
然后测试注册功能的时候,遇到了一点小问题,验证码输入的时候总是有误。
然后现在正在打日志进行排查错误。
明日计划的事情:
继续进行任务七排查错误,并且准备小课堂。
遇到的问题:
学习前端的知识,ajax还有一点jQuery的内容,有点耽误了进度。注册验证的时候,验证码有误。
收获:
ajax从后台能获取数据,以及ajax向后台传输数据。maven添加本机依赖。
任务开始时间:2017/11/23
预计完成时间:2017/12/1
延期:无
禅道:http://task.ptteng.com/zentao/my-task.html
评论