SpringBoot秒杀系统实战13-秒杀商品详情页+秒杀倒计时功能实现_springboot 任务触发后 ,开始倒计时-CSDN博客

程序鹏

于 2020-05-08 00:00:00 发布

1326
收藏 4
分类专栏： Spring Boot 秒杀系统文章标签： java spring boot web
版权

Spring Boot
同时被 2 个专栏收录
29 篇文章1 订阅
订阅专栏

秒杀系统
26 篇文章8 订阅
订阅专栏
文章目录
秒杀倒计时：
1、在GoodsController里面创建toDetail方法，接收详情页面的请求
2、前端页面处理逻辑
3、goods_detail.html完整代码：
怎么注入MiaoshaUser的实例参数
在上一节中，我们已经实现秒杀商品的列表页的显示，其中可以点击每一个商品的【详情】查看具体的秒杀信息，那么我们这一节就来实现商品的详情页面的显示以及秒杀倒计时功能实现。【详情】链接中有{goodsId}作为参数，后端@PathVariable(“goodsId”)long goodsId拿到这个goodsId，然后去数据库查询对应的商品信息，并显示秒杀情况。

我们点击商品详情，发送一个连接到后端，那么我们要先设计出一个接收’/goods/to_detail/’+${undefinedgoods.id}该请求的接口。

秒杀倒计时：
后端根据商品的Id去数据库中获取秒杀开始时间和结束时间，以及系统当前时间，并定义秒杀剩余时间变量和秒杀状态，计算出相应的值，传给前端，前端拿到之后，做相对应的显示逻辑效果。

1、在GoodsController里面创建toDetail方法，接收详情页面的请求

   /**
   * 未作页面缓存
   * @param model
   * @param user
   * @param goodsId
   * @return
   */
   @RequestMapping("/to_detail/{goodsId}")
   public String toDetail(Model model,MiaoshaUser user,@PathVariable("goodsId")long goodsId) {//id一般用snowflake算法
       model.addAttribute("user", user);
       GoodsVo goods=goodsService.getGoodsVoByGoodsId(goodsId);
       model.addAttribute("goods", goods);
       //既然是秒杀，还要传入秒杀开始时间，结束时间等信息
       long start=goods.getStartDate().getTime();
       long end=goods.getEndDate().getTime();
       long now=System.currentTimeMillis();
       //秒杀状态量
       int status=0;
       //开始时间倒计时
       int remailSeconds=0;
       //查看当前秒杀状态
       if(now<start) {//秒杀还未开始，--->倒计时
           status=0;
           remailSeconds=(int) ((start-now)/1000); //毫秒转为秒
       }else if(now>end){ //秒杀已经结束
           status=2;
           remailSeconds=-1; //毫秒转为秒
       }else {//秒杀正在进行
           status=1;
           remailSeconds=0; //毫秒转为秒
       }
       model.addAttribute("status", status);
       model.addAttribute("remailSeconds", remailSeconds);
       return "goods_detail";//返回页面login
   }
注意：获取了商品的秒杀开始时间和结束时间，如果秒杀没有开始，那么计算一个还剩多少时间，开始，并且定义一个状态status来表示一个秒杀的状态，0代表秒杀还未开，1代表秒杀正在进行，2代表秒杀已经结束，秒杀还未开始的情况还要计算出倒计时，(int) ((start-now)/1000)，然后将status和remailSeconds传到前端去。

2、前端页面处理逻辑

前端需要获取status和remailSeconds（即秒杀状态和剩余时间变量），定义个一个属性为隐藏的input来接收remainSecode ，并且定义标签来判断status的状态，通过这个值来显示是否开始秒杀，秒杀正在进行中，以及秒杀结束。

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

注意：这里使用setTimeout函数，setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

这里是1000毫秒，即每过一秒，将remianSecond 值减一，并设置到显示text中（即实现倒计时动态效果），然后在调用coutDown，判断此时是否结束此状态（remailSeconds==0），结束调用。

3、goods_detail.html完整代码：

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"> 
<head>
<meta charset="UTF-8"/>
<title>商品列表</title>
   
   
   
   <script type="text/javascript" th:src="@{/jquery-validation/lib/jquery-1.11.1.js}"></script>
   
   
   <link type="text/css" rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}"/>
   <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body>
   <div class="panel panel-default">
       <div class="panel-heading">秒杀商品详情</div>
       <div class="panel-body">
           <span th:if="${user eq null}">您还没有登录，请登录后再操作</span>
           <span>没有收货地址的提示。。。</span>
       </div>
       <table class="table" id="goodslist">
       <tr>
           <td>商品名称</td>
           <td colspan="3" th:text="${goods.goodsName}"></td>
       </tr>
       <tr>
           <td>商品图片</td>
           <td colspan="3"><img th:src="@{${goods.goodsImg}}" width="80" height="60"></img></td>
       </tr>
       <tr>
           <td>秒杀开始时间</td>
           <td th:text="${#dates.format(goods.startDate,'yyyy-MM-dd HH:mm:ss')}"></td>
           <td id="miaoshaTip">
               
               <input type="hidden" id="remailSeconds" th:value="${remailSeconds}"></input>

               <span th:if="${status eq 0}">秒杀还未开始，倒计时:<span id="countDown" th:text="${remailSeconds}"></span>秒</span>
               <span th:if="${status eq 1}">秒杀正在进行</span>
               <span th:if="${status 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}"></input>
               </form>
           </td>
       </tr>
       <tr>
           <td>商品原价</td>
           <td colspan="3" th:text="${goods.goodsPrice}"></td>
       </tr>
       <tr>
           <td>秒杀价</td>
           <td colspan="3" th:text="${goods.miaoshaPrice}"></td>
       </tr>
       <tr>
           <td>库存数量</td>
           <td colspan="3" th:text="${goods.stockCount}"></td>
       </tr>

       </table>
   </div>
</body>
<script type="text/javascript">
   $(function(){
       countDown();
   });
   function countDown(){
       //获取秒杀倒计时进行判断，0-->正在进行秒杀,-1-->秒杀结束,remailSeconds>0-->代表倒计时
       var remailSeconds=$("#remailSeconds").val();
       //alert("remailSeconds:"+remailSeconds);
       var timeout;
       if(remailSeconds>0){//秒杀还没有开始，进行倒计时功能
           $("#buyButton").attr("disabled",true);
           //倒计时
           timeout=setTimeout(function(){
               $("#countDown").text(remailSeconds-1);
               $("#remailSeconds").val(remailSeconds-1);//remailSeconds这是input
               countDown();
           },1000);//一秒钟之后回调函数
       }else if(remailSeconds==0){//正在进行秒杀
           $("#buyButton").attr("disabled",false);
           if(timeout){//如果timeout有值的情况
               clearTimeout(timeout);
           }
           //将文案修改 df1fab4272a24cdf9432adb9fd69cb38
           $("#miaoshaTip").html("秒杀进行中");
       }else{
           //小于0的情况，秒杀结束，将秒杀按钮设置为不可点击
           $("#buyButton").attr("disabled",true);
           $("#miaoshaTip").html("秒杀结束");
       }
   }
</script>
</html>