SpringBoot整合Thymeleaf(附源码)

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

上上签i

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

阅读量772

点赞数 3

分类专栏： SpringBoot 文章标签： java vue javascript html

本文链接：https://blog.csdn.net/weixin_43876186/article/details/108952031

版权

SpringBoot 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

SpringBoot整合Thymeleaf

在之前开发中我们对于动态页面的开发都是将页面转化为jsp页面，好处就是当我们查出数据转发到jsp页面后可以轻松显示或者交互。虽然jsp功能强大，甚至能写Java代码，但是在SpringBoot里的打包方式是jar并不是war，而且内置tomcat，并不支持jsp，那我们的动态页面怎么整合？

答案是Thymeleaf https://www.thymeleaf.org/

Thymeleaf

开始接触到这个，我们只知道这个叶子，那肯定会问，什么是Thymeleaf？官网第一句话的解释就说到：

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

翻译过来就是Thymeleaf 是一个用于Web和独立环境的现代服务器端Java模板引擎。

模板引擎

什么是模板引擎？

简单来说就是为了分离用户界面和业务数据的模板。模板拿来即用的，设计好以后填入数据就不需要更改整个页面，可以提高页面、代码的复用性。

Java中的模板引擎还有很多，我们熟悉的jsp也是之一，还有的就是Thymeleaf、FreeMaker、Velocity等。

Thymeleaf介绍

知道了模板引擎的功能，那Thymeleaf具体是用来做什么的呢？

Thymeleaf可以在HTML当做你的动态页面，也可以作为静态原型工作
Thymeleaf拥有适用于Spring Framework模块

SpringBoot官方推荐的模板引擎究竟有什么过人之处呢？

开箱即用： Thymeleaf提供标准和Spring标准两种，可以直接套用模板实现JSTL、OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
动静分离： Thymeleaf选用html作为模板页，这一点是其他任何一款模板引擎做不到的。Thymeleaf通过使用html一些特定的标签语法代表其含义，但并未破坏html结构，即便没有网络，不通过后端渲染也可以在浏览器中打开，方便界面的测试和修改。
SpringBoot官方支持，SpringBoot框架内置了很多默认配置，开发者只需要编写对应html即可，达达降低了上手难度。

动静分离

你肯定很好奇什么是动静结合？为什么html能显示动态数据？这个模板怎么实现的啊，让我们来看看。

那我们代码如何实现？

可以看到静态页面直接访问，动态页面通过映射到静态页面后，原有的含默认值的标签被替换，数据是我们controller层提供的数据，而样式依旧是html的样式

SpringBoot结合Thymeleaf

创建项目

首先创建一个新的SpringBoot项目，在依赖里面勾上Thymeleaf就行啦，

忘了也没事儿，maven咱还不会用嘛，把这个在pom.xml里面补上就行

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

编写controller

名字你想取咋取

indexController.java

package com.feng.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * <h3>springboot-thymeleaf-test</h3>
 * <p></p>
 *
 * @author : Nicer_feng
 * @date : 2020-10-07 15:17
 **/
@Controller	//声明是一个控制器啦
public class indexController {
	
    @GetMapping("ttt")	//页面的url地址，表示请求的方式为get方式（可以通过浏览器直接请求）
    public String getindex(Model model){
        model.addAttribute("name","Nicer_feng");
        model.addAttribute("age","22");
        return "ttt";	//这里返回值和templates里的ttt.html对应
    }
}

编写Thymeleaf页面

其实就是编写那个html

ttt.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 th:text="${name}">默认名字</h1>
<h1 th:text="${age}">默认年龄</h1>
</body>
</html>

这里面的th:text就是Thymeleaf的取值语法，后面会详细说明，他就是从后台的controller里面取我们设定的值，如果没网就显示默认值，有网就显示服务器内的值

启动程序

就ok了，主要是理解Thymeleaf为什么能在html里把默认数据替换成动态值的过程，能替换的元素也远不止这一个，我们可以学习一下Thymeleaf的语法

Thymeleaf语法

首先了解Thymeleaf 官网：https://www.thymeleaf.org/ ，简单看一下官网，我们去下载Thymeleaf的官方文档。

通过上面的小demo我们知道Thymeleaf是通过特殊的标签来寻找属于Thymeleaf的部分，然后再渲染部分内容，那除了th:text还有什么呢？下面列举

常用的标签

标签	作用	示例
th:id	替换id	`<input th:id="${user.id}"/>`
th:text	文本替换	`<p text:="${user.name}">bigsai</p>`
th:utext	支持html的文本替换	`<p utext:="${htmlcontent}">content</p>`
th:object	替换对象	`<div th:object="${user}"></div>`
th:value	替换值	`<input th:value="${user.name}" >`
th:each	迭代	`<tr th:each="student:${user}" >`
th:href	替换超链接	`<a th:href="@{index.html}">超链接</a>`
th:src	替换资源	`<script type="text/javascript" th:src="@{index.js}"></script>`

链接表达式: @{…}

上面我们已经学习到Thymeleaf是一个基于html的模板引擎，但是我们还是需要加入特定标签来声明和使用Thymeleaf的语法。我们需要在Thymeleaf的头部加Thymeleaf标识：

<html xmlns:th="http://www.thymeleaf.org">

在Thymeleaf 中，如果想引入链接比如link，href，src，需要使用@{资源地址}引入资源。其中资源地址可以static目录下的静态资源，也可以是互联网中的绝对资源。

引入css

 <link rel="stylesheet" th:href="@{index.css}">

引入JavaScript：

 <script type="text/javascript" th:src="@{index.js}"></script>

超链接：

<a th:href="@{index.html}">超链接</a>

这样启动程序访问页面，页面的内容就自动修改成标准html语法格式的内容：

变量表达式: ${…}

在Thymeleaf中可以通过${…}进行取值，这点和ONGL表达式语法一致。
例如咱们创建这么一个对象：

User.java

package com.feng.pojo;

/**
 * <h3>springboot-thymeleaf-test</h3>
 * <p></p>
 *
 * @author : Nicer_feng
 * @date : 2020-10-07 15:51
 **/
public class User {
    private String name;
    private int age;
    private String password;

    public User(String name, int age, String password) {
        this.name = name;
        this.age = age;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

编写测试controller

	//*****************
	@GetMapping("user")
    public String getUser(Model model){
        User user = new User("feng",22,"123456");
        List<String> list = new ArrayList<>();
        list.add("zhang san 66");
        list.add("li si 66");
        list.add("wang wu 66");
        Map<String ,String> map=new HashMap<>();
        map.put("place","北京");
        map.put("weather","sunny");
        //数据添加到model中
        model.addAttribute("name","feng");//普通字符串
        model.addAttribute("user",user);//JavaBe
        model.addAttribute("list",list);//list
        model.addAttribute("map",map);//map
        return "user";
    }
//***********

对应html

user.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User</title>
</head>
<body>

<h1>普通字符串</h1>
<h2 th:text="'我的名字是：'+${name}">默认名</h2>

<h1>JavaBean</h1>
<h2 th:text="${user.getName()}"></h2>
<h2 th:text="${user.getAge()}"></h2>
<h2 th:text="${user.getPassword()}"></h2>

<h1>取List</h1>
<h2 th:each="item:${list}">
    <h3 th:text="${item}"></h3>
</h2>


<h1>取Map</h1>
<h2 th:text="${map.get('place')}"></h2>
<h2 th:text="${map['weather']}"></h2>
<!--对于Map取值你可以${Map名['key']}来进行取值，也可以通过${Map名.key}取值-->

</body>
</html>