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);
}