SpringBoot整合Thymeleaf的方法

更新時間：2021年07月06日 11:38:53 作者：興趣使然的草帽路飛

這篇文章主要介紹了SpringBoot整合Thymeleaf的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下,希望能夠幫助到你

1. 問題需求分析

在做樂優(yōu)商城時，頁面是通過Thymeleaf模板引擎渲染后返回到客戶端。當(dāng)商品詳情頁數(shù)據(jù)渲染時，在后臺需要大量的數(shù)據(jù)查詢，而后渲染得到HTML頁面。在用戶訪問量大的情況下會對數(shù)據(jù)庫造成壓力，并且請求的響應(yīng)時間過長，并發(fā)能力不高。

如何解決？

一般我們優(yōu)先會考慮使用緩存技術(shù)，比如 Redis 分布式緩存，Guava 本地緩存等。然而 Redis 只適合數(shù)據(jù)規(guī)模比較小的情況，假如數(shù)據(jù)量比較大，例如商品詳情頁，每個頁面如果10kb，100萬商品，就是10GB空間，對內(nèi)存占用比較大。此時就給緩存系統(tǒng)帶來極大壓力，如果緩存崩潰，接下來倒霉的就是數(shù)據(jù)庫了。
所以緩存并不是萬能的，某些場景需要其它技術(shù)來解決，比如靜態(tài)化技術(shù)。

2. 什么是靜態(tài)化？

靜態(tài)化是指把動態(tài)生成的HTML頁面變?yōu)?strong>靜態(tài)內(nèi)容保存，以后用戶的請求到來，直接訪問靜態(tài)頁面，不再經(jīng)過服務(wù)的渲染。
而靜態(tài)的HTML頁面可以部署在nginx中，從而大大提高并發(fā)能力，減小tomcat壓力。

3. 如何實現(xiàn)靜態(tài)化？

目前，靜態(tài)化頁面都是通過模板引擎來生成，而后保存到nginx服務(wù)器來部署。常用的模板引擎比如：

Freemarker
Velocity
Thymeleaf

樂優(yōu)項目中使用的是Thymeleaf 模板引擎!

4. Thymeleaf實現(xiàn)靜態(tài)化

4.1 概念介紹

Thymeleaf 模板引擎實現(xiàn)頁面靜態(tài)化的幾個概念介紹：

Context：運行上下文
TemplateResolver：模板解析器
TemplateEngine：模板引擎

Context：

Thymeleaf 模板中的上下文：用來保存模型數(shù)據(jù)，當(dāng)模板引擎渲染時，可以從Context上下文中獲取數(shù)據(jù)用于渲染。

當(dāng)與Spring Boot結(jié)合使用時，我們放入Model的數(shù)據(jù)就會被處理到Context，作為模板渲染的數(shù)據(jù)使用。

TemplateResolver：

Thymeleaf 模板中的模板解析器：用來讀取模板相關(guān)的配置，例如：模板存放的位置信息，模板文件名稱，模板文件的類型等等。

當(dāng)與SpringBoot結(jié)合時，TemplateResolver已經(jīng)由其創(chuàng)建完成，并且各種配置也都有默認(rèn)值，比如模板存放位置，其默認(rèn)值就是：templates。比如模板文件類型，其默認(rèn)值就是html。

TemplateEngine：

Thymeleaf 模板中的模板引擎：用來解析模板的引擎，需要使用到上下文、模板解析器。分別從兩者中獲取模板中需要的數(shù)據(jù)，模板文件。然后利用內(nèi)置的語法規(guī)則解析，從而輸出解析后的文件。來看下模板引擎進行處理的函數(shù)：

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

三個參數(shù)：

模板名稱
上下文：里面包含模型數(shù)據(jù)
writer：輸出目的地的流

在輸出時，我們可以指定輸出的目的地，如果目的地是Response的流，那就是網(wǎng)絡(luò)響應(yīng)。如果目的地是本地文件，那就實現(xiàn)靜態(tài)化了。

而在SpringBoot中已經(jīng)自動配置了模板引擎，因此不需要關(guān)心這個。我們做靜態(tài)化，就是把輸出的目的地改成本地文件即可！

4.2 具體實現(xiàn)

GoodsHtmlService

/**
 * @Auther: csp1999
 * @Date: 2020/12/16/19:43
 * @Description: 生成HTML頁面的Service
 */
@Service
public class GoodsHtmlService {
    // themleaf 模板引擎
    @Autowired
    private TemplateEngine templateEngine;
    @Autowired
    private GoodsService goodsService;
    /**
     * 根據(jù)spuId 將對應(yīng)的商品詳情頁面生成HTML靜態(tài)頁面
     *
     * @param spuId
     */
    public void createHTML(Long spuId) {
        // 初始化運行上下文: org.thymeleaf.context 包下
        Context context = new Context();
        // 設(shè)置數(shù)據(jù)模板
        // 從goodsService.loadData(spuId) 方法中獲取模板頁面中需要渲染的數(shù)據(jù)
        context.setVariables(goodsService.loadData(spuId));
        // 獲取輸出流
        // 將需要輸出的html 文件地址設(shè)置為服務(wù)器中的nginx 目錄下的html 目錄中的item文件夾下（我這里nginx 部署的是win10本地?。?
        File file = new File(
                "M:\\note\\MyProjects\\leyou\\tools\\nginx-1.14.0\\html\\item\\" + spuId + ".html");
        PrintWriter writer = null;
        try {
            writer = new PrintWriter(file);
            // 模板引擎生成靜態(tài)html 頁面
            templateEngine.process("item", context, writer);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } finally {
            // 判斷并關(guān)閉流
            if (writer != null) {
                writer.close();
            }
        }
    }
    /**
     * 新建線程處理頁面靜態(tài)化
     *
     * @param spuId
     */
    public void asyncExcute(Long spuId) {
        ThreadUtils.execute(() -> createHTML(spuId));
        /*ThreadUtils.execute(new Runnable() {
            @Override
            public void run() {
                createHtml(spuId);
            }
        });*/
    }
}

多線程工具類ThreadUtils

/**
 * @Auther: csp1999
 * @Date: 2020/12/16/20:18
 * @Description: 多線程工具類
 */
public class ThreadUtils {
    private static final ExecutorService es = Executors.newFixedThreadPool(10);
    public static void execute(Runnable runnable) {
        es.submit(runnable);
    }
}

GoodsController

在調(diào)用GoodsController訪問商品頁面的同時生成緩存的頁面：

/**
 * @Auther: csp1999
 * @Date: 2020/12/16/10:00
 * @Description: 
 */
@Controller
public class GoodsController {
    @Autowired
    private GoodsService goodsService;
    @Autowired
    private GoodsHtmlService goodsHtmlService;
    /**
     * 商品詳情也頁面
     *
     * @param id
     * @param model
     * @return
     */
    @GetMapping("/item/{id}.html")
    public String toItemPage(@PathVariable("id") Long id, Model model) {
        Map<String, Object> map = goodsService.loadData(id);
        model.addAllAttributes(map);
        // 頁面靜態(tài)化：調(diào)用createHTML(id) 方法生成靜態(tài)頁面并保存到服務(wù)器的nginx 對應(yīng)目錄下緩存
        // 通過多線程方式：
        goodsHtmlService.asyncExcute(id);
//        goodsHtmlService.createHTML(id);
        return "/item";
    }
}

注意：生成html 的代碼不能對用戶請求產(chǎn)生影響，所以這里我們使用額外的線程進行異步創(chuàng)建。

5. nginx 中進行訪問配置

# 前端前臺相關(guān)配置
server {
    listen       80;
    server_name  www.leyou.com;
    proxy_set_header X-Forwarded-Host $host;
	proxy_set_header X-Forwarded-Server $host;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	# 如果是以item 開頭的路徑，代理到前臺8084端口
	# eg: www.leyou.com/item/4586.html
	location /item {
		# 先到本地nginx 路徑下的html文件夾 中找頁面，如果有則走該頁面(相當(dāng)于緩存效果)
		root html;
		if (!-f $request_filename) { # 如果請求的文件不存在，就反向代理，通過請求去訪問該頁面
			proxy_pass http://127.0.0.1:8084;
			break;
		}
	}
	# 代理到前臺9002端口
	location / {
		proxy_pass http://127.0.0.1:9002;
		proxy_connect_timeout 600;
		proxy_read_timeout 600;
	}
}