java使用的页面静态化技术_java秒杀系列（2）- 页面静态化技术
###前言
通過代碼片段分別介紹服務端渲染、客戶端渲染、對象緩存三種方式的寫法。
代碼片段僅供參考，具體實現需要根據業務場景自行適配，但思想都是一樣。
一、服務端渲染方式
####1、接口返回html頁面的設置
```java
@Autowired
ThymeleafViewResolver thymeleafViewResolver;
@Autowired
ApplicationContext applicationContext;
@RequestMapping(value="/to_list", produces="text/html")
@ResponseBody
public String goodsList() {
// 業務邏輯
}
####2、先從緩存中取，有就返回。
```java
//取緩存
String html = redisService.get(GoodsKey.getGoodsList, "", String.class);
if(!StringUtils.isEmpty(html)) {
return html;
}
3、緩存中沒有，就手動渲染。
springboot1.5.x的寫法：
List 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文件夾下的。
注意代碼中詳情的鏈接，指向一個靜態頁面goods_detail.htm：
```html
秒殺商品列表
商品名稱商品圖片商品原價秒殺價庫存數量詳情
```
2、根據1的路徑，在static目錄下新建一個goods_detail.htm文件，原本動態頁面上的模板語言都去掉，換成id=“xx”，然后使用ajax來渲染靜態文件中的數據即可。
原始動態頁面：
秒殺商品詳情您還沒有登錄，請登陸后再操作
沒有收貨地址的提示。。。
| 商品名稱 | |||
| 商品圖片 | |||
| 秒殺開始時間 | 秒殺倒計時：秒 秒殺進行中 秒殺已結束 | 立即秒殺 | |
| 商品原價 | |||
| 秒殺價 | |||
| 庫存數量 | |||
靜態化之后的頁面：可以看到，動態模板語言都去掉了，直接通過JS來賦值。
秒殺商品詳情您還沒有登錄，請登陸后再操作
沒有收貨地址的提示。。。
| 商品名稱 | |||
| 商品圖片 | |||
| 秒殺開始時間 |
立即秒殺 | ||
| 商品原價 | |||
| 秒殺價 | |||
| 庫存數量 | |||
核心js代碼：
$(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();
}
}
3、記得服務端返回json格式數據，給靜態頁面做數據綁定。
三、客戶端渲染方式(秒殺接口)
和第二點的操作基本一樣，也是去除動態模板語言，改為ajax渲染。
不同的地方：
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的官方配置
```properties
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()如下
```javascript
```
四、對象緩存
最基本最常用的緩存處理邏輯：
失效：應用程序先從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使用的页面静态化技术_java秒杀系列（2）- 页面静态化技术的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle 同一列数据不同条件分组求和
- 下一篇： adapt和adopt的区别_adopt