学成在线 第4天 讲义-页面静态化 页面预览 四

3.4 静态化测试 
上边章节完成了数据模型和模板管理的测试，下边测试整个页面静态化的流程，流程如下： 
1、填写页面DataUrl 
在编辑cms页面信息界面填写DataUrl，将此字段保存到cms_page集合中。
2、静态化程序获取页面的DataUrl 
3、静态化程序远程请求DataUrl获取数据模型。 
4、静态化程序获取页面的模板信息 
5、执行页面静态化 
3.4.1 填写页面DataUrl 
修改页面管理模板代码，实现编辑页面DataUrl。 
注意：此地址由程序员提供给系统管理员，由系统管理员录入到系统中。 
下边实现页面修改界面录入DataUrl： 
1、修改页面管理前端的page_edit.vue
在表单中添加dataUrl输入框：

<el
‐
form
‐
item label=
"
数据Url
"
prop
=
"
dataUrl
"
>
<el
‐
input v
‐
model=
"
pageForm.dataUrl
"
auto
‐
complete
=
"
off
"
></el
‐
input>
</el
‐
form
‐
item>

2、修改页面管理服务端PageService 
在更新cmsPage数据代码中添加：

//更新dataUrl
one.setDataUrl(cmsPage.
getDataUrl());

3.4.2 静态化程序 
在PageService中定义页面静态化方法，如下：
//页面静态化

public String getPageHtml(String pageId){
//获取页面模型数据
Map model =
this.
getModelByPageId(pageId);
if(model == null){
//获取页面模型数据为空
ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAISNULL);
}
//获取页面模板
String templateContent
=
getTemplateByPageId(pageId);
if(StringUtils.isEmpty(templateContent)){
//页面模板为空
ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_TEMPLATEISNULL);
}
//执行静态化
String html =
generateHtml(templateContent, model);
if(StringUtils.isEmpty(html)){
ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_HTMLISNULL);
}
return html;
}
//页面静态化
public String generateHtml(String template,Map model){
try {
//生成配置类
Configuration configuration = new Configuration(Configuration.
getVersion());
//模板加载器
StringTemplateLoader stringTemplateLoader = new StringTemplateLoader();
stringTemplateLoader.
putTemplate(
"
template
"
,template);
//配置模板加载器
configuration.setTemplateLoader(stringTemplateLoader);
//获取模板
Template template1 =
configuration.
getTemplate(
"
template
"
);
String html = FreeMarkerTemplateUtils.
processTemplateIntoString(template1, model);
return html;
} catch (Exception e) {
e.
printStackTrace();
}
return null;
}
//获取页面模板
public String getTemplateByPageId(String pageId){
//查询页面信息
CmsPage cmsPage
=
this.
getById(pageId);
if(cmsPage
== null){
//页面不存在
ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);
}
//页面模板
String templateId
=
cmsPage.
getTemplateId();
if(StringUtils.isEmpty(templateId)){
//页面模板为空
ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_TEMPLATEISNULL);
}
Optional<CmsTemplate> optional =
cmsTemplateRepository
.findById(templateId);
if(optional.isPresent()){
CmsTemplate cmsTemplate
=
optional.
get();
//模板文件id
String templateFileId
=
cmsTemplate.
getTemplateFileId();
//取出模板文件内容
GridFSFile gridFSFile
=
gridFsTemplate.findOne(Query
.
query(Criteria.where(
"
_id
"
)
.is(templateFileId)));
//打开下载流对象
GridFSDownloadStream gridFSDownloadStream =
gridFSBucket.openDownloadStream(gridFSFile.
getObjectId());
//创建GridFsResource
GridFsResource gridFsResource
= new GridFsResource(gridFSFile,gridFSDownloadStream);
try {
String content
= IOUtils.toString(gridFsResource.
getInputStream(),
"
utf
‐
8
"
);
return content;
} catch (IOException e) {
e.
printStackTrace();
}
}
return null;
}
//获取页面模型数据
public Map getModelByPageId(String pageId){
//查询页面信息
CmsPage cmsPage
=
this.
getById(pageId);
if(cmsPage
== null){
//页面不存在
ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);
}
//取出dataUrl
String dataUrl =
cmsPage.
getDataUrl();
if(StringUtils.isEmpty(dataUrl)){
ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAURLISNULL);
}
ResponseEntity<Map> forEntity
= restTemplate.
getForEntity(dataUrl, Map
.class);
Map body
= forEntity
.
getBody();
return body;
}

单元测试getPageHtml方法，过程略。 
4 页面预览
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虚拟主机配置： 

 

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(
"
[url]http://www.xuecheng[/url]
.com/cms/preview/
"
+pageId)
},