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

时间 2020-04-23

标签 springboot 系列集成 thymeleaf 详解栏目 Spring 繁體版

原文原文链接

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

1. thymeleaf简介

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

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

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

2. thymeleaf特色

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

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

3. thymeleaf在SpringBoot的应用

1. 国际化，渲染不一样国家的语言浏览器

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

4. SpringBoot引入Thymeleaf

新建一个Springboot web项目，而后添加如下依赖。springboot

<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 全栈学习笔记！点个关注不迷路。