博客
关于我
基于SpringMVC+Spring+MyBatis实现秒杀系统【客户端交互】
阅读量:603 次
发布时间:2019-03-13

本文共 7947 字,大约阅读时间需要 26 分钟。

前言

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

 

准备工作

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

Archetype Created Web Application
dispatcherServlet
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:spring/spring-*.xml
dispatcherServlet
/

2、配置spring-web.xml

 

秒杀接口

@Controller@RequestMapping("/seckill")public class SeckillController {    @Autowired    SeckillService seckillService;    @RequestMapping("/list")    public ModelAndView list(){        ModelAndView mav=new ModelAndView("list");        List
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(@PathVariable("seckillId")Long seckillId){ SeckillResult
result=null; try{ Exposer exposer=seckillService.exposeSeckillUrl(seckillId); result=new SeckillResult
(true,exposer); }catch (Exception e){ result=new SeckillResult
(false,e.getMessage()); } return result; } @RequestMapping(value="/{seckillId}/{md5}/execute",method = RequestMethod.POST,produces = {"application/json;charset=UTF-8"}) @ResponseBody public SeckillResult
execute(@PathVariable("seckillId")Long seckillId, @PathVariable("md5")String md5, @CookieValue(value="phone",required=false)Long phone){ if(phone==null){ return new SeckillResult
(false,"手机号未注册"); } SeckillResult
result=null; try{ SeckillExecution execution=seckillService.executeSeckill(seckillId,phone,md5); result=new SeckillResult
(true,execution); }catch(RepeatKillException e){ SeckillExecution execution=new SeckillExecution(seckillId,-1,"重复秒杀"); result=new SeckillResult
(true,execution); }catch(SeckillCloseException e){ SeckillExecution execution=new SeckillExecution(seckillId,0,"秒杀结束"); result=new SeckillResult
(true,execution); }catch (Exception e){ SeckillExecution execution=new SeckillExecution(seckillId,-2,"系统异常"); result=new SeckillResult
(true,execution); } return result; } //返回系统时间 @RequestMapping(value="/time/now/",method = RequestMethod.GET) @ResponseBody public SeckillResult
time(){ Date d=new Date(); return new SeckillResult
(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" %>    秒杀列表页    

秒杀列表

名称 库存 开始时间 结束时间 创建时间 秒杀
${item.name} ${item.number}
秒杀

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" %>    秒杀详情    

${seckill.name}

<%--显示time图标--%> <%--展示倒计时--%>

<%--登录弹出层 输入电话--%>

  

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
手机号错误!').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("
") $.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("
"+stateInfo+""); } }) }); 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来实现倒计时效果。倒计时插件会维护一个倒计时事件,时间结束时直接会调用秒杀接口来实现秒杀业务。

转载地址:http://mmbaz.baihongyu.com/

你可能感兴趣的文章
2018年3月最新的Ubuntu 16.04.4漏洞提权代码
查看>>
异或交换两个数的值
查看>>
Golang AES加密
查看>>
亚马逊aws文档语法错误
查看>>
什么是5G?居然有人用漫画把它讲得如此接地气!
查看>>
Spring cloud --分布式配置中心组件Spring Cloud Config
查看>>
UE4接入Android第三方库2——通过JIN与GameActivity通信
查看>>
Unity Job System 2——并行处理数据
查看>>
spark概述
查看>>
JavaScript 知识梳理[一] 变量类型,浅拷贝,深拷贝
查看>>
pip命令 failed to create process.
查看>>
做SMTP客户端遇报错:535 Error
查看>>
Python3的修改
查看>>
SQL基础学习(六)- MySQL的insert语句
查看>>
java.security.InvalidKeyException: Illegal key size
查看>>
Linux kernel pwn --- CSAW2015 StringIPC
查看>>
2020 05 02 记录思考
查看>>
2020-05-31 py执行时超时控制
查看>>
一段强大的shellcode
查看>>
双链表相加问题
查看>>