Java秒杀系统--4.商品展示模块

简介

　　实现获取商品列表的请求，获取商品详情的请求。

1.前端发送请求

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

　　

           success: function (data) {
                layer.closeAll();
                if (data.code == 0) {
                    layer.msg("成功");
                    window.location.href = "/goods/to_list";
                } else {
                    layer.msg(data.msg);
                }
            },    

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

　　前端发出对商品列表页面的请求时先判断redis中是否有商品列表页的缓存，如果有就返回redis中的缓存页面。如果没有，生成缓存返回给前端。

　　存储在redis中的页面缓存是有时间限制的，在本项目中页面缓存只能在redis中生存60秒，生存时间的设定通过jedis的set命令中的expired参数实现。

　　@RequestMapping(value = "/to_list",produces = "text/html")                                                          //produces+@ResponseBody：产生特定类型的相应
    @ResponseBody
    public String goodsList(Model model, MiaoshaUser user, HttpServletRequest request, HttpServletResponse response){

        String html = redisService.get(GoodsPrefix.getGoodsList,"",String.class);                                       //自动渲染
        if (!StringUtils.isEmpty(html)){
            return html;
        }


        List<GoodsVo> goodslist = miaoshaGoodsService.getGoodsList();                                                   //手动渲染
        model.addAttribute("goodslist",goodslist);
        SpringWebContext ctx = new SpringWebContext(request,response,request.getServletContext(),request.getLocale(),
                model.asMap(),applicationContext);
        html = thymeleafViewResolver.getTemplateEngine().process("goods_list",ctx);
        if (!StringUtils.isEmpty(html)) {
            redisService.set(GoodsPrefix.getGoodsList,"",html);
        }
        return html;
    }

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

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

　　

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

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

//调用商品详情接口
    function getDetail(){
        var goodsId = g_getQueryString("goodsId");
        $.ajax({
            url:"/goods/detail/"+goodsId,
            type:"GET",
            success:function (data) {
                if (data.code==0){
                    renderr(data.data);
                }else layer.msg(data.msg)
            },
            error:function () {
                layer.msg("客户端有误2")
            }
        });
    }
    //将后端返回的商品详情数据添加到页面。
    function renderr(data) {
        var miaoShaStatue = data.miaoShaStatue;
        var remainSeconds = data.remainSeconds;
        var miaoshaUser = data.miaoshaUser;
        var goodsVo = data.goodsVo;
        if (miaoShaStatue){
            $("#useTip").hide();
        }
        $("#goodsName").text(goodsVo.goodsName);
        $("#goodsImg").attr("src",goodsVo.goodsImg);
        $("#startTime").text(new Date(goodsVo.startDate).format("yyyy-MM-dd hh:mm:ss"));
        $("#goodsPrice").text(goodsVo.goodsPrice);
        $("#goodsMiaoshaPrice").text(goodsVo.miaoshaPrice);
        $("#goodsStock").text(goodsVo.stockCount);
        $("#goodsId").val(goodsVo.id);
        $("#remainSeconds").val(remainSeconds);
        countDown()
    }
    //实现倒计时的功能
    function countDown() {
                                                                                                                        //得到remainSeconds
        var remainSeconds = $("#remainSeconds").val();
        var timeOut;
        if(remainSeconds==-1){                                                                                          //秒杀活动已经结束
            $("#buyButton").attr("disabled",true);
            $("#miaoshaTip").html("秒杀活动已经结束");

        }else if (remainSeconds==0){                                                                                    //秒杀活动进行中
            $("#buyButton").attr("disabled",false);
            $("#miaoshaTip").html("秒杀活动进行中");
            clearTimeout(timeOut);
        } else  {                                                                                                       //秒杀活动未开始  remainSeconds=-1
            $("#buyButton").attr("disabled",true);
                                                                                                                        //做一个倒数计时器
            timeOut = setTimeout(function () {
                $("#miaoshaTip").html("秒杀倒计时："+remainSeconds+"秒");
                $("#remainSeconds").val(remainSeconds-1);
                countDown();
            },1000);
        }

    }