java秒殺系列（2）- 頁面靜態化技術

阿新 • • 發佈：2019-08-17

前言

通過程式碼片段分別介紹服務端渲染、客戶端渲染、物件快取三種方式的寫法。
程式碼片段僅供參考，具體實現需要根據業務場景自行適配，但思想都是一樣。

一、服務端渲染方式

1、介面返回html頁面的設定

@Autowired
ThymeleafViewResolver thymeleafViewResolver;
@Autowired
ApplicationContext applicationContext;

@RequestMapping(value="/to_list", produces="text/html")
@ResponseBody
public String goodsList() {
    // 業務邏輯
}

2、先從快取中取，有就返回。

//取快取
String html = redisService.get(GoodsKey.getGoodsList, "", String.class);
if(!StringUtils.isEmpty(html)) {
    return html;
}

3、快取中沒有，就手動渲染。

springboot1.5.x的寫法：

List<GoodsVo> goodsList = goodsService.listGoodsVo();
model.addAttribute("goodsList", goodsList);
SpringWebContext ctx = new SpringWebContext(request,response, request.getServletContext(),request.getLocale(), model.asMap(), applicationContext );
//手動渲染
html = thymeleafViewResolver.getTemplateEngine().process("goods_list", ctx);

springboot2.x的寫法：

WebContext ctx = new WebContext(request, response, request.getServletContext(),  request.getLocale(), model.asMap());
//手動渲染
html = thymeleafViewResolver.getTemplateEngine().process("goods_list", ctx);

4、最後再將渲染內容加入到redis

if(!StringUtils.isEmpty(html)) {
    redisService.set(GoodsKey.getGoodsList, "", html);
}

二、客戶端渲染方式（商品詳情頁）

1、找到跳轉到商品詳情頁的路徑，修改為一個靜態html的路徑。

在商品列表頁，找到跳轉到詳情頁的動態路徑，直接修改為一個靜態路徑，字尾為htm或shtml，總之不要是html即可，因為application.properties中一般會配置字尾為html的都訪問templates資料夾下的。

<body>

<div class="panel panel-default" style="height:100%;background-color:rgba(222,222,222,0.8)">
  <div class="panel-heading">秒殺商品列表</div>
  <table class="table" id="goodslist">
    <tr><td>商品名稱</td><td>商品圖片</td><td>商品原價</td><td>秒殺價</td><td>庫存數量</td><td>詳情</td></tr>
    <tr  th:each="goods,goodsStat : ${goodsList}">  
                <td th:text="${goods.goodsName}"></td>  
                <td ><img th:src="@{${goods.goodsImg}}" width="100" height="100" /></td>  
                <td th:text="${goods.goodsPrice}"></td>  
                <td th:text="${goods.miaoshaPrice}"></td>  
                <td th:text="${goods.stockCount}"></td>
                <td><a th:href="'/goods_detail.htm?goodsId='+${goods.id}">詳情</a></td>  
     </tr>  
  </table>
</div>
</body>

2、根據1的路徑，在static目錄下新建一個goods_detail.htm檔案，原本動態頁面上的模板語言都去掉，換成id=“xx”，然後使用ajax來渲染靜態檔案中的資料即可。

原始動態頁面：

<div class="panel panel-default">
  <div class="panel-heading">秒殺商品詳情</div>
  <div class="panel-body">
    <span th:if="${user eq null}"> 您還沒有登入，請登陸後再操作<br/></span>
    <span>沒有收貨地址的提示。。。</span>
  </div>
  <table class="table" id="goodslist">
    <tr>  
        <td>商品名稱</td>  
        <td colspan="3" th:text="${goods.goodsName}"></td> 
     </tr>  
     <tr>  
        <td>商品圖片</td>  
        <td colspan="3"><img th:src="@{${goods.goodsImg}}" width="200" height="200" /></td>  
     </tr>
     <tr>  
        <td>秒殺開始時間</td>  
        <td th:text="${#dates.format(goods.startDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
        <td id="miaoshaTip">    
            <input type="hidden" id="remainSeconds" th:value="${remainSeconds}" />
            <span th:if="${miaoshaStatus eq 0}">秒殺倒計時：<span id="countDown" th:text="${remainSeconds}"></span>秒</span>
            <span th:if="${miaoshaStatus eq 1}">秒殺進行中</span>
            <span th:if="${miaoshaStatus eq 2}">秒殺已結束</span>
        </td>
        <td>
            <form id="miaoshaForm" method="post" action="/miaosha/do_miaosha">
                <button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒殺</button>
                <input type="hidden" name="goodsId" th:value="${goods.id}" />
            </form>
        </td>
     </tr>
     <tr>  
        <td>商品原價</td>  
        <td colspan="3" th:text="${goods.goodsPrice}"></td>  
     </tr>
      <tr>  
        <td>秒殺價</td>  
        <td colspan="3" th:text="${goods.miaoshaPrice}"></td>  
     </tr>
     <tr>  
        <td>庫存數量</td>  
        <td colspan="3" th:text="${goods.stockCount}"></td>  
     </tr>
  </table>
</div>

靜態化之後的頁面：可以看到，動態模板語言都去掉了，直接通過JS來賦值。

<div class="panel panel-default" style="height:100%;background-color:rgba(222,222,222,0.8)" >
  <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>
        <td>
        <!--  
            <form id="miaoshaForm" method="post" action="/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()"/>
                    <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" />
        </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>
  </table>
</div>

核心js程式碼：

<script>

$(function(){
   getDetail();
});

function getDetail(){
   var goodsId = g_getQueryString("goodsId");
   $.ajax({
      url:"/goods/detail/"+goodsId,
      type:"GET",
      success:function(data){
         if(data.code == 0){
            render(data.data);
         }else{
            layer.msg(data.msg);
         }
      },
      error:function(){
         layer.msg("客戶端請求有誤");
      }
   });
}

function render(detail){
   var miaoshaStatus = detail.miaoshaStatus;
   var  remainSeconds = detail.remainSeconds;
   var goods = detail.goods;
   var user = detail.user;
   if(user){
      $("#userTip").hide();
   }
   $("#goodsName").text(goods.goodsName);
   $("#goodsImg").attr("src", goods.goodsImg);
   $("#startTime").text(new Date(goods.startDate).format("yyyy-MM-dd hh:mm:ss"));
   $("#remainSeconds").val(remainSeconds);
   $("#goodsId").val(goods.id);
   $("#goodsPrice").text(goods.goodsPrice);
   $("#miaoshaPrice").text(goods.miaoshaPrice);
   $("#stockCount").text(goods.stockCount);
   countDown(); // 判斷秒殺開始狀態
}

// 判斷秒殺開始狀態
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("秒殺進行中");
        $("#verifyCodeImg").attr("src", "/miaosha/verifyCode?goodsId="+$("#goodsId").val());
        $("#verifyCodeImg").show();
        $("#verifyCode").show();
    }else{//秒殺已經結束
        $("#buyButton").attr("disabled", true);
        $("#miaoshaTip").html("秒殺已經結束");
        $("#verifyCodeImg").hide();
        $("#verifyCode").hide();
    }
}

</script>

3、記得服務端返回json格式資料，給靜態頁面做資料繫結。

三、客戶端渲染方式（秒殺介面）

和第二點的操作基本一樣，不同的地方：
1）、多了一些springboot的配置；
2）、GET和POST的區別，這裡一定要用POST，有一些場景比如刪除操作，如果用了GET比如delete?id=XX這樣的寫法，那麼搜尋引擎掃描到會自動幫你刪除了，所以一定要寫清楚型別。

1、springboot-1.5.x的配置

spring.resources.add-mappings=true #是否啟用預設資源處理
spring.resources.cache-period= 3600 #快取時間
spring.resources.chain.cache=true #是否在資源鏈中啟用快取
spring.resources.chain.enabled=true #是否啟用Spring資源處理鏈。預設情況下，禁用，除非至少啟用了一個策略。
spring.resources.chain.gzipped=true #是否對快取壓縮
spring.resources.chain.html-application-cache=true #是否啟用HTML5應用程式快取清單重寫
spring.resources.static-locations=classpath:/static/ #靜態資源的位置

2、springboot2.1.1的官方配置

spring.resources.add-mappings=true # 是否啟用預設資源處理
spring.resources.cache.cachecontrol.cache-private= # 表示響應訊息是針對單個使用者的，不能由共享快取儲存。
spring.resources.cache.cachecontrol.cache-public= # 表示任何快取都可以儲存響應
spring.resources.cache.cachecontrol.max-age= # 響應被快取的最大時間，如果沒有指定持續時間字尾，以秒為單位。
spring.resources.cache.cachecontrol.must-revalidate= # 表明，一旦快取過期，在未與伺服器重新驗證之前，快取不能使用響應。
spring.resources.cache.cachecontrol.no-cache= # 表示快取的響應只有在伺服器重新驗證時才能重用
spring.resources.cache.cachecontrol.no-store= # 表示在任何情況下都不快取響應
spring.resources.cache.cachecontrol.no-transform= # 指示中介(快取和其他)它們不應該轉換響應內容
spring.resources.cache.cachecontrol.proxy-revalidate= # 與“must-revalidate”指令的含義相同，只是它不適用於私有快取。
spring.resources.cache.cachecontrol.s-max-age= # 響應被共享快取快取的最大時間，如果沒有指定持續時間字尾，以秒為單位。
spring.resources.cache.cachecontrol.stale-if-error= # 當遇到錯誤時，響應可能使用的最大時間，如果沒有指定持續時間字尾，以秒為單位。
spring.resources.cache.cachecontrol.stale-while-revalidate= # 如果沒有指定持續時間字尾，則響應在過期後可以提供的最長時間(以秒為單位)。
spring.resources.cache.period= # 資源處理程式提供的資源的快取週期。如果沒有指定持續時間字尾，將使用秒。
spring.resources.chain.cache=true # 是否在資源鏈中啟用快取。
spring.resources.chain.compressed=false # 是否啟用已壓縮資源(gzip, brotli)的解析。
spring.resources.chain.enabled= # 是否啟用Spring資源處理鏈。預設情況下，禁用，除非至少啟用了一個策略。
spring.resources.chain.html-application-cache=false # 是否啟用HTML5應用快取清單重寫。
spring.resources.chain.strategy.content.enabled=false # 是否啟用內容版本策略。
spring.resources.chain.strategy.content.paths=/** # 應用於內容版本策略的以逗號分隔的模式列表。
spring.resources.chain.strategy.fixed.enabled=false # 是否啟用固定版本策略。
spring.resources.chain.strategy.fixed.paths=/** # 用於固定版本策略的以逗號分隔的模式列表。
spring.resources.chain.strategy.fixed.version= # 用於固定版本策略的版本字串。
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ # 靜態資源的位置。

3、第二點中點選<立即秒殺>呼叫的JS方法getMiaoshaPath()

<script>

function getMiaoshaPath(){
    var goodsId = $("#goodsId").val();
    g_showLoading();
    $.ajax({
        url:"/miaosha/path",
        type:"GET",
        data:{
            goodsId:goodsId,
            verifyCode:$("#verifyCode").val()
        },
        success:function(data){
            if(data.code == 0){
                var path = data.data;
                doMiaosha(path);
            }else{
                layer.msg(data.msg);
            }
        },
        error:function(){
            layer.msg("客戶端請求有誤");
        }
    });
}

function doMiaosha(path){
    $.ajax({
        url:"/miaosha/"+path+"/do_miaosha",
        type:"POST",
        data:{
            goodsId:$("#goodsId").val()
        },
        success:function(data){
            if(data.code == 0){
                //window.location.href="/order_detail.htm?orderId="+data.data.id;
                getMiaoshaResult($("#goodsId").val());
            }else{
                layer.msg(data.msg);
            }
        },
        error:function(){
            layer.msg("客戶端請求有誤");
        }
    });
    
}

function getMiaoshaResult(goodsId){
    g_showLoading();
    $.ajax({
        url:"/miaosha/result",
        type:"GET",
        data:{
            goodsId:$("#goodsId").val(),
        },
        success:function(data){
            if(data.code == 0){
                var result = data.data;
                if(result < 0){
                    layer.msg("對不起，秒殺失敗");
                }else if(result == 0){//繼續輪詢
                    setTimeout(function(){
                        getMiaoshaResult(goodsId);
                    }, 200);
                }else{
                    layer.confirm("恭喜你，秒殺成功！檢視訂單？", {btn:["確定","取消"]},
                            function(){
                                window.location.href="/order_detail.htm?orderId="+result;
                            },
                            function(){
                                layer.closeAll();
                            });
                }
            }else{
                layer.msg(data.msg);
            }
        },
        error:function(){
            layer.msg("客戶端請求有誤");
        }
    });
}

</script>

四、物件快取

最基本最常用的快取處理邏輯：
失效：應用程式先從cache取資料，沒有得到，則從資料庫中取資料，成功後，放到快取中。
命中：應用程式從cache中取資料，取到後返回。
更新：先把資料存到資料庫中，成功後，再讓快取失效。

參考程式碼：

// 先查快取，再查資料庫。
public MiaoshaUser getById(long id) {
   //取快取
   MiaoshaUser user = redisService.get(MiaoshaUserKey.getById, ""+id, MiaoshaUser.class);
   if(user != null) {
      return user;
   }
   //取資料庫
   user = miaoshaUserDao.getById(id);
   if(user != null) {
      redisService.set(MiaoshaUserKey.getById, ""+id, user);
   }
   return user;
}

// 更新資料庫後，快取也要做同步更新。
public boolean updatePassword(String token, long id, String formPass) {
   //取user
   MiaoshaUser user = getById(id);
   if(user == null) {
      throw new GlobalException(CodeMsg.MOBILE_NOT_EXIST);
   }
   //更新資料庫
   MiaoshaUser toBeUpdate = new MiaoshaUser();
   toBeUpdate.setId(id);
   toBeUpdate.setPassword(MD5Util.formPassToDBPass(formPass, user.getSalt()));
   miaoshaUserDao.update(toBeUpdate);
   //處理快取
   redisService.delete(MiaoshaUserKey.getById, ""+id);
   user.setPassword(toBeUpdate.getPassword());
   redisService.set(MiaoshaUserKey.token, token, user);
   return true;
}

總結

服務端渲染：利用模板引擎技術生成靜態html頁面到指定目錄或者是redis等快取中介軟體中去，頁面上的訪問路徑直接指向到該目錄下的靜態html，這種方式實際上還是屬於服務端渲染的靜態化方式。
客戶端渲染：將原本的模板語言渲染的html，改變為純靜態的htm/shtml，然後用js/ajax渲染資料，加上spring配置檔案的相關配置指定靜態檔案存放路徑，達到利用瀏覽器快取頁面的方式。推薦使用這種方式，這種屬於前後端分離的客戶端渲染方式，效能更好。
物件快取：物件級快取主要是在service中對一些物件的快取處理，要按照合理的步驟，先取快取，再取資料庫，快取中有就返回快取物件，沒有就返回資料庫資料，最後將資料庫資料再放入快取中。

如果對快取處理邏輯感興趣，可以參考這篇部落格：http://blog.csdn.net/tTU1EvLDeLFq5btqiK/article/details/78693323

java秒殺系列（2）- 頁面靜態化技術

前言

一、服務端渲染方式

1、介面返回html頁面的設定

2、先從快取中取，有就返回。

3、快取中沒有，就手動渲染。

4、最後再將渲染內容加入到redis

二、客戶端渲染方式（商品詳情頁）

1、找到跳轉到商品詳情頁的路徑，修改為一個靜態html的路徑。

2、根據1的路徑，在static目錄下新建一個goods_detail.htm檔案，原本動態頁面上的模板語言都去掉，換成id=“xx”，然後使用ajax來渲染靜態檔案中的資料即可。

3、記得服務端返回json格式資料，給靜態頁面做資料繫結。

三、客戶端渲染方式（秒殺介面）

1、springboot-1.5.x的配置

2、springboot2.1.1的官方配置

3、第二點中點選<立即秒殺>呼叫的JS方法getMiaoshaPath()

四、物件快取

總結

java秒殺系列（2）- 頁面靜態化技術

Java秒殺實戰（六）服務級高併發秒殺優化（RabbitMQ+介面優化）

Java秒殺系統（十）實現秒殺功能-商品列表頁

JAVA秒殺系統（五）實現登入功能--明文密碼兩次MD5處理

java學習之代理（2）：靜態代理和動態代理

Django 專案總結（7）- 頁面靜態化

Java原始碼系列（2）:Iterable介面

2017.4.26 慕課網--Java 高併發秒殺API（一）

深入理解系列之JAVA多執行緒（2）——synchronized同步原理

JAVA POI 應用系列（1）--生成Excel

從零開始理解JAVA事件處理機制（2）

【金陽光測試】基於控件核心技術探討---Android自己主動化系列（2）---2013年5月

java多線程（2）線程同步

C++14系列（2）:C/C++的時間函數

Java垃圾回收原理（2）

java代碼示例（2）

[轉]微信小程序之加載更多（分頁加載）實例 —— 微信小程序實戰系列（2）

編程思考系列（2）字段與屬性

領域驅動設計系列（2）淺析VO、DTO、DO、PO的概念、區別和用處

信息安全系列（2）--信息安全基礎

java秒殺系列（2）- 頁面靜態化技術

前言

一、服務端渲染方式

1、介面返回html頁面的設定

2、先從快取中取，有就返回。

3、快取中沒有，就手動渲染。

4、最後再將渲染內容加入到redis

二、客戶端渲染方式（商品詳情頁）

1、找到跳轉到商品詳情頁的路徑，修改為一個靜態html的路徑。

2、根據1的路徑，在static目錄下新建一個goods_detail.htm檔案，原本動態頁面上的模板語言都去掉，換成id=“xx”，然後使用ajax來渲染靜態檔案中的資料即可。

3、記得服務端返回json格式資料，給靜態頁面做資料繫結。

三、客戶端渲染方式（秒殺介面）

1、springboot-1.5.x的配置

2、springboot2.1.1的官方配置

3、第二點中點選<立即秒殺>呼叫的JS方法getMiaoshaPath()

四、物件快取

總結

相關推薦