页面静态化需求
1、为什么要进行页面管理？
本项目cms系统的功能就是根据运营需要，对门户等子系统的部分页面进行管理，从而实现快速根据用户需求修改
页面内容并上线的需求。
2、如何修改页面的内容？
在开发中修改页面内容是需要人工编写html及JS文件，CMS系统是通过程序自动化的对页面内容进行修改，通过
页面静态化技术生成html页面。
3、如何对页面进行静态化？
采用页面模板+数据 = 输出html页面的技术实现静态化。
4、静态化的html页面存放在哪里?
生成对的静态化的页面，由cms程序自动发布到服务器（门户服务器丶其他）中，实现页面的快速上线。
FreeMarker研究
它是一种模板引擎，基于模板+数据，输出文本（html文件、json文件、java文件）
核心指令
数据模型
Freemarker静态化依赖数据模型和模板，下边定义数据模型：
下边方法形参map即为freemarker静态化所需要的数据模型，在map中填充数据：
@RequestMapping("/test1")
public String freemarker(Map<String, Object> map){
//向数据模型放数据
map.put("name","黑马程序员");
Student stu1 = new Student();
stu1.setName("小明");
stu1.setAge(18);
stu1.setMondy(1000.86f);
stu1.setBirthday(new Date());
Student stu2 = new Student();
stu2.setName("小红");
stu2.setMondy(200.1f);
stu2.setAge(19);
// stu2.setBirthday(new Date());
List<Student> friends = new ArrayList<>();
friends.add(stu1);
stu2.setFriends(friends);
stu2.setBestFriend(stu1);
List<Student> stus = new ArrayList<>();
stus.add(stu1);
stus.add(stu2);
//向数据模型放数据
map.put("stus",stus);
//准备map数据
HashMap<String,Student> stuMap = new HashMap<>();
stuMap.put("stu1",stu1);
stuMap.put("stu2",stu2);
//向数据模型放数据
map.put("stu1",stu1);
//向数据模型放数据
map.put("stuMap",stuMap);
//返回模板文件名称
return "test1";
}
List指令
1、注释，即<#‐‐和‐‐>，介于其之间的内容会被freemarker忽略
2、插值（Interpolation）：即${..}部分,freemarker会用真实的值代替${..}
3、FTL指令：和HTML标记类似，名字前加#予以区分，Freemarker会解析标签中的表达式或逻辑。
4、文本，仅文本信息，这些不是freemarker的注释、插值、FTL指令的内容会被freemarker忽略解析，直接输出内
容。
在test1.ftl模板中使用list指令遍历数据模型中的数据：
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>钱包</td>
</tr>
<#list stus as stu>
<tr>
<td>${stu_index + 1}</td>
<td>${stu.name}</td>
<td>${stu.age}</td>
<td>${stu.mondy}</td>
</tr>
</#list>
</table>
3、输出：
Hello 黑马程序员! 序号 姓名 年龄 钱包 1 小明 18 1,000.86 2 小红 19 200.1
遍历Map数据
1、数据模型
使用map指令遍历数据模型中的stuMap。
2、模板
输出stu1的学生信息：<br/>
姓名：${stuMap[‘stu1‘].name}<br/>
年龄：${stuMap[‘stu1‘].age}<br/>
输出stu1的学生信息：<br/>
姓名：${stuMap.stu1.name}<br/>
年龄：${stuMap.stu1.age}<br/>
遍历输出两个学生信息：<br/>
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>钱包</td>
</tr>
<#list stuMap?keys as k>
<tr>
<td>${k_index + 1}</td>
<td>${stuMap[k].name}</td>
<td>${stuMap[k].age}</td>
<td >${stuMap[k].mondy}</td>
</tr>
</#list>
</table>
3 、输出
输出stu1的学生信息： 姓名：小明 年龄：18 输出stu1的学生信息： 姓名：小明 年龄：18 遍历输出两个学生信息： 序号 姓名 年龄 钱包 1 小红 19 200.1 2 小明 18 1,000.86
静态化测试
在cms中使用freemarker将页面生成html文件，本节测试html文件生成的方法：
1、使用模板文件静态化
定义模板文件，使用freemarker静态化程序生成html文件。
2、使用模板字符串静态化
定义模板字符串，使用freemarker静态化程序生成html文件。
使用模板文件静态化
在test下创建测试类，并且将main下的resource/templates拷贝到test下，本次测试使用之前我们在main下创建
的模板文件。
//基于模板生成静态化文件
@Test
public void testGenerateHtml() throws IOException, TemplateException {
//创建配置类
Configuration configuration=new Configuration(Configuration.getVersion());
//设置模板路径
String classpath = this.getClass().getResource("/").getPath();
configuration.setDirectoryForTemplateLoading(new File(classpath + "/templates/"));
//设置字符集
configuration.setDefaultEncoding("utf‐8");
//加载模板
Template template = configuration.getTemplate("test1.ftl");
//数据模型
Map<String,Object> map = new HashMap<>();
map.put("name","黑马程序员");
//静态化
String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);
//静态化内容
System.out.println(content);
InputStream inputStream = IOUtils.toInputStream(content);
//输出文件
FileOutputStream fileOutputStream = new FileOutputStream(new File("d:/test1.html"));
int copy = IOUtils.copy(inputStream, fileOutputStream);
}
使用模板字符串静态化
//基于模板字符串生成静态化文件
@Test
public void testGenerateHtmlByString() throws IOException, TemplateException {
//创建配置类
Configuration configuration=new Configuration(Configuration.getVersion());
//模板内容，这里测试时使用简单的字符串作为模板
String templateString="" +
"<html>\n" +
" <head></head>\n" +
" <body>\n" +
" 名称：${name}\n" +
" </body>\n" +
"</html>";
//模板加载器
StringTemplateLoader stringTemplateLoader = new StringTemplateLoader();
stringTemplateLoader.putTemplate("template",templateString);
configuration.setTemplateLoader(stringTemplateLoader);
//得到模板
Template template = configuration.getTemplate("template","utf‐8");
//数据模型
Map<String,Object> map = new HashMap<>();
map.put("name","黑马程序员");
//静态化
String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);
//静态化内容
System.out.println(content);
InputStream inputStream = IOUtils.toInputStream(content);
//输出文件
FileOutputStream fileOutputStream = new FileOutputStream(new File("d:/test1.html"));
IOUtils.copy(inputStream, fileOutputStream);
}
页面静态化
通过上边对FreeMarker的研究我们得出：模板+数据模型=输出，页面静态化需要准备数据模型和模板，先知道数
据模型的结构才可以编写模板，因为在模板中要引用数据模型中的数据，本节将系统讲解CMS页面数据模型获取、
模板管理及静态化的过程。
管理员怎么知道DataUrl的内容呢？
举例说明：
此页面是轮播图页面，它的DataUrl由开发轮播图管理的程序员提供。
此页面是精品课程推荐页面，它的DataUrl由精品课程推荐的程序员提供。
此页面是课程详情页面，它的DataUrl由课程管理的程序员提供。
页面静态化流程如下图：
1、静态化程序首先读取页面获取DataUrl。
2、静态化程序远程请求DataUrl得到数据模型。
3、获取页面模板。
4、执行页面静态化。
轮播图DataUrl接口
CMS中有轮播图管理、精品课程推荐的功能，以轮播图管理为例说明：轮播图管理是通过可视化的操作界面由管理
员指定轮播图图片地址，最后将轮播图图片地址保存在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;//项目url
private Map mapValue;//项目复杂值
private String value;//项目简单值
}
根据配置信息Id查询配置信息，定义接口如下：
@Api(value="cms配置管理接口",description = "cms配置管理接口，提供数据模型的管理、查询接口")
public interface CmsConfigControllerApi {
@ApiOperation("根据id查询CMS配置信息")
public CmsConfig getmodel(String id);
}
Dao
定义CmsConfig的dao接口：
public interface CmsConfigRepository extends MongoRepository<CmsConfig,String> {
}
Service
定义CmsConfigService实现根据id查询CmsConfig信息。
@Service
public class CmsConfigService {
@Autowired
CmsConfigRepository cmsConfigRepository;
//根据id查询配置管理信息
public CmsConfig getConfigById(String id){
Optional<CmsConfig> optional = cmsConfigRepository.findById(id);
if(optional.isPresent()){
CmsConfig cmsConfig = optional.get();
return cmsConfig;
}
return null;
}
}
Controller
@RestController
@RequestMapping("/cms/config")
public class CmsConfigController implements CmsConfigControllerApi {
@Autowired
CmsConfigService cmsConfigService;
@Override
@GetMapping("/getmodel/{id}")
public CmsConfig getmodel(@PathVariable("id") String id) {
return cmsConfigService.getConfigById(id);
}
}
测试
使用postman测试接口：
get请求：http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f （轮播图信息）
模板管理
1、要增加新模板首先需要制作模板，模板的内容就是Freemarker ftl模板内容。
2、通过模板管理模块功能新增模板、修改模板、删除模板。
3、模板信息存储在MongoDB数据库，其中模板信息存储在cms_template集合中，模板文件存储在GridFS文件系
统中。
模板制作
1、轮播图页面原型
在门户的静态工程目录有轮播图的静态页面，路径是：/include/index_banner.html。
<!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(../img/widget‐bannerB.jpg);"></div>
<div class="item" style="background‐image: url(../img/widget‐bannerA.jpg);"></div>
<div class="item" style="background‐image: url(../img/widget‐banner3.png);"></div>
<div class="item" style="background‐image: url(../img/widget‐bannerB.jpg);"></div>
<div class="item" style="background‐image: url(../img/widget‐bannerA.jpg);"></div>
<div class="item" style="background‐image: url(../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();
在freemarker测试工程中新建模板index_banner.ftl。
roll();
});
var timer = setInterval(roll, 3000);
$(‘.banner‐item‘).mouseover(function() {
clearInterval(timer)
});
$(‘.banner‐item‘).mouseout(function() {
timer = setInterval(roll, 3000)
});
</script>
</body>
</html>
2 、数据模型为：
通过http 获取到数据模型如下：
下图数据模型的图片路径改成可以浏览的正确路径。
{
"id": "5a791725dd573c3574ee333f",
"name": "轮播图",
"model": [
{
"key": "banner1",
"name": "轮播图1地址",
"url": null,
"mapValue": null,
"value": "http://www.xuecheng.com/img/widget‐bannerB.jpg"
},
{
"key": "banner2",
"name": "轮播图2地址",
"url": null,
"mapValue": null,
"value": "http://www.xuecheng.com/img/widget‐bannerA.jpg"
},
{
"key": "banner3",
"name": "轮播图3地址",
"url": null,
"mapValue": null,
"value": "http://www.xuecheng.com/img/widget‐banner3.jpg"
}
]
}
3、编写模板
在freemarker测试工程中新建模板index_banner.ftl。
<!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">
<#if model??>
<#list model as item>
<div class="item" style="background‐image: url(${item.value});"></div>
</#list>
</#if>
<#‐‐ <div class="item" style="background‐image: url(../img/widget‐bannerA.jpg);"></div>
<div class="item" style="background‐image: url(../img/widget‐banner3.png);"></div>
<div class="item" style="background‐image: url(../img/widget‐bannerB.jpg);"></div>
<div class="item" style="background‐image: url(../img/widget‐bannerA.jpg);"></div>
<div class="item" style="background‐image: url(../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++;
请求：http://localhost:8088/freemarker/banner
}
}
$(‘.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>
模板测试
在freemarker测试工程编写一个方法测试轮播图模板，代码如下：
@Autowired
RestTemplate restTemplate;
@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
GridFS介绍
GridFS是MongoDB提供的用于持久化存储文件的模块，CMS使用MongoDB存储数据，使用GridFS可以快速集成
开发。
它的工作原理是：
在GridFS存储文件是将文件分块存储，文件会按照256KB的大小分割成多个块进行存储，GridFS使用两个集合
（collection）存储文件，一个集合是chunks, 用于存储文件的二进制数据；一个集合是files，用于存储文件的元数
据信息（文件名称、块大小、上传时间等信息）。
从GridFS中读取文件要对文件的各各块进行组装、合并。
静态化测试
测试整个页面静态化的流程，流程如下：
1、填写页面DataUrl
在编辑cms页面信息界面填写DataUrl，将此字段保存到cms_page集合中。
2、静态化程序获取页面的DataUrl
3、静态化程序远程请求DataUrl获取数据模型。
4、静态化程序获取页面的模板信息
5、执行页面静态化
填写页面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());
静态化程序
在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);
//获取模板
北京市昌平区建材城西路金燕龙办公楼一层 电话：400-618-9090
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;
}
原文地址：https://www.cnblogs.com/anan-java/p/12207777.html
时间： 2024-08-30 13:02:39