Thymeleaf实现页面静态化

最新推荐文章于 2022-01-20 16:53:47 发布

渣渣廖

最新推荐文章于 2022-01-20 16:53:47 发布

阅读量1k

点赞数

分类专栏：工具文章标签： java

本文链接：https://blog.csdn.net/weixin_43865344/article/details/104819713

版权

工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面静态化

1.简介

1.1.问题分析

现在，我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端。在后台需要大量的数据查询，而后渲染得到HTML页面。会对数据库造成压力，并且请求的响应时间过长，并发能力不高。

如何解决？

首先我们能想到的就是缓存技术，比如之前学习过的Redis。不过Redis适合数据规模比较小的情况。假如数据量比较大，例如我们的商品详情页。每个页面如果10kb，100万商品，就是10GB空间，对内存占用比较大。此时就给缓存系统带来极大压力，如果缓存崩溃，接下来倒霉的就是数据库了。

所以缓存并不是万能的，某些场景需要其它技术来解决，比如静态化。

1.2.什么是静态化

静态化是指把动态生成的HTML页面、JSP变为静态内容(所有数据都固化，不存在占位符)保存，以后用户的请求到来，直接访问静态页面，不再经过服务的渲染。

而静态的HTML页面可以部署在nginx中，从而大大提高并发能力，减小tomcat压力。

1.3.如何实现静态化

目前，静态化页面都是通过模板引擎来生成，而后保存到nginx服务器来部署。常用的模板引擎比如：

Freemarker
Velocity
Thymeleaf

我们之前就使用的Thymeleaf，来渲染html返回给用户。Thymeleaf除了可以把渲染结果写入Response，也可以写到本地文件，从而实现静态化。

之前的用法:

添加thymeleaf的启动器
在templates目录下编写模板(test.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:text="{{msg}}"></div>
</body>
</html>

controller中获取数据并渲染页面

@RequestMapping("/test")
public String test(Model model) {
    model.addAttribute("msg", "hello thymeleaf");
    return "test";
}

2.Thymeleaf实现静态化

2.1.概念

先说下Thymeleaf中的几个概念：

Context：运行上下文

TemplateResolver：模板解析器

TemplateEngine：模板引擎

Context

上下文：用来保存模型数据，当模板引擎渲染时，可以从Context上下文中获取数据用于渲染。

当与SpringBoot结合使用时，我们放入Model的数据就会被处理到Context，作为模板渲染的数据使用。

TemplateResolver

模板解析器：用来读取模板相关的配置，例如：模板存放的位置信息，模板文件名称，模板文件的类型等等。

当与SpringBoot结合时，TemplateResolver已经由其创建完成，并且各种配置也都有默认值，比如模板存放位置，其默认值就是：templates。比如模板文件类型，其默认值就是html。

TemplateEngine

模板引擎：用来解析模板的引擎，需要使用到上下文、模板解析器。分别从两者中获取模板中需要的数据，模板文件。然后利用内置的语法规则解析，从而输出解析后的文件。

来看下模板引擎进行处理的函数：

templateEngine.process(“模板名”, context, writer);

模板名称

上下文：里面包含模型数据

writer：输出目的地的流

在输出时，我们可以指定输出的目的地，如果目的地是Response的流，那就是网络响应。如果目的地是本地文件，那就实现静态化了。

而在SpringBoot中已经自动配置了模板引擎，因此我们不需要关心这个。现在我们做静态化，就是把输出的目的地改成本地文件即可！

2.2.具体实现

创建工程，添加web启动器、thymeleaf启动器

创建模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>商品名称:[{{name}}]</p>
    <p>商品价格:[{{price}}]</p>
    <p>商品卖点:[{{sellPoint}}]</p>
</body>
</html>

编写controller，用于生成静态页面

@RestController
public class OutputController {
    @Autowired
    private TemplateEngine templateEngine;

    @RequestMapping("/out")
    public String out() {
        //将item.html模板通过模板引擎，生成静态的资源文件
        //iphone 11 5999 五颜六色
        //上下文对象，用于存放模板所需要的数据
        Context context = new Context();
        //存放数据
        context.setVariable("name", "iPhone 11");
        context.setVariable("price", "5999");
        context.setVariable("sellPoint", "五颜六色");
        //通过engine模板引擎写入本地文件
        //如果需要修改默认的前后缀，需要自己定义模板解析器
        /*
        ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
        templateResolver.setPrefix();
        templateResolver.setSuffix();
        templateEngine.setTemplateResolver(templateResolver);
        */
        //参数：1.模板(默认前缀 templates 默认后缀 .html) 2.context上下文对象 3.输入流，需要写出到的位置
        try {
            templateEngine.process("item", context, new FileWriter(new File("D:\\htmls\\11002200.html")));
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "success";

    }
}

渣渣廖

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Thymeleaf实现页面静态化

页面静态化1.简介1.1.问题分析现在，我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端。在后台需要大量的数据查询，而后渲染得到HTML页面。会对数据库造成压力，并且请求的响应时间过长，并发能力不高。如何解决？首先我们能想到的就是缓存技术，比如之前学习过的Redis。不过Redis适合数据规模比较小的情况。假如数据量比较大，例如我们的商品详情页。每个页面如果10kb，10...
复制链接

扫一扫