《穿越SpringBoot 》第二章-SpringBoot Web开发 | 第1节- SpringBoot 整合 Thymeleaf

最新推荐文章于 2024-05-30 08:15:00 发布

LT Lucky

最新推荐文章于 2024-05-30 08:15:00 发布

阅读量293

点赞数 1

本文链接：https://blog.csdn.net/weixin_47371330/article/details/109133008

版权

SpringBoot 同时被 3 个专栏收录

15 篇文章 1 订阅

订阅专栏

Thymeleaf

2 篇文章 0 订阅

订阅专栏

模板引擎

2 篇文章 0 订阅

订阅专栏

Spring Boot 整合Thymeleaf

前提：

借助：`IntelliJ IDEA`，`Maven构建工具`，以及基于`SpringBoot 2.3.4`。

官人如需使用 Maven 请阅读教程：Maven 构建工具的下载与安装

官人如需使用 IDEA 请阅读教程：IntelliJ IDEA

快速入门

下载官网文档：`https://www.thymeleaf.org/` 快速入门哦！可以仿照下面的步骤自己操作。

在这里插入图片描述

为什么选择Thymeleaf

我们知道Spring MVC本身是`支持多种视图技术`。视图技术不推荐使用 JSP，官方推荐使用一些第三方的模板引擎：`Thymeleaf`、`FreeMarker`、`Mustache`、`Velocity`等各种模板引擎。

同时还为开发者提供了`自定义模板扩展`的支持。它可以完全替代 JSP 。使用嵌入式Servlet容器时，请避免使用JSP，

因为使用`JSP打包`后会存在一些`限制`,如想使用请参考下一节：《穿越SpringBoot 》第二章-SpringBoot Web开发 | 第2节- SpringBoot 整合Jsp页面

特点：

动静结合：

Thymeleaf 在 `有网络和无网络的环境`下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员`在服务器查看带数据的动态页面效果`。这是由于它支持 `html 原型`，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器`解释 html 时`会忽略`未定义的标签属性`，所以 thymeleaf 的模板可以静态地运行；当`有数据返回到页面`时，Thymeleaf 标签会`动态地替换掉静态内容`，使页面动态显示。

开箱即用：

它提供`标准`和`spring标准`两种方言，可以`直接套用模板实现JSTL、 OGNL`表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以`扩展和创建自定义`的方言。

多方言支持：

Thymeleaf 提供spring标准方言和一个`与SpringMVC 完美集成`的可选模块，可以快速的`实现表单绑定`、`属性编辑器`、`国际化`等功能。

与SpringBoot完美整合**

SpringBoot提供了`Thymeleaf的默认配置`，并且为Thymeleaf设置了`视图解析器`，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。

本质上，它们跟Spring MVC继承时，是提供了Spring MVC的 ViewResolver 组件的自定义实现。

比如：Thymeleaf 的实现是 ThymeleafViewResolver 与解析JSP的InternalViewResolver类似.

使用

目录结构：

在这里插入图片描述

pom.xml依赖：

要想使用Thymeleaf 必须在spring boot下的导入如下图所示依赖启动器。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.3.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>1012</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>1012</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<!--  thymeleaf启动器  -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<!--	web启动器	-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!--	热部署	-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-configuration-processor</artifactId>
			<optional>true</optional>
		</dependency>
		<!--	lombok	-->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

编写DemoController类：

`创建一个DemoController 用来映射HTTP请求与页面的跳转，用到的注解@Controller @RequestMapping`

package com.example.boot1012.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
@Controller
public class DemoController {
    @RequestMapping("/demo1")
    public String demo1(Model model){
        Map<String,Object> gf1=new HashMap<>();
        gf1.put("name","苹果");
        gf1.put("price",15);
        Map<String,Object> gf2=new HashMap<>();
        gf2.put("name","香蕉");
        gf2.put("price",16);
        Map<String,Object> gf3=new HashMap<>();
        gf3.put("name","橘子");
        gf3.put("price",17);

        Map<String,Object> map=new HashMap<>();

        map.put("username","张三");
        map.put("age",30);
        map.put("fruit", Arrays.asList(gf1,gf2,gf3));
        model.addAttribute("user",map);
        return "demo1";
    }

}

编写demo1.html、fragment.html

演示：`thymeleaf模板引擎`相关用法:

具体怎么用请参考：Thymeleaf 模板引擎用法大全。

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>demo1.html</title>
</head>
<link rel="stylesheet" href="../static/style.css" th:href="@{/style.css }">
<body>
    <!--header头部片段引用 th:insert="~{引用的文件名 ：：fragment定义的头部名字}"-->
    <div th:insert="~{fragment::header}"/>
    <hr>
        <h1>Hello Thymeleaf</h1>
    <h2>Thymeleaf 模板</h2>
    <input type="text" name="username" value="李四" th:value="${user.username}">

    <br>
    
    <span th:if="${user.age <= 25}" th:text="${user.age}岁的 + '妹子'"></span>
    <span th:if="${user.age > 25}" th:text="|${user.age}岁的  老女人|"></span>
    
    <br>
    
    <ul>
        <li th:each="f : ${user.fruit}" th:text="${f.name}">水果</li>
    </ul>
    
    <ul>
        <li th:each="f : ${user.fruit}" th:object="${f}">
            <div>
                <span th:text="*{name}">水果</span>
                <span th:text="${f.price}">价格</span>
            </div>
        </li>
    </ul>

    <hr>

    <!--footer底部部片段引用 th:insert-->
    <div th:insert="~{fragment::footer}"/>
</body>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>fragment.html定义公用的片段</title>
</head>
<body>
    <div th:fragment="header">
        <h1>这是页面的header部分</h1>
    </div>
    <div th:fragment="footer">
        <h1>这是页面的footer部分</h1>
    </div>
</body>
</html>