页面静态化、前后端分离（页面优化）

页面静态化：

        利用浏览器缓存我们的页面。因此我们的页面要保证是纯静态的页面，与后端的数据交互都要通过ajax来获取数据。

之前的逻辑：

现在的逻辑：

大概：将页面缓存到客户端的浏览器上，当用户访问页面的时候，直接不与服务器有交互，直接从本地缓存（浏览器）中拿页面，节省网络流量。

之前的逻辑：点击链接，访问后端controller访问业务层，成功获取数据，将数据渲染到html页面再将整个html页面返回给客户显示。

现在：点击链接，除了第一次访问。访问直接访问用户本地的缓存的html页面（浏览器会缓存下来静态static下的文件），然后通过前端ajax来访问后端，获取页面需要显示的数据返回即可

 

页面静态化的一个特点

也是可以将静态页面给缓存在用户浏览器一端。同一个页面，在页面的生命周期没到之前，用户的请求都是在本地进行(304)；

<script>
    $(function () {
      //  countDown();
        getDetail();//从后端取出对应数据
 
    })
    function getDetail() {
        var goodsId = g_getQueryString("goodsId");
        $.ajax({
            url : "/goods/to_detail/"+goodsId,
            type : "GET",
            success: function (data) {
                if (data.code  == 0) {// 访问后端detail 接口拿到数据
                    render(data.data);//渲染界面的方法
                }else {
                    layer.msg(data.msg)
                }
            },
            error:function () {
             layer.msg("客户端请求有误！")
            }
        })
    }
 
    function render(detail) {
        var  goodsVo =detail.goodsVo;
        var miaoshaStatus =detail.miaoshaStatus;
        var remainSeconds =detail.remainSeconds;
        var user =detail.user;
        if (user) {
            $("#userTip").hide();//没有就不展示
        }
        //用获取的参数 放入 对应的模板中
            $("#goodsName").text(goodsVo.goodsName);
            $("#goodsImg").attr("src", goodsVo.goodsImg);
            $("#startTime").text(new Date(goodsVo.startDate).format("yyyy-MM-dd hh:mm:ss"));
            $("#remainSeconds").val(remainSeconds);
            $("#goodsId").val(goodsVo.id);
            $("#goodsPrice").text(goodsVo.goodsPrice);
            $("#miaoshaPrice").text(goodsVo.miaoshaPrice);
            $("#stockCount").text(goodsVo.stockCount);
            countDown();//调用倒计时
    }
    function countDown() {
        var remainSeconds = $("#remainSeconds").val();
        // var remainSeconds = $("#remainSeconds").val();
        var timeout;//定义一个timeout 保存Timeout 值
        if (remainSeconds>0){//秒杀未开始
            $("#buyButton").attr("disabled",true);/*还没开始的时候按钮不让点*/
            $("#miaoshaTip").html("秒杀倒计时："+remainSeconds+"秒");
            /*且做一个倒计时*/
            timeout=setTimeout(function () {//setTimeout 为时间到了之后执行 该函数
                $("#countDown").text(remainSeconds-1);//将显示中的值 -1
                $("#remainSeconds").val(remainSeconds-1);// remianSeconds 值减一
                countDown();//在调用该方法 实现循环
            },1000)
        }else if (remainSeconds == 0){//秒杀进行中
            $("#buyButton").attr("disabled",false);
            //当remainSeconds =0
            clearTimeout(timeout);//取消timeout 代码执行
            $("#miaoshaTip").html("秒杀进行中！")//修改其中的内容
            /**加入秒杀数学验证码 功能
             * 1.一开始图形验证码和输入框都是隐藏的
             * 2.当秒杀进行的时候，显示验证码和输入框
             * */
            $("#verifyCodeImg").attr("src", "/miaosha/verifyCode?goodsId="+$("#goodsId").val());//访问验证码接口
            $("#verifyCodeImg").show();
            $("#verifyCode").show();
 
        } else {//秒杀结束
            $("#buyButton").attr("disabled",true);
            $("#miaoshaTip").html("结束！！！")//修改其中的内容
        }
    }
function refreshVerifyCode() {
    $("#verifyCodeImg").attr("src", "/miaosha/verifyCode?goodsId="+$("#goodsId").val()+"×tamp="+new Date().getTime());//访问验证码接口
    //这里 如果不加timestamp url 不变，重复申请，浏览器会直接取缓存，不重复请求
    
}
    // function countDown(){
    //     var remainSeconds = $("#remainSeconds").val();
    //     var timeout;
    //     if(remainSeconds > 0){//秒杀还没开始，倒计时
    //         $("#buyButton").attr("disabled", true);
    //         $("#miaoshaTip").html("秒杀倒计时："+remainSeconds+"秒");
    //         timeout = setTimeout(function(){
    //             $("#countDown").text(remainSeconds - 1);
    //             $("#remainSeconds").val(remainSeconds - 1);
    //             countDown();
    //         },1000);
    //     }else if(remainSeconds == 0){//秒杀进行中
    //         $("#buyButton").attr("disabled", false);
    //         if(timeout){
    //             clearTimeout(timeout);
    //         }
    //         $("#miaoshaTip").html("秒杀进行中");
    //     }else{//秒杀已经结束
    //         $("#buyButton").attr("disabled", true);
    //         $("#miaoshaTip").html("秒杀已经结束");
    //     }
    // }
</script>
--------------------- 
作者：Dandy1awcoder 
来源：CSDN 
原文：https://blog.csdn.net/weixin_38035852/article/details/81054987 
版权声明：本文为博主原创文章，转载请附上博文链接！