模块4之实现前后端分离

简介

　　前后端分离后的请求方式：1.浏览器发出请求---》2.直接到达前端页面---》3.前端通过Ajax等等调用后端接口产生数据---》4.将数据填充到页面。

1.对前端产生的请求直接到达前端页面

　　在商品列表页面点击某个商品对应的详情键直接跳转到另一个前端页面goods_detail.htm

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

　　需要在static中创建一个goods_detail.htm文件

2.在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     }

3.后端接口将数据封装在Result<T>中，返回给前端；创建了一个GoodsDetailVo类用来封装需要传递的信息。

 1 @RequestMapping("/detail/{goodsId}")
 2     @ResponseBody
 3     public Result<GoodsDetailVo> goods_detail( MiaoshaUser user,@PathVariable("goodsId")Long goodsId){
 4 
 5         int miaoShaStatue = 0;
 6         int remainSeconds = -1;
 7 
 8 
 9         GoodsVo goods = miaoshaGoodsService.getGoodsVoById(goodsId);                                                    //由数据库中查询出商品详情
10         long startT = goods.getStartDate().getTime();
11         long endT = goods.getEndDate().getTime();
12         long nowT = System.currentTimeMillis();
13 
14 
15         if (startT>nowT) {                                                                                              //秒杀未开始
16             miaoShaStatue=0;
17             remainSeconds = (int) ((startT-nowT)/1000);
18         }else if (nowT>endT){                                                                                           //秒杀已经结束
19             miaoShaStatue=2;
20             remainSeconds=-1;
21         }else {                                                                                                         //秒杀进行中
22             miaoShaStatue=1;
23             remainSeconds=0;
24         }
25 
26 
27         GoodsDetailVo goodsDetailVo = new GoodsDetailVo();
28         goodsDetailVo.setGoodsVo(goods);
29         goodsDetailVo.setMiaoShaStatue(miaoShaStatue);
30         goodsDetailVo.setMiaoshaUser(user);
31         goodsDetailVo.setRemainSeconds(remainSeconds);
32         return Result.success(goodsDetailVo);
33 
34     }

4.将获得内容填充到页面中，并在前端产生一个倒数计时器。

 1  //将后端返回的商品详情数据添加到页面。
 2     function renderr(data) {
 3         var miaoShaStatue = data.miaoShaStatue;
 4         var remainSeconds = data.remainSeconds;
 5         var goodsVo = data.goodsVo;
 6         if (miaoShaStatue){
 7             $("#useTip").hide();
 8         }
 9         $("#goodsName").text(goodsVo.goodsName);
10         $("#goodsImg").attr("src",goodsVo.goodsImg);
11         $("#startTime").text(new Date(goodsVo.startDate).format("yyyy-MM-dd hh:mm:ss"));
12         $("#goodsPrice").text(goodsVo.goodsPrice);
13         $("#goodsMiaoshaPrice").text(goodsVo.miaoshaPrice);
14         $("#goodsStock").text(goodsVo.stockCount);
15         $("#goodsId").val(goodsVo.id);
16         $("#remainSeconds").val(remainSeconds);
17         countDown()　　　　　　　　　　　　//调用倒数计时器函数
18     }

5.倒数计时器的设计

　　所需工具

　　1.一个隐藏的input来记录剩余时间，给程序作为计算时间的依据，

　　2.一个<span>来展示剩余时间的跳动，给用户看，

　　3.setTimeout：每隔1000ms，就重新执行一次函数，

　　

<input type="hidden" id="remainSeconds"/>
<span id="miaoshaTip"/>
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);
        }

    }

 

posted on 2020-04-13 14:50  hello，bdiskl  阅读(328)  评论(0)  编辑  收藏  举报

导航