javascript
SpringBoot2 整合FreeMarker模板，完成页面静态化处理
本文源碼：GitHub·點(diǎn)這里 || GitEE·點(diǎn)這里
一、頁面靜態(tài)化
1、動靜態(tài)頁面
靜態(tài)頁面
即靜態(tài)網(wǎng)頁，指已經(jīng)裝載好內(nèi)容HTML頁面，無需經(jīng)過請求服務(wù)器數(shù)據(jù)和編譯過程，直接加載到客戶瀏覽器上顯示出來。通俗的說就是生成獨(dú)立的HTML頁面，且不與服務(wù)器進(jìn)行數(shù)據(jù)交互。
優(yōu)缺點(diǎn)描述：
- 靜態(tài)網(wǎng)頁的內(nèi)容穩(wěn)定，頁面加載速度極快；
- 不與服務(wù)器交互，提升安全性；
- 靜態(tài)網(wǎng)頁的交互性差，數(shù)據(jù)實時性很低；
- 維度成本高，生成很多HTML頁面；
動態(tài)頁面
指跟靜態(tài)網(wǎng)頁相對的一種網(wǎng)頁編程技術(shù)，頁面的內(nèi)容需要請求服務(wù)器獲取，在不考慮緩存的情況下，服務(wù)接口的數(shù)據(jù)變化，頁面加載的內(nèi)容也會實時變化，顯示的內(nèi)容卻是隨著數(shù)據(jù)庫操作的結(jié)果而動態(tài)改變的。
優(yōu)缺點(diǎn)描述：
- 動態(tài)網(wǎng)頁的實時獲取數(shù)據(jù)，延遲性低；
- 依賴數(shù)據(jù)庫交互，頁面維護(hù)成本很低；
- 與數(shù)據(jù)庫實時交互，安全控制的成本高；
- 頁面加載速度十分依賴數(shù)據(jù)庫和服務(wù)的性能；
動態(tài)頁面和靜態(tài)頁面有很強(qiáng)的相對性，對比之下也比較好理解。
2、應(yīng)用場景
動態(tài)頁面靜態(tài)化處理的應(yīng)用場景非常多，例如：
- 大型網(wǎng)站的頭部和底部，靜態(tài)化之后統(tǒng)一加載；
- 媒體網(wǎng)站，內(nèi)容經(jīng)過渲染，直接轉(zhuǎn)為HTML網(wǎng)頁；
- 高并發(fā)下，CDN邊緣節(jié)點(diǎn)代理的靜態(tài)網(wǎng)頁；
- 電商網(wǎng)站中，復(fù)雜的產(chǎn)品詳情頁處理；
靜態(tài)化技術(shù)的根本：提示服務(wù)的響應(yīng)速度，或者說使響應(yīng)節(jié)點(diǎn)提前，如一般的流程，頁面(客戶端)請求服務(wù)，服務(wù)處理，響應(yīng)數(shù)據(jù)，頁面裝載，一系列流程走下來不僅復(fù)雜，而且耗時，如果基于靜態(tài)化技術(shù)處理之后，直接加載靜態(tài)頁面，好了請求結(jié)束。
二、流程分析
靜態(tài)頁面轉(zhuǎn)換是一個相對復(fù)雜的過程，其中核心流程如下：
- 開發(fā)一個頁面模板，即靜態(tài)網(wǎng)頁樣式；
- 提供接口，給頁面模板獲取數(shù)據(jù)；
- 頁面模板中編寫數(shù)據(jù)接口返參的解析流程；
- 基于解析引擎，把數(shù)據(jù)和頁面模板合并；
- 頁面模板內(nèi)容加載完成后轉(zhuǎn)換為HTML靜態(tài)頁面；
- HTML靜態(tài)頁面上傳到文件服務(wù)器；
- 客戶端(Client)獲取靜態(tài)頁面的url加載顯示；
主流程大致如上，如果數(shù)據(jù)接口響應(yīng)參數(shù)有變，則需要重新生成靜態(tài)頁，所以在數(shù)據(jù)的加載實時性上面會低很多。
三、代碼實現(xiàn)案例
1、基礎(chǔ)依賴
FreeMarker是一款模板引擎：即一種基于模板和要改變的數(shù)據(jù)，并用來生成輸出文本（HTML網(wǎng)頁、電子郵件、配置文件、源代碼等）的通用工具。
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId> </dependency>2、頁面模板
這里既使用FreeMarker開發(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的語法和原有的HTML語法基本一致，但是具有一套自己的數(shù)據(jù)處理標(biāo)簽，用起來不算復(fù)雜。
3、解析過程
通過解析，把頁面模板和數(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/" ;@Overridepublic void ftlToHtml() throws Exception {// 創(chuàng)建配置類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", "頁面靜態(tài)化(PageStatic)");map.put("tableList",getList()) ;map.put("imgList",getImgList()) ;// 靜態(tài)化頁面內(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頁面直接使用瀏覽器打開即可，不再需要依賴任何數(shù)據(jù)接口服務(wù)。
四、源代碼地址
GitHub·地址 https://github.com/cicadasmile/middle-ware-parent GitEE·地址 https://gitee.com/cicadasmile/middle-ware-parent推薦閱讀：微服務(wù)架構(gòu)系列
| 01 | 微服務(wù)架構(gòu)：項目技術(shù)選型簡介，架構(gòu)圖解說明 |
| 02 | 微服務(wù)架構(gòu)：業(yè)務(wù)架構(gòu)設(shè)計，系統(tǒng)分層管理 |
| 03 | 微服務(wù)架構(gòu)：數(shù)據(jù)庫選型簡介，業(yè)務(wù)數(shù)據(jù)規(guī)劃設(shè)計 |
| 04 | 微服務(wù)架構(gòu)：中間件集成，公共服務(wù)封裝 |
| 05 | 微服務(wù)架構(gòu)：SpringCloud 基礎(chǔ)組件應(yīng)用設(shè)計 |
| 06 | 微服務(wù)架構(gòu)：通過業(yè)務(wù)、應(yīng)用、技術(shù)、存儲，聊聊架構(gòu) |
| 07 | 微服務(wù)技術(shù)棧：常見注冊中心組件，對比分析 |
| 08 | 微服務(wù)技術(shù)棧：流量整形算法，服務(wù)熔斷與降級 |
總結(jié)
以上是生活随笔為你收集整理的SpringBoot2 整合FreeMarker模板，完成页面静态化处理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 提取DVD视频盘的资源
- 下一篇： SpringCloud微服务：基于Nac