Java的新项目学成在线笔记-day4(六）

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的依赖

<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

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。
在浏览器打开：http://www.xuecheng.com/cms/preview/5a795ac7dd573c04508f3a56 
5a795ac7dd573c04508f3a56：轮播图页面的id

4.2.2 添加“页面预览”链接 
在页面列表添加“页面预览”链接，修改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) },
效果：

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