文章目录
- 一.需求分析
- 二. 搭建环境
- 1.在cms服务中集成freemarker：
- 2.在application.yml配置freemarker
- 三.Service
- 四.Controller
- 五.页面预览测试-- 配置Nginx代理
- 六.页面预览测试-- 添加“页面预览”链接
一.需求分析
页面在发布前增加页面预览的步骤，方便用户检查页面内容是否正确。页面预览的流程如下：
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)
},
效果：
点击轮播图页面的“页面预览”，预览页面效果。
