如何在秒杀中用验证码分流压力

为什么要用验证码？

在秒杀的过程中突然跳出一个验证码，虽然给用户的体验不好，但一定程度上分散了同一时间下单压力，保持系统的可用性

1、后端之Controller

//生成验证码
    @RequestMapping(value = "/generateverifycode",method = {RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public void generateverifycode(HttpServletResponse response) throws BusinessException, IOException {
        String token = httpServletRequest.getParameterMap().get("token")[0];
        if(StringUtils.isEmpty(token)){
            throw new BusinessException(EmBusinessError.USER_NOT_LOGIN,"用户还未登陆，不能生成验证码");
        }
        UserModel userModel = (UserModel) redisTemplate.opsForValue().get(token);
        if(userModel == null){
            throw new BusinessException(EmBusinessError.USER_NOT_LOGIN,"用户还未登陆，不能生成验证码");
        }

        Map<String,Object> map = CodeUtil.generateCodeAndPic();

        redisTemplate.opsForValue().set("verify_code_"+userModel.getId(),map.get("code"));
        redisTemplate.expire("verify_code_"+userModel.getId(),10,TimeUnit.MINUTES);
        //response会把图片写出来传递到浏览器
        ImageIO.write((RenderedImage) map.get("codePic"), "jpeg", response.getOutputStream());
    }

1、后端之utils

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.awt.image.RenderedImage;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import javax.imageio.ImageIO;

public class CodeUtil {
    private static int width = 90;// 定义图片的width
    private static int height = 20;// 定义图片的height
    private static int codeCount = 4;// 定义图片上显示验证码的个数
    private static int xx = 15;
    private static int fontHeight = 18;
    private static  int codeY = 16;
    private static char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

    /**
     * 生成一个map集合
     * code为生成的验证码
     * codePic为生成的验证码BufferedImage对象
     * @return
     */
    public static Map<String,Object> generateCodeAndPic() {
        // 定义图像buffer
        BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // Graphics2D gd = buffImg.createGraphics();
        // Graphics2D gd = (Graphics2D) buffImg.getGraphics();
        Graphics gd = buffImg.getGraphics();
        // 创建一个随机数生成器类
        Random random = new Random();
        // 将图像填充为白色
        gd.setColor(Color.WHITE);
        gd.fillRect(0, 0, width, height);

        // 创建字体，字体的大小应该根据图片的高度来定。
        Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
        // 设置字体。
        gd.setFont(font);

        // 画边框。
        gd.setColor(Color.BLACK);
        gd.drawRect(0, 0, width - 1, height - 1);

        // 随机产生40条干扰线，使图象中的认证码不易被其它程序探测到。
        gd.setColor(Color.BLACK);
        for (int i = 0; i < 30; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            gd.drawLine(x, y, x + xl, y + yl);
        }

        // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
        StringBuffer randomCode = new StringBuffer();
        int red = 0, green = 0, blue = 0;

        // 随机产生codeCount数字的验证码。
        for (int i = 0; i < codeCount; i++) {
            // 得到随机产生的验证码数字。
            String code = String.valueOf(codeSequence[random.nextInt(36)]);
            // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。
            red = random.nextInt(255);
            green = random.nextInt(255);
            blue = random.nextInt(255);

            // 用随机产生的颜色将验证码绘制到图像中。
            gd.setColor(new Color(red, green, blue));
            gd.drawString(code, (i + 1) * xx, codeY);

            // 将产生的四个随机数组合在一起。
            randomCode.append(code);
        }
        Map<String,Object> map  =new HashMap<String,Object>();
        //存放验证码
        map.put("code", randomCode);
        //存放生成的验证码BufferedImage对象
        map.put("codePic", buffImg);
        return map;
    }

    public static void main(String[] args) throws Exception {
        //创建文件输出流对象
        OutputStream out = new FileOutputStream("/Users/hzllb/Desktop/javaworkspace/miaoshaStable/"+System.currentTimeMillis()+".jpg");
        Map<String,Object> map = CodeUtil.generateCodeAndPic();
        ImageIO.write((RenderedImage) map.get("codePic"), "jpeg", out);
        System.out.println("验证码的值为："+map.get("code"));
    }

3、前端

body

<div class="form-actions">
        <button class="btn blue" id="createorder" type="submit">
            下单
        </button>
    </div>
	//display:none默认不显示
    <div id="verifyDiv" style="display: none;" class="form-actions">
        <img src=""/>
        <input type="text" id="verifyContent" value=""/>
        <button class="btn blue" id="verifyButton" type="submit">
            验证
        </button>
    </div>

javascript
全局变量

var token = window.localStorage["token"];
var g_itemVO = {};

点击下单后，attr调用“生成验证码图片”接口
show将验证码图片显示出来

        $("#createorder").on("click", function () {
            if (token == null) {
                alert("没有登录，不能下单");
                window.location.href = "login.html";
                return false;
            }
            $("#verifyDiv img").attr("src", "http://" + g_host + "/order/generateverifycode?token=" + token);
            $("#verifyDiv").show();
        });

验证码出来，点击“验证”，调用后端“generatetoken”校验验证码，如果校验成功，后端则返给前端一个秒杀令牌killToken

$("#verifyButton").on("click", function () {
            $.ajax({
                type: "POST",
                contentType: "application/x-www-form-urlencoded",
                url: "http://" + g_host + "/order/generatetoken?token=" + token, //注意地址前面有"http://" + g_host +
                data: {
                    "itemId": g_itemVO.id,  //g_itemVO为全局变量
                    "promoId": g_itemVO.promoId,
                    "verifycode": $("#verifyContent").val()
                },
                xhrFields: {
                    withCredentials: true
                },
                success: function (data) {
                    if (data.status == "success") {
                        var killToken = data.data;  //后端生成killToken返给前端
                        $.ajax({
                            type: "POST",
                            contentType: "application/x-www-form-urlencoded",
                            url: "http://" + g_host + "/order/create?token=" + token, //浏览器带回来的token，跟秒杀令牌killToken不一样
                            data: {
                                "itemId": g_itemVO.id,
                                "amount": 1, //秒杀数量，默认只能买一个
                                "promoId": g_itemVO.promoId,
                                "promoToken": killToken  //秒杀令牌
                            },
                            xhrFields: {
                                withCredentials: true  //允许跨域
                            },
                            success: function (data) {
                                if (data.status == "success") {
                                    alert("下单成功");
                                    window.location.reload();  //如果下单成功，刷新下页面
                                } else {
                                    alert("下单失败，原因为" + data.data.errMsg);
                                }
                            },
                            error: function (data) {
                                alert("下单失败，原因为" + data.responseText);
                            }
                        });
                    } else {
                        alert("获取令牌失败，原因为" + data.data.errMsg);
                        if (data.data.errCode == 30001) {
                        }
                    }
                },
                error: function (data) {
                }
            });
        });

其他注意

RedisTemplate用来缓存