页面静态化 页面预览
1 页面静态化需求
1、为什么要进行页面管理？
本项目cms系统的功能就是根据运营需要，对门户等子系统的部分页面进行管理，从而实现快速根据用户需求修改 页面内容并上线的需求。
2、如何修改页面的内容？
在开发中修改页面内容是需要人工编写html及JS文件，CMS系统是通过程序自动化的对页面内容进行修改，通过 页面静态化技术生成html页面。
3、如何对页面进行静态化？
一个页面等于模板加数据，在添加页面的时候我们选择了页面的模板。
页面静态化就是将页面模板和数据通过技术手段将二者合二为一，生成一个html网页文件。
4、页面静态化及页面发布流程图如下：
业务流程如下：
1、获取模型数据
2、制作模板
3、对页面进行静态化
4、将静态化生成的html页面存放文件系统中
5、将存放在文件系统的html文件发布到服务器
2 FreeMarker 研究
参考链接：https://www.cnblogs.com/artwalker/p/13431741.html
3 页面静态化
3.1 页面静态化流程
通过上边对FreeMarker的研究我们得出：模板+数据模型=输出，页面静态化需要准备数据模型和模板，先知道数 据模型的结构才可以编写模板，因为在模板中要引用数据模型中的数据，本节将系统讲解CMS页面数据模型获取、 模板管理及静态化的过程。
下边讨论一个问题：如何获取页面的数据模型？
CMS管理了各种页面，CMS对页面进行静态化时需要数据模型，但是CMS并不知道每个页面的数据模型的具体内容，它只管执行静态化程序便可对页面进行静态化，所以CMS静态化程序需要通过一种通用的方法来获取数据模型。
在编辑页面信息时指定一个DataUrl，此DataUrl便是获取数据模型的Url，它基于Http方式，CMS对页面进行静态化时会从页面信息中读取DataUrl，通过Http远程调用的方法请求DataUrl获取数据模型。
管理员怎么知道DataUrl的内容呢？
举例说明：
此页面是轮播图页面，它的DataUrl由开发轮播图管理的程序员提供。
此页面是精品课程推荐页面，它的DataUrl由精品课程推荐的程序员提供。
此页面是课程详情页面，它的DataUrl由课程管理的程序员提供。
页面静态化流程如下图：
1、静态化程序首先读取页面获取DataUrl。
2、静态化程序远程请求DataUrl得到数据模型。
3、获取页面模板。
4、执行页面静态化。
3.2 数据模型
3.2.1 轮播图DataUrl接口
3.2.1.1 需求分析
CMS中有轮播图管理、精品课程推荐的功能，以轮播图管理为例说明：轮播图管理是通过可视化的操作界面由管理员指定轮播图图片地址，最后将轮播图图片地址保存在cms_config集合中，下边是轮播图数据模型：
针对首页的轮播图信息、精品推荐等信息的获取，统一提供一个Url供静态化程序调用，这样我们就知道了轮播图页面、精品课程推荐页面的DataUrl，管理员在页面配置中将此Url配置在页面信息中。
本小节开发一个查询轮播图、精品推荐信息的接口，此接口供静态化程序调用获取数据模型。
3.2.1.2 接口定义
轮播图信息、精品推荐等信息存储在MongoDB的cms_config集合中。
cms_config有固定的数据结构，如下：
@Data
@ToString
@Document(collection = "cms_config")
public class CmsConfig {
@Id
private String id;
private String name;
private List<CmsConfigModel> model;
}
数据模型项目内容如下：
@Data
@ToString
public class CmsConfigModel {
private String key;
private String name;
private String url;
private Map mapValue;
private String value;
}
上边的模型结构可以对照cms_config中的数据进行分析。
其中，在mapValue 中可以存储一些复杂的数据模型内容。
根据配置信息Id查询配置信息，定义接口如下：
3.2.1.3 Dao
定义CmsConfig的dao接口：
package com.xuecheng.manage_cms.dao;
import com.xuecheng.framework.domain.cms.CmsConfig;
import org.springframework.data.mongodb.repository.MongoRepository;
/**
* @author HackerStar
* @create 2020-08-04 13:22
*/
public interface CmsConfigRepository extends MongoRepository<CmsConfig, String> {
}
3.2.1.4 Service
定义CmsConfigService实现根据id查询CmsConfig信息。
package com.xuecheng.manage_cms.service;
import com.xuecheng.framework.domain.cms.CmsConfig;
import com.xuecheng.manage_cms.dao.CmsConfigRepository;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.Optional;
/**
* @author HackerStar
* @create 2020-08-04 13:24
*/
@Service
public class CmsConfigService {
@Autowired
CmsConfigRepository cmsConfigRepository;
/**
* 根据id查询配置管理信息
* @param id
* @return
*/
public CmsConfig getConfigById(String id) {
Optional<CmsConfig> optional = cmsConfigRepository.findById(id);
if (optional.isPresent()) {
CmsConfig cmsConfig = optional.get();
return cmsConfig;
}
return null;
}
}
3.2.1.5 Controller
package com.xuecheng.manage_cms.web.controller;
import com.xuecheng.api.cms.CmsConfigControllerApi;
import com.xuecheng.framework.domain.cms.CmsConfig;
import com.xuecheng.manage_cms.service.CmsConfigService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
/**
* @author HackerStar
* @create 2020-08-04 13:25
*/
public class CmsConfigController implements CmsConfigControllerApi {
@Autowired
CmsConfigService cmsConfigService;
@Override
@GetMapping("/getmodel/{id}")
public CmsConfig getmodel(@PathVariable("id") String id) {
return cmsConfigService.getConfigById(id);
}
}
3.2.1.6 测试
使用postman测试接口：
get请求：http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f（轮播图信息）
3.2.3 远程请求接口
SpringMVC提供RestTemplate请求http接口，RestTemplate的底层可以使用第三方的http客户端工具实现http的请求，常用的http客户端工具有Apache HttpClient、OkHttpClient等，本项目使用OkHttpClient完成http请求， 原因也是因为它的性能比较出众。
1、添加依赖
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
</dependency>
2、配置RestTemplate
在SpringBoot启动类中配置 RestTemplate
package com.xuecheng.manage_cms;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.http.client.OkHttp3ClientHttpRequestFactory;
import org.springframework.web.client.RestTemplate;
/**
* @author HackerStar
* @create 2020-07-24 09:15
*/
@SpringBootApplication
@EntityScan("com.xuecheng.framework.domain.cms")//扫描实体类
@ComponentScan(basePackages = {"com.xuecheng.api"})//扫描接口
@ComponentScan(basePackages = {"com.xuecheng.manage_cms"})//扫描本项目下的所有类
@ComponentScan(basePackages = "com.xuecheng.framework")//扫描common工程下的类
public class ManageCmsApplication {
public static void main(String[] args) {
SpringApplication.run(ManageCmsApplication.class, args);
}
@Bean
public RestTemplate restTemplate() {
return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
}
}
3、测试RestTemplate
根据url获取数据，并转为map格式。
@Test
public void testRestTemplate() {
ResponseEntity<Map> forEntity = restTemplate().getForEntity("http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f", Map.class);
System.out.println(forEntity);
}
3.3 模板管理
3.3.1 模板管理业务流程
CMS提供模板管理功能，业务流程如下：
1、要增加新模板首先需要制作模板，模板的内容就是Freemarker ftl模板内容。
2、通过模板管理模块功能新增模板、修改模板、删除模板。
3、模板信息存储在MongoDB数据库，其中模板信息存储在cms_template集合中，模板文件存储在GridFS文件系统中。
cms_template集合：
下边是一个模板的例子：
{
"_id" : ObjectId("5a962b52b00ffc514038faf7"),
"_class" : "com.xuecheng.framework.domain.cms.CmsTemplate",
"siteId" : "5a751fab6abb5044e0d19ea1",
"templateName" : "首页",
"templateParameter" : "",
"templateFileId" : "5a962b52b00ffc514038faf5"
}
上边模板信息中templateFileId是模板文件的ID，此ID对应GridFS文件系统中文件ID。
3.3.2 模板制作
3.3.2.1 编写模板文件
1、轮播图页面原型
在门户的静态工程目录有轮播图的静态页面，路径是：/include/index_banner.html。
2、数据模型为：
数据模型的图片路径改成可以浏览的正确路径。
3、编写模板
在freemarker测试工程中新建模板index_banner.ftl。
在freemarker测试工程编写一个方法测试轮播图模板，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://www.xuecheng.com/plugins/normalize-css/normalize.css" />
<link rel="stylesheet" href="http://www.xuecheng.com/plugins/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="http://www.xuecheng.com/css/page-learing-index.css" />
<link rel="stylesheet" href="http://www.xuecheng.com/css/page-header.css" />
</head>
<body>
<div class="banner-roll">
<div class="banner-item">
<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-bannerB.jpg);"></div>
<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-bannerA.jpg);"></div>
<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-banner3.png);"></div>
<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-bannerB.jpg);"></div>
<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-bannerA.jpg);"></div>
<div class="item" style="background-image: url(http://www.xuecheng.com/img/widget-banner3.png);"></div>
</div>
<div class="indicators"></div>
</div>
<script type="text/javascript" src="http://www.xuecheng.com/plugins/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="http://www.xuecheng.com/plugins/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript">
var tg = $('.banner-item .item');
var num = 0;
for (i = 0; i < tg.length; i++) {
$('.indicators').append('<span></span>');
$('.indicators').find('span').eq(num).addClass('active');
}
function roll() {
tg.eq(num).animate({
'opacity': '1',
'z-index': num
}, 1000).siblings().animate({
'opacity': '0',
'z-index': 0
}, 1000);
$('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
if (num >= tg.length - 1) {
num = 0;
} else {
num++;
}
}
$('.indicators').find('span').click(function() {
num = $(this).index();
roll();
});
var timer = setInterval(roll, 3000);
$('.banner-item').mouseover(function() {
clearInterval(timer)
});
$('.banner-item').mouseout(function() {
timer = setInterval(roll, 3000)
});
</script>
</body>
</html>
3.3.2.2 模板测试
在freemarker测试工程(FreemarkerController类下)编写一个方法测试轮播图模板，代码如下：
@RequestMapping("/banner")
public String index_banner(Map<String, Object> map) {
String dataUrl = "http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f";
ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class);
Map body = forEntity.getBody();
map.putAll(body);
return "index_banner";
}
请求：http://localhost:8088/freemarker/banner
3.3.3 GridFS研究
3.3.3.1 GridFS介绍
GridFS是MongoDB提供的用于持久化存储文件的模块，CMS使用MongoDB存储数据，使用GridFS可以快速集成 开发。
它的工作原理是：
在GridFS存储文件是将文件分块存储，文件会按照256KB的大小分割成多个块进行存储，GridFS使用两个集合 （collection）存储文件，一个集合是chunks, 用于存储文件的二进制数据；一个集合是files，用于存储文件的元数据信息（文件名称、块大小、上传时间等信息）。
从GridFS中读取文件要对文件的各各块进行组装、合并。
详细参考：https://docs.mongodb.com/manual/core/gridfs/
3.3.3.2 GridFS存取文件测试
1、存文件
使用GridFsTemplate存储文件测试代码：
在测试工程的pom文件中添加依赖：
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-mongodb</artifactId>
</dependency>
向测试程序注入GridFsTemplate。
package com.xuecheng.test.freemarker;
import com.mongodb.client.gridfs.GridFSBucket;
import com.mongodb.client.gridfs.GridFSDownloadStream;
import com.mongodb.client.gridfs.model.GridFSFile;
import org.apache.commons.io.IOUtils;
import org.bson.types.ObjectId;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.data.mongodb.gridfs.GridFsResource;
import org.springframework.data.mongodb.gridfs.GridFsTemplate;
import org.springframework.test.context.junit4.SpringRunner;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
/**
* @author Administrator
* @version 1.0
* @create 2018-09-12 18:11
**/
@SpringBootTest
@RunWith(SpringRunner.class)
public class GridFsTest {
@Autowired
GridFsTemplate gridFsTemplate;
//存文件
@Test
public void testStore() throws FileNotFoundException {
//定义file
File file =new File("/Users/XinxingWang/Development/Java/IDEA_Project/xcEduCode/test-freemarker/src/test/resources/templates/gridFS/index_banner.html");
//定义fileInputStream
FileInputStream fileInputStream = new FileInputStream(file);
ObjectId objectId = gridFsTemplate.store(fileInputStream, "index_banner.ftl");
System.out.println(objectId);
}
}
存储原理说明：
文件存储成功得到一个文件id。
此文件id是fs.files集合中的主键。
可以通过文件id查询fs.chunks表中的记录，得到文件的内容。
2、读取文件
1）在config包中定义Mongodb的配置类，如下：
GridFSBucket用于打开下载流对象
package com.xuecheng.test.freemarker.config;
import com.mongodb.MongoClient;
import com.mongodb.client.MongoDatabase;
import com.mongodb.client.gridfs.GridFSBucket;
import com.mongodb.client.gridfs.GridFSBuckets;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
/**
* @author HackerStar
* @create 2020-08-04 15:36
*/
@Configuration
public class MongoConfig {
@Value("${spring.data.mongodb.database}")
String db;
@Bean
public GridFSBucket getGridFSBucket(MongoClient mongoClient) {
MongoDatabase database = mongoClient.getDatabase(db);
GridFSBucket bucket = GridFSBuckets.create(database);
return bucket;
}
}
2）测试代码如下
@Test
public void queryFile() throws IOException {
String fileId = "5b091f93c5e9b7070c94a2b9";
GridFSFile gridFSFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is(fileId)));
GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(gridFSFile.getObjectId());
GridFsResource gridFsResource = new GridFsResource(gridFSFile, gridFSDownloadStream);
String s = IOUtils.toString(gridFsResource.getInputStream(), "utf-8");
System.out.println(s);
}
3、删除文件
//删除文件
@Test
public void testDelFile() throws IOException {
//根据文件id删除fs.files和fs.chunks中的记录
gridFsTemplate.delete(Query.query(Criteria.where("_id").is("5b091f93c5e9b7070c94a2b9")));
}
3.3.4 模板存储
根据模板管理的流程，最终将模板信息存储到MongoDB的cms_template中，将模板文件存储到GridFS中。
模板管理功能在课堂中不再讲解，教学中手动向cms_template及GridFS中存储模板，方法如下：
1、添加模板
1）使用GridFS测试代码存储模板文件到GridFS，并得到文件id.
2）向cms_template添加记录。
2、删除模板
1）使用GridFS测试代码根据文件id删除模板文件。
2）根据模板id删除cms_template中的记录。
3、修改模板信息
使用Studio 3T修改cms_template中的记录。
4、修改模板文件
1）通过Studio 3T修改模板文件(此方法限文件小于256K)
可以通过Studio 3T修改模板文件，先找到模板文件，再导入进去：
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中定义页面静态化方法，如下：
package com.xuecheng.manage_cms.service;
import com.mongodb.client.gridfs.GridFSBucket;
import com.mongodb.client.gridfs.GridFSDownloadStream;
import com.mongodb.client.gridfs.model.GridFSFile;
import com.xuecheng.framework.domain.cms.CmsPage;
import com.xuecheng.framework.domain.cms.CmsTemplate;
import com.xuecheng.framework.domain.cms.request.QueryPageRequest;
import com.xuecheng.framework.domain.cms.response.CmsCode;
import com.xuecheng.framework.domain.cms.response.CmsPageResult;
import com.xuecheng.framework.exception.ExceptionCast;
import com.xuecheng.framework.model.response.CommonCode;
import com.xuecheng.framework.model.response.QueryResponseResult;
import com.xuecheng.framework.model.response.QueryResult;
import com.xuecheng.framework.model.response.ResponseResult;
import com.xuecheng.manage_cms.dao.CmsConfigRepository;
import com.xuecheng.manage_cms.dao.CmsPageRepository;
import com.xuecheng.manage_cms.dao.CmsTemplateRepository;
import freemarker.cache.StringTemplateLoader;
import freemarker.template.Configuration;
import freemarker.template.Template;
import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.*;
import org.springframework.data.mongodb.core.query.Criteria;
import org.springframework.data.mongodb.core.query.Query;
import org.springframework.data.mongodb.gridfs.GridFsResource;
import org.springframework.data.mongodb.gridfs.GridFsTemplate;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Service;
import org.springframework.ui.freemarker.FreeMarkerTemplateUtils;
import org.springframework.web.client.RestTemplate;
import java.io.IOException;
import java.util.Map;
import java.util.Optional;
/**
* @author HackerStar
* @create 2020-07-24 10:59
*/
@Service
public class PageService {
@Autowired
CmsPageRepository cmsPageRepository;
@Autowired
CmsConfigRepository cmsConfigRepository;
@Autowired
RestTemplate restTemplate;
@Autowired
CmsTemplateRepository cmsTemplateRepository;
@Autowired
GridFsTemplate gridFsTemplate;
@Autowired
GridFSBucket gridFSBucket;
/**
* 页面列表分页查询
* @param page 当前页码
* @param size 页面显示个数
* @param queryPageRequest 查询条件
* @return 页面列表
*/
public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest) {
if (queryPageRequest == null) {
queryPageRequest = new QueryPageRequest();
}
//条件匹配器
//页面名称模糊查询，需要自定义字符串的匹配器实现模糊查询
ExampleMatcher exampleMatcher = ExampleMatcher.matching().withMatcher("pageAliase", ExampleMatcher.GenericPropertyMatchers.contains());
//条件值
CmsPage cmsPage = new CmsPage();
//站点id
if(StringUtils.isNotEmpty(queryPageRequest.getSiteId())){
cmsPage.setSiteId(queryPageRequest.getSiteId());
}
//页面别名
if(StringUtils.isNotEmpty(queryPageRequest.getPageAliase())) {
cmsPage.setPageAliase(queryPageRequest.getPageAliase());
}
//创建条件实例
Example<CmsPage> example = Example.of(cmsPage, exampleMatcher);
if (page <= 0) {
page = 1;
}
//页码
page = page - 1;
if (size <= 0) {
size = 20;
}
//分页对象
Pageable pageable = PageRequest.of(page, size);
//分页查询
Page<CmsPage> all = cmsPageRepository.findAll(example,pageable);
QueryResult<CmsPage> cmsPageQueryResult = new QueryResult<CmsPage>();
cmsPageQueryResult.setList(all.getContent());
cmsPageQueryResult.setTotal(all.getTotalElements());
return new QueryResponseResult(CommonCode.SUCCESS, cmsPageQueryResult);
}
/**
* 添加页面
*/
public CmsPageResult add(CmsPage cmsPage) {
//校验cmsPage是否为空
if(cmsPage == null){
//抛出异常，非法请求
//......
}
//校验页面是否存在，根据页面名称、站点Id、页面webpath查询
CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(), cmsPage.getSiteId(), cmsPage.getPageWebPath());
//校验页面是否存在，已存在则抛出异常
if(cmsPage1 != null) {
//抛出异常，非法请求
//......
ExceptionCast.cast(CmsCode.CMS_ADDPAGE_EXISTSNAME);
}
cmsPage.setPageId(null);//添加页面主键由spring data 自动生成
cmsPageRepository.save(cmsPage);
//返回结果
return new CmsPageResult(CommonCode.SUCCESS, cmsPage);
}
/**
* 根据ID查询页面
*/
public CmsPage getById(String id) {
Optional<CmsPage> optional = cmsPageRepository.findById(id);
if (optional.isPresent()) {
return optional.get();
}
//返回空
return null;
}
/**
* 更新页面信息
*/
public CmsPageResult update(String id, CmsPage cmsPage) {
//根据id查询页面信息
CmsPage one = this.getById(id);
if (one != null) {
//更新模板id
one.setTemplateId(cmsPage.getTemplateId());
//更新所属站点
one.setSiteId(cmsPage.getSiteId());
//更新页面别名
one.setPageAliase(cmsPage.getPageAliase());
//更新页面名称
one.setPageName(cmsPage.getPageName());
//更新访问路径
one.setPageWebPath(cmsPage.getPageWebPath());
//更新物理路径
one.setPagePhysicalPath(cmsPage.getPagePhysicalPath());
//更新dataUrl
one.setDataUrl(cmsPage.getDataUrl());
//执行更新
CmsPage save = cmsPageRepository.save(one);
if (save != null) {
// 返回成功
CmsPageResult cmsPageResult = new CmsPageResult(CommonCode.SUCCESS, save);
return cmsPageResult;
}
}
// 返回失败
return new CmsPageResult(CommonCode.FAIL, null);
}
/**
* 删除页面
* @param id
* @return
*/
public ResponseResult delete(String id) {
CmsPage one = this.getById(id);
if(one != null) {
//删除页面
cmsPageRepository.deleteById(id);
return new ResponseResult(CommonCode.SUCCESS);
}
return new ResponseResult(CommonCode.FAIL);
}
//页面静态化方法
/**
* 静态化程序获取页面的DataUrl
*
* 静态化程序远程请求DataUrl获取数据模型。
*
* 静态化程序获取页面的模板信息
*
* 执行页面静态化
*/
public String getPageHtml(String pageId){
//获取数据模型
Map model = getModelByPageId(pageId);
if(model == null){
//数据模型获取不到
ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAISNULL);
}
//获取页面的模板信息
String template = getTemplateByPageId(pageId);
if(StringUtils.isEmpty(template)){
ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_TEMPLATEISNULL);
}
//执行静态化
String html = generateHtml(template, model);
return html;
}
//执行静态化
private String generateHtml(String templateContent, Map model ){
//创建配置对象
Configuration configuration = new Configuration(Configuration.getVersion());
//创建模板加载器
StringTemplateLoader stringTemplateLoader = new StringTemplateLoader();
stringTemplateLoader.putTemplate("template",templateContent);
//向configuration配置模板加载器
configuration.setTemplateLoader(stringTemplateLoader);
//获取模板
try {
Template template = configuration.getTemplate("template");
//调用api进行静态化
String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);
return content;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
//获取页面的模板信息
private String getTemplateByPageId(String pageId){
//取出页面的信息
CmsPage cmsPage = this.getById(pageId);
if(cmsPage == null){
//页面不存在
ExceptionCast.cast(CmsCode.CMS_PAGE_NOTEXISTS);
}
//获取页面的模板id
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();
//从GridFS中取模板文件内容
//根据文件id查询文件
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;
}
//获取数据模型
private 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)){
//页面dataUrl为空
ExceptionCast.cast(CmsCode.CMS_GENERATEHTML_DATAURLISNULL);
}
//通过restTemplate请求dataUrl获取数据
ResponseEntity<Map> forEntity = restTemplate.getForEntity(dataUrl, Map.class);
Map body = forEntity.getBody();
return body;
}
}
创建config包及其config类，以及在dao中添加CmsTemplateRepository类。
public interface CmsTemplateRepository extends MongoRepository<CmsTemplate,String> {
}
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
server:
port: 31001
spring:
application:
name: sc-service-manage-cms
data:
mongodb:
uri: mongodb://localhost:27017
database: xc_cms
freemarker:
cache: false
settings:
template_update_delay: 0
4.1.3 Service
静态化方法在静态化测试章节已经实现。
4.1.4 Controller
调用service的静态化方法，将静态化内容通过response输出到浏览器显示。
创建CmsPagePreviewController类，用于页面预览：
请求页面id，查询得到页面的模板信息、数据模型url，根据模板和数据生成静态化内容，并输出到浏览器。
package com.xuecheng.manage_cms.web.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;
/**
* @author Administrator
* @version 1.0
* @create 2018-09-15 16:20
**/
@Controller
public class CmsPagePreviewController extends BaseController {
@Autowired
PageService 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"));
}
}
4.2 页面预览测试
4.2.1 配置Nginx代理
为了通过nginx请求静态资源（css、图片等），通过nginx代理进行页面预览。
在www.xuecheng.com虚拟主机配置：
#页面预览
location /cms/preview/ {
proxy_pass http://cms_server_pool/cms/preview/;
}
重新加载nginx 配置文件。
#cms页面预览
upstream cms_server_pool{
server 127.0.0.1:31001 weight=10;
}
重新加载nginx配置文件。
从cms_page找一个页面进行测试。注意：页面配置一定要正确，需设置正确的模板id和dataUrl。
5a795ac7dd573c04508f3a56：轮播图页面的id
使用之前做过的管理员修改页面内容给轮播图添加dataUrl：http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f
运行GridFS存文件测试程序，将之前做的index_banner.html文件存储到数据库fs.files。
因为数据库客户端使用的DataGrip，只能读取数据库信息，不能手动更改数据库信息，所以手动将cms_template.json中轮播图的templateFileId修改为5f2a0331085c8bdc83e77bc8
在浏览器打开：http://www.xuecheng.com/cms/preview/5a795ac7dd573c04508f3a56
4.2.2 添加“页面预览”链接
在页面列表添加“页面预览”链接，修改page_list.vue:
<el-table-column label="操作" width="80">
<template slot-scope="page">
<el-button size="small" type="text" @click="edit(page.row.pageId)">编辑</el-button>
<el-button size="small" type="text" @click="del(page.row.pageId)">删除</el-button>
<el-button @click="preview(page.row.pageId)" type="text" size="small">页面预览</el-button>
</template>
</el-table-column>
添加preview方法：
preview(pageId) {
window.open("http://www.xuecheng.com/cms/preview/"+pageId);
}
效果：
点击轮播图页面的“页面预览”，预览页面效果。
