大概:将页面缓存到客户的浏览器上,当用户访问页面的时候,直接不与服务器有交互,直接从本地缓存中拿取页面,节省网络流量。
之前的逻辑:点击链接,访问后端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>