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的依赖
[AppleScript] 纯文本查看 复制代码 <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring‐boot‐starter‐freemarker</artifactId>
</dependency>
2、在application.yml配置freemarker
[AppleScript] 纯文本查看 复制代码 spring:
freemarker:
cache: false
#关闭模板缓存，
方便测试
settings:
template_update_delay: 0
4.1.3 Service
静态化方法在静态化测试章节已经实现。
4.1.4 Controller
调用service的静态化方法，将静态化内容通过response输出到浏览器显示 创建CmsPagePreviewController类，用于页面预览： 请求页面id，查询得到页面的模板信息、数据模型url，根据模板和数据生成静态化内容，并输出到浏览器。
[AppleScript] 纯文本查看 复制代码 @Controller public class CmsPagePreviewController extends BaseController {
@Autowired
PageService pageService;
//接收到页面id
@RequestMapping(value="/cms/preview/{pageId}",method = RequestMethod.GET)
[AppleScript] 纯文本查看 复制代码 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虚拟主机配置：
[AppleScript] 纯文本查看 复制代码 #页面预览
location /cms/preview/ {
proxy_pass http://cms_server_pool/cms/preview/;
}
配置cms_server_pool将请求转发到cms：
[AppleScript] 纯文本查看 复制代码 #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:
[AppleScript] 纯文本查看 复制代码 <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) },
效果：
点击轮播图页面的“页面预览”，预览页面效果。
| 
收藏
淘帖
踩
