溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

SpringBoot2中如何使用FreeMarker模板完成頁面靜態(tài)化處理

發(fā)布時間：2022-04-07 11:02:21 來源：億速云 閱讀：240 作者：iii 欄目：編程語言

這篇文章主要講解了“SpringBoot2中如何使用FreeMarker模板完成頁面靜態(tài)化處理”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“SpringBoot2中如何使用FreeMarker模板完成頁面靜態(tài)化處理”吧！

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

1、動靜態(tài)頁面

靜態(tài)頁面

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

優(yōu)缺點描述：

  • 靜態(tài)網(wǎng)頁的內(nèi)容穩(wěn)定，頁面加載速度極快；

  • 不與服務器交互，提升安全性；

  • 靜態(tài)網(wǎng)頁的交互性差，數(shù)據(jù)實時性很低；

  • 維度成本高，生成很多HTML頁面；

動態(tài)頁面

指跟靜態(tài)網(wǎng)頁相對的一種網(wǎng)頁編程技術(shù)，頁面的內(nèi)容需要請求服務器獲取，在不考慮緩存的情況下，服務接口的數(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ù)庫和服務的性能；

動態(tài)頁面和靜態(tài)頁面有很強的相對性，對比之下也比較好理解。

2、應用場景

動態(tài)頁面靜態(tài)化處理的應用場景非常多，例如：

  • 大型網(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)站中，復雜的產(chǎn)品詳情頁處理；

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

二、流程分析

靜態(tài)頁面轉(zhuǎn)換是一個相對復雜的過程，其中核心流程如下：

SpringBoot2中如何使用FreeMarker模板完成頁面靜態(tài)化處理

  • 開發(fā)一個頁面模板，即靜態(tài)網(wǎng)頁樣式；

  • 提供接口，給頁面模板獲取數(shù)據(jù)；

  • 頁面模板中編寫數(shù)據(jù)接口返參的解析流程；

  • 基于解析引擎，把數(shù)據(jù)和頁面模板合并；

  • 頁面模板內(nèi)容加載完成后轉(zhuǎn)換為HTML靜態(tài)頁面；

  • HTML靜態(tài)頁面上傳到文件服務器；

  • 客戶端(Client)獲取靜態(tài)頁面的url加載顯示；

主流程大致如上，如果數(shù)據(jù)接口響應參數(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ù)處理標簽，用起來不算復雜。

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());
        // 設置模板路徑
        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 ;
    }
}

感謝各位的閱讀，以上就是“SpringBoot2中如何使用FreeMarker模板完成頁面靜態(tài)化處理”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對SpringBoot2中如何使用FreeMarker模板完成頁面靜態(tài)化處理這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手