一.需求分析

頁面在發布前增加頁面預覽的步驟，方便用戶檢查頁面內容是否正確。頁面預覽的流程如下：

1）用戶進入cms前端，點擊“頁面預覽”，讓瀏覽器請求cms頁面預覽鏈接。
2）cms根據頁面id查詢DataUrl并遠程請求DataUrl獲取數據模型。
3）cms根據頁面id查詢頁面模板內容
4）cms執行頁面靜態化。
5）cms將靜態化內容響應給瀏覽器。
6）在瀏覽器展示頁面內容，實現頁面預覽的功能。

二. 搭建環境

1.在cms服務中集成freemarker：

在CMS服務中加入freemarker的依賴
文件位置：xcEduService01\xc-service-manage-cms\pom.xml

 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency>

2.在application.yml配置freemarker

spring:
freemarker:
cache: false #關閉模板緩存，方便測試
settings:
template_update_delay: 0

三.Service

靜態化方法在靜態化測試章節已經實現。

四.Controller

創建CmsPagePreviewController類，用于頁面預覽：

調用service的靜態化方法，查詢得到頁面的模板信息、數據模型url，根據模板和數據生成靜態化內容，將靜態化內容通過response輸出到瀏覽器顯示

package com.xuecheng.manage_cms.controller;import com.xuecheng.framework.web.BaseController;
import com.xuecheng.manage_cms.service.PageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;import javax.servlet.ServletOutputStream;
import java.io.IOException;@Controller
public class CmsPagePreviewController extends BaseController {@AutowiredPageService pageService;//頁面預覽@RequestMapping(value="/cms/preview/{pageId}",method = RequestMethod.GET)public void preview(@PathVariable("pageId") String pageId) throws IOException {//執行靜態化String pageHtml = pageService.getPageHtml(pageId);//通過response對象將內容輸出ServletOutputStream outputStream = response.getOutputStream();outputStream.write(pageHtml.getBytes("utf-8"));}
}

五.頁面預覽測試-- 配置Nginx代理

通過nginx請求靜態資源（css、圖片等），通過nginx代理進行頁面預覽。
在www.xuecheng.com虛擬主機配置：

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

配置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）

六.頁面預覽測試-- 添加“頁面預覽”鏈接

在頁面列表添加“頁面預覽”鏈接，修改page_list.vue:

文件位置：xc-ui-pc-sysmanage\src\module\cms\page\page_list.vue

<template slot‐scope="page">
<el‐button @click="edit(page.row.pageId)" type="text" size="small">修改</el‐button>
<el‐button @click="del(page.row.pageId)" type="text" size="small">刪除</el‐button>
<el‐button @click="preview(page.row.pageId)" type="text" size="small">頁面預覽</el‐button>
...

添加preview方法：

//頁面預覽
preview(pageId){
window.open("http://www.xuecheng.com/cms/preview/"+pageId)
},

效果：
點擊輪播圖頁面的“頁面預覽”，預覽頁面效果。