Java高併發秒殺項目之Web層

Java高併發秒殺Web層

具體可以參考github

Restful設計

整合配置SpringMVC框架

<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-->
  <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>

然後在spring容器中進行web層相關bean(即Controller)的配置，在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">
    <!--1,開啓springmvc註解模式
    a.自動註冊DefaultAnnotationHandlerMapping,AnnotationMethodHandlerAdapter
    b.默認提供一系列的功能:數據綁定，數字和日期的format@NumberFormat,@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相關的bean-->
    <context:component-scan base-package="org.seckill.web"/>
</beans>

Controller開發

Controller中的每一個方法都對應我們系統中的一個資源URL，其設計應該遵循Restful接口的設計風格。在org.seckill包下創建一個web包用於放web層Controller開發的代碼，在該包下創建一個SeckillController.java，內容如下:

package org.seckill.web;

import org.seckill.dto.Exposer;
import org.seckill.dto.SeckillExecution;
import org.seckill.dto.SeckillResult;
import org.seckill.entity.Seckill;
import org.seckill.enums.SeckillStatEnum;
import org.seckill.exception.RepeatKillException;
import org.seckill.exception.SeckillCloseException;
import org.seckill.service.SeckillService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.Date;
import java.util.List;

@Controller
@RequestMapping("/seckill")//url:模塊/資源/{}/細分
public class SeckillController {

    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @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";
    }

    @RequestMapping(value = "/{seckillId}/exposer", method = RequestMethod.POST, 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) {
            logger.error(e.getMessage());
            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 = "killPhone",required = false) Long userPhone) {
        if (userPhone == null) {
            return new SeckillResult<SeckillExecution>(false, "未註冊");
        }
        SeckillResult<SeckillExecution> result;
        try {
            SeckillExecution seckillExecution = seckillService.executeSeckill(seckillId, userPhone, md5);
            result = new SeckillResult<SeckillExecution>(true, seckillExecution);
        } catch (RepeatKillException e1) {
            SeckillExecution seckillExecution = new SeckillExecution(seckillId, SeckillStatEnum.REPEAT_KILL);
            return new SeckillResult<SeckillExecution>(false, seckillExecution);
        } catch (SeckillCloseException e2) {
            SeckillExecution seckillExecution = new SeckillExecution(seckillId, SeckillStatEnum.END);
            return new SeckillResult<SeckillExecution>(false, seckillExecution);
        } catch (Exception e) {
            SeckillExecution seckillExecution = new SeckillExecution(seckillId, SeckillStatEnum.INNER_ERROR);
            return new SeckillResult<SeckillExecution>(false, seckillExecution);
        }
        return result;
    }

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

Controller開發中的方法完全是對照Service接口方法進行開發的，第一個方法用於訪問我們商品的列表頁，第二個方法訪問商品的詳情頁，第三個方法用於返回一個json數據，數據中封裝了我們商品的秒殺地址，第四個方法用於封裝用戶是否秒殺成功的信息，第五個方法用於返回系統當前時間。代碼中涉及到一個將返回秒殺商品地址封裝爲json數據的一個Vo類，即SeckillResult.java，在dto包中創建它，內容如下:

package org.seckill.dto;

//封裝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;
    }
}

頁面開發

在/WEB-INF/jsp/下主要創建上述幾個jsp

tag.jsp主要放置一些需要常用的標籤：

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

list.jsp如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="common/tag.jsp"%>
<html>
<head>
    <title>秒殺列表頁</title>
    <link href="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!--頁面顯示部分-->
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading text-center">
                <h2>秒殺列表</h2>
            </div>
            <div class="panel-body">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>名稱</th>
                            <th>庫存</th>
                            <th>開始時間</th>
                            <th>結束時間</th>
                            <th>創建時間</th>
                            <th>詳情頁</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach var="sk" items="${list}">
                            <tr>
                                <td>${sk.name}</td>
                                <td>${sk.number}</td>
                                <td>
                                    <fmt:formatDate value="${sk.startTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
                                </td>
                                <td> <fmt:formatDate value="${sk.endTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                <td>
                                    <fmt:formatDate value="${sk.createTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
                                </td>
                                <td>
                                    <a class="btn btn-info" href="/seckill/${sk.seckillId}/detail" target="_blank">Link</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>



<script src="${pageContext.request.contextPath }/static/js/jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

detail.jsp如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>秒殺詳情頁</title>
    <link href="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="killPhoneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title text-center">
                    <span class="glyphicon glyphicon-phone">秒殺電話：</span></h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="killPhoneKey" class="col-sm-2 control-label">手機號</label>
                        <div class="col-sm-10">
                            <input type="text" name="killPhone" class="form-control" id="killPhoneKey" placeholder="手機號">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <span id="killPhoneMessage" class="glyphicon"></span>
                <button type="button" class="btn btn-success" id="killPhoneButton">
                    <span class="glyphicon glyphicon-phone">
                        Submit
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
    <div class="container">
        <div class="panel panel-default text-center">
            <div class="pannel-heading">
                <h1>
                ${seckill.name}
                </h1>
            </div>
            <div class="panel-body">
                <h2 class="text-danger">
                    <%--顯示time圖標--%>
                    <span class="glyphicon glyphicon-time"></span>
                    <%--展示倒計時--%>
                    <span class="glyphicon" id="seckill-box"></span>
                </h2>
            </div>
        </div>
    </div>




<script src="${pageContext.request.contextPath }/static/js/jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--cookie插件-->
<script src="${pageContext.request.contextPath }/static/js/jquery.cookie.js"></script>
<%--jQuery countDown倒計時插件--%>
<script src="http://cdn.bootcss.com/jquery.countdown/2.1.0/jquery.countdown.min.js"></script>
<script src="/resources/script/seckill.js" type="text/javascript"></script>
    <script type="text/javascript">
         $(function () {
             seckill.detail.init({
                 seckillId:${seckill.seckillId},
                 startTime:${seckill.startTime.time},
                 endTime:${seckill.endTime.time}
             });
         })   
    </script>
</body>
</html>

利用前後端分離，所以不要把javascript和jsp頁面放在一起。

在

下創建這樣一個js文件。

seckill.js如下所示：

//存放主要交互邏輯js代碼
//javascript模塊化
var seckill={
    URL:{
        now: function () {
            return '/seckill/time/now';
        },
        exposer: function (seckillId) {
            return '/seckill/' + seckillId + '/exposer';
        },
        execution: function (seckillId, md5) {
            return '/seckill/' + seckillId + '/' + md5 + '/execution';
        }
    },
    handlerSeckill: function (seckillId,node) {
        //秒殺邏輯
        node.hide().html('<button class="btn btn-primary btn-lg" id="killBtn">開始秒殺</button>');
        $.post(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);
                    //綁定一次點擊事件,防止接收太多請求
                    $("#killBtn").one('click',function () {
                        //執行秒殺請求的操作
                        //1.禁用按鈕
                        $(this).addClass("disabled");
                        //2.發送秒殺請求
                        $.post(killUrl,{},function (result) {
                            if(result&&result['success']){
                                var killReuslt=result['data'];
                                var state=killReuslt['state'];
                                var stateInfo=killReuslt['stateInfo'];
                                //3.顯示秒殺結果
                                node.html('<span class="label label-success">'+stateInfo+'</span>')
                            }
                        });
                    });
                    node.show();
                }else{
                    //未開啓秒殺
                    var now=exposer['now'];
                    var satrt=exposer['start'];
                    var end=exposer['end'];
                    //重新計算計時邏輯
                    seckill.countdown(seckillId,now,satrt,end);
                }
            }else{
                console.log(result);
            }
        });
    },
    validatePhone: function (phone) {
        //isNaN是判斷電話是不是數字，是數字返回true，不是數字返回false
        if(phone&&phone.length==11&&!isNaN(phone)){
            return true;
        }
        else{
            return false;
        }
    },
    countdown: function (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);
        }
    },
    //詳情頁秒殺邏輯
    detail:{
        //詳情頁初始化
        init:function (params) {
            //手機驗證和登錄，計時交互
            //規劃我們的交互流程
            //cookie中查找手機號
            var killPhone =$.cookie('killPhone');
            var startTime=params['startTime'];
            var endTime=params['endTime'];
            var seckillId=params['seckillId'];
            if(!seckill.validatePhone(killPhone)){
                $("#killPhoneModal").modal({
                    show:true,
                    backdrop:'static',
                    keyboard:false
                });
                $("#killPhoneButton").click(function () {
                    var inputPhone=$("#killPhoneKey").val();
                    if(seckill.validatePhone(inputPhone)){
                        $.cookie('killPhone',inputPhone,{expires:7,path:'/seckill'});
                        location.reload();
                    }else{
                        $("#killPhoneMessage").hide().html('<label class="label label-danger">手機號錯誤</label>').show(300);
                    }
                })
            }
            //已經登錄
            //計時交互
            var startTime = params['startTime'];
            var endTime = params['endTime'];
            var seckillId = params['seckillId'];
            $.ajax({
                url:seckill.URL.now(),
                type:"get",
                success:function (result) {
                    if (result && result['success']) {
                        var nowTime = result['data'];
                        //時間判斷 計時交互
                        seckill.countdown(seckillId, nowTime, startTime, endTime);
                    } else {
                        console.log('result: ' + result);
                        alert('result: ' + result);
                    }
                }
            });
        }
        }
    }

如上基本功能已經開發環境已經完成，接下來就是進行高併發的優化了。