本文源码: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 微服务技术栈:流量整形算法,服务熔断与降级

SpringBoot2 整合FreeMarker模板,完成页面静态化处理的更多相关文章

  1. Spring MVC 学习总结(七)——FreeMarker模板引擎与动态页面静态化

    模板引擎可以让程序实现界面与数据分离,业务代码与逻辑代码的分离,这就提升了开发效率,良好的设计也使得代码复用变得更加容易.一般的模板引擎都包含一个模板解析器和一套标记语言,好的模板引擎有简洁的语法规则 ...

  2. JavaWeb页面静态化之使用freemarker模板生成一个html静态页面

    题外话:       页面静态化(展示数据从JSP页面变成HTML页面)实现方式-->模板技术   从本质上来讲,模板技术是一个占位符动态替换技术.一个完整的模板技术需要四个元素:①模板语言(使 ...

  3. 页面静态化技术Freemarker技术的介绍及使用实例.

    一.FreeMarker简介 1.动态网页和静态网页差异 在进入主题之前我先介绍一下什么是动态网页,动态网页是指跟静态网页相对应的一种网页编程技术.静态网页,随着HTML代码的生成,页面的内容和显示效 ...

  4. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作

    这是轮播图的原始文件 运行门户需要把 nginx启动起来 单独运行轮播图.把里面的css的引用都加上网址的url 这就是单独访问到的轮播图的效果 轮播图模板的地址: 阶段5 3.微服务项目[学成在线] ...

  5. Asp.net动态页面静态化之初始NVelocity模板引擎

    Asp.net动态页面静态化之初始NVelocity模板引擎 静态页面是网页的代码都在页面中,不须要运行asp,php,jsp,.net等程序生成client网页代码的网页,静态页面网址中一般不含&q ...

  6. freemark 页面静态化

    1. 页面静态化是什么? 页面静态化有非常多含义,在WEB开发中.静态网页一般理解为站点中大部分超级链接所引用的页面是单独的HTML静态页面文件(如.htm..html等页面文件,html语言本身是静 ...

  7. fastDFS shiro权限校验 redis FreeMark页面静态化

    FastDFS是一个轻量级分布式文件系统,   使用FastDFS很容易搭建一套高性能的文件服务器集群提供文件上传.下载等服务   FastDFS服务端有两个角色:跟踪器(tracker)和存储节点( ...

  8. JSP页面静态化

    Ps:好久没写博客了,不是我太懒,是因为苦逼的我出差去上海了,天天加班 刚回成都.... 今天说说jsp页面静态化,知道静态化的朋友都不陌生,说白了就是访问后缀是html 而不是jsp. 没听说过静态 ...

  9. 大型网站提速关键技术(页面静态化,memcached,MySql优化)(三)

    页面静态化的技术实现有两种方式 使用PHP自己的缓存机制 先说明一下OB缓存的机制. ob1.php 代码:说明的ob的各个用法->项目中 ☞ 如何打开ob缓存 ①     配置php.ini ...

随机推荐

  1. SpringCloud 入门(一)

    本人也是刚接触springcloud,现在先将创建项目的过程记录下来,springcloud的理解日后再慢慢补齐,最好还是自己参考官方文档的介绍 使用工具:IDEA IDEA创建springcloud ...

  2. idea 2018版/2019版的破解

    idea 2019版破解的穿越隧道:https://www.jianshu.com/p/09c9afae9a05 idea 2018版破解的穿越隧道:https://www.jianshu.com/p ...

  3. NET 数据结构-单链表

    概念介绍: 单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素. 链表中的数据是以结点来表示的,每个结点的构成:元素(数据元素的映象) + 指针(指示后继元素存储位置),元 ...

  4. C#数据结构与算法系列(十五):排序算法(SortAlgorithm)

    1.介绍 排序是将一组数据,以指定的顺序进行排序的过程 2.分类 内部排序法:指将需要处理的所有数据都加载到内部存储器中进行排序 外部排序法:数据量过大,无法全部加载到内存中,需要借助外部存储进行排序

  5. 使用TimerTask创建定时任务

    使用TimerTask创建定时任务,打包之后应用于linux系统 step1:创建java项目 step2:代码实现 定时任务实现类CreateTask.java是打印操作者的名字 配置准换类Conf ...

  6. 九、深度优先 && 广度优先

    原文地址 一.什么是"搜索"算法? 算法是作用于具体数据结构之上的,深度优先搜索算法和广度优先搜索算法都是基于"图"这种数据结构的. 因为图这种数据结构的表达能 ...

  7. Tensorflow入门学习笔记汇总

    一.环境准备 1.安装python:下载地址https://www.python.org/downloads/windows/下载并安装(推荐python3) 2.安装对应python版本的库:htt ...

  8. MTPuTTy使用

    在开发过程中我们常常会有连接远程 lunix 服务器的需求,这个时候我们需要一个工具来帮助我们做这件事,而这类工具就是远程连接工具.常见的工具有XShell,SecureCRT,Putty等.这里我选 ...

  9. 一种基于LQR使输出更加稳定的算法(超级实用)

    已知: 令: 则: 以上三式成立 具体步骤: 状态量最后一行加入“上一时刻的控制量”: A,B根据上述方法变形: Q,R增加维度(控制量一般都为一个,此时R维度不变): 最关键的是——输出量已经变为“ ...

  10. sublime清空控制台

    解决方法 – 只需运行print('\n'*100)打印100个换行符,您将无法看到任何以前的输出,除非你向上滚动一些距离.