SSM秒杀项目(五)商品详情页

最新推荐文章于 2021-12-16 16:15:14 发布

NaNaBf

最新推荐文章于 2021-12-16 16:15:14 发布

阅读量764

点赞数

分类专栏： SSM秒杀项目实战

本文链接：https://blog.csdn.net/ZH956318/article/details/98650439

版权

SSM秒杀项目实战专栏收录该内容

5 篇文章 3 订阅

订阅专栏

商品详情页展示：

业务处理逻辑：

① 在秒杀商品列表页点击商品详情，根据uri路径参数"${goods.id}/to_detail"选择对应的controller进行逻辑业务处理；

@RequestMapping("/{goods.id}/to_detail")
	public String detail(@PathVariable("goods.id") long id,Model model,
			@CookieValue(value=UserServiceImpl.COOKI_NAME_TOKEN,required=false)String 
             cookieToken,
			HttpServletResponse response){
		GoodsVo goods = goodsService.getGoodsVoById(id);
		//未登录不能参与秒杀活动
		//根据Token获取从缓存中取出对应的user对象
		User user = userService.getByToken(response, cookieToken);
		if(user == null) {
			return "redirect:login";//返回到登录界面
		}
		model.addAttribute("goods", goods);
		model.addAttribute("user", user);
		//传入秒杀开始的时间 结束时间 当前服务器时间
		long startTime=goods.getStartDate().getTime();
		long endTime = goods.getEndDate().getTime();
		long nowTime = System.currentTimeMillis();
		int statue = 0;//秒杀状态量
		int remainSecond = 0;//秒杀倒计时秒数
		if(nowTime < startTime){
			statue = 0;//秒杀未开始
			remainSecond = (int)(startTime-nowTime)/1000;
		}else if (nowTime > endTime){
			statue = 2;//秒杀已结束
			remainSecond = -1;
		}else{
			statue = 1;//秒杀进行中
			remainSecond = 0;
		}
		model.addAttribute("statue", statue);
		model.addAttribute("remainSecond", remainSecond);
		return "goods_detail";
	}

②在controller中将路径参数goods.id用PathVariable绑定到传入参数id，用CookieValue将当前请求头中的以token为key对应的value绑定到传入参数cookieToken。

a.第一步仍然是根据cookieToken从redis缓存中取出对应的登录用户user，如果没有直接返回null；

b.当登录用户为null,不能参加秒杀活动，需要重新回到登录页面；

c.秒杀页面一般分为三种情况：第一种是未到秒杀时间，秒杀未开启；第二种是秒杀开启，用户进行秒杀秒杀抢购；第三种是商品库存不足或秒杀时间已过，秒杀结束；

d.如何判断秒杀是否开始？其实在数据库中秒杀商品信息表中应该包括该商品的秒杀开始时间startTime与秒杀结束时间 endTime，判断秒杀是否开启只需要获取服务器当前时间nowTime与startTime进行比较：

e.将秒杀状态量、秒杀倒计时剩余时间、根据商品id从数据库中查询出来的对应商品信息和用户信息等装入数据模型中返回给秒杀商品详情页；

<body>
	<div class="container">
		<div class="row">
		     <div class="col-md-4 col-md-offset-4" >
		        <h1>
		        <span class="label label-primary">商品详情</span>
		        
		        </h1>
		     </div>
		 </div>
		<table class="table" id="goodslist">
		<tr>
			<td><span class="label label-primary">商品名称</span></td>
			<td colspan="3">${goods.goodsName}</td>
		</tr>
		<tr>
			<td><span class="label label-primary">商品图片</span></td>
			<td colspan="6"><img src="${App_Path}/${goods.goodsImg}" width="160" 
            height="130"></img></td>
		</tr>
		<tr>
			<td><span class="label label-primary">商品原价</span></td>
			<td colspan="3" >${goods.goodsPrice}</td>
		</tr>
		<tr>
			<td><span class="label label-primary">秒杀价</span></td>
			<td colspan="3">${goods.miaoshaPrice}</td>
		</tr>
		<tr>
			<td><span class="label label-primary">库存数量</span></td>
			<td colspan="3" >${goods.stockCount}</td>
		</tr>
		<tr>
			<td><span class="label label-primary">开始时间</span></td>
			<td colspan="3" >${goods.startDate}</td>
		</tr>
		<tr>
		    <input type="hidden" id="remainSecond" value="${remainSecond}"/>
		    <input type="hidden" id="goodsId" value="${goods.id }">
		    <td><span id="SeckillInfo"></span></td>
		    <td><span id="Seckill_btn"></span></td>
		</tr>
		</table>
	</div>
</body>

③对于秒杀是否开启，我们需要根据controller中返回的秒杀倒计时剩余时间进行判断countdown()：

a.如果倒计时剩余时间大于0，则每1s回调一次倒计时函数countdown()，并在countdown函数中对remainSecond标签值进行减1操作，${remainSecond}的初始值为controller中传过来的(startTime-nowTime)/1000。

b.如果倒计时剩余时间等于0，则秒杀时间到，开启秒杀，给出秒杀按钮；

c.如果倒计时剩余时间小于0，结束秒杀；

 function countDown(){
	   var remainSecond = $("#remainSecond").val();
	   var timeout;
       var statue = ${statue};
      if (remainSecond>0){
         $("#SeckillInfo").html("倒计时");
         //倒计时
         timeout = setTimeout(function(){
             $("#Seckill_btn").html(remainSecond-1);
             $("#remainSecond").val(remainSecond-1);
             countDown();
         },1000);//1秒调用一次function（）
      }else if(remainSecond==0){
          $("#SeckillInfo").html("秒杀进行中");
          //给出秒杀按钮
          $("#Seckill_btn").html('<button class="btn btn-primary btn-lg" id="buyButton" 
          onclick="getSeckillPath()">立即秒杀</button>');
      }else{
         //秒杀结束
         $("#SeckillInfo").html("秒杀已结束");
         $("#Seckill_btn").html('<button class="btn btn-primary btn-lg">活动已结束 
         </button>');
      }
}