springboot Thymeleaf

向右看齐 2022-10-10 09:27 154阅读 0赞

### **maven引入依赖** ###

<dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

### **项目结构** ###

**thymeleaf** 页面跳转默认路径：**src/main/resources/templates**，静态资源默认路径：**src/main/resources/static**；  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

thymeleafPage.html：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>hello, Thymeleaf;</h1>
    </body>
    </html>

测试：

@Controller
    public class Thymeleaf {
    
        @RequestMapping(value = "/thymeleafPage")
        public String test() {
            return "thymeleafPage";
        }
    
    }

![20210627073728724.png][]

# 基本语法 #

**1、th:text="$\{变量\}"**

\- 渲染一段字符串，不会转义字符，与之对应的是 **th:utext="$\{\}"** 会转义字符，** **类似vue中的 v-text 指令。

<!DOCTYPE html>
    
    
    
    <html xmlns:th="http://www.thymeleaf.org">
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title></head>
    <body>
    
        <h1 th:utext="${msg}"></h1>
        <h1 th:utext="${msgs}"></h1>
    </body>
    </html>

测试：

package com.lxc.springboot.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class Thymeleaf {
    
        @RequestMapping(value = "/thymeleafPage")
        public String test(Model model) {
            model.addAttribute("msg", "hello, thymeleaf;");
            model.addAttribute("msgs", "<a href='#'>hello, thymeleaf;</a>");
            return "thymeleafPage";
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1][]

**2、th:each="item:$\{Lists\}"**

遍历

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title></head>
    <body>
        
        <div th:each="item:${list}" th:utext="${item}"></div>
        
        <hr>
        <span th:each="item:${list}" th:utext="${item}"></span>
    </body>
    </html>

@Controller
    public class Thymeleaf {
        @RequestMapping(value = "/thymeleafPage")
        public String test(Model model) {
            List<String> list = new ArrayList<>();
            list.add("Java");
            list.add("JavaScript");
            list.add("Python");
            model.addAttribute("list", list);
            return "thymeleafPage";
        }
    }

测试：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 2][]

就记录这么多吧，懂语法了，就不需要学，以后项目用到现查即可！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: /images/20221005/ca87bf9b60b8425990966452d0126da4.png
[20210627073728724.png]: /images/20221005/2ac38e260b0f4c55919f1479491665cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1]: /images/20221005/12bdec3df7a14b5d817eca29b343f49a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 2]: /images/20221005/ab38036659f44651a93e6e70f117afa1.png