SpringBoot集成Thymeleaf模板引擎

即将翻身的咸鱼

已于 2022-03-09 10:51:57 修改

阅读量756

点赞数 1

文章标签： java spring

于 2022-03-08 17:24:40 首次发布

本文链接：https://blog.csdn.net/liyuuhuvnjjv/article/details/123357785

版权

本文详细介绍了 Themeleaf 模板引擎在 SpringBoot 中的使用，包括依赖引入、配置、访问静态页面、处理对象和列表的方法。通过实例展示了如何创建404、500错误页面，以及如何在模板中处理博主信息和列表数据，提供了一个直观的实践指南。

摘要由CSDN通过智能技术生成

Themeleaf

简单来说，Themeleaf是一个适用于web和独立环境的现代服务器Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本，他可以完全替代JSP

他的优点：

1.开箱即用，它提供标准和SPring标准两种方言，可以直接套用模板实现JSTL，OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰
2.Themeleaf提供Spring标准方言和一个与SpringMVC完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

文章目录

1.依赖导入

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

在html页面上使用thymeleaf模板的时候，需要在页面标签上加入

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

2.相关配置

Themeleaf默认开启页面缓存，所以在开发时候，需要关闭这个页面缓存，否则会有缓存，导致页面没法及时看到更新后的效果。

spring:
  thymeleaf:
    cache: false # 关闭缓存

3.Themeleaf的使用

3.1 访问静态页面

我们做网站的时候，都会做一个404或者500页面，为了出错时给用户一个友好的展示，而不至于一堆异常信息抛出来，SpringBoot会自动识别模板目录（templates/）下的404.html和500.html文件，在templates/目录下新建一个error文件夹，专门放置错误的html页面，然后分别打印些信息，以404.html和500.html为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    这是404页面
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是500页面
</body>
</html>

在写一个controller来测试一下404和500页面

package com.example.springdemo1.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
@RequestMapping("/test")
public class testController5 {
    @RequestMapping("/test404")
    public String test404(){
        return "404";
    }

    @RequestMapping("/test500")
    public String test500(){
        int x = 1/0;
        return "500";
    }
}

当在浏览器中输入http://localhost:8082/test/test400时，故意输入错误，找不到对应方法，就会跳转到404.html页面
当在浏览器中输入http://localhost:8082/test/test500时，会抛出异常，自动跳转至500页面

注意点：

这里不再使用@RestController注解，而是使用@Controller注解，因为@RestController会自动的把返回的数据转成json格式，在使用模板引擎时，返回的是视图文件名，比如上面的Controller中是返回到index.html页面，如果使用@RestController的话，会把index当做String解析了，直接返回到页面了，而不是去找index.html页面了。

3.2 Themeleaf中处理对象

举个例子：我么在做个人博客的时候，需要给前端传博主相关信息来展示，那么我们会封装成一个博主对象，比如：

package com.example.springdemo1.pojo;

public class Blogger {
    private int id;
    private String userName;
    private String passWord;

    public int getId() {
        return id;
    }

    public Blogger(int id, String userName, String passWord) {
        this.id = id;
        this.userName = userName;
        this.passWord = passWord;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassWord() {
        return passWord;
    }

    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }
}

然后在controller层中初始化一下

package com.example.springdemo1.controller;

import com.example.springdemo1.pojo.Blogger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/test")
public class testController6 {
    @GetMapping("/getBlogger")
    public String getBlogger(Model model){
        Blogger blogger = new Blogger(1,"lyh","123456");
        //Model存入数据的书写方式，Model是一个特殊维护的类，相当于维护一个Map一样，
        //而Model中的数据通过controller层的关联绑定在view层(即Thymeleaf中)可以直接使用
        model.addAttribute("blogger",blogger);
        return "blogger";//与templates中blogger.html对应
    }
}

我们先初始化一个Blogger对象，然后该对象放到Model中，然后返回到blogger.html页面去渲染，接下来我们再写一个blogger.html来渲染blogger信息：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博主信息</title>
</head>
<body>
<form action="" th:object="${blogger}" >
    用户编号：<input name="id" th:value="${blogger.id}"/><br>
    用户姓名：<input type="text" name="username" th:value="${blogger.getUserName()}" /><br>
    登陆密码：<input type="text" name="password" th:value="*{passWord}" />
</form>
</body>
</html>

在Themeleaf模板中，使用th:object="${}"来获取对象信息，然后在表单里面可以有三种方式来获取对象属性。如下：

使用th:value="*{属性名}"
使用th:value="${对象.属性名}",对象指的是上面使用th:object获取的对象
使用th:value="${对象.get方法}",对象指的是上面使用th:object获取的对象

在浏览器输入：http://localhost:8082/test/getBlogger
在这里插入图片描述

3.2 Thymeleaf中处理list

处理list的话，和处理上面介绍的对象差不多，但是需要在Thymeleaf中进行遍历，我们现在COntroller中模拟一个List

package com.example.springdemo1.controller;

import com.example.springdemo1.pojo.Blogger;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/test")
public class testController7 {
    @GetMapping("/getList")
    public String getList(Model model){
        Blogger blogger1 = new Blogger(1,"lyh","123456");
        Blogger blogger2 = new Blogger(2,"lyh2","123456");
        List<Blogger> blogList = new ArrayList<>();
        blogList.add(blogger1);
        blogList.add(blogger2);
        model.addAttribute("blogList",blogList);
        return "blogList";
    }
}

接下来我们写一个blogList.html来获取该list信息，然后在list.html中遍历这个list。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博主信息</title>
</head>
<body>
<form action="" th:each="blogger:${blogList}" >
    用户编号：<input name="id" th:value="${blogger.id}"/><br>
    用户姓名：<input type="text" name="username" th:value="${blogger.getUserName()}" /><br>
    登陆密码：<input type="text" name="password" th:value="${blogger.getPassWord()}" />
</form>
</body>
</html>