SpringBoot 整合Thymeleaf 、Thymeleaf常用标签

springboot 整合Thymeleaf

Thymeleaf是目前流行的视图层的技术，Spring boot 官方推荐的使用Thymeleaf

什么是Thymeleaf？

Thymeleaf是一个支持原生的THML文件的java末班，可以实现前后端的分离的交互方式，即视图与业务的数据分开响应，他可以直接返回服务端返回的数据生成HTML文件，同时也可以处理XML、javascript、css等格式。

Thymeleaf的最大特点是即可以直接在浏览器打开（静态方式），也可以结合服务器将业务数据填充到HTML之后启动动态的页面（动态方式），Springboot支持Thymeleaf，使用起来非常方便。

1.创建maven工程

<parent>

    <artifactId>spring-boot-dependencies</artifactId>

    <groupId>org.springframework.boot</groupId>

    <version>2.2.4.RELEASE</version>

</parent>

<dependencies>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-web</artifactId>

    </dependency>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-thymeleaf</artifactId>

    </dependency>

</dependencies>

2.application.yml

spring:

  thymeleaf:

    prefix: classpath:/templates/          #模版的路径

    suffix: .html                           #模版的后缀

    servlet:

      content-type: text/html             #设置Content-type

    encoding: UTF-8                       #编码方式

    mode: HTML5                            #校验H5的格式

    cache: false                          #关闭缓冲 每次都重新修改页面

3.创建Handler

package com.southwind.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

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

import org.springframework.web.servlet.ModelAndView;

@Controller

@RequestMapping("/hello")

public class HellloHandler {

    @GetMapping("/index")

    public ModelAndView index(){

        ModelAndView modelAndView =new ModelAndView();

        modelAndView.setViewName("index");

        modelAndView.addObject("mess","张三");

        return modelAndView;

    }

}

4.启动类

package com.southwind;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class Application {

    public static void main(String[] args) {

        SpringApplication.run(Application.class,args);

    }

}

5.视图：

HTML

<!DOCTYPE html>

<html lang="en">

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

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>index</h1>

    <p th:text="${mess}">hello word</p>

</body>

</html>

需要引入标签

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

  <p th:text="${mess}">hello word</p>

Thymeleaf是直接嵌入到模版标签的内部的，不同于JSTL模版

Thymeleaf常用标签

th:text

th:text用于文本的显示，将业务的值显示到HTML的页面中

th:if

th:if用于条件判断，对业务数据的判断，如果条件成立，则显示内容，否则不显示，具体的使用：

@GetMapping("/if")

public ModelAndView ifTest(){

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("score",90);

    return modelAndView;

}

test.html

<!DOCTYPE html>

<html lang="en">

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

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p th:if="${score>=90}">优秀</p>

    <p th:if="${score<90}">良好</p>

</body>

</html>

th:unless

th:unless也用作条件判断，逻辑于if恰好相反，如果条件成立不显示，条件不成立显示

@GetMapping("/unless")

public ModelAndView unlessTest(){

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("score",90);

    return modelAndView;

}

<!--unless-->

        <p th:unless="${score>=90}">优秀</p>

        <p th:unless="${score<90}">良好</p>

th:switch th:case

th:switch th:case两结合起来使用，用于多条件的等值判断，逻辑于java的switch case一致，当switch中的业务数据等于摸个case时，就显示该case对应的内容。

@GetMapping("/switch")

public ModelAndView switchTest(){

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("mess",1);

    return modelAndView;

}

<!--switch-->

    <div th:switch="${mess}">

        <p th:case="1">优秀</p>

        <p th:case="2">良好</p>

    </div>

th：action

用来指定请求的URL，相当于form表单的action属性

1.写死

<form th:action="@{/hello/action}" method="get">

    <input type="submit" value="提交">

</form>

2.后端传过来

<form th:action="${url}" method="get">

    <input type="submit" value="提交">

</form>

@GetMapping("/redirect/{url}")

public String redirect(@PathVariable("url") String url, Model model){

    model.addAttribute("url" ,"/hello/action");

    return  url;

}

@GetMapping("/action")

@ResponseBody

public String actionTest(){

    return "action";

}

th;each

用来遍历集合

1.实体类

package com.southwind.entity;

import lombok.AllArgsConstructor;

import lombok.Data;

@Data

@AllArgsConstructor

public class User {

    private  String  name;

    private  Integer id;

}

2.Handler

@GetMapping("/each")

public ModelAndView each(){

    List<User> users = Arrays.asList(new User("张三",1),new User("李四",2),new User("王五",3));

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("list",users);

    return modelAndView;

}

3.视图

<!--each-->

    <table>

        <tr>

            <th> 编号</th>

            <th> 姓名</th>

        </tr>

        <tr th:each="user:${list}">

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

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

        </tr>

    </table>

th:value

用来给标签赋值

@GetMapping("/value")

public ModelAndView value(){

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("list","sprngboot");

    return modelAndView;

}

<!--value-->

        <input type="text" th:value="${list}">

th：src

用来引入静态资源相当于HTML的原生的img。scrip的src标签

图片、css、js都必须放在resource下的static中

@GetMapping("/src")

public ModelAndView src(){

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("src","/1.jpg");

    return modelAndView;

}

<!--value-->

        <input type="text" th:value="${list}">

th:href

用来设置超链接的href

@GetMapping("/href")

public ModelAndView href(){

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("src","https://www.baidu.com");

    return modelAndView;

}

<!--href-->

    <a th:href="${src}">百度</a>

th：selected标签

给html设置选中的元素，条件成立选中，条件不成立不选中

@GetMapping("/selected")

public ModelAndView selected(){

    List<User> users = Arrays.asList(new User("张三",1),new User("李四",2),new User("王五",3));

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("list",users);

    modelAndView.addObject("name","李四");

    return modelAndView;

}

<!--selected-->

        <select>

            <option

                    th:each="user:${list}"

                    th:value="${user.id}"

                    th:text="${user.name}"

                    th:selected="${user.name==name}"

            ></option>

        </select>

结合th：each来使用，首次遍历list的集合来动态的创建元素，更具每次遍历出的user、name于业务数据中的name是否相等来决定是否要选择。

th：attr

给HTML的任意标签来赋值

@GetMapping("/attr")

public ModelAndView attr(){

    ModelAndView modelAndView =new ModelAndView();

    modelAndView.setViewName("test");

    modelAndView.addObject("attr","spring boot");

    return modelAndView;

}

<!--attr-->

        <input th:attr="value=${attr}"><br>

        <input th:value="${attr}">