SpringBoot系列（六）集成thymeleaf详解版

1. thymeleaf简介

1. Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。

2. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而可以在开发团队中加强协作。

3. Thymeleaf拥有适用于Spring Framework的模块，与您喜欢的工具的大量集成以及插入您自己的功能的能力，对于现代HTML5 JVM Web开发而言，Thymeleaf是理想的选择-尽管它还有很多工作要做。

2. thymeleaf特点

1. thymeleaf在有网络无网络的环境下都可以运行，所以可以直接在浏览器打开查看静态页面效果。它支持HTML原型，可以在HTML标签里面添加其他属性来实现数据渲染。

2. thymeleaf具有开箱即用的特性，Thymeleaf是Spring boot推荐使用的模版引擎，直接以html显示，前后端可以很好的分离。

3. thymeleaf在SpringBoot的应用

1. 国际化，渲染不同国家的语言

2. 共同页面显示，比如统一异常页面处理，共同的页面处理

4. SpringBoot引入Thymeleaf

新建一个Springboot web项目，然后添加以下依赖。

<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>

然后在配置文件里面添加如下依赖。

spring:

  thymeleaf:

    cache: false

    prefix: classpath:/templates/

    encoding: UTF-8 #编码

    suffix: .html #模板后缀

    mode: HTML #模板

配置说明：

cache这一行是将页面的缓存关闭，不然我们改变页面之后可能不能及时看到更改的内容，默认是true。

prefix是配置thymeleaf模板所在的位置。

encoding 是配置thymeleaf文档的编码，后面的就不说了

5. controller配置

上面我们配置好了环境之后就可以创建一个controller文件夹，然后写一个controller，来测试我们的thymeleaf是否成功引入。顺便创建一个对象。

代码：

@Controller

public class ThymeleafController {

    @GetMapping("/getStudents")

    public ModelAndView getStudent(){

        List<Student> students = new LinkedList<>();

        Student student = new Student();

        student.setId(1);

        student.setName("全栈学习笔记");

        student.setAge(21);

        Student student1 = new Student();

        student1.setId(2);

        student1.setName("张三");

        student1.setAge(22);

        students.add(student);

        students.add(student1);

        ModelAndView modelAndView = new ModelAndView();

        modelAndView.addObject("students",students);

        modelAndView.setViewName("students");

        return modelAndView;

    }

}

代码解释 ：我们创建一个list，然后在list里面添加数据，一遍一次将数据传到页面使用。然后我们创建一个ModelAndView的对象，将list放入这个modeAndView对象中，第一个参数是需要放到model中的属性名称相当于是一个键，第二个是值，是一个对象。然后利用setViewName方法，设置要跳转的页面或者说是将数据传到对应的页面。

最外层我们使用了一个 @Controller，这个注解是用来返回一个页面或者视图层的。

当然，返回ModelAndView对象只是一种方法，还有其他的方法，比如说下面这样

@RequestMapping("/getString")

public String getString(HttpServletRequest request){

    String name = "全栈学习笔记";

    request.setAttribute("name",name);

    return "index.html";

}

利用http的request传值。

然后还有这样

@RequestMapping("/getModel")

public String getModel(Model model){

    model.addAttribute("key","这是一个键");

    return "index.html";

}

去掉末尾的.html也可以，因为我们在配置文件里面设置了文件的格式为HTML文件。return的字符串都是对应的HTML文件的名称。

实体类代码如下：

/**

 * (Student)实体类

 *

 * @author 全栈学习笔记

 * @since 2020-04-14 11:39:10

 */

public class Student  {

    private static final long serialVersionUID = -91969758749726312L;

    /**

    * 唯一标识id

    */

    private Integer id;

    /**

    * 姓名

    */

    private String name;

    /**

    * 年龄

    */

    private Integer age;

    //省略get，set方法，自己加上

}

6. 页面编写

写好代码就等页面了，在templates文件夹下面创建一个students.html文件，编写如下代码

<!DOCTYPE html>

<html lang="en" xmlns:th="https://www.thymeleaf.org/">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1">

    <tr>

        <td>ID</td>

        <td>姓名</td>

        <td>年龄</td>

    </tr>

    <tr th:each="student:${students}">

        <td th:text="${student.id}"></td>

        <td th:text="${student.name}"></td>

        <td th:text="${student.age}"></td>

    </tr>

</table>

</body>

</html>

这里有一个很重要的事情就是，我们使用thymeleaf模板之前必须先引入thymeleaf，如下。

<html lang="en" xmlns:th="https://www.thymeleaf.org/">

这个很关键，不然你就用不了这个thymeleaf语法规则。

代码说明：你可以看到th:each 这个语法，是用来遍历的，类似于for循环，然后我们通过th:text 这个语法来渲染文字。然后还有一些其他的语法，比如说遍历对象

<div th:object="${student}">

    <p th:text="id"></p>

    <p th:text="name"></p>

    <p th:text="age"></p>

</div>

其他多余的语法规则这里就不一一讲解了。

常用的语法：

<!-- 逻辑判断 -->

th:if

th:else

<!-- 分支控制 -->

th:switch

th:case

<!--循环 -->

th:each

<!-- 运算 -->

<p th:text="${age}%2 == 0"></p>

<!-- 赋制value -->

th:value

<!-- 链接 -->

th:href

本期讲解就到这里，如果你觉得本文对你有用，可以点个赞，点个关注哦！下一期更精彩！wx search 全栈学习笔记！点个关注不迷路。