1.设计思路
前端页面在立即秒杀 按钮旁边添加img 标签显示验证码,添加input标签用于用户填入验证码。
img 标签添加onclick时间用户按下调用refreshVerifyCode(),在refreh VerifyCode()中发送ajax 请求携带goodsId和时间Date()controller: 创建BufferedImge 获得maioshaService.createVerifyCode的返回值,通过javax.imageio.ImageIO 写入。在按秒杀之后在do_miaosha 中获得redis 中的保存的图片验证码与前端获得验证码作比较是否相等。
2.代码实现
goods.detail.htm style设置为“dispaly:none” 默认展示
<td>
<!--
<form id="miaoshaForm" method="post" action="/miaosha/do_miaosha">
<button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
<input type="hidden" name="goodsId" id="goodsId" />
</form>-->
<img id="verifyCodeImg" width="80" height="32" style="display: none" onclick="refreshVerifyCode()" >
<input id="verifyCode" class="form-control" style="display: none">
<button class="btn btn-primary btn-block" type="button" id="buyButton"onclick="getMashaPath()">立即秒杀</button>
<input type="hidden" name="goodsId" id="goodsId" />
</td>
秒杀进行时展示上面的验证码:
controller:
@RequestMapping(value = "/verifyCode",method = RequestMethod.GET)
@ResponseBody
public Result<String> getMiaoshaVerifyCode(HttpServletResponse response, MiaoshaUser user,
@RequestParam("goodsId")long goodsId) {
if(user == null) {
return Result.error(CodeMsg.SESSION_ERROR);
}
try {
BufferedImage image = miaoshaService.createVerifyCode(user, goodsId);
OutputStream out = response.getOutputStream();
ImageIO.write(image, "JPEG", out);
out.flush();//刷新到页面
out.close();
return null;
}catch(Exception e) {
e.printStackTrace();
return Result.error(CodeMsg.MIAOSHA_FAIL);
}
}
service:生成验证码,把验证码保存在redis 中
@Override
public BufferedImage createVerifyCode(MiaoshaUser user, long goodsId) {
if(user == null || goodsId <=0) {
return null;
}
int width = 80;
int height = 32;
//create the image
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
// set the background color
g.setColor(new Color(0xDCDCDC));
g.fillRect(0, 0, width, height);
// draw the border
g.setColor(Color.black);
g.drawRect(0, 0, width - 1, height - 1);
// create a random instance to generate the codes
Random rdm = new Random();
// make some confusion
for (int i = 0; i < 50; i++) {
int x = rdm.nextInt(width);
int y = rdm.nextInt(height);
g.drawOval(x, y, 0, 0);
}
// generate a random code
String verifyCode = generateVerifyCode(rdm);
g.setColor(new Color(0, 100, 0));
g.setFont(new Font("Candara", Font.BOLD, 24));
g.drawString(verifyCode, 8, 24);
g.dispose();
//把验证码存到redis中
int rnd = calc(verifyCode);
redisService.set(MiaoshaKey.getMiaoshaVerifyCode, user.getId()+","+goodsId, rnd);
//输出图片
return image;
}
private static int calc(String exp) {
try {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");
return (Integer)engine.eval(exp);
}catch(Exception e) {
e.printStackTrace();
return 0;
}
}
private static char[] ops = new char[] {'+', '-', '*'};
private String generateVerifyCode(Random rdm) {
int num1 = rdm.nextInt(10);
int num2 = rdm.nextInt(10);
int num3 = rdm.nextInt(10);
char op1 = ops[rdm.nextInt(3)];
char op2 = ops[rdm.nextInt(3)];
String exp = ""+ num1 + op1 + num2 + op2 + num3;
return exp;
}
显示效果:
redis中保存的:验证码
两个值对应
在按秒杀之后在path 中获得redis 中的保存的图片验证码与前端获得验证码作比较是否相等。
@ResponseBody
@RequestMapping(value = "/path")
public Result<String> getMiaoshaPath(HttpServletRequest request, MiaoshaUser user,
@RequestParam(value = "goodsId") Long goodsId,
@RequestParam(value = "verifyCode",defaultValue = "0") Integer verifyCode
){
logger.info("test");
user=getMiaoshauser(request);
if(user.getId()==null){
return Result.error(CodeMsg.SESSION_ERROR);
}
// Integer aveifyCode = Integer.valueOf(verifyCode);
logger.info("averifyCode "+verifyCode);
// 验证码是否正确
boolean ret= miaoshaService.chechVerifyCode(user, goodsId,verifyCode);
if(!ret){
return Result.error(CodeMsg.MIAOSHA_VERYCODEERROR);
}
logger.info("test2"+user);
String path = miaoshaService.createMiaoshaPath(user, goodsId);
return Result.success(path);
}