Web層內(nèi)容相關(guān)
前端頁面流程
詳情頁流程邏輯
為什么要獲取標(biāo)準(zhǔn)系統(tǒng)時間（服務(wù)器的時間）
用戶可能處在不同時區(qū)，用戶的電腦的系統(tǒng)時間可能不同。
Restful規(guī)范
Restful規(guī)范是一種優(yōu)雅的URI表達(dá)方式：/模塊/資源/{標(biāo)識}/集合1/···
GET -> 查詢操作
POST -> 添加/修改操作（用于非冪等操作）
PUT -> 修改操作（用于冪等操作）
DELETE -> 刪除操作
怎么實現(xiàn)Restful接口
非冪等操作和冪等操作
冪等性（idempotency）意味著對同一URL的多個請求應(yīng)該返回同樣的結(jié)果。在Restful規(guī)范中，GET、PUT、DELETE是冪等操作，只有POST是非冪等操作。
POST和PUT都可以用來創(chuàng)建和更新資源，二者的區(qū)別就是前者用于非冪等操作，后者用于冪等操作。
簡單來說，使用POST方法請求創(chuàng)建一個資源，如果將這條請求重復(fù)發(fā)送N次，就會創(chuàng)建出N個資源；而如果用GET方法請求創(chuàng)建一個資源，就算重復(fù)發(fā)送該請求N次，也只會創(chuàng)建一個資源（就算第一次請求創(chuàng)建出來的資源）。
秒殺API的URL設(shè)計
@RequestMapping的映射技巧
請求方法細(xì)節(jié)處理
<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創(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> <!--默認(rèn)匹配所有請求 --> <url-pattern>/</url-pattern> </servlet-mapping></web-app>注意
spring-開頭命名的，所以可以用通配符*一次性全部加載url-pattern設(shè)置為/，這是使用了Restful的規(guī)范；在使用Struts框架時我們配置的是*.do之類的，這是一種比較丑陋的表達(dá)方式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.默認(rèn)提供一系列的功能:數(shù)據(jù)綁定，數(shù)字和日期的format@NumberFormat,@DateTimeFormat c:xml,json的默認(rèn)讀寫支持--> <mvc:annotation-driven/> <!--2.靜態(tài)資源默認(rèn)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相關(guān)的controller--> <context:component-scan base-package="com.lewis.web"/></beans>Controller中的每一個方法都對應(yīng)我們系統(tǒng)中的一個資源URL，其設(shè)計應(yīng)該遵循Restful接口的設(shè)計風(fēng)格。
com.lewis.web包，在該包下新建SeckillController.java@Controller@RequestMapping("/seckill")//url:模塊/資源/{}/細(xì)分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時有個小問題：如果找不到對應(yīng)的Cookie會報錯，所以設(shè)置為required=false，將Cookie是否存在的邏輯判斷放到代碼中來判斷。
關(guān)于異常的捕捉
Service層中的拋出異常是為了讓Spring能夠回滾，Controller層中捕獲異常是為了將異常轉(zhuǎn)換為對應(yīng)的Json供前臺使用，缺一不可。
//將所有的ajax請求返回類型，全部封裝成json數(shù)據(jù)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結(jié)果，方便頁面取值；在這里，將其設(shè)計成泛型，就可以和靈活地往里邊封裝各種類型的對象。
這里的success屬性不是指秒殺執(zhí)行的結(jié)果，而是指頁面是否發(fā)送請求成功，至于秒殺之后是否成功的這個結(jié)果則是封裝到了data屬性里。
由于項目的前端頁面都是由Bootstrap開發(fā)的,所以需要先去下載Bootstrap或者是使用在線的CDN服務(wù)。而Bootstrap又是依賴于jQuery的，所以需要先引入jQuery。
webapp下建立resources目錄，接著建立script目錄，建立seckill.js//存放主要交互邏輯的js代碼// javascript 模塊化(package.類.方法)var seckill = { //封裝秒殺相關(guān)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 非數(shù)字返回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',//禁止位置關(guān)閉 keyboard: false//關(guān)閉鍵盤事件 }); $('#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); } }); } //已經(jīng)登錄 //計時交互 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) { //在回調(diào)函數(shù)種執(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']; //顯示秒殺結(jié)果 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) { //秒殺結(jié)束 seckillBox.html('秒殺結(jié)束!'); } 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 () { //時間完成后回調(diào)事件 //獲取秒殺地址,控制現(xiàn)實邏輯,執(zhí)行秒殺 console.log('______fininsh.countdown'); seckill.handlerSeckill(seckillId, seckillBox); }); } else { //秒殺開始 seckill.handlerSeckill(seckillId, seckillBox); } }};腳本文件的技巧
使用Json來講JavaScript模塊化（類似于Java的package），不要將js都寫成一堆，不易維護(hù)，頁不方便閱讀。
特殊說明
由于本人的Eclipse內(nèi)嵌的Tomcat設(shè)置的原因，我需要在URL里的所有路徑前加上/seckill（我的項目名）才可以正常映射到Controller里對應(yīng)的方法，如下
//封裝秒殺相關(guān)ajax的urlURL: { 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'; }},如果有同學(xué)在后邊測試頁面時找不到路徑，可以將這里的路徑里的/seckill刪掉
在WEB-INF目錄下新建一個jsp目錄，在這里存放我們的jsp頁面，為了減少工作量，也為了方便，將每個頁面都會使用到的頭部文件和標(biāo)簽庫分離出來，放到common目錄下，在jsp頁面中靜態(tài)包含這兩個公共頁面就行了。
關(guān)于jsp頁面請從源碼中拷貝，實際開發(fā)中前端頁面由前端工程師完成，但是后端工程師也應(yīng)該了解jQuery和ajax，想要了解本項目的頁面是如何實現(xiàn)的請觀看慕課網(wǎng)的Java高并發(fā)秒殺API之Web層。
靜態(tài)包含和動態(tài)包含的區(qū)別
靜態(tài)包含會直接將頁面包含進(jìn)來，最終只生成一個Servlet；而動態(tài)包含會先將要包含進(jìn)來的頁面生成Servlet后再包含進(jìn)來，最終會生成多個Servlet。
存在的坑
在頁面里不要寫成<script/>，這樣寫會導(dǎo)致后邊的js加載不了，所以要寫成<script></script>。
EL表達(dá)式
startTime是Date類型的，通過${startTime.time}來將Date轉(zhuǎn)換成long類型的毫秒值。
先clean下Maven項目，接著編譯Maven項目（-X compile命令），然后啟動Tomcat，在瀏覽器輸入http://localhost:8080/seckill/seckill/list，成功進(jìn)入秒殺商品頁面；輸入http://localhost:8080/seckill/seckill/1000/detail成功進(jìn)入詳情頁面。
配置使用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>其他問題
關(guān)于顯示NaN天 NaN時 NaN分 NaN秒的問題，原因是new Date(startTime + 1000)，startTime 被解釋成一個字符串了。
解決辦法：
關(guān)于分布式環(huán)境下的幾個問題以及慕課網(wǎng)張老師的回答
后端服務(wù)器需要做NTP時間同步，如每5分鐘與NTP服務(wù)同步保證時間誤差在微妙級以下。時間同步在業(yè)務(wù)需要或者活性檢查場景很常見(如hbase的RegionServer)
秒殺開啟判斷在前端和后端都有，后端的判斷比較簡單取秒殺單做判斷，這塊的IO請求是DB主鍵查詢很快，單DB就可以抗住幾萬QPS,后面也會加入redis緩存為DB減負(fù)。
負(fù)載均衡包括nginx入口端和后端upstream服務(wù)，在入口端一般采用智能DNS解析請求就近進(jìn)入nginx服務(wù)器。后端upstgream不建議采用一致性hash，防止請求不均勻。后端服務(wù)無狀態(tài)可以簡單使用輪訓(xùn)機制。nginx負(fù)載均衡本身過于簡單，可以使用openresty自己實現(xiàn)或者nginx之后單獨架設(shè)負(fù)載均衡服務(wù)如Netflix的Zuul等。
對于流量爆增的造成后端不可用情況，這門課程(Java高并發(fā)秒殺API)并沒有做動態(tài)降級和彈性伸縮架構(gòu)上的處理，后面受慕課邀請會做一個獨立的實戰(zhàn)課，講解分布式架構(gòu)，彈性容錯，微服務(wù)相關(guān)的內(nèi)容，到時會加入這方面的內(nèi)容。
本節(jié)結(jié)語
至此，關(guān)于Java高并發(fā)秒殺API的Web層的開發(fā)與測試已經(jīng)完成，接下來進(jìn)行對該秒殺系統(tǒng)進(jìn)行高并發(fā)優(yōu)化，詳情可以參考下一篇文章。
