九、秒杀页面实现

商品列表页选择某个商品后,进入商品详情页(秒杀页面)。


<div class="panel panel-default">
    <div class="panel-heading">秒杀商品列表div>
    <table class="table" id="goodslist">
        <tr><td>商品名称td><td>商品图片td><td>商品原价td><td>秒杀价td><td>库存数量td><td>详情td>tr>
        <tr th:each="goods,goodsState : ${goodsList}">
            <td th:text="${goods.goodsName}">td>
            <td><img th:src="@{${goods.goodsImg}}" width="100" height="100"/>td>
            <td th:text="${goods.goodsPrice}">td>
            <td th:text="${goods.miaoshaPrice}">td>
            <td th:text="${goods.stockCount}">td>
            
            <td><a th:href="'/goods/to_detail/'+${goods.id}">详情a>td>
        tr>
    table>
div>

接收’/goods/to_detail/’+${goods.id}请求的接口
服务端根据goods.id得到对应goods,获取秒杀开始时间,结束时间和系统当前时间,判断得到当前的秒杀状态(未开始/进行中/已结束)。将秒杀状态和剩余时间都传回前端。

@RequestMapping("/to_detail/{goodsId}")
    public String toDetail(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";
    }

商品详情页
在miaoshaTip显示秒杀状态,未开始时显示剩余秒数,并倒计时,倒计时需要取到显示的当前秒数,因为另外两个状态没有值,这里使用一个隐藏的域保存当前秒数,秒数和显示的剩余秒数同步。

<body>
            <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}"/>
                <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>
            <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" th:value="${goods.id}"/>
                form>
            td>
            ```
            
```html
<script>
$(function () {
    countDown();
});

function countDown() {
    var remainSeconds = $("#remainSeconds").val(); //从hidden的input中得到倒计时
    var timeout;
    if (remainSeconds > 0) { //秒杀未开始,倒计时
        $("#buyButton").attr("disabled", true);  //秒杀按钮不能点
        timeout = setTimeout(function () {
            $("#countDown").text(remainSeconds - 1);  //显示的剩余秒数-1
            $("#remainSeconds").val(remainSeconds - 1);  //hidden的input秒数-1
            countDown();
        },1000); //一秒钟后回调
    } else if (remainSeconds == 0) { //秒杀进行中
        $("#buyButton").attr("disabled", false);   //秒杀按钮可以点
        if (timeout) {
            clearTimeout(timeout);//用于标识要取消的延迟执行代码块
        }
        $("#miaoshaTip").html("秒杀进行中");  //改文本
    } else { //秒杀已结束
        $("#buyButton").attr("disabled", true);    //秒杀按钮不能点
        $("#miaoshaTip").html("秒杀已结束");
    }
}
script>
html>

你可能感兴趣的:(JavaWeb,Spring,Boot高并发秒杀系统)