乐趣区

关于springboot:SpringBoot2-整合FreeMarker模板完成页面静态化处理

jiezi

本文源码：GitHub·点这里 || GitEE·点这里

一、页面动态化

1、动动态页面

动态页面

即动态网页，指曾经装载好内容 HTML 页面，无需通过申请服务器数据和编译过程，间接加载到客户浏览器上显示进去。艰深的说就是生成独立的 HTML 页面，且不与服务器进行数据交互。

优缺点形容：

  • 动态网页的内容稳固，页面加载速度极快；
  • 不与服务器交互，晋升安全性；
  • 动态网页的交互性差，数据实时性很低；
  • 维度老本高，生成很多 HTML 页面；

动静页面

指跟动态网页绝对的一种网页编程技术，页面的内容须要申请服务器获取，在不思考缓存的状况下，服务接口的数据变动，页面加载的内容也会实时变动，显示的内容却是随着数据库操作的后果而动静扭转的。

优缺点形容：

  • 动静网页的实时获取数据，提早性低；
  • 依赖数据库交互，页面保护老本很低；
  • 与数据库实时交互，安全控制的老本高；
  • 页面加载速度非常依赖数据库和服务的性能；

动静页面和动态页面有很强的相对性，比照之下也比拟好了解。

2、利用场景

动静页面动态化解决的利用场景十分多，例如：

  • 大型网站的头部和底部，动态化之后对立加载；
  • 媒体网站，内容通过渲染，间接转为 HTML 网页；
  • 高并发下，CDN 边缘节点代理的动态网页；
  • 电商网站中，简单的产品详情页解决；

动态化技术的基本：提醒服务的响应速度，或者说使响应节点提前，如个别的流程，页面 (客户端) 申请服务，服务解决，响应数据，页面装载，一系列流程走下来不仅简单，而且耗时，如果基于动态化技术解决之后，间接加载动态页面，好了申请完结。

二、流程剖析

动态页面转换是一个绝对简单的过程，其中外围流程如下：

  • 开发一个页面模板，即动态网页款式；
  • 提供接口，给页面模板获取数据；
  • 页面模板中编写数据接口返参的解析流程；
  • 基于解析引擎，把数据和页面模板合并；
  • 页面模板内容加载实现后转换为 HTML 动态页面；
  • HTML 动态页面上传到文件服务器；
  • 客户端 (Client) 获取动态页面的 url 加载显示；

主流程大抵如上，如果数据接口响应参数有变，则须要从新生成动态页，所以在数据的加载实时性下面会低很多。

三、代码实现案例

1、根底依赖

FreeMarker 是一款模板引擎：即一种基于模板和要扭转的数据，并用来生成输入文本（HTML 网页、电子邮件、配置文件、源代码等）的通用工具。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

2、页面模板

这里既应用 FreeMarker 开发的模板款式。

<html>
<head>
    <title>PageStatic</title>
</head>
<body>
主题：${myTitle}<br/>
<#assign text="{'auth':'cicada','date':'2020-07-16'}" />
<#assign data=text?eval />
作者：${data.auth} 日期：${data.date}<br/>
<table class="table table-striped table-hover table-bordered" id="editable-sample">
    <thead>
    <tr>
        <th> 规格形容 </th>
        <th> 产品详情 </th>
    </tr>
    </thead>
    <tbody>
             <#list tableList as info>
             <tr class="">
                 <td>${info.desc}</td>
                 <td><img src="${info.imgUrl}" height="80" width="80"></td>
             </tr>
             </#list>
    </tbody>
</table><br/>
<#list imgList as imgIF>
    <img src="${imgIF}" height="300" width="500">
</#list>
</body>
</html>

FreeMarker 的语法和原有的 HTML 语法基本一致，然而具备一套本人的数据处理标签，用起来不算简单。

3、解析过程

通过解析，把页面模板和数据接口的数据合并到一起即可。

@Service
public class PageServiceImpl implements PageService {private static final Logger LOGGER = LoggerFactory.getLogger(PageServiceImpl.class) ;
    private static final String PATH = "/templates/" ;

    @Override
    public void ftlToHtml() throws Exception {
        // 创立配置类
        Configuration configuration = new Configuration(Configuration.getVersion());
        // 设置模板门路
        String classpath = this.getClass().getResource("/").getPath();
        configuration.setDirectoryForTemplateLoading(new File(classpath + PATH));
        // 加载模板
        Template template = configuration.getTemplate("my-page.ftl");
        // 数据模型
        Map<String, Object> map = new HashMap<>();
        map.put("myTitle", "页面动态化(PageStatic)");
        map.put("tableList",getList()) ;
        map.put("imgList",getImgList()) ;
        // 动态化页面内容
        String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);
        LOGGER.info("content:{}",content);
        InputStream inputStream = IOUtils.toInputStream(content,"UTF-8");
        // 输入文件
        FileOutputStream fileOutputStream = new FileOutputStream(new File("F:/page/newPage.html"));
        IOUtils.copy(inputStream, fileOutputStream);
        // 敞开流
        inputStream.close();
        fileOutputStream.close();}

    private List<TableInfo> getList (){List<TableInfo> tableInfoList = new ArrayList<>() ;
        tableInfoList.add(new TableInfo(Constant.desc1, Constant.img01));
        tableInfoList.add(new TableInfo(Constant.desc2,Constant.img02));
        return tableInfoList ;
    }

    private List<String> getImgList (){List<String> imgList = new ArrayList<>() ;
        imgList.add(Constant.img02) ;
        imgList.add(Constant.img02) ;
        return imgList ;
    }
}

生成后的 HTML 页面间接应用浏览器关上即可，不再须要依赖任何数据接口服务。

四、源代码地址

GitHub·地址
https://github.com/cicadasmile/middle-ware-parent
GitEE·地址
https://gitee.com/cicadasmile/middle-ware-parent

举荐浏览：微服务架构系列

序号 题目
01 微服务架构：我的项目技术选型简介，架构图解阐明
02 微服务架构：业务架构设计，零碎分层治理
03 微服务架构：数据库选型简介，业务数据规划设计
04 微服务架构：中间件集成，公共服务封装
05 微服务架构：SpringCloud 根底组件利用设计
06 微服务架构：通过业务、利用、技术、存储，聊聊架构
07 微服务技术栈：常见注册核心组件，比照剖析
08 微服务技术栈：流量整形算法，服务熔断与降级
退出移动版