1. 設計前的分析

Web層內容相關

• 前端互動設計
• Restful規範
• SpringMVC
• Bootstrap + jQuery

前端頁面流程

詳情頁流程邏輯

為什麼要獲取標準系統時間（伺服器的時間）

使用者可能處在不同時區，使用者的電腦的系統時間可能不同。

Restful規範

Restful規範是一種優雅的URI表達方式：/模組/資源/{標識}/集合1/···

GET -> 查詢操作

POST -> 新增/修改操作（用於非冪等操作）

PUT -> 修改操作（用於冪等操作）

DELETE -> 刪除操作

怎麼實現Restful介面

• @RequestMapping(value = “/path”,method = RequestMethod.GET)
• @RequestMapping(value = “/path”,method = RequestMethod.POST)
• @RequestMapping(value = “/path”,method = RequestMethod.PUT)
• @RequestMapping(value = “/path”,method = RequestMethod.DELETE)

非冪等操作和冪等操作

冪等性（idempotency）意味著對同一URL的多個請求應該返回同樣的結果。在Restful規範中，GET、PUT、DELETE是冪等操作，只有POST是非冪等操作。

POST和PUT都可以用來建立和更新資源，二者的區別就是前者用於非冪等操作，後者用於冪等操作。

簡單來說，使用POST方法請求建立一個資源，如果將這條請求重複傳送N次，就會創建出N個資源；而如果用GET方法請求建立一個資源，就算重複傳送該請求N次，也只會建立一個資源（就算第一次請求創建出來的資源）。

秒殺API的URL設計

@RequestMapping的對映技巧

請求方法細節處理

1. 請求引數繫結
2. 請求方法限制
3. 請求轉發和重定向
4. 資料模型賦值
5. 返回json資料
6. Cookie訪問

2. 整合配置SpringMVC框架

2.1 配置web.xml

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0"
         metadata-complete="true">
    <!--用maven建立的web-app需要修改servlet的版本為3.0 -->
    <!--配置DispatcherServlet -->
    <servlet>
        <servlet-name>seckill-dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置SpringMVC 需要配置的檔案 spring-dao.xml，spring-service.xml,spring-web.xml 
            MyBatis -> Spring -> SpringMVC -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring/spring-*.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>seckill-dispatcher</servlet-name>
        <!--預設匹配所有請求 -->
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

注意

• 這裡的Servlet版本是3.0，對應Tomcat7.0版本
• 由於我們的配置檔案都是以spring-開頭命名的，所以可以用萬用字元*一次性全部載入
• url-pattern設定為/，這是使用了Restful的規範；在使用Struts框架時我們配置的是*.do之類的，這是一種比較醜陋的表達方式

2.2 在src/main/resources/spring包下建立spring-web.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--配置spring mvc-->
    <!--1,開啟springmvc註解模式
    a.自動註冊DefaultAnnotationHandlerMapping,AnnotationMethodHandlerAdapter
    b.預設提供一系列的功能:資料繫結，數字和日期的[email protected],@DateTimeFormat
    c:xml,json的預設讀寫支援-->
    <mvc:annotation-driven/>

    <!--2.靜態資源預設servlet配置-->
    <!--
        1).加入對靜態資源處理：js,gif,png
        2).允許使用 "/" 做整體對映
    -->
    <mvc:default-servlet-handler/>

    <!--3：配置JSP 顯示ViewResolver-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <!--4:掃描web相關的controller-->
    <context:component-scan base-package="com.lewis.web"/>
</beans>

3. Controller設計

Controller中的每一個方法都對應我們系統中的一個資源URL，其設計應該遵循Restful介面的設計風格。

3.1 在java包下新建com.lewis.web包，在該包下新建SeckillController.java

@Controller
@RequestMapping("/seckill")//url:模組/資源/{}/細分
public class SeckillController
{
    @Autowired
    private SeckillService seckillService;

    @RequestMapping(value = "/list",method = RequestMethod.GET)
    public String list(Model model)
    {
        //list.jsp+mode=ModelAndView
        //獲取列表頁
        List<Seckill> list=seckillService.getSeckillList();
        model.addAttribute("list",list);
        return "list";
    }

    @RequestMapping(value = "/{seckillId}/detail",method = RequestMethod.GET)
    public String detail(@PathVariable("seckillId") Long seckillId, Model model)
    {
        if (seckillId == null)
        {
            return "redirect:/seckill/list";
        }

        Seckill seckill=seckillService.getById(seckillId);
        if (seckill==null)
        {
            return "forward:/seckill/list";
        }

        model.addAttribute("seckill",seckill);

        return "detail";
    }

    //ajax ,json暴露秒殺介面的方法
    @RequestMapping(value = "/{seckillId}/exposer",
                    method = RequestMethod.GET,
                    produces = {"application/json;charset=UTF-8"})
    @ResponseBody
    public SeckillResult<Exposer> exposer(@PathVariable("seckillId") Long seckillId)
    {
        SeckillResult<Exposer> result;
        try{
            Exposer exposer=seckillService.exportSeckillUrl(seckillId);
            result=new SeckillResult<Exposer>(true,exposer);
        }catch (Exception e)
        {
            e.printStackTrace();
            result=new SeckillResult<Exposer>(false,e.getMessage());
        }

        return result;
    }

    @RequestMapping(value = "/{seckillId}/{md5}/execution",
            method = RequestMethod.POST,
            produces = {"application/json;charset=UTF-8"})
    @ResponseBody
    public SeckillResult<SeckillExecution> execute(@PathVariable("seckillId") Long seckillId,
                                                   @PathVariable("md5") String md5,
                                                   @CookieValue(value = "userPhone",required = false) Long userPhone)
    {
        if (userPhone==null)
        {
            return new SeckillResult<SeckillExecution>(false,"未註冊");
        }

        try {
            SeckillExecution execution = seckillService.executeSeckill(seckillId, userPhone, md5);
            return new SeckillResult<SeckillExecution>(true, execution);
        }catch (RepeatKillException e1)
        {
            SeckillExecution execution=new SeckillExecution(seckillId, SeckillStatEnum.REPEAT_KILL);
            return new SeckillResult<SeckillExecution>(true,execution);
        }catch (SeckillCloseException e2)
        {
            SeckillExecution execution=new SeckillExecution(seckillId, SeckillStatEnum.END);
            return new SeckillResult<SeckillExecution>(true,execution);
        }
        catch (Exception e)
        {
            SeckillExecution execution=new SeckillExecution(seckillId, SeckillStatEnum.INNER_ERROR);
            return new SeckillResult<SeckillExecution>(true,execution);
        }
    }

    //獲取系統時間
    @RequestMapping(value = "/time/now",method = RequestMethod.GET)
    @ResponseBody
    public SeckillResult<Long> time()
    {
        Date now=new Date();
        return new SeckillResult<Long>(true,now.getTime());
    }
}

注意

SpringMVC在處理Cookie時有個小問題：如果找不到對應的Cookie會報錯，所以設定為required=false，將Cookie是否存在的邏輯判斷放到程式碼中來判斷。

關於異常的捕捉

Service層中的丟擲異常是為了讓Spring能夠回滾，Controller層中捕獲異常是為了將異常轉換為對應的Json供前臺使用，缺一不可。

3.2 在dto包下新建一個SeckillResult

//將所有的ajax請求返回型別，全部封裝成json資料
public class SeckillResult<T> {

    //請求是否成功
    private boolean success;
    private T data;
    private String error;

    public SeckillResult(boolean success, T data) {
        this.success = success;
        this.data = data;
    }

    public SeckillResult(boolean success, String error) {
        this.success = success;
        this.error = error;
    }

    public boolean isSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public String getError() {
        return error;
    }

    public void setError(String error) {
        this.error = error;
    }
}

注意

SeckillResult是一個VO類(View Object)，屬於DTO層，用來封裝json結果，方便頁面取值；在這裡，將其設計成泛型，就可以和靈活地往裡邊封裝各種型別的物件。

這裡的success屬性不是指秒殺執行的結果，而是指頁面是否傳送請求成功，至於秒殺之後是否成功的這個結果則是封裝到了data屬性裡。

4. 基於Bootstrap開發頁面

由於專案的前端頁面都是由Bootstrap開發的,所以需要先去下載Bootstrap或者是使用線上的CDN服務。而Bootstrap又是依賴於jQuery的，所以需要先引入jQuery。

4.1 在webapp下建立resources目錄，接著建立script目錄，建立seckill.js

//存放主要互動邏輯的js程式碼
// javascript 模組化(package.類.方法)

var seckill = {

    //封裝秒殺相關ajax的url
    URL: {
        now: function () {
            return '/seckill/seckill/time/now';
        },
        exposer: function (seckillId) {
            return '/seckill/seckill/' + seckillId + '/exposer';
        },
        execution: function (seckillId, md5) {
            return '/seckill/seckill/' + seckillId + '/' + md5 + '/execution';
        }
    },

    //驗證手機號
    validatePhone: function (phone) {
        if (phone && phone.length == 11 && !isNaN(phone)) {
            return true;//直接判斷物件會看物件是否為空,空就是undefine就是false; isNaN 非數字返回true
        } else {
            return false;
        }
    },

    //詳情頁秒殺邏輯
    detail: {
        //詳情頁初始化
        init: function (params) {
            //手機驗證和登入,計時互動
            //規劃我們的互動流程
            //在cookie中查詢手機號
            var userPhone = $.cookie('userPhone');
            //驗證手機號
            if (!seckill.validatePhone(userPhone)) {
                //繫結手機 控制輸出
                var killPhoneModal = $('#killPhoneModal');
                killPhoneModal.modal({
                    show: true,//顯示彈出層
                    backdrop: 'static',//禁止位置關閉
                    keyboard: false//關閉鍵盤事件
                });

                $('#killPhoneBtn').click(function () {
                    var inputPhone = $('#killPhoneKey').val();
                    console.log("inputPhone: " + inputPhone);
                    if (seckill.validatePhone(inputPhone)) {
                        //電話寫入cookie(7天過期)
                        $.cookie('userPhone', inputPhone, {expires: 7, path: '/seckill'});
                        //驗證通過　　重新整理頁面
                        window.location.reload();
                    } else {
                        //todo 錯誤文案資訊抽取到前端字典裡
                        $('#killPhoneMessage').hide().html('<label class="label label-danger">手機號錯誤!</label>').show(300);
                    }
                });
            }

            //已經登入
            //計時互動
            var startTime = params['startTime'];
            var endTime = params['endTime'];
            var seckillId = params['seckillId'];
            $.get(seckill.URL.now(), {}, function (result) {
                if (result && result['success']) {
                    var nowTime = result['data'];
                    //時間判斷 計時互動
                    seckill.countDown(seckillId, nowTime, startTime, endTime);
                } else {
                    console.log('result: ' + result);
                    alert('result: ' + result);
                }
            });
        }
    },

    handlerSeckill: function (seckillId, node) {
        //獲取秒殺地址,控制顯示器,執行秒殺
        node.hide().html('<button class="btn btn-primary btn-lg" id="killBtn">開始秒殺</button>');

        $.get(seckill.URL.exposer(seckillId), {}, function (result) {
            //在回撥函式種執行互動流程
            if (result && result['success']) {
                var exposer = result['data'];
                if (exposer['exposed']) {
                    //開啟秒殺
                    //獲取秒殺地址
                    var md5 = exposer['md5'];
                    var killUrl = seckill.URL.execution(seckillId, md5);
                    console.log("killUrl: " + killUrl);
                    //繫結一次點選事件
                    $('#killBtn').one('click', function () {
                        //執行秒殺請求
                        //1.先禁用按鈕
                        $(this).addClass('disabled');//,<-$(this)===('#killBtn')->
                        //2.傳送秒殺請求執行秒殺
                        $.post(killUrl, {}, function (result) {
                            if (result && result['success']) {
                                var killResult = result['data'];
                                var state = killResult['state'];
                                var stateInfo = killResult['stateInfo'];
                                //顯示秒殺結果
                                node.html('<span class="label label-success">' + stateInfo + '</span>');
                            }
                        });
                    });
                    node.show();
                } else {
                    //未開啟秒殺(瀏覽器計時偏差)
                    var now = exposer['now'];
                    var start = exposer['start'];
                    var end = exposer['end'];
                    seckill.countDown(seckillId, now, start, end);
                }
            } else {
                console.log('result: ' + result);
            }
        });

    },

    countDown: function (seckillId, nowTime, startTime, endTime) {
        console.log(seckillId + '_' + nowTime + '_' + startTime + '_' + endTime);
        var seckillBox = $('#seckill-box');
        if (nowTime > endTime) {
            //秒殺結束
            seckillBox.html('秒殺結束!');
        } else if (nowTime < startTime) {
            //秒殺未開始,計時事件繫結
            var killTime = new Date(startTime + 1000);//todo 防止時間偏移
            seckillBox.countdown(killTime, function (event) {
                //時間格式
                var format = event.strftime('秒殺倒計時: %D天 %H時 %M分 %S秒 ');
                seckillBox.html(format);
            }).on('finish.countdown', function () {
                //時間完成後回撥事件
                //獲取秒殺地址,控制現實邏輯,執行秒殺
                console.log('______fininsh.countdown');
                seckill.handlerSeckill(seckillId, seckillBox);
            });
        } else {
            //秒殺開始
            seckill.handlerSeckill(seckillId, seckillBox);
        }
    }
};

指令碼檔案的技巧

使用Json來講JavaScript模組化（類似於Java的package），不要將js都寫成一堆，不易維護，頁不方便閱讀。

特殊說明

由於本人的Eclipse內嵌的Tomcat設定的原因，我需要在URL裡的所有路徑前加上/seckill（我的專案名）才可以正常對映到Controller裡對應的方法，如下

//封裝秒殺相關ajax的url
URL: {
    now: function () {
        return '/seckill/seckill/time/now';
    },
    exposer: function (seckillId) {
        return '/seckill/seckill/' + seckillId + '/exposer';
    },
    execution: function (seckillId, md5) {
        return '/seckill/seckill/' + seckillId + '/' + md5 + '/execution';
    }
},

如果有同學在後邊測試頁面時找不到路徑，可以將這裡的路徑裡的/seckill刪掉

4.2 編寫頁面

在WEB-INF目錄下新建一個jsp目錄，在這裡存放我們的jsp頁面，為了減少工作量，也為了方便，將每個頁面都會使用到的頭部檔案和標籤庫分離出來，放到common目錄下，在jsp頁面中靜態包含這兩個公共頁面就行了。

關於jsp頁面請從原始碼中拷貝，實際開發中前端頁面由前端工程師完成，但是後端工程師也應該瞭解jQuery和ajax，想要了解本專案的頁面是如何實現的請觀看慕課網的Java高併發秒殺API之Web層。

靜態包含和動態包含的區別

靜態包含會直接將頁面包含進來，最終只生成一個Servlet；而動態包含會先將要包含進來的頁面生成Servlet後再包含進來，最終會生成多個Servlet。

存在的坑

在頁面裡不要寫成<script/>，這樣寫會導致後邊的js載入不了，所以要寫成<script></script>。

EL表示式

startTime是Date型別的，通過${startTime.time}來將Date轉換成long型別的毫秒值。

4.3 測試頁面

先clean下Maven專案，接著編譯Maven專案（-X compile命令），然後啟動Tomcat，在瀏覽器輸入http://localhost:8080/seckill/seckill/list，成功進入秒殺商品頁面；輸入http://localhost:8080/seckill/seckill/1000/detail成功進入詳情頁面。

配置使用jquery countdown外掛

1.pom.xml

<dependency>

  <groupId>org.webjars.bower</groupId>

  <artifactId>jquery.countdown</artifactId>

  <version>2.1.0</version>

 </dependency>

2.頁面

   <script src="${pageContext.request.contextPath}/webjars/jquery.countdown/2.1.0/dist/jquery.countdown.min.js"></script>

其他問題

關於顯示NaN天 NaN時 NaN分 NaN秒的問題，原因是new Date(startTime + 1000)，startTime 被解釋成一個字串了。

解決辦法：

1. new Date(startTime-0 + 1000);
2. new Date(Number(startTime) + 1000);

關於分散式環境下的幾個問題以及慕課網張老師的回答

• 根據系統標準時間判斷，如果分散式環境下各機器時間不同步怎麼辦？同時發起的兩次請求，可能一個活動開始，另一個提示沒開始。

後端伺服器需要做NTP時間同步，如每5分鐘與NTP服務同步保證時間誤差在微妙級以下。時間同步在業務需要或者活性檢查場景很常見(如hbase的RegionServer)

• 如果判斷邏輯都放到後端，遇到有刷子，後端處理這些請求扛不住了怎麼辦？可能活動沒開始，伺服器已經掛掉了。

秒殺開啟判斷在前端和後端都有，後端的判斷比較簡單取秒殺單做判斷，這塊的IO請求是DB主鍵查詢很快，單DB就可以抗住幾萬QPS,後面也會加入redis快取為DB減負。

• 負載均衡問題，比如根據地域在nginx雜湊，怎樣能較好的保證各機器秒殺成功的儘量分佈均勻呢。

負載均衡包括nginx入口端和後端upstream服務，在入口端一般採用智慧DNS解析請求就近進入nginx伺服器。後端upstgream不建議採用一致性hash，防止請求不均勻。後端服務無狀態可以簡單使用輪訓機制。nginx負載均衡本身過於簡單，可以使用openresty自己實現或者nginx之後單獨架設負載均衡服務如Netflix的Zuul等。

對於流量爆增的造成後端不可用情況，這門課程(Java高併發秒殺API)並沒有做動態降級和彈性伸縮架構上的處理，後面受慕課邀請會做一個獨立的實戰課，講解分散式架構，彈性容錯，微服務相關的內容，到時會加入這方面的內容。

本節結語

至此，關於Java高併發秒殺API的Web層的開發與測試已經完成，接下來進行對該秒殺系統進行高併發優化，詳情可以參考下一篇文章。