當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用Freemarker来页面静态化,与Spring整合使用
生活随笔
收集整理的這篇文章主要介紹了
使用Freemarker来页面静态化,与Spring整合使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
頁面靜態化介紹
頁面靜態化其實就是將原來的動態網頁(例如通過ajax請求動態獲取數據庫中的數據并展示的網頁)改為
通過靜態化技術生成的靜態網頁，這樣用戶在訪問網頁時，服務器直接給用戶響應靜態html頁面，沒有
了動態查詢數據庫的過程。
那么這些靜態HTML頁面還需要我們自己去編寫嗎？其實并不需要，我們可以通過專門的頁面靜態化技
術幫我們生成所需的靜態HTML頁面，例如：Freemarker、thymeleaf等。
FreeMarker
freemarker中文官方文檔
什么是FreeMarker?
實際上用程序語言編寫的程序就是模板。 FTL (代表FreeMarker模板語言)。 這是為編寫模板設計的非常簡單的編程語言。
模板(FTL編程)是由如下部分混合而成的：
文本：文本會照著原樣來輸出。
插值：這部分的輸出會被計算的值來替換。插值由 ${ and } 所分隔(或者 #{ and }，這種風格已經不建議再使用了；點擊查看更多)。
FTL 標簽：FTL標簽和HTML標簽很相似，但是它們卻是給FreeMarker的指示， 而且不會打印在輸出內容中。
注釋：注釋和HTML的注釋也很相似，但它們是由 <#-- 和 -->來分隔的。注釋會被FreeMarker直接忽略， 更不會在輸出內容中顯示。
我們來看一個具體的模板。其中的內容已經用顏色來標記了： 文本， 插值， FTL 標簽， 注釋。為了看到可見的 換行符， 這里使用了
請注意非常重要的一點： 插值 僅僅可以在 文本 中使用。 (也可以是字符串表達式；請參考 后續內容)
FTL 標簽 不可以在其他 FTL 標簽 和 插值中使用。比如， 這樣做是 錯誤 的： <#if <#include ‘foo’>=‘bar’>…</#if>
Freemarker的指令(在下面的案列中解釋)
簡單使用Freemarker來生成靜態化頁面
搭建maven工程
pom.xml
需要引入freemarker的依耐
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.fs</groupId><artifactId>FreemarkerDemo</artifactId><version>1.0-SNAPSHOT</version><dependencies><dependency><groupId>org.freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.23</version></dependency></dependencies> </project>創建模板文件
模板文件中有四種元素：
1、文本，直接輸出的部分 2、注釋，即<#–…-->格式不會輸出 3、插值（Interpolation）：即${…}部分,
將使用數據模型中的部分替代輸出 4、FTL指令：FreeMarker指令，和HTML標記類似，名字前加#予以
區分，不會輸出
Freemarker的模板文件后綴可以任意，一般建議為ftl。
test.ftl
<html> <head><meta charset="utf-8"><title>Freemarker入門</title> </head> <body> <#--我只是一個注釋，我不會有任何輸出 --> ${name}你好，${message} <hr> <#--assign指令用于在頁面上定義一個變量 --> <#--（1）定義簡單類型 assign指令用于在頁面上定義一個變量 定義變量方便測試生產的模板內容--> <#assign linkman="付先生"> 聯系人：${linkman} <#--（2）定義對象類型 --> <#assign info={"mobile":"13812345678",'address':'重慶'} > 電話：${info.mobile} 地址：${info.address} <hr> <#--include指令用于模板文件的嵌套 引入模板文件 模板文件的目錄會在java代碼中指定 configuration.setDirectoryForTemplateLoading(new File(文件路徑)); --> <#include "head.ftl"/><hr> <#--if指令用于判斷--> <#--（1）在模板文件中使用if指令進行判斷 （2）在java代碼中為success變量賦值--> <#if success=true>你已通過實名認證 <#else>你未通過實名認證 </#if> <hr> <#--list指令用于遍歷 （1）在模板文件中使用list指令進行遍歷 （2）在java代碼中為goodsList賦值--> <#list goodsList as goods> 商品名稱： ${goods.name} 價格：${goods.price}<br> </#list></body> </html>head.ftl
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>頭部</title> </head> <body> <h1>---------------頭部信息---------------</h1> </body> </html>生成靜態文件的java代碼
使用步驟：
第一步：創建一個 Configuration 對象，直接 new 一個對象。構造方法的參數就是 freemarker的版本
號。
第二步：設置模板文件所在的路徑。
第三步：設置模板文件使用的字符集。一般就是 utf-8。
第四步：加載一個模板，創建一個模板對象。
第五步：創建一個模板使用的數據集，可以是 pojo 也可以是 map。一般是 Map。
第六步：創建一個 Writer 對象，一般創建 FileWriter 對象，指定生成的文件名。
第七步：調用模板對象的 process 方法輸出文件。
第八步：關閉流。
運行后生成的html靜態頁面testFreemarker.html
<html> <head><meta charset="utf-8"><title>Freemarker入門</title> </head> <body> 小付你好，歡迎使用freemarker！ <hr> 聯系人：付先生 電話：13812345678 地址：重慶 <hr> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>頭部</title> </head> <body> <h1>---------------頭部信息---------------</h1> </body> </html> <hr>你已通過實名認證 <hr> 商品名稱： 蘋果 價格：5.8<br> 商品名稱： 香蕉 價格：2.5<br> 商品名稱： 橘子 價格：3.2<br></body> </html>瀏覽器打開
freemarker與Spring整合
applicationContext.xml
在application.xml中使用Bean標簽將org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer交給spring的IOC管理
就可以使用FreeMarkerConfigurer得到Configuration 進行靜態頁面生成
//注入freemarker@Autowiredprivate FreeMarkerConfigurer freeMarkerConfigurer;//通過FreeMarkerConfigurer獲得freemarker的配置類Configuration configuration = freeMarkerConfigurer.getConfiguration(); <!-- 配置freemarker--><bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer"><!-- 指定模板文件的位子--><property name="templateLoaderPath" value="/WEB-INF/ftl"/><!-- 指定字符集--><property name="defaultEncoding" value="UTF-8"/></bean><!-- 引入動態生成的靜態頁面地址,在java中使用@Value注入--><context:property-placeholder location="classpath:freemarker.properties"/>freemarker.properties
# freemarker動態生成的靜態頁面輸出的地址,實際生產部署是生產在tomcat的中, outPut.Path=E:/IdeaProjects/projectOne/fs-health-parent/health_mobile/src/main/webapp/pagesjava(下面的代碼為偽代碼.理解思想)
public class Test {//注入freemarker@Autowiredprivate FreeMarkerConfigurer freeMarkerConfigurer;//從properties文件中注入freemarker生成的靜態頁面地址@Value("${outPut.Path}")private String outPutPath;/*由于我們現在health_mobile用戶微信使用的頁面的數據是異步請求獲得的,用戶每次使用套餐預約的時候,setmeal.html,setmeal_detail.html中的套餐數據,檢查組,檢查項,都是每次查詢數據庫得到的,這樣加載頁面十分緩慢,效率太低,用戶體驗度極差等解決上述方法,我們使用頁面靜態化技術,讓我們用戶每次訪問的頁面數據事寫死的,靜態的,每次用戶訪問,直接傳遞頁面到用戶端解析,不在請求數據庫查詢,這個靜態化頁面中的數據如何填充?我們查詢的數據只要不進行修改,頁面數據是不會變的,所以,我們后臺只要添加了套餐信息,或者修改了套餐信息就使用freemarker,先創建一個模板頁面,頁面中的數據使用 assign指令 include指令 if指令 list指令等指令(查看WEB-INF中的文件)填充原來數據應該顯示的位子,然后我們使用java代碼動態的去指令的位子替換數據,然后生成一個靜態頁面,這樣,用戶訪問的時候加載靜態頁面就不每次訪問去數據庫查詢數據,大大提高了效率*///每當用戶點擊添加套餐的時候,執行生成靜態頁面方法generateMobileStaticHtml();/*** 生成移動靜態Html* 下面的代碼是偽代碼,dao代表調用dao查詢的數據*/public void generateMobileStaticHtml(){//準備模板文件所需要的數據,先查詢出所有的套餐信息,調用自己的查詢所有方法List<Setmeal> setMealList = dao.findAll();//生成套餐列表靜態頁面mobile_setmeal.ftl,數據查詢出來賦值給這個模板將這個模板變成靜態頁面HashMap<String, Object> objectHashMap = new HashMap<>();//將查詢出的值放在map中objectHashMap.put("setmealList",setMealList);//調用生成靜態頁面,生成套餐列表靜態頁面generateHtml("mobile_setmeal.ftl","m_setmeal.html",objectHashMap);//生成套餐詳情靜態頁面mobile_setmeal_detail.ftl數據查詢出來賦值給這個模板,變成靜態頁面//由于點擊套餐詳情頁面是多個的,查詢出的每個詳情頁面就生成一個動態頁面,頁面的名字由套餐的id結尾//先遍歷集合,得到每個套餐的id,在查詢出每個套餐信息的詳細數據,然后使用模板生成靜態頁面for (Setmeal setmeal : setMealList) {//每次遍歷就封裝一個mapHashMap<String, Object> stringObjectHashMap = new HashMap<>();//封裝查詢套餐信息的詳細信息,封裝到map中,讓freemarker來解析出靜態頁面stringObjectHashMap.put("setmeal",this.findSetMealDetails(setmeal.getId()));//然后調用方法生成靜態頁面.名字結尾拼接上idthis.generateHtml("mobile_setmeal_detail.ftl","setmeal_detail_"+setmeal.getId()+".html",stringObjectHashMap);}}/*** 用于生成靜態頁面Dao指定的目錄* @param templateName 傳遞的模板名稱* @param htmlName 生成的模板名稱* @param objectHashMap 查詢出的值,賦值給模板的指令符*/public void generateHtml(String templateName, String htmlName, Map<String, Object> objectHashMap){//通過FreeMarkerConfigurer獲得freemarker的配置類Configuration configuration = freeMarkerConfigurer.getConfiguration();//由于我們spring配置文件中添加freeMarkerConfigurer這個bean的時候指定了模板文件的地址,所以我們這里只需要傳遞模板文件的名就可以Writer out = null;try {//給定模板文件,得到模板對象Template template = configuration.getTemplate(templateName);//指定模板對象生成的文件地址(在properties文件中指定了的)以及文件名稱File file = new File(outPutPath + "\\" + htmlName);//創建字符緩沖流out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file)));//給模板文件寫入數據,并傳入一個字符輸出流,template.process(objectHashMap,out);} catch (Exception e) {e.printStackTrace();}finally {//判斷字符緩存流是否為nullif (out != null){try {//不為null.說明有數據,那就刷新流,寫到磁盤中out.flush();} catch (IOException e) {e.printStackTrace();}}}}}總結
以上是生活随笔為你收集整理的使用Freemarker来页面静态化,与Spring整合使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringSecurity的简单使用使
- 下一篇： 浅谈:MyBatis-Plus的CRUD