SpringBoot2 整合FreeMarker實現(xiàn)頁面靜態(tài)化示例詳解
一、頁面靜態(tài)化
1、動靜態(tài)頁面
靜態(tài)頁面
即靜態(tài)網(wǎng)頁,指已經(jīng)裝載好內(nèi)容HTML頁面,無需經(jīng)過請求服務(wù)器數(shù)據(jù)和編譯過程,直接加載到客戶瀏覽器上顯示出來。通俗的說就是生成獨立的HTML頁面,且不與服務(wù)器進行數(shù)據(jù)交互。
優(yōu)缺點描述:
- 靜態(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)缺點描述:
- 動態(tài)網(wǎng)頁的實時獲取數(shù)據(jù),延遲性低;
- 依賴數(shù)據(jù)庫交互,頁面維護成本很低;
- 與數(shù)據(jù)庫實時交互,安全控制的成本高;
- 頁面加載速度十分依賴數(shù)據(jù)庫和服務(wù)的性能;
動態(tài)頁面和靜態(tài)頁面有很強的相對性,對比之下也比較好理解。
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é)點代理的靜態(tài)網(wǎng)頁;
- 電商網(wǎng)站中,復(fù)雜的產(chǎn)品詳情頁處理;
靜態(tài)化技術(shù)的根本:提示服務(wù)的響應(yīng)速度,或者說使響應(yīng)節(jié)點提前,如一般的流程,頁面(客戶端)請求服務(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ù)處理標簽,用起來不算復(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/" ; @Override public 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
到此這篇關(guān)于SpringBoot2 整合FreeMarker實現(xiàn)頁面靜態(tài)化示例詳解的文章就介紹到這了,更多相關(guān)SpringBoot2 整合FreeMarker實現(xiàn)頁面靜態(tài)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Mybatis模糊查詢之三種定義參數(shù)方法和聚合查詢、主鍵回填實現(xiàn)方法
這篇文章主要介紹了Mybatis模糊查詢之三種定義參數(shù)方法和聚合查詢、主鍵回填實現(xiàn)方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03Mybatis-plus如何通過反射實現(xiàn)動態(tài)排序不同字段功能
這篇文章主要介紹了Mybatis-plus如何通過反射實現(xiàn)動態(tài)排序不同字段功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02springboot的application.yml配置port不生效的解決方案
這篇文章主要介紹了springboot的application.yml配置port不生效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07淺析打開eclipse出現(xiàn)Incompatible JVM的解決方法
本篇文章是對打開eclipse出現(xiàn)Incompatible JVM的解決方法進行了詳細的分析介紹,需要的朋友參考下2013-07-07