商品秒殺按鈕的顯示模塊

功能分析

1. 前臺(tái)秒殺商品詳情頁面

秒殺尚未開始，顯示秒殺倒計(jì)時(shí)

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

秒殺時(shí)間已過，顯示秒殺已結(jié)束

以上判斷邏輯需要在js中完成，為了頁面邏輯看起來清晰，我們創(chuàng)建一個(gè)單獨(dú)的js文件seckill.js來處理，在詳情頁面中引入該js在頁面中我們發(fā)送請(qǐng)求使用jQuery，所以需要引入jQuery的js文件

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

2. 后臺(tái)秒殺地址的暴露

如果前臺(tái)已經(jīng)開始秒殺，那么需要在后臺(tái)暴露秒殺地址給前臺(tái)頁面

為了安全，在后臺(tái)依舊需要對(duì)秒殺是否開始進(jìn)行判斷

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

業(yè)務(wù)實(shí)現(xiàn)

1. 在15-seckill-web模塊的static目錄下，創(chuàng)建js子目錄，將jQuery和倒計(jì)時(shí)插件從07-SecKill\resources\js拷貝進(jìn)來

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

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

3. 在15-seckill-web模塊的item.html頁面中，導(dǎo)入上面定義三個(gè)js文件

<!--導(dǎo)入jQuery的js文件-->
<script th:src="@{/js/jquery.min.js}"></script>
<!--導(dǎo)入倒計(jì)時(shí)插件的js文件-->
<script th:src="@{/js/jquery.countdown.min.js}"></script>
<!--導(dǎo)入自定義的秒殺js文件-->
<script th:src="@{/js/seckill.js}"></script>

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

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

5. 在15-seckill-web模塊的seckill.js中定義對(duì)秒殺時(shí)間的判斷函數(shù)JS的開發(fā)方式，有兩種

面向過程：面向?qū)ο螅@里我們采用面向?qū)ο蟮姆绞?/span>

//定義一個(gè)json對(duì)象
var seckillObj = {
    //項(xiàng)目上下文根，我們可以在頁面中通過seckillObj對(duì)象對(duì)其賦值
    contextPath:"",
    //這樣操作可選，一般公司會(huì)將獲取地址單獨(dú)抽取出來，方便維護(hù)
    url:{
        randomURL:function () {
            return seckillObj.contextPath +"/seckill/random/";
        }
    },
    //定義秒殺時(shí)間判斷的相關(guān)函數(shù)，本身還是json的屬性，只不過是function類型
    func:{
        //初始化函數(shù)主要用于時(shí)間的判斷,這些時(shí)間可以從item頁面的秒殺商品對(duì)象上獲取
        //所以該方法提供參數(shù)，接收頁面?zhèn)鬟f的信息，同時(shí)將商品的id也傳遞過來
        initItem:function (id,currentTime,startTime,endTime) {
            if(currentTime < startTime){
                //秒殺尚未開始  使用jquery的倒計(jì)時(shí)插件實(shí)現(xiàn)倒計(jì)時(shí)
                /* + 1000 防止時(shí)間偏移 這個(gè)沒有太多意義，因?yàn)槲覀儾⒉恢揽蛻舳撕头?wù)器的時(shí)間偏移
                這個(gè)插件簡單了解，實(shí)際項(xiàng)目不會(huì)以客戶端時(shí)間作為倒計(jì)時(shí)，一般在服務(wù)器端還需要驗(yàn)證*/
                var killTime = new Date(startTime + 1000);
                $("#seckillTip").countdown(killTime, function (event) {
                    //時(shí)間格式
                    var format = event.strftime('距秒殺開始還有: %D天 %H時(shí) %M分 %S秒');
                    $("#seckillTip").html("<span style='color:red;'>"+format+"</span>");
                }).on('finish.countdown', function () {
                    //倒計(jì)時(shí)結(jié)束后回調(diào)事件，已經(jīng)開始秒殺，用戶可以進(jìn)行秒殺了，有兩種方式：
                    //1、刷新當(dāng)前頁面
                    location.reload();
                    //或者2、調(diào)用秒殺開始的函數(shù)
                });
            }else if(currentTime > endTime){
                //秒殺已經(jīng)結(jié)束
                $("#seckillTip").html("<span style='color:red;'>來晚了，秒殺活動(dòng)已結(jié)束</span>");
            }else{
                //秒殺已開始  調(diào)用startSeckill函數(shù)
                seckillObj.func.startSeckill(id);
            }
        },
        startSeckill:function (id) {
            //秒殺術(shù)語  暴露秒殺地址 http://localhost:8080/15-seckill-web/seckill/goods/dfasjfkdjfkldajs
            //發(fā)送ajax請(qǐng)求  去后臺(tái)服務(wù)器判斷秒殺是否已經(jīng)開始，如果真正開始，暴露秒殺地址，否則不暴露
            $.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頁面加顯示倒計(jì)時(shí)及秒殺提示信息的段落標(biāo)簽

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

7. 數(shù)據(jù)庫時(shí)區(qū)問題的解決

我們?cè)谑褂玫褂?jì)時(shí)插件的，發(fā)現(xiàn)獲取的數(shù)據(jù)庫時(shí)間不對(duì)，因?yàn)槲覀?5-seckill-web的數(shù)據(jù)是從Redis中獲取的，Redis的數(shù)據(jù)是15-seckill-service中的定時(shí)任務(wù)獲取的，所以我們需要修改15-seckill-service模塊中的核心配置文件的數(shù)據(jù)庫連接信息，加serverTimezone=GMT%2B8，指定時(shí)區(qū)，這個(gè)問題從SpringBoot2.1.0以后出現(xiàn)，以前的版本沒有。

修改完畢后重新運(yùn)行15-seckill-service獲取時(shí)間。

8. 在15-seckill-web中的GoodsController處理暴露地址的請(qǐng)求

@PostMapping("/seckill/random/{id}")
public @ResponseBody ReturnObject random(@PathVariable("id") Integer id){
    ReturnObject returnObject = new ReturnObject();
    //根據(jù)商品的id獲取商品對(duì)象
    String goodsJSON = redisTemplate.opsForValue().get(Constants.REDIS_GOODS + id);
    Goods goods = JSONObject.parseObject(goodsJSON,Goods.class);
    //驗(yàn)證秒殺時(shí)間是否已經(jīng)真的開始
    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){
        //秒殺已經(jīng)結(jié)束
        returnObject.setErrorCode(Constants. ZERO);
        returnObject.setErrorMessage("秒殺已經(jīng)結(jié)束");
    }else{
        //秒殺已經(jīng)開始
        returnObject.setErrorCode(Constants. ONE);
        returnObject.setErrorMessage("秒殺已開始");
        returnObject.setData(goods.getRandomname());
    }
    return returnObject;
}

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

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

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

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

11. 啟動(dòng)15-seckill-service和15-seckill-web，修改數(shù)據(jù)庫商品表數(shù)據(jù)查看效果