基于SpringMVC+Spring+MyBatis实现秒杀系统【客户端交互】

前言

      该篇主要实现客户端和服务的交互。在第一篇概况里我已经贴出了业务场景的交互图片。 客户端交互主要放在seckill.js里来实现。页面展现基于jsp+jstl来实现。

 

准备工作

1、配置web.xml。web.xml里配置springmvc前端控制器时需要把spring托管的3个xml全部加载。分别是spring-dao.xml、spring-service.xml、spring-web.xml。

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1"
         metadata-complete="true">
  <display-name>Archetype Created Web Application</display-name>
  <!--配置前端控制器-->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring/spring-*.xml</param-value>
    </init-param>
  </servlet>

  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>


</web-app>

2、配置spring-web.xml

<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、配置spring mvc -->
    <mvc:annotation-driven/>

    <!--2、静态资源默认配置-->
    <mvc:default-servlet-handler/>

    <!--3、配置视图-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/views/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
    <!--4、扫描web相关controller-->
    <context:component-scan base-package="com.seckill.web"/>
</beans>

 

秒杀接口

@Controller
@RequestMapping("/seckill")
public class SeckillController {


    @Autowired
    SeckillService seckillService;



    @RequestMapping("/list")
    public ModelAndView list(){

        ModelAndView mav=new ModelAndView("list");
        List<Seckill> list = seckillService.getSeckillList();
        mav.addObject("list",list);

        return mav;
    }


    /**
     * 返回值如果是ModelAndView时怎么控制重定向和转发呢
     * **/
    @RequestMapping(value="/{seckillId}/detail/",method = RequestMethod.GET)
    public ModelAndView detail(@PathVariable("seckillId")Long seckillId){

        ModelAndView mav=new ModelAndView("detail");
        Seckill seckill=seckillService.getById(seckillId);
        mav.addObject("seckill",seckill);
        return mav;

    }


    //处理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=null;
        try{
            Exposer exposer=seckillService.exposeSeckillUrl(seckillId);
            result=new SeckillResult<Exposer>(true,exposer);

        }catch (Exception e){
            result=new SeckillResult<Exposer>(false,e.getMessage());
        }


        return result;

    }


    @RequestMapping(value="/{seckillId}/{md5}/execute",method = RequestMethod.POST,produces = {"application/json;charset=UTF-8"})
    @ResponseBody
    public SeckillResult<SeckillExecution> execute(@PathVariable("seckillId")Long seckillId,
                                                   @PathVariable("md5")String md5,
                                                   @CookieValue(value="phone",required=false)Long phone){

        if(phone==null){
            return new SeckillResult<SeckillExecution>(false,"手机号未注册");
        }

        SeckillResult<SeckillExecution> result=null;

        try{

            SeckillExecution execution=seckillService.executeSeckill(seckillId,phone,md5);
            result=new SeckillResult<SeckillExecution>(true,execution);

        }catch(RepeatKillException e){

            SeckillExecution execution=new SeckillExecution(seckillId,-1,"重复秒杀");
            result=new SeckillResult<SeckillExecution>(true,execution);


        }catch(SeckillCloseException e){

            SeckillExecution execution=new SeckillExecution(seckillId,0,"秒杀结束");
            result=new SeckillResult<SeckillExecution>(true,execution);

        }catch (Exception e){

            SeckillExecution execution=new SeckillExecution(seckillId,-2,"系统异常");
            result=new SeckillResult<SeckillExecution>(true,execution);

        }

        return result;

    }


    //返回系统时间
    @RequestMapping(value="/time/now/",method = RequestMethod.GET)
    @ResponseBody
    public SeckillResult<Long> time(){
        Date d=new Date();

        return new SeckillResult<Long>(true,d.getTime());
    }
}

　　

客户端实现

1、秒杀商品列表页

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<html>
<head>
    <title>秒杀列表页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选的Bootstrap主题文件（一般不使用） -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

</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="item" items="${list}">
                            <tr>
                                <td>${item.name}</td>
                                <td>${item.number}</td>
                                <td>
                                    <fmt:formatDate value="${item.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </td>
                                <td>
                                    <fmt:formatDate value="${item.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </td>
                                <td>
                                    <fmt:formatDate value="${item.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </td>
                                <td>
                                    <a class="btn btn-info" href="/seckill/${item.seckillId}/detail/">秒杀</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</body>
</html>

2、秒杀商品详情页

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<html>
<head>
    <title>秒杀详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选的Bootstrap主题文件（一般不使用） -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<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>

<%--登录弹出层 输入电话--%>
<div id="killPhoneModal" class="modal fade">
    <div class="modal-dialog">
        <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">
                <div class="row">
                    <div class="col-xs-8 col-xs-offset-2">
                        <input type="text" name="killPhone" id="killPhoneKey"
                               placeholder="填写手机号^o^" class="form-control">
                    </div>
                </div>
            </div>

            <div class="modal-footer">

                <span id="killPhoneMessage" class="glyphicon"> </span>
                <button type="button" id="killPhoneBtn" class="btn btn-success">
                    <span class="glyphicon glyphicon-phone"></span>
                    Submit
                </button>
            </div>

        </div>
    </div>

</div>

<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.countdown/2.1.0/jquery.countdown.min.js"></script>
<script src="/resources/scripts/seckill.js?201806242323235"></script>
<script type="text/javascript">


    $(function(){

        seckill.detail.init({
            seckillId:${seckill.seckillId},
            startTime:${seckill.startTime.time}, //取毫秒数
            endTime:${seckill.endTime.time}

        })

    })



</script>
</body>
</html>

　　

3、秒杀业务逻辑seckill.js

var seckill={

    /**秒杀相关url**/
    URL:{
        now:'/seckill/time/now/'
    },

    /**验证手机号**/
    validatePhone:function(phone){
        if(phone && phone.length==11 && !isNaN(phone)){
            return true;
        }

        return false;

    },

    /**倒计时**/
    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);
           seckillBox.countdown(killTime,function(e){
               var format = e.strftime('秒杀倒计时: %D天 %H时 %M分 %S秒 ');
               seckillBox.html(format);
           }).on("finish.countdown",function(){
               console.log("倒计时结束，开始秒杀");
               seckill.seckill(seckillId,seckillBox);
           });
       }else{
            //秒杀开始
           seckill.seckill(seckillId,seckillBox);
       }
    },

    detail:{
        /**初始化参数**/
        init:function(params){
            var phone=$.cookie('phone');

            //验证手机号
            if(!seckill.validatePhone(phone)){
                var killphoneModal=$("#killPhoneModal");
                //如果有取到cookie里的手机，则弹出模拟登陆
                killphoneModal.modal({
                    show: true,//显示弹出层
                    backdrop: 'static',//禁止位置关闭
                    keyboard: false//关闭键盘事件
                });

                $("#killPhoneBtn").click(function(){

                    var inputphone=$("#killPhoneKey").val();
                    console.log('inputphone:'+inputphone);
                    if(seckill.validatePhone(inputphone)){
                        $.cookie("phone",inputphone,{expires:7,path:'/seckill'});
                        //验证通过，刷新页面
                        window.location.reload();
                    }else{
                        $('#killPhoneMessage').hide().html('<label class="label label-danger">手机号错误!</label>').show(300);
                    }
                })

            }

            var seckillId=params["seckillId"];
            var startTime=params["startTime"];
            var endTime=params["endTime"];
            $.get(seckill.URL.now,{},function(result){
                if(result && result["success"]){
                    var nowTime=result["data"];
                    seckill.countdown(seckillId,nowTime,startTime,endTime);
                }else{
                    console.log(result);
                }
            })

        }
    },

    /**执行秒杀**/
    seckill:function(seckillId,node){

        //获取秒杀地址、控制node节点显示，执行秒杀
        node.hide().html("<button id='killBtn' class='btn btn-primary btn-lg'>开始秒杀</button>")

        $.get('/seckill/'+seckillId+'/exposer',{},function(result){

            if(result && result["success"]){
                //在回调函数中执行秒杀操作
                var exposer=result["data"];
                if(exposer["exposed"]){
                    //秒杀已开始
                    var md5=exposer["md5"];
                    var killUrl='/seckill/'+seckillId+'/'+md5+'/execute';
                    console.log(killUrl);

                    $("#killBtn").one('click',function(){
                        //1、禁用秒杀按钮
                        $(this).addClass('disabled');
                        //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); //没有拿到秒杀地址
            }

        })

    }



}

　　

总结

      秒杀相关业务逻辑主要是根据秒杀商品的开始时间、结束时间以及客户端的当前时间来判断秒杀是否开始、是否结束。未开始时调用jquery.countdown来实现倒计时效果。倒计时插件会维护一个倒计时事件，时间结束时直接会调用秒杀接口来实现秒杀业务。