一个不知名的项目--Day02

day02

今天一直在忙公司的项目,这个就稍微跟进了点进度

注册功能 续

添加令牌防止重复提交

servlet

String token = request.getParameter("token");
if (!request.getSession().getAttribute("token").equals(token)){
request.setAttribute("msg","重复提交");
request.getRequestDispatcher("/regist.jsp").forward(request, response);
return;
}
request.getSession().removeAttribute("token");

jsp页面

<c:set var="token" value="<%=UUID.randomUUID().toString()%>" scope="session"></c:set>
<input type="hidden" name="token" value="${token}" />

添加后端验证码生成

public class RandomVerifyUtils {
/**
* 随机生成验证码
*
* @param width 图片宽度
* @param height 图片高度
* @param os  输出方向
* @return 返回验证码的值
*/
public static String RandomImg(int width, int height, OutputStream os){
BufferedImage bi =new BufferedImage(width,height,BufferedImage.TYPE_3BYTE_BGR);
Graphics2D g2d = (Graphics2D) bi.getGraphics();
g2d.setColor(new Color(255,255,255));
g2d.fillRect(0,0,width,height);
String str="123456789+=qwertyuiplkjhgfdsazxcvbnmQWERTYUPLKJHGFDSAZXCVBNM";
StringBuilder code=new StringBuilder();
for (int i=0;i<4;i++){
String str1=str.charAt(RandomInt(0,str.length()))+"";
code.append(str1);
g2d.setColor(new Color(RandomInt(0,234),RandomInt(0,234),RandomInt(0,234)));
g2d.setFont(new Font("微软雅黑",Font.BOLD,25));
g2d.drawString(str1,width/8+(width-20)/4*i,RandomInt(30,35));
}
for (int i=0;i<6;i++){
if (RandomInt(0,6)>3){
g2d.setColor(new Color(RandomInt(0,234),RandomInt(0,234),RandomInt(0,234)));
g2d.drawLine(RandomInt(0,width),RandomInt(0,height),RandomInt(0,width),RandomInt(0,height));
}else{
g2d.setColor(new Color(RandomInt(0,234),RandomInt(0,234),RandomInt(0,234)));
g2d.drawOval(RandomInt(20,width-20),RandomInt(10,height-10),10,20);
}
}
try {
ImageIO.write(bi, "JPEG", os);
} catch (IOException e) {
e.printStackTrace();
}
return code.toString();
}
private static int RandomInt(int begin, int end){
return  new Random().nextInt(end-begin)+begin;

}
}

验证码响应servlet

String s = RandomVerifyUtils.RandomImg(120,40,response.getOutputStream());
request.getSession().setAttribute("code",s);

整理页面 添加前端数据验证

(＞﹏＜)

- 特效

function texiao(name,index) {
$('.page-container form').find('.error').fadeOut('fast', function(){  //淡出效果
index=27+index*69;
$(this).css('top', index+'px');
});
$('.page-container form').find('.error').fadeIn('fast', function(){  //淡入
$(this).parent().find("input[name='"+name+"']").focus();
});

4000
return false;
}

验证码点点

这里有一个问题,多页面注册时,会发生验证码覆盖的问题

所以这里我选择用户在验证码输入框获取焦点时,生成一个新的验证以保证每次都是最新的

还有一种思路就是以令牌为key..

$("#img1").click(function () { //满足用户瞎点点
$(this).attr("src",$("input[name='app']").val()+"/VerifyServlet?"+Math.random());
})

//每次获得焦点就重新获取验证码保证验证码永远是最新的预防多页面注册时产出的问题
$('.page-container form').find("input[name='code']").focus(function () {
$("#img1").attr("src",$("input[name='app']").val()+"/VerifyServlet?"+Math.random());
})

用户名是否已被使用的ajax

提高用户体验

js代码

$('input[name="uname"]').blur(function () {
var val = $(this).val();
if (!val){ //为空啥都不做
return ;
}
$.get($("input[name='app']").val()+"/AJAXVerifyUserNameServlet",{"name":val},function (re) {
if(re!="true"){
$('.page-container form').find(".error1").find("span").text("用户名已被使用");
$('.page-container form').find('.error1').fadeOut('fast', function(){  //淡出效果
//index=27+index*69;
$(this).css('top', '0px');
});
$('.page-container form').find('.error1').fadeIn('fast', function(){  //淡入
$(this).parent().find("input[name='"+name+"']").focus();
});
return false;
}
})
})

servlet

String name = request.getParameter("name");
UserService instence = BasicFactory.factory.getInstence(UserService.class);
System.out.println("name = " + name);
if (instence.checkName(name)){
response.getWriter().write("true");
return;
}
response.getWriter().write("false");

总结

今天有些匆忙就不测试了,明天测试吧

有点累 匆忙终结一下