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>

代码效果：

项目运用

模板信息存储在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、页面静态化