一.需求分析

页面在发布前增加页面预览的步骤，方便用户检查页面内容是否正确。页面预览的流程如下：

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)
},

效果：
点击轮播图页面的“页面预览”，预览页面效果。