0
点赞
收藏
分享

微信扫一扫

4、页面静态化

Freemarker

Freemarker是一个用Java开发的模板引擎,用来生成输出文本的工具
模板+数据模型=输出

1、数据模型

基本类型、List、Map、Pojo等复杂类型。
工作原理:

pom中添加freemarker跟common-io依赖
yml文件中配置freemarker
后台拼接完数据后返回模板文件名称(test)
例如:​​​return "test1";​​,访问该controller,会访问test1.ftl页面自动填充数据

代码实现:
使用freemarker中的Configuration类获取到模板文件,接口获取到数据模型map,然后利用

String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);

将数据静态化,然后利用common-io包中的IOUtils将HTML数据文件输出即可

指令:

1、注释:<#‐‐和‐‐>
2、取值:即​​​${内容}​​​部分
3、FTL指令:
循环:名字前加#予以区分,例如:​​​<#list stus as stu>​​​遍历该集合
_index:得到循环的下标,使用方法是在stu后边加"_index",它的值是从0开始,例如:​​​${stu_index + 1}​​​ 判断:if判断,例如:​​<#if stu.name =='小明'>style="background:red;"</#if>​​ 空值处理:
判断某变量是否存在:​​<#if stus??>​​ 如果该变量存在返回true,否则返回false
​${name!''}​​表示如果name为空显示空字符串。
内建函数:
日期格式化:
显示年月日: ​​${today?date}​​ 显示时分秒:​​${today?time}​​ 显示日期+时间:​​${today?datetime}​​ 自定义格式化: ​​${today?string("yyyy年MM月")}​

具体代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
</head>
<body>
<#--取值-->
Hello ${name}!
<br/>
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>钱包</td>
</tr>
<#--遍历list集合stus-->
<#list stus as stu>
<tr>
<#--_index:得到循环的下标,从0开始-->
<td>${stu_index + 1}</td>
<td <#if stu.name =='小明'>style="background:red;"</#if>>${stu.name}</td>
<td>${stu.age}</td>
<td>${stu.mondy}</td>
</tr>
</#list>

</table>
<br/><br/>
输出stu1的学生信息:<br/>
<#--输出map集合stuMap中的stu1内容-->
姓名:${stuMap['stu1'].name}<br/>
年龄:${stuMap['stu1'].age}<br/>
输出stu1的学生信息:<br/>
<#--遍历对象stu1-->
姓名:${stu1.name}<br/>
年龄:${stu1.age}<br/>
遍历输出两个学生信息:<br/>
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>钱包</td>
</tr>
<#--遍历map集合stuMap-->
<#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>
</br>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>出生日期</td>
<td>钱包</td>
<td>最好的朋友</td>
<td>朋友个数</td>
<td>朋友列表</td>
</tr>
<#--判断某变量是否存在使用“??-->
<#if stus??>
<#list stus as stu>
<tr>
<#--给变量设置默认值使用 !”,当变量为空时显示默认值。-->
<td>${stu.name!''}</td>
<td>${stu.age}</td>
<td>${(stu.birthday?date)!''}</td>
<td>${stu.mondy}</td>
<#--如果stu或bestFriend或name为空默认显示空字符串。-->
<td>${(stu.bestFriend.name)!''}</td>
<#--查询某个集合的大小-->
<td>${(stu.friends?size)!0}</td>
<td>
<#if stu.friends??>
<#list stu.friends as firend>
${firend.name!''}<br/>
</#list>
</#if>
</td>
</tr>
</#list>
</#if>

</table>
<br/>
<#--将json字符串text转成对象data-->
<#assign text="{'bank':'工商银行','account':'10101920201920212'}" />
<#assign data=text?eval />
开户行:${data.bank} 账号:${data.account}
</body>
</html>

代码效果:
4、页面静态化_数据

项目运用

模板信息存储在MongoDB数据库,模板文件存储在GridFS文件系统中
需求:cms系统为了实现快速根据用户需求修改页面内容并上线的需求
以前:之前都是由开发者人工编写html及JS文件,CMS系统是通过程序自动化对页面内容进行修改,通过页面静态化技术生成html页面
如何实现:一个页面等于模板加数据,在添加页面的时候我们选择了页面的模板
具体流程:

1、获取模型数据,先知道数据模型的结构才可以编写模板
2、制作模板
3、将模型和模板组成的页面进行静态化
4、将静态化生成的html页面存放文件系统GridFS中
5、将存放在文件系统中的html文件发布到服务器

如何获取页面的数据模型?

在编辑页面信息时指定一个DataUrl,此url基于Http方式,cms通过Http远程调用的方法请求DataUrl获取数据模型
此页面是轮播图页面,它的DataUrl由开发轮播图管理的前端来提供
DataUrl就是一个请求后端数据的接口,该接口查询数据库获取数据模型
页面静态化流程:

1、静态化程序首先读取页面获取DataUrl
2、静态化程序远程请求DataUrl得到数据模型
3、获取页面模板
4、执行页面静态化

DataUrl:
​​​"dataUrl" : "http://localhost:31001/cms/config/getmodel/5a791725dd573c3574ee333f"​

为什么要使用远程请求?

前端是使用ajax去请求接口,后端不同模块之间的调用就会使用到远程调用
远程请求接口:
使用OkHttpClient完成http请求
具体流程:

1、pom中添加okhttp依赖
2、在SpringBoot启动类中配置 RestTemplate
3、调用RestTemplate的getForEntity方法即可请求url获取参数

ResponseEntity<Map> forEntity = restTemplate.getForEntity
("http://localhost:31001/cms/config/get/5a791725dd573c3574ee333f", Map.class);

GridFS介绍

GridFS是MongoDB提供的用于持久化存储文件的模块,CMS使用MongoDB存储数据,使用GridFS可以快速集成开发
工作原理:

GridFS存储文件是将文件分块存储,文件会按照256KB的大小分割成多个块进行存储
GridFS使用两个集合(collection)存储文件,一个集合是chunks, 用于存储文件的二进制数据
一个集合是files,用于存储文件的元数据信息(文件名称、块大小、上传时间等信息)

1、存文件

通过文件输入流读取到该文件
然后使用GridFsTemplate的store方法存储文件

ObjectId objectId = gridFsTemplate.store(fileInputStream, "index_banner.ftl");

存储原理说明:

文件存储成功得到一个文件id
此文件id是fs.files集合中的主键
可以通过文件id查询fs.chunks表中的记录,得到文件的内容

2、读取文件

定义Mongodb的配置类MongoConfig
使用GridFsTemplate中findOne获取到该文件内容
使用GridFSBucket中openDownloadStream获取流对象数据

3、删除文件

通过主键id使用GridFsTemplate中delete删除文件

整个页面静态化的流程:

1、在编辑cms页面信息界面填写DataUrl,将此字段保存到cms_page集合中
2、静态化程序获取页面的DataUrl—通过pageId获取到该DataUrl字段
3、静态化程序远程请求DataUrl获取数据模型
4、静态化程序获取页面的模板信息
5、执行页面静态

通过id到cmsPage表中找到DataUrl字段
通过restTemplate请求dataUrl获取数据
通过id到cmsPage表中找到TemplateId字段
通过TemplateId到CmsTemplate表中找到模板文件TemplateFileId字段
通过TemplateFileId到fs.files表获取到模板文件
通过generateHtml方法执行静态化
其中重要的方法:​​​String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);​​​,传模板文件和模板数据
最后将该方法返回的结果返回;

页面预览开发:

页面在发布前增加页面预览的步骤,方便用户检查页面内容是否正确
页面预览流程:

1、用户进入cms前端,点击“页面预览”在浏览器请求cms页面预览链接
2、cms根据页面id查询DataUrl并远程请求DataUrl获取数据模型
3、cms根据页面id查询页面模板内容
4、cms执行页面静态化
5、cms将静态化内容响应给浏览器
6、在浏览器展示页面内容,实现页面预览的功能

环境配置:
1、pom中引入freemarker依赖
2、在application.yml中配置freemarker
创建CmsPagePreviewController类,用于页面预览;
将静态化后的数据输出到浏览器:

ServletOutputStream outputStream = response.getOutputStream(); 
outputStream.write(pageHtml.getBytes("utf‐8"));

通过nginx代理进行页面预览:

1、虚拟主机配置:

#页面预览 
location /cms/preview/{
proxy_pass http://cms_server_pool/cms/preview/;
}

2、配置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
4、页面静态化_数据_02


举报

相关推荐

0 条评论