頁面靜態化(四)

Freemarker是一個用Java開發的模板引擎，用來生成輸出文本的工具。
模板+數據模型=輸出
1、數據模型
基本類型、List、Map、Pojo等複雜類型。
具體使用方式：
pom中添加spring‐boot‐starter‐freemarker依賴；
yml文件中配置freemarker；
後臺拼接完數據後返回模板文件名稱(test)
數據模型：map、
指令：
1、註釋：<#‐‐和‐‐>
2、插值：即KaTeX parse error: Expected 'EOF', got '#' at position 24: …、FTL指令： 循環：名字前加#̲予以區分，例如：<#list …{stu_index + 1}
判斷：if判斷，例如：<#if stu.name ==‘小明’>style=“background:red;”</#if>
空值處理：
判斷某變量是否存在：<#if stus??> 如果該變量存在,返回true,否則返回false
${name!’’}表示如果name爲空顯示空字符串。
內建函數：
日期格式化：
顯示年月日: ${today?date} 顯示時分秒：${today?time}
顯示日期+時間：${today?datetime}

自定義格式化： ${today?string(“yyyy年MM月”)}
未完待續

模板信息存儲在MongoDB數據庫，模板文件存儲在GridFS文件系統中。
需求：cms系統爲了實現快速根據用戶需求修改 頁面內容並上線的需求；
以前：之前都是由開發者人工編寫html及JS文件，CMS系統是通過程序自動化的對頁面內容進行修改，通過 頁面靜態化技術生成html頁面；
如何實現：一個頁面等於模板加數據，在添加頁面的時候我們選擇了頁面的模板。
具體流程：
1、獲取模型數據，先知道數據模型的結構纔可以編寫模板
2、製作模板
3、對頁面進行靜態化
4、將靜態化生成的html頁面存放文件系統GridFS中
5、將存放在文件系統的html文件發佈到服務器

如何獲取頁面的數據模型？
在編輯頁面信息時指定一個DataUrl，此url基於Http方式，cms通過Http遠程調用的方法請求DataUrl獲取數據模型。
此頁面是輪播圖頁面，它的DataUrl由開發輪播圖管理的前端來提供。
DataUrl就是一個請求後端數據的接口，該接口查詢數據庫獲取數據模型；
頁面靜態化流程：
1、靜態化程序首先讀取頁面獲取DataUrl。
2、靜態化程序遠程請求DataUrl得到數據模型。
3、獲取頁面模板。
4、執行頁面靜態化。
DataUrl：http://localhost:40200/portalview/course/getpre/402885816243d2dd016243f24c030002

編寫根據id查詢CmsConfig信息的接口；

爲什麼要使用遠程請求？
前端是使用ajax去請求接口，後端不同模塊之間的調用就會使用到遠程調用；
遠程請求接口：
使用OkHttpClient完成http請求
具體流程：
1、pom中添加okhttp依賴；
2、在SpringBoot啓動類中配置 RestTemplate；
3、調用RestTemplate的getForEntity方法即可請求url獲取參數；
ResponseEntity

GridFS介紹
GridFS是MongoDB提供的用於持久化存儲文件的模塊，CMS使用MongoDB存儲數據，使用GridFS可以快速集成開發。
工作原理：
GridFS存儲文件是將文件分塊存儲，文件會按照256KB的大小分割成多個塊進行存儲。
GridFS使用兩個集合 （collection）存儲文件，一個集合是chunks, 用於存儲文件的二進制數據；
一個集合是files，用於存儲文件的元數據信息（文件名稱、塊大小、上傳時間等信息）。
1、存文件
使用GridFsTemplate的store方法存儲文件
ObjectId objectId = = gridFsTemplate.store(inputStram, “輪播圖測試文件01”, “”);
存儲原理說明：
文件存儲成功得到一個文件id
此文件id是fs.files集合中的主鍵。
可以通過文件id查詢fs.chunks表中的記錄，得到文件的內容。
2、讀取文件
定義Mongodb的配置類MongoConfig
使用GridFsTemplate中findOne獲取到改文件；
使用GridFSBucket來獲取流對象數據；
3、刪除文件
使用GridFsTemplate中delete刪除文件；

整個頁面靜態化的流程：
1、在編輯cms頁面信息界面填寫DataUrl，將此字段保存到cms_page集合中。
2、靜態化程序獲取頁面的DataUrl—通過pageId獲取到該DataUrl字段。
3、靜態化程序遠程請求DataUrl獲取數據模型。
4、靜態化程序獲取頁面的模板信息
5、執行頁面靜態化

通過id到cmsPage表中找到DataUrl字段；
通過restTemplate請求dataUrl獲取數據；
通過id到cmsPage表中找到TemplateId字段；
通過TemplateId到CmsTemplate表中找到模板文件TemplateFileId字段；
通過gridFsTemplate傳入TemplateFileId字段請求文件系統獲取模板文件；
通過generateHtml方法執行靜態化
其中重要的方法：FreeMarkerTemplateUtils.processTemplateIntoString(template, model)，傳模板文件和模板數據；
最後將該方法返回的結果返回；

頁面預覽開發：
頁面在發佈前增加頁面預覽的步驟，方便用戶檢查頁面內容是否正確。

環境配置：
1、pom中引入freemarker依賴
2、在application.yml配置freemarker
創建CmsPagePreviewController類，用於頁面預覽；
將靜態化後的數據輸出到瀏覽器：
ServletOutputStream outputStream = response.getOutputStream();
outputStream.write(pageHtml.getBytes(“utf‐8”));

通過nginx代理進行頁面預覽：
1、虛擬主機配置：

#頁面預覽 
location /cms/preview/{ 
	proxy_pass http://cms_server_pool/cms/preview/; 
}

2、配置cms_server_pool將請求轉發到cms：

#cms頁面預覽 
upstream cms_server_pool{ 
	server 127.0.0.1:31001 weight=10; 
}

重啓Nginx。
從cms_page找一個頁面進行測試。注意：頁面配置一定要正確，需設置正確的模板id和dataUrl。 在瀏覽器打開：http://www.xuecheng.com/cms/preview/5a795ac7dd573c04508f3a56 5a795ac7dd573c04508f3a56：輪播圖頁面的id