详情页进入:就是前端点击链接,链接中有{goodsId}作为参数,后端@PathVarible 拿到这个id,然后去数据库查询对应的商品信息,并显示的一个功能。
这里有一个比较重要的就是秒杀倒计时功能:
后端获取秒杀开始时间和结束时间,以及系统当前时间,并定义剩余时间变量和秒杀状态,传给前端。
@RequestMapping(value = "/to_detail2/{goodsId}",produces = "text/html") // 前端传入的参数 goodsId @ResponseBody public String detail2(HttpServletRequest request,HttpServletResponse response,Model model,MiaoshaUser user, @PathVariable("goodsId") Long goodsId){//通过注解@PathVariable获取路径参数 /*取缓存*/ String html = redisService.get(GoodsKey.getGoodsDetail,""+goodsId,String.class); if (!StringUtils.isEmpty(html)) { return html; } //没有缓存,渲染页面 /*先将user 传进去 用来判断是否登录*/ model.addAttribute("user",user); /*根据传入的Id 通过service 拿到对应的Good信息*/ GoodsVo goods = goodsService.getGoodsById(goodsId); model.addAttribute("goods",goods); long startTime = goods.getStartDate().getTime(); long endTime = goods.getEndDate().getTime(); long nowTime = System.currentTimeMillis();/* 拿到现在时间的毫秒值*/ /**这里要做一个秒杀时间的判断 秒杀开始 秒杀结束 秒杀进行 * */ int miaoshaStatus = 0;/*用该变量来表示 秒杀的状态 0 表示秒杀未开始 1 开始 2 结束*/ int remainSeconds = 0; /*表示剩余时间 距离秒杀开始的时间*/ if (nowTime<startTime){//秒杀未开始 miaoshaStatus = 0; remainSeconds = (int)((startTime-nowTime)/1000);//注意此时是 毫秒值 要除以1000 }else if (endTime<nowTime){//秒杀结束 miaoshaStatus = 2; remainSeconds = -1; }else {//秒杀进行中 miaoshaStatus = 1; remainSeconds = 0; } model.addAttribute("remainSeconds",remainSeconds); model.addAttribute("miaoshaStatus",miaoshaStatus); // return "goods_detail"; }
前端定义个remainSecode 获取后端传过来的值,通过这个值来判断是否开始秒杀,结束,还是进行中,
并在前端定义个方法:没开始的时候 按钮,不可点击,作倒计时,开始后显示按钮,结束也不可点按钮
function countDown() { var remianSeconds =$("#remainSeconds").val(); var timeout;//定义一个timeout 保存Timeout 值 if (remianSeconds>0){//秒杀未开始 $("#buyButton").attr("disabled",true);/*还没开始的时候按钮不让点*/ /*且做一个倒计时*/ timeout=setTimeout(function () {//setTimeout 为时间到了之后执行 该函数 $("#countDown").text(remianSeconds-1);//将显示中的值 -1 $("#remainSeconds").val(remianSeconds-1);// remianSeconds 值减一 countDown();//在调用该方法 实现循环 },1000) }else if (remianSeconds == 0){//秒杀进行中 $("#buyButton").attr("disabled",false); //当remainSeconds =0 clearTimeout(timeout);//取消timeout 代码执行 $("#miaoshaTip").html("秒杀进行中!")//修改其中的内容 } else {//秒杀结束 $("#buyButton").attr("disabled",true); $("#miaoshaTip").html("结束!!!")//修改其中的内容 } }
未开始时有个CountDown反方,有个timefuntion,1000毫秒,即每过一秒,将remianSecond 值减一,并设置到显示text中,然后在调用coutDown,即每过一秒判断一次,显示一次。