學成線上專案總結 - Day4 頁面靜態化

Borris發表於2020-08-05
系列文章：
學成線上專案總結 - Day1 CMS服務端搭建 學成線上專案總結 - Day2 CMS前端開發 學成線上專案總結 - Day3 CMS頁面管理開發 學成線上專案總結 - Day4 頁面靜態化 學成線上專案總結 - Day5 RabbitMQ訊息佇列

頁面靜態化

要生成一個靜態化頁面，我們需要頁面模板+資料模型。模板就是一個html頁面，但其中的資料使用佔位符進行填充；資料模型有很多種，如List，Map……

首先我們需要製作模板。

模板管理

學成線上專案總結 - Day4 頁面靜態化

模板製作 - Freemarker：

我們可以透過新建一個工程來實現模板製作。

  • 獲取原始頁面模板，新增到templates資料夾中
  • 確定需要用模型資料替換的板塊，使用Freemarker標籤進行替換

注：如果之後要在模板中填入資料，就要使用RestTemplate遠端請求模型資料
- 首先獲取dataUrl，再透過dataUrl獲取模型，將模型存入map中
- 測試程式碼：

@Autowired
RestTemplate restTemplate;
@RequestMapping("/banner")
public String index_banner(Map<String, Object> map){
String dataUrl = "http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f";
ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class);
Map body = forEntity.getBody();
map.putAll(body);
return "index_banner";
}
- 此時訪問`http://localhost:8088/freemarker/banner`可以獲得一個靜態化頁面。

模板存取 - GridFS

MongoDB提供的分散式，用於持久化儲存檔案的模組。
在這個專案中是為了儲存製作完成的模板檔案。

工作原理

在GridFS儲存檔案是將檔案分塊儲存，檔案會按照256KB的大小分割成多個塊進行儲存，GridFS使用兩個集合（collection）儲存檔案，一個集合是chunks, 用於儲存檔案的二進位制資料；一個集合是files，用於儲存檔案的後設資料資訊（檔名稱、塊大小、上傳時間等資訊）。從GridFS中讀取檔案要對檔案的各各塊進行組裝、合併。

手動新增模板

透過GridFS將模板資訊分塊儲存到資料庫後，我們需要手動在cms_template中新增模板資訊。其中的關鍵是將剛才GridFS儲存時生成的file_id填入templateFIleId這一列，透過這個id，我們可以定位到file_chunks中模板資料。

如何獲取頁面的資料模型？

從資料庫cms_config集合中獲知這個專案首頁中頁面的資料模型有三類：輪播圖，精品推薦和分類資訊。我們可以透過查詢config_id來得到對應配置的資料模型。而這個config_id就是dataUrl的最後一個部分。

由於資料模型有很多種，而 CMS 只負責執行靜態化程式，所以無法獲知頁面的資料模型。所以我們需要在編輯頁面時為每個頁面指定DataUrl，在執行靜態化程式時，可以透過DataUrl獲取頁面的資料模型資訊。

頁面靜態化流程

學成線上專案總結 - Day4 頁面靜態化

下面就詳述每一個步驟。

填寫頁面DataUrl

一個頁面需要新增dataUrl資訊，這個操作是由管理員在後臺操作頁面新增的。這指定了該頁面的資料模型

  • 在編輯cms頁面資訊介面填寫DataUrl，將此欄位儲存到cms_page集合中。
  • 這個DataUrl是cms_config中模板的id

獲取頁面DataUrl

定義介面

在api包下定義一個CmsConfigController介面，其中定義一個根據id查詢配置模型的方法。

定義Dao

在dao層定義CmsConfigRepository，繼承MongoRepository<Config, String>，以使用findById()等方法來查詢資料庫內容。

Service層實現查詢

呼叫CmsConfigRepository的findById()方法，查詢CmsConfig。

Controller呼叫

重寫Api中的getModel()方法，實現對Service層實現方法的呼叫，來獲取cms_config中的模型id–這就是之後為頁面新增的DataUrl資訊，CMS用來獲取該頁面的資料模型。

這裡，我們獲取到的DataUrl是：http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f

獲取頁面DataUrl

遠端請求DataUrl獲取資料模型

新增OkHttpClient依賴後，在SpringBoot啟動類中配置 RestTemplate 即可。然後在業務層方法中使用RestTemplate獲取資料模型。

獲取頁面的模板資訊

  • 整個獲取的邏輯：
    頁面ID -> 模板ID -> templateFIleId -> 下載模板

生成靜態化頁面

    //執行靜態化
    private String generateHtml(String templateContent,Map model ){
        //建立配置物件
        Configuration configuration = new Configuration(Configuration.getVersion());
        //建立模板載入器
        StringTemplateLoader stringTemplateLoader = new StringTemplateLoader();
        stringTemplateLoader.putTemplate("template",templateContent);
        //向configuration配置模板載入器
        configuration.setTemplateLoader(stringTemplateLoader);
        //獲取模板
        try {
            Template template = configuration.getTemplate("template");
            //呼叫api進行靜態化
            String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);
            return content;
        } catch (Exception e) {
            e.printStackTrace();
        }

        return null;
    }

預覽頁面

為了能使管理員在後臺管理中檢視到新建的頁面預覽，我們還要透過在nginx中配置一個預覽頁面的路由來實現頁面預覽。
和直接CRUD的實現類似，我們都需要定義介面、編寫業務層實現方法、在Controller中重寫的介面中呼叫、前端定義路由來實現這一功能。

今天的程式碼在這裡

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章