4.1 页面预览开发

4.1.1 需求分析 页面在发布前增加页面预览的步骤，方便用户检查页面内容是否正确。页面预览的流程如下：1、用户进入cms前端，点击“页面预览”在浏览器请求cms页面预览链接。2、cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型。3、cms根据页面id查询页面模板内容 4、cms执行页面静态化。

5、cms将静态化内容响应给浏览器。

6、在浏览器展示页面内容，实现页面预览的功能。4.1.2 搭建环境 在cms服务需要集成freemarker： 1、在CMS服务中加入freemarker的依赖

        
     
      org.springframework.boot
         
     
      spring‐boot‐starter‐freemarker
     
    

2、在application.yml配置freemarker

spring:  freemarker:    cache: false #关闭模板缓存，方便测试     settings:      template_update_delay: 0

4.1.3 Service

静态化方法在静态化测试章节已经实现。4.1.4 Controller 调用service的静态化方法，将静态化内容通过response输出到浏览器显示 创建CmsPagePreviewController类，用于页面预览： 请求页面id，查询得到页面的模板信息、数据模型url，根据模板和数据生成静态化内容，并输出到浏览器。

@Controller public class CmsPagePreviewController extends BaseController {    @Autowired     PageService pageService;       //接收到页面id    @RequestMapping(value="/cms/preview/{pageId}",method = RequestMethod.GET)

public void preview(@PathVariable("pageId")String pageId){        String pageHtml = pageService.getPageHtml(pageId);         if(StringUtils.isNotEmpty(pageHtml)){            try {                ServletOutputStream outputStream = response.getOutputStream();                 outputStream.write(pageHtml.getBytes("utf‐8"));             } catch (IOException e) {                e.printStackTrace();             }          }    } }

4.2 页面预览测试

4.2.1 配置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。

在浏览器打开： 5a795ac7dd573c04508f3a56：轮播图页面的id

4.2.2 添加“页面预览”链接

在页面列表添加“页面预览”链接，修改page_list.vue:

添加preview方法：

//页面预览 preview(pageId){ window.open(") },效果：

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