springboot整合thymeleaf案例

1.pom.xml

<?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.5.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.yl</groupId>
    <artifactId>thymeleaf01</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>thymeleaf01</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <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>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

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

</project>

2.application.peoperties

spring.application.name=thymeleafdemo
server.port=8080
# thymeleaf的配置
#开启模板缓存默认true
spring.thymeleaf.cache=true
#检查模板是否存在再呈现
spring.thymeleaf.check-template=true
#检查模板位置是否正确，默认为true
spring.thymeleaf.check-template-location=true
#content-type的值，默认为Ϊtext/html
spring.thymeleaf.servlet.content-type=text/html
#开启mvc thymeleaf视图解析
spring.thymeleaf.enabled=true
#模板编码
spring.thymeleaf.encoding=utf-8
# 要被排除在解析之外的视图名称列表，用逗号分割
spring.thymeleaf.excluded-view-names=
#要运用于模板之上的模板模式
spring.thymeleaf.mode=HTML
#在构建url时添加到视图名称前面的前缀，默认值classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/
#在构建url时添加到视图名称后面的后缀，默认值.html
spring.thymeleaf.suffix=.html

3.实体类

package com.yl.thymeleaf01.entity;

/**
 * @Author: wfj
 * @Description:
 * @Date: created in 2021/9/9 23:39
 * @Version: 1.0v
 */
public class User {
    private int id;
    private String name;
    private int age;

    public User() {
    }

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

    public int getId() {
        return id;
    }

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

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

4.controller

package com.yl.thymeleaf01.controller;

import com.yl.thymeleaf01.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.thymeleaf.TemplateEngine;

import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;

/**
 * @Author: wfj
 * @Description:
 * @Date: created in 2021/9/9 23:38
 * @Version: 1.0v
 */
@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello(Model model, HttpSession session) {
        session.setAttribute("name","javavue");
        List<User> list = new ArrayList<>();
        for (int i = 0 ; i < 5; i++) {
            User user = new User();
            user.setId(i);
            user.setName("xiaolan"+i);
            user.setAge(18);
            list.add(user);
        }
        model.addAttribute("users",list);
        User user = new User();
        user.setId(11);
        user.setAge(18);
        user.setName("小白");
        model.addAttribute("user",user);
        return "hello";
    }
}

5.$符号使用

$符号主要是取对象中的数据

<div th:text="${user.id}"></div>
<div th:text="${user.name}"></div>
<div th:text="${user.age}"></div>

6.*符号的使用

*符号也可以取对象中的数据

    <div th:object="${user}">
        <div th:text="*{id}"></div>
        <div th:text="*{name}"></div>
        <div th:text="*{age}"></div>
    </div>

    <div th:text="*{user.id}"></div>
    <div th:text="*{user.name}"></div>
    <div th:text="*{user.age}"></div>

7.@符号的使用

@符号主要是用于引入文件

    <!--可以是全路径-->
    <script th:Src="@{http://localhost:8080/hello.js}"></script>
    <!--可以带参数-->
    <script th:Src="@{http://localhost:8080/hello.js(name='yl',age=19)}"></script>
    <!--~代表当前项目-->
    <script th:Src="@{~/hello.js}"></script>
    <!--也可以省略协议-->
    <script th:Src="@{//localhost:8080/hello.js}"></script>

 <img th:src="@{/1.jpg}" th:title="${user.name}" th:alt="${user.name}"/>

8.#符号的使用

#符号主要是根据当前浏览器的语言去相对应的国际化配置文件中取值

<div th:text="#{hello}"></div>

9.集合的遍历

 <div>
        <table border="1px">
            <tr th:each="u,state : ${users}">
                <td th:text="${u.id}"></td>
                <td th:text="${u.name}"></td>
                <td th:text="${u.age}"></td>
                <!--当前的遍历索引，从0开始-->
                <td th:text="${state.index}"></td>
                <!--当前的遍历索引，从1开始-->
                <td th:text="${state.count}"></td>
                <!--集合元素的总个数-->
                <td th:text="${state.size}"></td>
                <!--当前遍历的对象-->
                <td th:text="${state.current}"></td>
                <!--当前遍历是否为奇数次遍历-->
                <td th:text="${state.even}"></td>
                <!--当前遍历是否为偶数次遍历-->
                <td th:text="${state.odd}"></td>
                <!--当前是否为第一次遍历-->
                <td th:text="${state.first}"></td>
                <!--当前是否为最后一次遍历-->
                <td th:text="${state.last}"></td>
            </tr>
        </table>
    </div>

10.thymeleaf如何定义变量

    <!--th:with可以定义变量-->
    <div th:with="num=(100+100/100+90-1)">
        <div th:text="${num}"></div>
    </div>
    

11.字面量

    <div th:text="'犹在镜中'"></div>
    <div th:text="100"></div>
    <div th:text="true"></div>
    <div th:text="hellovuejava"></div>

12.字符串拼接方式

   <div th:text="'java' + 'js'"></div>
    <div th:text="'java' + ${user.name}"></div>
    <div th:text="|java ${user.name}|"></div>

13.比较运算符

    <div th:with="num=(100+100/100+90-1)">
        <!--第一，第四和第六为true-->
        <div th:text="${num} eq 190"></div>
        <div th:text="${num} ne 190"></div>
        <div th:text="${num} lt 190"></div>
        <div th:text="${num} le 190"></div>
        <div th:text="${num} gt 190"></div>
        <div th:text="${num} ge 190"></div>
    </div>

14.逻辑运算符

    <!--false-->
    <div th:text="9 eq 9 and 8 ne 8"></div>
    <!--true-->
    <div th:text="9 eq 9 or 8 ne 8"></div>
    <!--false-->
    <div th:text="not(9 eq 9 or 8 ne 8)"></div>
    <!--false-->
    <div th:text="!(9 eq 9 or 8 ne 8)"></div>

15.三目运算符

    <div th:with="score=57">
        <div th:text="(${score} ge 60) ? '及格' : '不及格'"></div>
    </div>

16.分支结构，th:if,th:unless,th:switch,th:case

    <div>
        <table border="1px">
            <!--th:if只显示偶次数出现的数据，th:unless则是取反-->
            <tr th:each="u,state : ${users}" th:if="${state.odd}">
                <td th:text="${u.id}"></td>
                <td th:text="${u.name}"></td>
                <td th:text="${u.age}"></td>
                <!--当前的遍历索引，从0开始-->
                <td th:text="${state.index}"></td>
                <!--当前的遍历索引，从1开始-->
                <td th:text="${state.count}"></td>
                <!--集合元素的总个数-->
                <td th:text="${state.size}"></td>
                <!--当前遍历的对象-->
                <td th:text="${state.current}"></td>
                <!--当前遍历是否为奇数次遍历-->
                <td th:text="${state.even}"></td>
                <!--当前遍历是否为偶数次遍历-->
                <td th:text="${state.odd}"></td>
                <!--当前是否为第一次遍历-->
                <td th:text="${state.first}"></td>
                <!--当前是否为最后一次遍历-->
                <td th:text="${state.last}"></td>
            </tr>
        </table>
    </div>

<!--switch case语句-->
    <div>
        <table border="1px">
            <tr th:each="u,state : ${users}">
                <td th:text="${u.id}"></td>
                <td th:text="${u.name}"></td>
                <td th:text="${u.age}"></td>
                <!--当前的遍历索引，从0开始-->
                <td th:text="${state.index}"></td>
                <!--当前的遍历索引，从1开始-->
                <td th:text="${state.count}"></td>
                <!--集合元素的总个数-->
                <td th:text="${state.size}"></td>
                <!--当前遍历的对象-->
                <td th:text="${state.current}"></td>
                <!--当前遍历是否为奇数次遍历-->
                <td th:text="${state.even}"></td>
                <!--当前遍历是否为偶数次遍历-->
                <td th:text="${state.odd}"></td>
                <!--当前是否为第一次遍历-->
                <td th:text="${state.first}"></td>
                <!--当前是否为最后一次遍历-->
                <td th:text="${state.last}"></td>
                <td th:switch="${state.odd}">
                    <span th:case="true">偶数</span>
                    <span th:case="*">基数</span>
                </td>
            </tr>
        </table>
    </div>

17.thymeleaf的一些常用的内置对象

<!--thymeleaf的一些常用的内置对象-->
    <!--session对象-->
    <div th:text="${#session.getAttribute('name')}"></div>
    <!--lists对象-->
    <div th:text="${#lists.size(users)}"></div>
    <!--execInfo对象-->
    <div th:text="${#execInfo.getProcessedTemplateName}"></div>

18.内联

<!--内联-->
    <!--其实取对象里的值还有以下这两种方式-->
    <div>hello [[${user.name}]]</div>
    <div>hello [(${user.name})]</div>
    <hr/>

    <!--如下，第一种方式对内容进行转义了，第二种方式没有对内容进行转义-->
    <div th:with="str='jq <b>a better language</b>'">
      <div>[[${str}]]</div>
       <div>[(${str})]</div>
   </div>

    <script th:inline="javascript">
        var name = [[${user.name}]]
        console.log(name)
    </script>