• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

整合SSM框架的高并发和商品秒杀项目(三)Java高并发秒杀系统API之Web层开发

技术杂谈 勤劳的小蚂蚁 3个月前 (01-26) 76次浏览 已收录 0个评论 扫描二维码

既然是Web层的会肯定要先引入SpringMvc了

  • 修改web.xml,引入SpringMvcDispatcherServlet

        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-dispatchServlet</servlet-name>
       <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
       <!–配置springmvc的配置文件–>
       <init-param>
           <param-name>contextConfigLocation</param-name>
           <param-value>classpath:spring/applicationContext-*.xml</param-value>
       </init-param>
       <load-on-startup>
           1
       </load-on-startup>
   </servlet>
   <servlet-mapping>
       <servlet-name>seckill-dispatchServlet</servlet-name>
       <!–直接拦截所有请求,不再采用spring2.0的/*或者*.do方式–>
       <url-pattern>/</url-pattern>
   </servlet-mapping>
</web-app>

在这里的话如果你不配置这一段代码的:

<!–配置springmvc的配置文件–>
       <init-param>
           <param-name>contextConfigLocation</param-name>
           <param-value>classpath:spring/applicationContext-*.xml</param-value>
       </init-param>

SpringMvc默认就会默认去WEB-INF下查找默认规范的配置文件,像我这里配置的servlet-nameseckill-dispatchServlet的话,则默认会寻找WEB-INF一个名为seckill-dispatchServlet-Servlet.xml的配置文件

接下来编写Controller SeckillController

首先在com.suny下建立包为Controller的包,然后在里面新建一个类SeckillController
package com.suny.controller;

/**
* Created by 孙
*/
@Controller
@RequestMapping(“/seckill”)
publicclassSeckillController{
   privatefinal SeckillService seckillService;

   @Autowired
   publicSeckillController(SeckillService seckillService){
       this.seckillService = seckillService;
   }

   /**
    * 进入秒杀列表.
    *
    * @param model 模型数据,里面放置有秒杀商品的信息
    * @return 秒杀列表详情页面
    */
   @RequestMapping(value = {“/list”,“”,“index”}, method = RequestMethod.GET)
   public String list(Model model){
       List<Seckill> seckillList = seckillService.getSeckillList();
       model.addAttribute(“list”, seckillList);
       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”;
   }

   /**
    * 暴露秒杀接口的方法.
    *
    * @param seckillId 秒杀商品的id
    * @return 根据用户秒杀的商品id进行业务逻辑判断,返回不同的json实体结果
    */
   @RequestMapping(value = “/{seckillId}/exposer”, method = RequestMethod.GET)
   @ResponseBody
   public SeckillResult<Exposer> exposer(@PathVariable(“seckillId”) Long seckillId) {
       // 查询秒杀商品的结果
       SeckillResult<Exposer> result;
       try {
           Exposer exposer = seckillService.exportSeckillUrl(seckillId);
           result = new SeckillResult<>(true, exposer);
       } catch (Exception e) {
           e.printStackTrace();
           result = new SeckillResult<>(false, e.getMessage());
       }
       return result;
   }

   /**
    * 用户执行秒杀,在页面点击相应的秒杀连接,进入后获取对应的参数进行判断,返回相对应的json实体结果,前端再进行处理.
    *
    * @param seckillId 秒杀的商品,对应的时秒杀的id
    * @param md5       一个被混淆的md5加密值
    * @param userPhone 参与秒杀用户的额手机号码,当做账号密码使用
    * @return 参与秒杀的结果,为json数据
    */
   @RequestMapping(value = “/{seckillId}/{md5}/execution”, method = RequestMethod.POST)
   @ResponseBody
   public SeckillResult<SeckillExecution> execute(@PathVariable(“seckillId”)long seckillId,
                                                  @PathVariable(“md5”) String md5,
                                                  @CookieValue(value = “userPhone”, required = false) Long userPhone) {
       // 如果用户的手机号码为空的说明没有填写手机号码进行秒杀
       if (userPhone == null) {
           returnnew SeckillResult<>(false, “没有注册”);
       }
       // 根据用户的手机号码,秒杀商品的id跟md5进行秒杀商品,没异常就是秒杀成功
       try {
           // 这里换成储存过程
SeckillExecution execution = seckillService.executeSeckill(seckillId, userPhone, md5);
           returnnew SeckillResult<>(true, execution);
       } catch (RepeatKillException e1) {
           // 重复秒杀
           SeckillExecution execution = new SeckillExecution(seckillId, SeckillStatEnum.REPEAT_KILL);
           returnnew SeckillResult<>(false, execution);
       } catch (SeckillCloseException e2) {
           // 秒杀关闭
           SeckillExecution execution = new SeckillExecution(seckillId, SeckillStatEnum.END);
           returnnew SeckillResult<>(false, execution);
       } catch (SeckillException e) {
           // 不能判断的异常
           SeckillExecution execution = new SeckillExecution(seckillId, SeckillStatEnum.INNER_ERROR);
           returnnew SeckillResult<>(false, execution);
       }
       // 如果有异常就是秒杀失败
   }

   /**
    * 获取服务器端时间,防止用户篡改客户端时间提前参与秒杀
    *
    * @return 时间的json数据
    */
   @RequestMapping(value = “/time/now”, method = RequestMethod.GET)
   @ResponseBody
   public SeckillResult<LocalDateTime> time(){
       LocalDateTime localDateTime = LocalDateTime.now();
       returnnew SeckillResult<>(true, localDateTime);
   }


}

建立一个全局ajax请求返回类,返回json类型

SeckillResult:
package com.suny.dto;

/**
* 封装所有的ajax请求返回类型,方便返回json
* Created by 孙
*/
publicclassSeckillResult<T> {

   privateboolean success;

   private T data;

   private String error;

   publicSeckillResult(){
   }

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

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

   publicbooleanisSuccess(){
       return success;
   }

   publicvoidsetSuccess(boolean success){
       this.success = success;
   }

   public T getData(){
       return data;
   }

   publicvoidsetData(T data){
       this.data = data;
   }

   public String getError(){
       return error;
   }

   publicvoidsetError(String error){
       this.error = error;
   }

   @Override
   public String toString(){
       return“SeckillResult{“ +
               “状态=” + success +
               “, 数据=” + data +
               “, 错误消息='” + error + ”’ +
               ‘}’;
   }

}

页面的编写

因为项目的前端页面都是由Bootstrap开发的,所以我们要先去下载Bootstrap或者是使用在线的CDN.
-Bootstrap中文官网:http://www.bootcss.com/
-Bootstrap中文文档 :http://v3.bootcss.com/
使用在线CDN引入的方法:
<!– 最新版本的 Bootstrap 核心 CSS 文件 –>
<linkrel=“stylesheet”href=https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css&#8221;integrity=“sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u”crossorigin=“anonymous”>

<!– 可选的 Bootstrap 主题文件(一般不用引入) –>
<linkrel=“stylesheet”href=https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css&#8221;integrity=“sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp”crossorigin=“anonymous”>

<!– 最新的 Bootstrap 核心 JavaScript 文件 –>
<scriptsrc=https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js&#8221;integrity=“sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa”crossorigin=“anonymous”></script>

文档里面写的很详细,然后我这里是使用离线版本的,方便我们本地调试,避免出现什么别的因素干扰我们:
  • 首先下载JQuery,因为Bootstrap就是依赖JQuery
  • 然后下载Bootstrap
  • 然后下载一个倒计时插件jquery.countdown.min.js -再下载一个操作Cookie插件jquery.cookie.min.js 如图放置
  • 首先编写一个公共的头部jsp文件,位于WEB-INFcommon中的head.jsp
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=${pageContext.request.contextPath}/resources/plugins/bootstrap-3.3.0/css/bootstrap.min.css”type=“text/css”>
<link rel=“stylesheet” href=${pageContext.request.contextPath}/resources/plugins/bootstrap-3.3.0/css/bootstrap-theme.min.css”type=“text/css”>

  • 然后编写一个公共的jstl标签库文件,位于WEB-INFcommon中的tag.jsp

<%@taglibprefix=“c”uri=http://java.sun.com/jsp/jstl/core&#8221; %>
<%@taglibprefix=“fmt”uri=http://java.sun.com/jsp/jstl/fmt&#8221; %>
<%@taglibprefix=“fn”uri=http://java.sun.com/jsp/jstl/functions&#8221; %>

  • 编写列表页面,位于WEB-INFcommon中的list.jsp

<%@pagecontentType=“text/html; charset=UTF-8”language=“java” %>
<%@includefile=“common/tag.jsp” %>
<!DOCTYPE html>
<htmllang=“zh-CN”>
<head>
   <title>秒杀列表</title>
   <%@includefile=“common/head.jsp” %>
</head>
<body>

<divclass=“container”>
   <divclass=“panel panel-default”>
       <divclass=“panel-heading text-center”>
           <h2>秒杀列表</h2>
       </div>

       <divclass=“panel-body”>
           <tableclass=“table table-hover”>
               <thead>
               <tr>
                   <td>名称</td>
                   <td>库存</td>
                   <td>开始时间</td>
                   <td>结束时间</td>
                   <td>创建时间</td>
                   <td>详情页</td>
               </tr>
               </thead>
               <tbody>
               <c:forEachitems=“${list}”var=“sk”>
                   <tr>
                       <td>${sk.name}</td>
                       <td>${sk.number}</td>
                       <td><fmt:formatDatevalue=“${sk.startTime}”pattern=“yyyy-MM-dd HH:mm:ss”/></td>
                                                <td><fmt:formatDatevalue=“${sk.endTime}”pattern=“yyyy-MM-dd HH:mm:ss”/></td>
                                                <td><fmt:formatDatevalue=“${sk.createTIme}”pattern=“yyyy-MM-dd HH:mm:ss”/></td>
                       <td><aclass=“btn btn-info”href=“/seckill/${sk.seckillId}/detail”target=“_blank”>详情</a></td>
                   </tr>
               </c:forEach>
               </tbody>
           </table>
       </div>
   </div>
</div>
</body>
<scriptsrc=“${pageContext.request.contextPath}/resources/plugins/jquery.js”></script>
<scriptsrc=“${pageContext.request.contextPath}/resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js”></script>
</html>

  • 编写列表页面,位于WEB-INFcommon中的detail.jsp,秒杀详情页面

<%–
CreatedbyIntelliJIDEA.
User:jianrongsun
Date:17-5-25
Time: 下午5:03
TochangethistemplateuseFile | Settings | FileTemplates.
%>
<%@pagecontentType=“text/html;charset=UTF-8”language=“java” %>
<%@includefile=“common/tag.jsp” %>
<html>
<head>
  <title>秒杀商品详情页面</title>
  <%@includefile=“common/head.jsp” %>
</head>
<body>
<divclass=“container”>
  <divclass=“panel panel-default”>
      <divclass=“panel-heading”>
          <h1>${seckill.name}</h1>
      </div>
      <divclass=“panel-body”>
          <h2class=“text-danger”>
              <spanclass=“glyphicon glyphicon-time”></span>
              <spanclass=“glyphicon”id=“seckill-box”></span>
          </h2>
      </div>
  </div>
</div>

<divid=“killPhoneModal”class=“modal fade”>
  <divclass=“modal-dialog”>
      <divclass=“modal-content”>
          <divclass=“modal-header”>
              <h3class=“modal-title text-center”>
                  <spanclass=“glyphicon glyphicon-phone”></span>秒杀电话:
              </h3>
          </div>
      </div>

      <divclass=“modal-body”>
          <divclass=“row”>
              <divclass=“col-xs-8 col-xs-offset-2”>
                  <inputtype=“text”name=“killPhone”id=“killPhoneKey”placeholder=“填写手机号码”class=“form-control”>
              </div>
          </div>
      </div>

      <divclass=“modal-footer”>
          <spanid=“killPhoneMessage”class=“glyphicon”></span>
          <buttontype=“button”id=“killPhoneBtn”class=“btn btn-success”>
              <spanclass=“glyphicon glyphicon-phone”></span>
              提交
          </button>
      </div>
  </div>
</div>
</body>
<scriptsrc=“${pageContext.request.contextPath}/resources/plugins/jquery.js”></script>
<scriptsrc=“${pageContext.request.contextPath}/resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js”></script>
<scriptsrc=“${pageContext.request.contextPath}/resources/plugins/jquery.cookie.min.js”></script>
<scriptsrc=“${pageContext.request.contextPath}/resources/plugins/jquery.countdown.min.js”></script>
<scriptsrc=“${pageContext.request.contextPath}/resources/script/seckill.js”></script>
<scripttype=“text/javascript”>
  $(function () {
      var startTimeVal = “${seckill.startTime.toLocalDate()} “ + seckill.cloneZero(“${seckill.startTime.toLocalTime()}”);
      var endTimeVal = “${seckill.endTime.toLocalDate()} “ + seckill.cloneZero(“${seckill.endTime.toLocalTime()}”);
      console.log(“startTimeVal========” + startTimeVal);
      console.log(“endTimeVal========” + endTimeVal);
      // 传入参数
      seckill.detail.init({
          seckillId:${seckill.seckillId},
          startTime: startTimeVal,
          endTime: endTimeVal
      })
  })
</script>

</html>

然后把项目运行一下我们又会碰到一个错误就是jstl中的fmt标签格式化时间只能格式化java.Util.Date类型的日期跟时间,而在我们这里我么使用了java8LocalDateTIme,所以解析时间会出异常,这时我们应该想到自己去实现jstl标签来自定义解析这个时间日期 自定义标签步骤如下:
  • /WEB-INF创建目录 tags
  • 然后创建一个文件 localDateTime.tag 在tags目录下
    • localData.tag用来格式化日期
    • localDataTime.tag用来格式化日期跟时间的组合,也就是数据库中的Timestamp类型 -然后在localDataTime.tag中写自己自定义的格式化流程

<%–格式化java8的LocalDatime,解决jstl不支持java8时间的问题–%>
<%@ tag body-content=“empty” pageEncoding=“UTF-8” trimDirectiveWhitespaces=“true” %>
<%@ taglib prefix=“fmt” uri=http://java.sun.com/jsp/jstl/fmt&#8221; %>
<%@ taglib prefix=“c” uri=http://java.sun.com/jsp/jstl/core&#8221; %>
<%@ taglib prefix=“fn” uri=http://java.sun.com/jsp/jstl/functions&#8221; %>
<%–        这里是定义页面使用标签中的属性设置,<tags:localDataTime dateTime=${sk.createTIme}/>     –%>
<%@ attribute name=“dateTime” required=“true”type=“java.time.LocalDateTime” %>
<%@ attribute name=“pattern” required=“false”type=“java.lang.String” %>
<%–首选判断日期时间转换规则是否存在,不存在给出默认的规则–%>
<c:iftest=${empty pattern}>
 <c:set var=“pattern” value=“yyyy-MM-dd HH:mm:ss”/>
</c:if>
<c:set var=“datetime” value=${dateTime}/>                        <%– 获取jsp页面传入的【 日期时间 】,格式为【 2017-5-26T13:59:12  】 –%>
<c:set var=“time” value=${fn:substringAfter(datetime, ‘T’)}/>     <%–   获取页面传过来的【时间T】后面的 【  时:分:秒 】的值  –%>
<c:set var=“timeLength” value=${fn:length(time)}/>                <%–  获取页面传来的 【 时:分:秒 的长度  】 –%>
<c:set var=“generalLength” value=${fn:length(‘123456’)}/>         <%–  这里定义了一个【Integer】类型的值,值为字符串 【123456 】的长度   –%>
<c:set var=“cloneZero” value=“:00”/>                                 <%–   这里设置一个值为【String】的字符串,     –%>
<%– 当  时:分:秒 不足6位的时候就说明缺少秒,我们给它自动补充 :00    –%>
<c:iftest=${timeLength lt generalLength}>
 <c:set var=“datetimeCloneZero”
        value=${datetime}${cloneZero}/>          <%–  拼接页面传过来的  【 时:分 】  ,补充一个【秒数】,EL中 + 为相加,非拼接字符串   –%>
 <c:set var=“cleandDateTime”
        value=${fn:replace(datetimeCloneZero,’T’,’ ‘)}/>      <%–  把java8日期时间中的【 T 】给去掉,换成一个空的字符串    –%>
</c:if>
<%–  当页面传过来的时间大于6位时说明时间时完整的,不进行自动填充【 :00 】,直接把日期时间中的 【 T 】 替换为空字符串 –%>
<c:iftest=${timeLength gt generalLength}>
 <c:set var=“cleandDateTime” value=${fn:replace(datetime,’T’,’ ‘)}/>
</c:if>
<%–   解析时间, type=“BOTH”为同时解析日期跟时间    –%>
<fmt:parseDate value=${cleandDateTime} var=“parsedDateTime” pattern=${pattern}type=“BOTH”/>
<fmt:formatDate value=${parsedDateTime} pattern=${pattern}type=“BOTH”/>

  • localData.tag的内容就比较简单了

<%@ tag body-content=“empty” pageEncoding=“UTF-8” trimDirectiveWhitespaces=“true” %>
<%@ taglib prefix=“fmt” uri=http://java.sun.com/jsp/jstl/fmt&#8221; %>
<%@ taglib prefix=“c” uri=http://java.sun.com/jsp/jstl/core&#8221; %>

<%@ attribute name=“date” required=“true”type=“java.time.LocalDate” %>
<%@ attribute name=“pattern” required=“false”type=“java.lang.String” %>

<c:iftest=${empty pattern}>
   <c:set var=“pattern” value=“MM/dd/yyyy”/>
</c:if>
<fmt:parseDate value=${date} var=“parsedDate”type=“date”/>
<fmt:formatDate value=${parsedDate}type=“date” pattern=${pattern}/>

  • 然后我们去页面导入需要的标签,然后去使用,修改list.jsp文件

<%@pagecontentType=“text/html; charset=UTF-8”language=“java” %>
<%@includefile=“common/tag.jsp” %>  
<%@taglibprefix=“tags”tagdir=“/WEB-INF/tags” %>
<!DOCTYPE html>
<htmllang=“zh-CN”>
<head>
  <title>秒杀列表</title>
  <%@includefile=“common/head.jsp” %>
</head>
<body>

<divclass=“container”>
  <divclass=“panel panel-default”>
      <divclass=“panel-heading text-center”>
          <h2>秒杀列表</h2>
      </div>

      <divclass=“panel-body”>
          <tableclass=“table table-hover”>
              <thead>
              <tr>
                  <td>名称</td>
                  <td>库存</td>
                  <td>开始时间</td>
                  <td>结束时间</td>
                  <td>创建时间</td>
                  <td>详情页</td>
              </tr>
              </thead>
              <tbody>
              <c:forEachitems=“${list}”var=“sk”>
                  <tr>
                      <td>${sk.name}</td>
                      <td>${sk.number}</td>
                      <td><tags:localDataTimedateTime=“${sk.startTime}”/></td>
                      <td><tags:localDataTimedateTime=“${sk.endTime}”/></td>
                      <td><tags:localDataTimedateTime=“${sk.createTIme}”/></td>
                      <td><aclass=“btn btn-info”href=“/seckill/${sk.seckillId}/detail”target=“_blank”>详情</a></td>
                  </tr>
              </c:forEach>
              </tbody>
          </table>
      </div>
  </div>
</div>
</body>
<scriptsrc=“${pageContext.request.contextPath}/resources/plugins/jquery.js”></script>
<scriptsrc=“${pageContext.request.contextPath}/resources/plugins/bootstrap-3.3.0/js/bootstrap.min.js”></script>
</html>

在这里我们修改了几个地方:

<%@taglib prefix=“tags” tagdir=“/WEB-INF/tags” %>

<td><tags:localDataTime dateTime=“${sk.startTime}”/></td>
<td><tags:localDataTime dateTime=“${sk.endTime}”/></td>
<td><tags:localDataTime dateTime=“${sk.createTIme}”/></td>

然后我们的格式就应该可以正常被格式化出来了
  • 建立一个模块化的seckill.js文件,位于Webapp下 resourcesscript文件夹下,文件内容如下:

/**
*  模块化javaScript
* Created by jianrongsun on 17-5-25.
*/
var seckill = {
  // 封装秒杀相关的ajax的url
  URL: {
      now: function () {
          return“/seckill/time/now”;
      },
      exposer: function (seckillId) {
          return“/seckill/” + seckillId + “/exposer”;
      },
      execution: function (seckillId, md5) {
          return“/seckill/” + seckillId + “/” + md5 + “/execution”;
      }
  },
  // 验证手机号码
  validatePhone: function (phone) {
      return !!(phone && phone.length === 11 && !isNaN(phone));
  },
  // 详情页秒杀业务逻辑
  detail: {
      // 详情页开始初始化
      init: function (params) {
          console.log(“获取手机号码”);
          // 手机号验证登录,计时交互
          var userPhone = $.cookie(‘userPhone’);
          // 验证手机号
          if (!seckill.validatePhone(userPhone)) {
              console.log(“未填写手机号码”);
              // 验证手机控制输出
              var killPhoneModal = $(“#killPhoneModal”);
              killPhoneModal.modal({
                  show: true,  // 显示弹出层
                  backdrop: ‘static’,  // 静止位置关闭
                  keyboard: false    // 关闭键盘事件
              });

              $(“#killPhoneBtn”).click(function () {
                  console.log(“提交手机号码按钮被点击”);
                  var inputPhone = $(“#killPhoneKey”).val();
                  console.log(“inputPhone” + inputPhone);
                  if (seckill.validatePhone(inputPhone)) {
                      // 把电话写入cookie
                      $.cookie(‘userPhone’, inputPhone, {expires: 7, path: ‘/seckill’});
                      // 验证通过 刷新页面
                      window.location.reload();
                  } else {
                      // todo 错误文案信息写到前端
                      $(“#killPhoneMessage”).hide().html(“<label class=’label label-danger’>手机号码错误</label>”).show(300);
                  }
              });
          } else {
              console.log(“在cookie中找到了电话号码,开启计时”);
              // 已经登录了就开始计时交互
              var startTime = params[‘startTime’];
              var endTime = params[‘endTime’];
              var seckillId = params[‘seckillId’];
              console.log(“开始秒杀时间=======” + startTime);
              console.log(“结束秒杀时间========” + endTime);
              $.get(seckill.URL.now(), {}, function (result) {
                  if (result && result[‘success’]) {
                      var nowTime = seckill.convertTime(result[‘data’]);
                      console.log(“服务器当前的时间==========” + nowTime);
                      // 进行秒杀商品的时间判断,然后计时交互
                      seckill.countDown(seckillId, nowTime, startTime, endTime);
                  } else {
                      console.log(‘结果:’ + result);
                      console.log(‘result’ + result);
                  }
              });
          }

      }
  },
  handlerSeckill: function (seckillId, mode) {
      // 获取秒杀地址
      mode.hide().html(‘<button class=”btn btn-primary btn-lg” id=”killBtn”>开始秒杀</button>’);
      console.debug(“开始进行秒杀地址获取”);
      $.get(seckill.URL.exposer(seckillId), {}, function (result) {
          if (result && result[‘success’]) {
              var exposer = result[‘data’];
              if (exposer[‘exposed’]) {
                  console.log(“有秒杀地址接口”);
                  // 开启秒杀,获取秒杀地址
                  var md5 = exposer[‘md5’];
                  var killUrl = seckill.URL.execution(seckillId, md5);
                  console.log(“秒杀的地址为:” + killUrl);
                  // 绑定一次点击事件
                  $(“#killBtn”).one(‘click’, function () {
                      console.log(“开始进行秒杀,按钮被禁用”);
                      // 执行秒杀请求,先禁用按钮
                      $(this).addClass(“disabled”);
                      // 发送秒杀请求
                      $.post(killUrl, {}, function (result) {
                          var killResult = result[‘data’];
                          var state = killResult[‘state’];
                          var stateInfo = killResult[‘stateInfo’];
                          console.log(“秒杀状态” + stateInfo);
                          // 显示秒杀结果
                          mode.html(‘<span class=”label label-success”>’ + stateInfo + ‘</span>’);

                      });

                  });
                  mode.show();
              } else {
                  console.warn(“还没有暴露秒杀地址接口,无法进行秒杀”);
                  // 未开启秒杀
                  var now = seckill.convertTime(exposer[‘now’]);
                  var start = seckill.convertTime(exposer[‘start’]);
                  var end = seckill.convertTime(exposer[‘end’]);
                  console.log(“当前时间” + now);
                  console.log(“开始时间” + start);
                  console.log(“结束时间” + end);
                  console.log(“开始倒计时”);
                  console.debug(“开始进行倒计时”);
                  seckill.countDown(seckillId, now, start, end);
              }
          } else {
              console.error(“服务器端查询秒杀商品详情失败”);
              console.log(‘result’ + result.valueOf());
          }
      });
  },
  countDown: function (seckillId, nowTime, startTime, endTime) {
      console.log(“秒杀的商品ID:” + seckillId + “,服务器当前时间:” + nowTime + “,开始秒杀的时间:” + startTime + “,结束秒杀的时间” + endTime);
      //  获取显示倒计时的文本域
      var seckillBox = $(“#seckill-box”);
      //  获取时间戳进行时间的比较
      nowTime = newDate(nowTime).valueOf();
      startTime = newDate(startTime).valueOf();
      endTime = newDate(endTime).valueOf();
      console.log(“转换后的Date类型当前时间戳” + nowTime);
      console.log(“转换后的Date类型开始时间戳” + startTime);
      console.log(“转换后的Date类型结束时间戳” + endTime);
      if (nowTime < endTime && nowTime > startTime) {
          // 秒杀开始
          console.log(“秒杀可以开始,两个条件符合”);
          seckill.handlerSeckill(seckillId, seckillBox);
      }
      elseif (nowTime > endTime) {
          alert(nowTime > endTime);
         
          // console.log(nowTime + “>” + startTime); 秒杀结束应该根据结束时间判断
         
           console.log(nowTime + “>” + endTime);
          // 秒杀结束
          console.warn(“秒杀已经结束了,当前时间为:” + nowTime + “,秒杀结束时间为” + endTime);
          seckillBox.html(“秒杀结束”);
      } else {
          console.log(“秒杀还没开始”);
          alert(nowTime < startTime);
          // 秒杀未开启
          var killTime = newDate(startTime + 1000);
          console.log(killTime);
          console.log(“开始计时效果”);
          seckillBox.countdown(killTime, function (event) {
              // 事件格式
              var format = event.strftime(“秒杀倒计时: %D天 %H时 %M分 %S秒”);
              console.log(format);
              seckillBox.html(format);
          }).on(‘finish.countdown’, function () {
              // 事件完成后回调事件,获取秒杀地址,控制业务逻辑
              console.log(“准备执行回调,获取秒杀地址,执行秒杀”);
              console.log(“倒计时结束”);
              seckill.handlerSeckill(seckillId, seckillBox);
          });
      }
  },
  cloneZero: function (time) {
      var cloneZero = “:00”;
      if (time.length < 6) {
          console.warn(“需要拼接时间”);
          time = time + cloneZero;
          return time;
      } else {
          console.log(“时间是完整的”);
          return time;
      }
  },
  convertTime: function (localDateTime) {
      var year = localDateTime.year;
      var monthValue = localDateTime.monthValue;
      var dayOfMonth = localDateTime.dayOfMonth;
      var hour = localDateTime.hour;
      var minute = localDateTime.minute;
      var second = localDateTime.second;
      return year + “-“ + monthValue + “-“ + dayOfMonth + ” “ + hour + “:” + minute + “:” + second;
  }
};

自定义jstl标签参考资料:


编写完了就部署运行吧,不出意外的话就是这个样子的:


    喜欢 (0)
    [247507792@qq.com]
    分享 (0)
    勤劳的小蚂蚁
    关于作者:
    温馨提示:本文来源于网络,转载文章皆标明了出处,如果您发现侵权文章,请及时向站长反馈删除。

    您必须 登录 才能发表评论!

    • 精品技术教程
    • 编程资源分享
    • 问答交流社区
    • 极客文库知识库

    客服QQ


    QQ:2248886839


    工作时间:09:00-23:00