Java秒杀系统--3.商品列表的实现

简介：

　　实现获取商品列表的请求

1.前端发送请求

　　在用户登录成功后会制动跳转到商品列表页面。

　　

1            success: function (data) {
2                 layer.closeAll();
3                 if (data.code == 0) {
4                     layer.msg("成功");
5                     window.location.href = "/goods/to_list";
6                 } else {
7                     layer.msg(data.msg);
8                 }
9             },    

2.后端使用页面缓存技术，来减少用户调用此接口时对服务器的负载。

 1 　　@RequestMapping(value = "/to_list",produces = "text/html")                                                          //produces+@ResponseBody：产生特定类型的相应
 2     @ResponseBody
 3     public String goodsList(Model model, MiaoshaUser user, HttpServletRequest request, HttpServletResponse response){
 4 
 5         String html = redisService.get(GoodsPrefix.getGoodsList,"",String.class);                                       //自动渲染
 6         if (!StringUtils.isEmpty(html)){
 7             return html;
 8         }
 9 
10 
11         List<GoodsVo> goodslist = miaoshaGoodsService.getGoodsList();                                                   //手动渲染
12         model.addAttribute("goodslist",goodslist);
13         SpringWebContext ctx = new SpringWebContext(request,response,request.getServletContext(),request.getLocale(),
14                 model.asMap(),applicationContext);
15         html = thymeleafViewResolver.getTemplateEngine().process("goods_list",ctx);
16         if (!StringUtils.isEmpty(html)) {
17             redisService.set(GoodsPrefix.getGoodsList,"",html);
18         }
19         return html;
20     }

3.秒杀商品的详细信息的展示

　　在goods_list.html中点击详情按钮，直接跳转到秒杀商品的详情页。

　　

<td><a th:href="'/goods_detail.htm?goodsId='+${goods.id}">详情</a></td>

　　在goods_detail.htm中使用Ajax异步访问秒杀商品详情页面，并将由后端传递来的数据显示在前端页面，并启用倒计时功能。

 1 //调用商品详情接口
 2     function getDetail(){
 3         var goodsId = g_getQueryString("goodsId");
 4         $.ajax({
 5             url:"/goods/detail/"+goodsId,
 6             type:"GET",
 7             success:function (data) {
 8                 if (data.code==0){
 9                     renderr(data.data);
10                 }else layer.msg(data.msg)
11             },
12             error:function () {
13                 layer.msg("客户端有误2")
14             }
15         });
16     }
17     //将后端返回的商品详情数据添加到页面。
18     function renderr(data) {
19         var miaoShaStatue = data.miaoShaStatue;
20         var remainSeconds = data.remainSeconds;
21         var miaoshaUser = data.miaoshaUser;
22         var goodsVo = data.goodsVo;
23         if (miaoShaStatue){
24             $("#useTip").hide();
25         }
26         $("#goodsName").text(goodsVo.goodsName);
27         $("#goodsImg").attr("src",goodsVo.goodsImg);
28         $("#startTime").text(new Date(goodsVo.startDate).format("yyyy-MM-dd hh:mm:ss"));
29         $("#goodsPrice").text(goodsVo.goodsPrice);
30         $("#goodsMiaoshaPrice").text(goodsVo.miaoshaPrice);
31         $("#goodsStock").text(goodsVo.stockCount);
32         $("#goodsId").val(goodsVo.id);
33         $("#remainSeconds").val(remainSeconds);
34         countDown()
35     }
36     //实现倒计时的功能
37     function countDown() {
38                                                                                                                         //得到remainSeconds
39         var remainSeconds = $("#remainSeconds").val();
40         var timeOut;
41         if(remainSeconds==-1){                                                                                          //秒杀活动已经结束
42             $("#buyButton").attr("disabled",true);
43             $("#miaoshaTip").html("秒杀活动已经结束");
44 
45         }else if (remainSeconds==0){                                                                                    //秒杀活动进行中
46             $("#buyButton").attr("disabled",false);
47             $("#miaoshaTip").html("秒杀活动进行中");
48             clearTimeout(timeOut);
49         } else  {                                                                                                       //秒杀活动未开始  remainSeconds=-1
50             $("#buyButton").attr("disabled",true);
51                                                                                                                         //做一个倒数计时器
52             timeOut = setTimeout(function () {
53                 $("#miaoshaTip").html("秒杀倒计时："+remainSeconds+"秒");
54                 $("#remainSeconds").val(remainSeconds-1);
55                 countDown();
56             },1000);
57         }
58 
59     }