商品秒殺按鈕的顯示模塊

功能分析

1. 前臺秒殺商品詳情頁面

秒殺尚未開始，顯示秒殺倒計時

正在秒殺的商品，顯示按鈕

秒殺時間已過，顯示秒殺已結束

以上判斷邏輯需要在js中完成，為了頁面邏輯看起來清晰，我們創建一個單獨的js文件seckill.js來處理，在詳情頁面中引入該js在頁面中我們發送請求使用jQuery，所以需要引入jQuery的js文件

倒計時的顯示，我們使用jQuery的countdown插件，所以需要將該插件的js也引入到詳情頁面中

2. 后臺秒殺地址的暴露

如果前臺已經開始秒殺，那么需要在后臺暴露秒殺地址給前臺頁面

為了安全，在后臺依舊需要對秒殺是否開始進行判斷

為了前臺處理方便，我們將后臺返回的結果封裝為自定義RTO(結果傳輸對象)

業務實現

1. 在15-seckill-web模塊的static目錄下，創建js子目錄，將jQuery和倒計時插件從07-SecKill\resources\js拷貝進來

倒計時插件的用法在07-SecKill\resources\countDown.txt中，直接拷貝過來用即可

2. 在15-seckill-web模塊的static/ js目錄下，創建seckill.js文件

3. 在15-seckill-web模塊的item.html頁面中，導入上面定義三個js文件

<!--導入jQuery的js文件-->
<script th:src="@{/js/jquery.min.js}"></script>
<!--導入倒計時插件的js文件-->
<script th:src="@{/js/jquery.countdown.min.js}"></script>
<!--導入自定義的秒殺js文件-->
<script th:src="@{/js/seckill.js}"></script>

4. 在15-seckill-web中的item.html頁面調用秒殺初始化的方法，并傳遞參數

<script type="text/javascript" th:inline="javascript">
    //頁面加載完成之后，調用秒殺初始化方法，對時間進行判斷
    $(function(){
        seckillObj.contextPath = [[${#request.getContextPath()}]];
        var id = [[${goods.id}]];
        //當前時間應該從服務器獲取，在跳轉到秒殺詳情頁的時候傳遞過來
        var currentTime = [[${currentTime}]];
        //時間為距1970年1月1日 00:00:00的毫秒數
        var startTime = [[${goods.starttime.getTime()}]];
        var endTime = [[${goods.endtime.getTime()}]];
        seckillObj.func.initItem(id,currentTime,startTime,endTime);
    });
</script>

5. 在15-seckill-web模塊的seckill.js中定義對秒殺時間的判斷函數JS的開發方式，有兩種

面向過程：面向對象，這里我們采用面向對象的方式

//定義一個json對象
var seckillObj = {
    //項目上下文根，我們可以在頁面中通過seckillObj對象對其賦值
    contextPath:"",
    //這樣操作可選，一般公司會將獲取地址單獨抽取出來，方便維護
    url:{
        randomURL:function () {
            return seckillObj.contextPath +"/seckill/random/";
        }
    },
    //定義秒殺時間判斷的相關函數，本身還是json的屬性，只不過是function類型
    func:{
        //初始化函數主要用于時間的判斷,這些時間可以從item頁面的秒殺商品對象上獲取
        //所以該方法提供參數，接收頁面傳遞的信息，同時將商品的id也傳遞過來
        initItem:function (id,currentTime,startTime,endTime) {
            if(currentTime < startTime){
                //秒殺尚未開始  使用jquery的倒計時插件實現倒計時
                /* + 1000 防止時間偏移 這個沒有太多意義，因為我們并不知道客戶端和服務器的時間偏移
                這個插件簡單了解，實際項目不會以客戶端時間作為倒計時，一般在服務器端還需要驗證*/
                var killTime = new Date(startTime + 1000);
                $("#seckillTip").countdown(killTime, function (event) {
                    //時間格式
                    var format = event.strftime('距秒殺開始還有: %D天 %H時 %M分 %S秒');
                    $("#seckillTip").html("<span style='color:red;'>"+format+"</span>");
                }).on('finish.countdown', function () {
                    //倒計時結束后回調事件，已經開始秒殺，用戶可以進行秒殺了，有兩種方式：
                    //1、刷新當前頁面
                    location.reload();
                    //或者2、調用秒殺開始的函數
                });
            }else if(currentTime > endTime){
                //秒殺已經結束
                $("#seckillTip").html("<span style='color:red;'>來晚了，秒殺活動已結束</span>");
            }else{
                //秒殺已開始  調用startSeckill函數
                seckillObj.func.startSeckill(id);
            }
        },
        startSeckill:function (id) {
            //秒殺術語  暴露秒殺地址 http://localhost:8080/15-seckill-web/seckill/goods/dfasjfkdjfkldajs
            //發送ajax請求  去后臺服務器判斷秒殺是否已經開始，如果真正開始，暴露秒殺地址，否則不暴露
            $.ajax({
                url : seckillObj.url.randomURL() + id,
                type : "post",
                dataType:"json",
                success:function(rtnMessage){
                    if(rtnMessage.errorCode == 0){
                        //不能顯示秒殺按鈕
                        $("#seckillTip").html("<span style='color:red;'>"+ rtnMessage.errorMessage +"</span>");
                    }else{
                        //顯示秒殺按鈕
                        $("#seckillTip").html("<button type='button'>立即秒殺</button>");
                    }
                }
            });
        }
    }
}

6.  在15-seckill-web中的item.html頁面加顯示倒計時及秒殺提示信息的段落標簽

<p id="seckillTip">
</p>

7. 數據庫時區問題的解決

我們在使用倒計時插件的，發現獲取的數據庫時間不對，因為我們15-seckill-web的數據是從Redis中獲取的，Redis的數據是15-seckill-service中的定時任務獲取的，所以我們需要修改15-seckill-service模塊中的核心配置文件的數據庫連接信息，加serverTimezone=GMT%2B8，指定時區，這個問題從SpringBoot2.1.0以后出現，以前的版本沒有。

修改完畢后重新運行15-seckill-service獲取時間。

8. 在15-seckill-web中的GoodsController處理暴露地址的請求

@PostMapping("/seckill/random/{id}")
public @ResponseBody ReturnObject random(@PathVariable("id") Integer id){
    ReturnObject returnObject = new ReturnObject();
    //根據商品的id獲取商品對象
    String goodsJSON = redisTemplate.opsForValue().get(Constants.REDIS_GOODS + id);
    Goods goods = JSONObject.parseObject(goodsJSON,Goods.class);
    //驗證秒殺時間是否已經真的開始
    Long currentTime = System.currentTimeMillis();
    Long startTime = goods.getStarttime().getTime();
    Long endTime = goods.getEndtime().getTime();
    if(currentTime < startTime){
        //秒殺尚未開始
        returnObject.setErrorCode(Constants. ZERO);
        returnObject.setErrorMessage("秒殺尚未開始");
    }else if(currentTime > endTime){
        //秒殺已經結束
        returnObject.setErrorCode(Constants. ZERO);
        returnObject.setErrorMessage("秒殺已經結束");
    }else{
        //秒殺已經開始
        returnObject.setErrorCode(Constants. ONE);
        returnObject.setErrorMessage("秒殺已開始");
        returnObject.setData(goods.getRandomname());
    }
    return returnObject;
}

9. 在15-seckill-interface中的com.bjpowernode.seckill.rto包下ReturnObject類，用于封裝返回結果對象

public class ReturnObject {
    private int errorCode;
    private String errorMessage;
    private Object data;
   //get|set方法略
}

10. 在15-seckill-interface中的常量類Constants中定義返回的錯誤碼常量 1成功 0失敗

/返回結果碼的常量，0失敗， 1 成功
public static final  int ZERO = 0;
public static final  int ONE = 1;

11. 啟動15-seckill-service和15-seckill-web，修改數據庫商品表數據查看效果