Spring Boot整合Thymeleaf

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

Thymeleaf是一个支持原生HTML文件的Java模板，可以实现前后端分离的交互方式，即视图与业务数据分开响应，塔可以直接将服务端返回的数据生成HTML文件，同时也可以处理XML、JavaScript、CSS等格式。

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

创建Maven工程，不需要创建Web工程

    
        spring-boot-starter-parent
        org.springframework.boot
        2.3.4.RELEASE
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

application.yml

spring:
  thymeleaf:
    prefix: classpath:/templates/     #模板路径
    suffix: .html                     #模板后缀
    servlet:
      content-type: text/html         #设置Content-type
    encoding: UTF-8                   #编码方式
    mode: HTML5                       #校验H5格式
    cache: false                      #关闭缓存，在开发过程中可以立即看到页面修改结果

1
2
3
4
5
6
7
8
9
10

创建Handler

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

    @GetMapping("/index")
    public ModelAndView index(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("index");
        modelAndView.addObject("name","张三");
        return modelAndView;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

启动类

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);
    }
}
1
2
3
4
5
6
7
8
9

HTML

    
    


    
Index
    
Hello World


1
2
3
4
5
6
7
8
9
10
11
12

如果需要加载后台返回的业务数据，则需要在HTML页面中使用Thymeleaf模板标签来完成。

需要引入模板标签

1

通过特定的标签完成操作

Hello World
1

Thymeleaf模板标签不同于JSTL，Thymeleaf模板标签是直接嵌入到HTML原生标签内部。

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;
    }
1
2
3
4
5
6
7

    
优秀
    
良好
1
2

• th:unless

th:unless也用作条件判断，逻辑与th:if相反,如果条件不成立则显示，否则不显示

    @GetMapping("/unless")
    public ModelAndView unlessTest(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("test");
        modelAndView.addObject("score",90);
        return modelAndView;
    }
1
2
3
4
5
6
7

    
    
unless优秀
    
unless良好
1
2
3

• 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("studentId",1);
        return modelAndView;
    }
1
2
3
4
5
6
7

    

        
张三
        
李四
        
王五
    
1
2
3
4
5

• th:action

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

    @GetMapping("/redirect/{url}")
    public String redirect(@PathVariable("url") String url){
        return url;
    }

    @PostMapping("/login")
    @ResponseBody
    public String login(){
        return "login";
    }
1
2
3
4
5
6
7
8
9
10

    

        
    
1
2
3

或

    @GetMapping("/redirect/{url}")
    public String redirect(@PathVariable("url") String url, Model model){
        model.addAttribute("url","/hello/login");
        return url;
    }

    @PostMapping("/login")
    @ResponseBody
    public String login(){
        return "login";
    }
1
2
3
4
5
6
7
8
9
10
11

    

        
    
1
2
3

如果action的值直接写在HTML中，则需要使用@{}，如果是从后端传来的数据则使用${}

• th:each

用来遍历集合

实体类

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class User {
    private Integer id;
    private String name;
}
1
2
3
4
5
6
7
8
9

Handler

    @GetMapping("/each")
    public ModelAndView each(){
        List list= Arrays.asList(
                new User(1,"张三"),
                new User(2,"李四"),
                new User(3,"王五")
        );
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("test");
        modelAndView.addObject("list",list);
        return modelAndView;
    }
1
2
3
4
5
6
7
8
9
10
11
12

        
        

            

                
编号
                
姓名
            
            

                

                

            
        
1
2
3
4
5
6
7
8
9
10
11

• th:value

用来给标签赋值

    @GetMapping("/value")
    public ModelAndView value(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("test");
        modelAndView.addObject("value","Spring Boot");
        return modelAndView;
    }
1
2
3
4
5
6
7

        
        
1
2

• th:src

用来引入静态资源,相当于HTML原生标签的img、script的src属性
图片，css，js，静态加载的HTML都需要放置在resources/static文件中

    @GetMapping("/src")
    public ModelAndView src(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("test");
        modelAndView.addObject("src","/1.png");
        return modelAndView;
    }
1
2
3
4
5
6
7

        
        
1
2

如果src的值是直接写在html中则

1

• th:href

用作设置超链接的href

    @GetMapping("/href")
    public ModelAndView href(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("test");
        modelAndView.addObject("href","https://www.baidu.com");
        return modelAndView;
    }
1
2
3
4
5
6
7

    
    百度
1
2

• th:selected

用作给HTML元素设置选中，条件成立则选中，否则不选中

    @GetMapping("/select")
    public ModelAndView select(){
        List list =Arrays.asList(
                new User(1,"张三"),
                new User(2,"李四"),
                new User(3,"王五"));

        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("test");
        modelAndView.addObject("list",list);
        modelAndView.addObject("name","");
        return modelAndView;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

    
        
    
1
2
3
4
5
6
7
8

结合th:each来使用，首先遍历list集合动态创建option元素，根据每次遍历出的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;
    }
1
2
3
4
5
6
7

        
        
1
2

Thymeleaf对象

Thymeleaf支持直接访问Servlet Web原生资源，HttpServletRequest、HttpServletResponse、HttpSession、ServletContext

#request 获取HttpServletRequest对象
#response 获取HttpServletResponse对象
#session 获取HttpSession对象
#servletContext 获取ServletContext对象
1
2
3
4

例

    @GetMapping("/servlet")
    public String servlet(HttpServletRequest request){
        request.setAttribute("value","request");
        request.getSession().setAttribute("value","session");
        request.getServletContext().setAttribute("value","servletContext");
        return "test";
    }
1
2
3
4
5
6
7

        
    

    

    

    

1
2
3
4
5

Thymeleaf支持直接访问session，KaTeX parse error: Expected '}', got '#' at position 2: {#̲request.getAttr…{name}

例

    @GetMapping("/servlet2")
    public ModelAndView servlet2(HttpSession session){
        session.setAttribute("name","李四");
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("test");
        modelAndView.addObject("name","张三");
        return modelAndView;
    }
1
2
3
4
5
6
7
8

    

    

    

    

1
2
3
4

Thymeleaf内置对象

• dates 日期格式化
• calendars 日期操作
• numbers 数字格式化
• strings 字符串格式化
• bools boolean
• arrays 数组内置对象
• list List集合内置对象
• sets Set集合内置对象
• maps Map集合内置对象

例

    @GetMapping("/utility")
    public ModelAndView utility(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("test");
        modelAndView.addObject("date", new Date());
        Calendar calendar=Calendar.getInstance();
        calendar.set(2020,1,1);
        modelAndView.addObject("calendar",calendar);
        modelAndView.addObject("number",0.06);
        modelAndView.addObject("string","Spring Boot");
        modelAndView.addObject("array",Arrays.asList("张三","李四","王五"));
        List list=new ArrayList<>();
        list.add(new User(1,"张三"));
        list.add(new User(2,"李四"));
        modelAndView.addObject("list",list);
        Set set=new HashSet<>();
        set.add(new User(1,"张三"));
        set.add(new User(2,"李四"));
        modelAndView.addObject("set",set);
        Map map=new HashMap<>();
        map.put(1,new User(1,"张三"));
        map.put(2,new User(2,"李四"));
        modelAndView.addObject("map",map);
        return modelAndView;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    date格式化：

    当前日期：

    当前时间：

    Calendar格式化:
    number百分比格式化：

    name是否为空：

    name长度：

    name拼接：

    boolean是否为true：

    arrays的长度：

    arrays是否包含张三：

    List是否为空：

    Set是否为空：

    Set的长度：

    Map是否为空

    Map的长度：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16