大概：将页面缓存到客户的浏览器上，当用户访问页面的时候，直接不与服务器有交互，直接从本地缓存中拿取页面，节省网络流量。
之前的逻辑：点击链接，访问后端controller 访问业务层，成功获取数据，将数据渲染到html页面再将整个html页面返回给客户显示
现在：点击链接，除了第一次访问。访问直接访问用户本地的缓存的html页面 （浏览器会缓存下来静态static下文件），静态资源，然后通过前端ajAx来访问后端，获取页面需要显示的数据返回即可。
<!DOCTYPE HTML> <html> <head> <title>商品详情</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- jquery --> <script type="text/javascript" src="/js/jquery.min.js"></script> <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /> <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script> <!-- jquery-validator --> <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script> <!-- layer --> <script type="text/javascript" src="/layer/layer.js"></script> <!-- md5.js --> <script type="text/javascript" src="/js/md5.min.js"></script> <!-- common.js --> <script type="text/javascript" src="/js/common.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-heading">秒杀商品详情</div> <div class="panel-body"> <span id="userTip"> 您还没有登录，请登陆后再操作<br/></span> <span>没有收货地址的提示。。。</span> </div> <table class="table" id="goodslist"> <tr> <td>商品名称</td> <td colspan="3" id="goodsName"></td> </tr> <tr> <td>商品图片</td> <td colspan="3"><img id="goodsImg" width="200" height="200" /></td> </tr> <tr> <td>秒杀开始时间</td> <td id="startTime"></td> <!--时间 显示格式--> <td> <input type="hidden" id="remainSeconds" /> <span id="miaoshaTip"></span> </td> </tr> <tr> <td>商品原价</td> <td colspan="3" id="goodsPrice"></td> </tr> <tr> <td>秒杀价</td> <td colspan="3" id="miaoshaPrice"></td> </tr> <tr> <td>库存数量</td> <td colspan="3" id="stockCount"></td> </tr> <tr> <td> <!--<form id="miaoshaForm" method="post" action="/miaosha/do_miaosha"> <!–一个秒杀 按钮 将 秒杀订单提交到 do_miaosha–>--> <!--<button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>--> <!--<input type="hidden" name="goodsId" id="goodsId" />--> <!--</form>--> <div class="row"> <div class="form-inline"> <img id="verifyCodeImg" width="80" height="32" style="display:none" onclick="refreshVerifyCode()"/><!--onclick 是刷新 这个验证码--> <input id="verifyCode" class="form-control" style="display:none"/> <button class="btn btn-primary" type="button" id="buyButton"onclick="getMiaoshaPath()">立即秒杀</button> </div> </div> <input type="hidden" name="goodsId" id="goodsId" /><!--a--> </td> </tr> </table> </div> </body> <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> </html>