快捷導(dǎo)航

SpringBoot2 整合FreeMarker實(shí)現(xiàn)頁(yè)面靜態(tài)化示例詳解

更新時(shí)間：2020年07月24日 16:39:37 作者：知了一笑

這篇文章主要介紹了SpringBoot2 整合FreeMarker實(shí)現(xiàn)頁(yè)面靜態(tài)化示例詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、頁(yè)面靜態(tài)化

1、動(dòng)靜態(tài)頁(yè)面

靜態(tài)頁(yè)面

即靜態(tài)網(wǎng)頁(yè)，指已經(jīng)裝載好內(nèi)容HTML頁(yè)面，無(wú)需經(jīng)過(guò)請(qǐng)求服務(wù)器數(shù)據(jù)和編譯過(guò)程，直接加載到客戶(hù)瀏覽器上顯示出來(lái)。通俗的說(shuō)就是生成獨(dú)立的HTML頁(yè)面，且不與服務(wù)器進(jìn)行數(shù)據(jù)交互。

優(yōu)缺點(diǎn)描述：

靜態(tài)網(wǎng)頁(yè)的內(nèi)容穩(wěn)定，頁(yè)面加載速度極快；
不與服務(wù)器交互，提升安全性；
靜態(tài)網(wǎng)頁(yè)的交互性差，數(shù)據(jù)實(shí)時(shí)性很低；
維度成本高，生成很多HTML頁(yè)面；

動(dòng)態(tài)頁(yè)面

指跟靜態(tài)網(wǎng)頁(yè)相對(duì)的一種網(wǎng)頁(yè)編程技術(shù)，頁(yè)面的內(nèi)容需要請(qǐng)求服務(wù)器獲取，在不考慮緩存的情況下，服務(wù)接口的數(shù)據(jù)變化，頁(yè)面加載的內(nèi)容也會(huì)實(shí)時(shí)變化，顯示的內(nèi)容卻是隨著數(shù)據(jù)庫(kù)操作的結(jié)果而動(dòng)態(tài)改變的。

優(yōu)缺點(diǎn)描述：

動(dòng)態(tài)網(wǎng)頁(yè)的實(shí)時(shí)獲取數(shù)據(jù)，延遲性低；
依賴(lài)數(shù)據(jù)庫(kù)交互，頁(yè)面維護(hù)成本很低；
與數(shù)據(jù)庫(kù)實(shí)時(shí)交互，安全控制的成本高；
頁(yè)面加載速度十分依賴(lài)數(shù)據(jù)庫(kù)和服務(wù)的性能；

動(dòng)態(tài)頁(yè)面和靜態(tài)頁(yè)面有很強(qiáng)的相對(duì)性，對(duì)比之下也比較好理解。

2、應(yīng)用場(chǎng)景

動(dòng)態(tài)頁(yè)面靜態(tài)化處理的應(yīng)用場(chǎng)景非常多，例如：

大型網(wǎng)站的頭部和底部，靜態(tài)化之后統(tǒng)一加載；
媒體網(wǎng)站，內(nèi)容經(jīng)過(guò)渲染，直接轉(zhuǎn)為HTML網(wǎng)頁(yè)；
高并發(fā)下，CDN邊緣節(jié)點(diǎn)代理的靜態(tài)網(wǎng)頁(yè)；
電商網(wǎng)站中，復(fù)雜的產(chǎn)品詳情頁(yè)處理；

靜態(tài)化技術(shù)的根本：提示服務(wù)的響應(yīng)速度，或者說(shuō)使響應(yīng)節(jié)點(diǎn)提前，如一般的流程，頁(yè)面(客戶(hù)端)請(qǐng)求服務(wù)，服務(wù)處理，響應(yīng)數(shù)據(jù)，頁(yè)面裝載，一系列流程走下來(lái)不僅復(fù)雜，而且耗時(shí)，如果基于靜態(tài)化技術(shù)處理之后，直接加載靜態(tài)頁(yè)面，好了請(qǐng)求結(jié)束。

二、流程分析

靜態(tài)頁(yè)面轉(zhuǎn)換是一個(gè)相對(duì)復(fù)雜的過(guò)程，其中核心流程如下：

開(kāi)發(fā)一個(gè)頁(yè)面模板，即靜態(tài)網(wǎng)頁(yè)樣式；
提供接口，給頁(yè)面模板獲取數(shù)據(jù)；
頁(yè)面模板中編寫(xiě)數(shù)據(jù)接口返參的解析流程；
基于解析引擎，把數(shù)據(jù)和頁(yè)面模板合并；
頁(yè)面模板內(nèi)容加載完成后轉(zhuǎn)換為HTML靜態(tài)頁(yè)面；
HTML靜態(tài)頁(yè)面上傳到文件服務(wù)器；
客戶(hù)端(Client)獲取靜態(tài)頁(yè)面的url加載顯示；

主流程大致如上，如果數(shù)據(jù)接口響應(yīng)參數(shù)有變，則需要重新生成靜態(tài)頁(yè)，所以在數(shù)據(jù)的加載實(shí)時(shí)性上面會(huì)低很多。

三、代碼實(shí)現(xiàn)案例

1、基礎(chǔ)依賴(lài)

FreeMarker是一款模板引擎：即一種基于模板和要改變的數(shù)據(jù)，并用來(lái)生成輸出文本（HTML網(wǎng)頁(yè)、電子郵件、配置文件、源代碼等）的通用工具。

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

2、頁(yè)面模板

這里既使用FreeMarker開(kāi)發(fā)的模板樣式。

<html>
<head>
 <title>PageStatic</title>
</head>
<body>
主題：${myTitle}<br/>
<#assign text="{'auth':'cicada','date':'2020-07-16'}" />
<#assign data=text?eval />
作者：${data.auth} 日期：${data.date}<br/>
<table class="table table-striped table-hover table-bordered" id="editable-sample">
 <thead>
 <tr>
  <th>規(guī)格描述</th>
  <th>產(chǎn)品詳情</th>
 </tr>
 </thead>
 <tbody>
    <#list tableList as info>
    <tr class="">
     <td>${info.desc}</td>
     <td><img src="${info.imgUrl}" height="80" width="80"></td>
    </tr>
    </#list>
 </tbody>
</table><br/>
<#list imgList as imgIF>
 <img src="${imgIF}" height="300" width="500">
</#list>
</body>
</html>

FreeMarker的語(yǔ)法和原有的HTML語(yǔ)法基本一致，但是具有一套自己的數(shù)據(jù)處理標(biāo)簽，用起來(lái)不算復(fù)雜。

3、解析過(guò)程

通過(guò)解析，把頁(yè)面模板和數(shù)據(jù)接口的數(shù)據(jù)合并到一起即可。

@Service
public class PageServiceImpl implements PageService {

 private static final Logger LOGGER = LoggerFactory.getLogger(PageServiceImpl.class) ;
 private static final String PATH = "/templates/" ;

 @Override
 public void ftlToHtml() throws Exception {
  // 創(chuàng)建配置類(lèi)
  Configuration configuration = new Configuration(Configuration.getVersion());
  // 設(shè)置模板路徑
  String classpath = this.getClass().getResource("/").getPath();
  configuration.setDirectoryForTemplateLoading(new File(classpath + PATH));
  // 加載模板
  Template template = configuration.getTemplate("my-page.ftl");
  // 數(shù)據(jù)模型
  Map<String, Object> map = new HashMap<>();
  map.put("myTitle", "頁(yè)面靜態(tài)化(PageStatic)");
  map.put("tableList",getList()) ;
  map.put("imgList",getImgList()) ;
  // 靜態(tài)化頁(yè)面內(nèi)容
  String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);
  LOGGER.info("content:{}",content);
  InputStream inputStream = IOUtils.toInputStream(content,"UTF-8");
  // 輸出文件
  FileOutputStream fileOutputStream = new FileOutputStream(new File("F:/page/newPage.html"));
  IOUtils.copy(inputStream, fileOutputStream);
  // 關(guān)閉流
  inputStream.close();
  fileOutputStream.close();
 }

 private List<TableInfo> getList (){
  List<TableInfo> tableInfoList = new ArrayList<>() ;
  tableInfoList.add(new TableInfo(Constant.desc1, Constant.img01));
  tableInfoList.add(new TableInfo(Constant.desc2,Constant.img02));
  return tableInfoList ;
 }

 private List<String> getImgList (){
  List<String> imgList = new ArrayList<>() ;
  imgList.add(Constant.img02) ;
  imgList.add(Constant.img02) ;
  return imgList ;
 }
}

生成后的HTML頁(yè)面直接使用瀏覽器打開(kāi)即可，不再需要依賴(lài)任何數(shù)據(jù)接口服務(wù)。

四、源代碼地址

GitHub·地址 https://github.com/cicadasmile/middle-ware-parent
GitEE·地址 https://gitee.com/cicadasmile/middle-ware-parent

到此這篇關(guān)于SpringBoot2 整合FreeMarker實(shí)現(xiàn)頁(yè)面靜態(tài)化示例詳解的文章就介紹到這了,更多相關(guān)SpringBoot2 整合FreeMarker實(shí)現(xiàn)頁(yè)面靜態(tài)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: