SpringBoot秒杀系统实战13-秒杀商品详情页+秒杀倒计时功能实现

文章目录

• 秒杀倒计时：
• 1、在GoodsController里面创建toDetail方法，接收详情页面的请求
• 2、 前端页面处理逻辑
• 3、goods_detail.html完整代码：
• 怎么注入MiaoshaUser的实例参数

在上一节中，我们已经实现秒杀商品的列表页的显示，其中可以点击每一个商品的【详情】查看具体的秒杀信息，那么我们这一节就来实现商品的详情页面的显示以及秒杀倒计时功能实现。【详情】链接中有{goodsId}作为参数，后端@PathVariable(“goodsId”)long goodsId拿到这个goodsId，然后去数据库查询对应的商品信息，并显示秒杀情况。

我们点击商品详情，发送一个连接到后端，那么我们要先设计出一个接收’/goods/to_detail/’+${ goods.id}该请求的接口。

秒杀倒计时：

后端根据商品的Id去数据库中获取秒杀开始时间和结束时间，以及系统当前时间，并定义秒杀剩余时间变量和秒杀状态，计算出相应的值，传给前端，前端拿到之后，做相对应的显示逻辑效果。

1、在GoodsController里面创建toDetail方法，接收详情页面的请求

	/**
	 * 未作页面缓存
	 * @param model
	 * @param user
	 * @param goodsId
	 * @return
	 */
	@RequestMapping("/to_detail/{goodsId}")
	public String toDetail(Model model,MiaoshaUser user,@PathVariable("goodsId")long goodsId) {//id一般用snowflake算法
		model.addAttribute("user", user);
		GoodsVo goods=goodsService.getGoodsVoByGoodsId(goodsId);
		model.addAttribute("goods", goods);
		//既然是秒杀，还要传入秒杀开始时间，结束时间等信息
		long start=goods.getStartDate().getTime();
		long end=goods.getEndDate().getTime();
		long now=System.currentTimeMillis();
		//秒杀状态量
		int status=0;
		//开始时间倒计时
		int remailSeconds=0;
		//查看当前秒杀状态
		if(now<start) {//秒杀还未开始，--->倒计时
			status=0;
			remailSeconds=(int) ((start-now)/1000);  //毫秒转为秒
		}else if(now>end){ //秒杀已经结束
			status=2;
			remailSeconds=-1;  //毫秒转为秒
		}else {//秒杀正在进行
			status=1;
			remailSeconds=0;  //毫秒转为秒
		}
		model.addAttribute("status", status);
		model.addAttribute("remailSeconds", remailSeconds);
		return "goods_detail";//返回页面login
	}

注意：获取了商品的秒杀开始时间和结束时间，如果秒杀没有开始，那么计算一个还剩多少时间，开始，并且定义一个状态status来表示一个秒杀的状态，0代表秒杀还未开，1代表秒杀正在进行，2代表秒杀已经结束，秒杀还未开始的情况还要计算出倒计时，(int) ((start-now)/1000)，然后将status和remailSeconds传到前端去。

2、