高并发秒杀项目——商品详情页

我们已经实现秒杀商品的列表页，当想要查看具体的秒杀信息时，点击每一个“详情”，就可以展现商品的详情页面以及秒杀倒计时。

秒杀倒计时

获取了商品的秒杀开始时间和结束时间，如果秒杀没有开始，那么计算还剩多少时间开始

 @RequestMapping("/to_detail/{goodsId}")
public String detail(Model model, MiaoshaUser user, @PathVariable("goodsId") long goodsId) {
        model.addAttribute("user", user);
        GoodsVo goods = goodsService.getGoodsVoByGoodsId(goodsId);
        model.addAttribute("goods", goods);
        //转化为毫秒
        long startAt = goods.getStartDate().getTime();
        long endAt = goods.getEndDate().getTime();
        long now = System.currentTimeMillis();

        int miaoshaStatus = 0;  //秒杀状态
        int remainSeconds = 0;  //距离开始秒杀还有多少秒

        if (now < startAt){     //秒杀还没开始，倒计时
            miaoshaStatus = 0;
            remainSeconds = (int)((startAt - now)/1000);
        }else if (now > endAt){ //秒杀结束
            miaoshaStatus = 2;
            remainSeconds = -1;
        }else {                 //秒杀中
            miaoshaStatus = 1;
            remainSeconds = 0;
        }
        model.addAttribute("miaoshaStatus", miaoshaStatus);
        model.addAttribute("remainSeconds", remainSeconds);
        return "goods_detail";
    }

这里定义一个状态miaoshaStatus来表示一个秒杀的状态，0代表秒杀还未开，1代表秒杀正在进行，2代表秒杀已经结束，秒杀还未开始的情况还要计算出倒计时，然后将miaoshaStatus和remainSeconds传到前端页面。

前端页面处理

将获取到的miaoshaStatus和remainSeconds（即秒杀状态和剩余时间变量）传到前端页面。定义一个属性来接收remainSecode ，并定义标签判断秒杀的状态，通过这个值来显示是否开始秒杀，秒杀正在进行中，以及秒杀结束。

<td>秒杀开始时间</td>
<td th:text="${#dates.format(goods.startDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
<td id="miaoshaTip">
    <input type="hidden" id="remainSeconds" th:value="${remainSeconds}"/>   <!-- 隐藏域 由于下面只有秒杀倒计时中才有remainSeconds，所以先在隐藏域中保留一份供其他地方使用-->
    <span th:if="${miaoshaStatus eq 0}">秒杀倒计时：<span id="countDown" th:text="${remainSeconds}"></span>秒</span>
    <span th:if="${miaoshaStatus eq 1}">秒杀进行中</span>
    <span th:if="${miaoshaStatus eq 2}">秒杀已结束</span>
</td>

秒杀按钮需要做特别处理，控制秒杀按钮的的可以点击与不可点击两种情况，没开始的时候按钮，不可点击，开始后显示按钮，此时可以点击，但是结束也不可点击。并且从倒计时状态到正在进行秒杀状态的时候要动态切换文案。

$(function () {
   countDown();
});
function countDown() {
    var remainSeconds = $("#remainSeconds").val();  //在隐藏域中取
    var timeout;
    if (remainSeconds > 0){ //秒杀还没开始，倒计时    按钮不能点
        $("#buyButton").attr("disabled", true);
        timeout = setTimeout(function () {
            $("#countDown").text(remainSeconds - 1);    //input标签用的是th:value       文案随着改
            $("#remainSeconds").val(remainSeconds - 1); //span标签用的是th:text
            countDown();    //不断回调countDown方法
        }, 1000);   //过1秒之后，setTimeout就会执行
    }else if(remainSeconds == 0){   //秒杀进行中
        $("#buyButton").attr("disabled", false);
        if (timeout){
            clearTimeout(timeout);  //自带的清除函数
        }
        $("#miaoshaTip").html("秒杀进行中"); //等到remainSeconds减到0时，改文案
    }else { //秒杀已经结束
        $("#buyButton").attr("disabled", true);
        $("#miaoshaTip").html("秒杀已结束");
    }
}

效果