Java高并發(fā)秒殺API(三)之Web層

1. 設計前的分析

Web層內容相關

• 前端交互設計
• Restful規(guī)范
• SpringMVC
• Bootstrap + jQuery

前端頁面流程

詳情頁流程邏輯

為什么要獲取標準系統(tǒng)時間（服務器的時間）

用戶可能處在不同時區(qū)，用戶的電腦的系統(tǒng)時間可能不同。

Restful規(guī)范

Restful規(guī)范是一種優(yōu)雅的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規(guī)范中，GET、PUT、DELETE是冪等操作，只有POST是非冪等操作。

POST和PUT都可以用來創(chuàng)建和更新資源，二者的區(qū)別就是前者用于非冪等操作，后者用于冪等操作。

簡單來說，使用POST方法請求創(chuàng)建一個資源，如果將這條請求重復發(fā)送N次，就會創(chuàng)建出N個資源；而如果用GET方法請求創(chuàng)建一個資源，就算重復發(fā)送該請求N次，也只會創(chuàng)建一個資源（就算第一次請求創(chuàng)建出來的資源）。

附：《冪等和高并發(fā)在電商系統(tǒng)中的使用》

秒殺API的URL設計

@RequestMapping的映射技巧

請求方法細節(jié)處理

1. 請求參數綁定
2. 請求方法限制
3. 請求轉發(fā)和重定向
4. 數據模型賦值
5. 返回json數據
6. Cookie訪問

2. 整合配置SpringMVC框架

2.1 配置web.xml

<web-app xmlns="http://java./xml/ns/javaee"
         xmlns:xsi="http://www./2001/XMLSchema-instance"
         xsi:schemaLocation="http://java./xml/ns/javaee
                      http://java./xml/ns/javaee/web-app_3_0.xsd"
         version="3.0"
         metadata-complete="true">
    <!--用maven創(chuàng)建的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的規(guī)范；在使用Struts框架時我們配置的是*.do之類的，這是一種比較丑陋的表達方式

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

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

    <!--配置spring mvc-->
    <!--1,開啟springmvc注解模式
    a.自動注冊DefaultAnnotationHandlerMapping,AnnotationMethodHandlerAdapter
    b.默認提供一系列的功能:數據綁定，數字和日期的format@NumberFormat,@DateTimeFormat
    c:xml,json的默認讀寫支持-->
    <mvc:annotation-driven/>

    <!--2.靜態(tài)資源默認servlet配置-->
    <!--
        1).加入對靜態(tài)資源處理：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中的每一個方法都對應我們系統(tǒng)中的一個資源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);
        }
    }

    //獲取系統(tǒng)時間
    @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屬性不是指秒殺執(zhí)行的結果，而是指頁面是否發(fā)送請求成功，至于秒殺之后是否成功的這個結果則是封裝到了data屬性里。

4. 基于Bootstrap開發(fā)頁面

由于項目的前端頁面都是由Bootstrap開發(fā)的,所以需要先去下載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) {
            //手機驗證和登錄,計時交互
            //規(guī)劃我們的交互流程
            //在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) {
        //獲取秒殺地址,控制顯示器,執(zhí)行秒殺
        node.hide().html('<button class="btn btn-primary btn-lg" id="killBtn">開始秒殺</button>');

        $.get(seckill.URL.exposer(seckillId), {}, function (result) {
            //在回調函數種執(zhí)行交互流程
            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 () {
                        //執(zhí)行秒殺請求
                        //1.先禁用按鈕
                        $(this).addClass('disabled');//,<-$(this)===('#killBtn')->
                        //2.發(fā)送秒殺請求執(zhí)行秒殺
                        $.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 () {
                //時間完成后回調事件
                //獲取秒殺地址,控制現實邏輯,執(zhí)行秒殺
                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頁面中靜態(tài)包含這兩個公共頁面就行了。

關于jsp頁面請從源碼中拷貝，實際開發(fā)中前端頁面由前端工程師完成，但是后端工程師也應該了解jQuery和ajax，想要了解本項目的頁面是如何實現的請觀看慕課網的Java高并發(fā)秒殺API之Web層。

靜態(tài)包含和動態(tài)包含的區(qū)別

靜態(tài)包含會直接將頁面包含進來，最終只生成一個Servlet；而動態(tài)包含會先將要包含進來的頁面生成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);

關于分布式環(huán)境下的幾個問題以及慕課網張老師的回答

• 根據系統(tǒng)標準時間判斷，如果分布式環(huán)境下各機器時間不同步怎么辦？同時發(fā)起的兩次請求，可能一個活動開始，另一個提示沒開始。

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

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

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

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

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

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

本節(jié)結語

至此，關于Java高并發(fā)秒殺API的Web層的開發(fā)與測試已經完成，接下來進行對該秒殺系統(tǒng)進行高并發(fā)優(yōu)化，詳情可以參考下一篇文章。

上一篇文章：Java高并發(fā)秒殺API(二)之Service層

下一篇文章：Java高并發(fā)秒殺API(四)之高并發(fā)優(yōu)化