Thymeleaf使用入门

依赖

---

• Maven

        Thymeleaf基础依赖
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
        layout布局依赖
        
            nz.net.ultraq.thymeleaf
            thymeleaf-layout-dialect
            2.3.0
        

• Gradle

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0'
}

thymeleaf方言

---

• 以th开头的方式，需要在html标签里引入thymeleaf的命名空间:
  th:text="...">
• 以data作为前缀，是html5里标准的用于自定义属性的，不需要引入命名空间
  data-th-text="...">

表达式

---

• 变量表达式：${...}

• 消息表达式：#{...}

也称之为文本外部化、国际化或i18n，从国际化配置文件里去取key对应的值？不太懂

       
...

• 选择表达式：*{...}

经常与 th:object 替换对象配合使用，th:object="${book}"首先获取到对象book，"*{}"对象里取属性。
等于变量表达式${book.title}，区别是${book}从整个上下文中取的，*{title}是从 ${book}中取的，执行效率更高。

        ...

• 链接表达式：@{...}
  绝对链接：...
  协议相对链接：...
  服务器相对链接：...
  目录相对链接：...

• 分段表达式：th:insert、th:replace、th:include(3.0以后不推荐)

被替换的内容：

        2019 蟹蟹

执行替换的部分：

替换效果：

        // 1、insert
        

            

                2019 蟹蟹
            
    
        


        // 2、replace
        

            2019 蟹蟹
         


        // 3、include
        

            2019 蟹蟹
        

文本替换

• 文本：' ' 单引号引起来表示是文本内容
• 数字：不需要单引号，也支持一些数学计算

这里的部分会被替换掉
这里的部分会被替换掉

属性赋值

th:value

迭代器：th:each

状态变量：
index：迭代器索引从0开始
count：迭代器索引从1开始
size：迭代器大小
current：当前迭代器值
even/odd：当前索引是偶数/奇数
first/last：第一个/最后一个

• select下拉框数据回显

        
            
            --请选择供应商--
        

    function getGysbm() {
        var option=$("#gysxz option:selected").val();
        console.log("选中的值是："+option);
    }

内联表达式

---

[[...]] 和 [(...)] 分别对应于 th:text 和 th：utext，前者会对特殊字符进行转义，后者不会对特殊字符转义

激活内联使用th:inline 属性,它有四个模式：text、javascript、css 和 none。

• 文本内联：
  

  等同于：

  [[${value}]]

• JavaScript内联：

    alert([[${value}]]);

• CSS内联：

变量：
classname = 'main elems'
align = 'center

内联写法：

转换成这样：

• 禁用内联：th:inline=none
  

  A double array looks like this:[[1,2,3],[4,5]]!

• 其它th:标签
  th:value 属性赋值

页面布局 一

---

• 通用模板页面

    
    


    
页头
    
等待被替换
    
页尾

• 标题子页面有则显示子页面的，子页面没有则显示父页面的。
• 子页面 head和body标签并不是必须的。

• 自定义内容页面

    
    



已经被替换的内容

image.png

页面布局 二

---

• 在template文件夹新建fragments模板存放文件夹，在里面新建header.html和footer.html两个模板文件

    
    


    

        
Thymeleaf in action
        首页
    








    
    


    

        百度地址连接
    

• 新建首页list.html

    
    



我是中间的内容!

image.png

公共页面数据传递

---

• 新建全局控制器，用于返回公共页面的数据

/*
@ControllerAdvice的使用场景
1、全局异常处理
2、全局数据绑定：在每一个 Controller 的接口中，都能够访问到这些数据
3、全局数据预处理
*/

/*
使用 @ModelAttribute 注解标记该方法的返回数据是一个全局数据，
默认情况下，这个全局数据的 key 就是返回的变量名，value 就是方法返回值
也可以通过 @ModelAttribute 注解的 name 属性去重新指定 key。
*/
@ControllerAdvice
@ResponseBody
public class globalController {

    @ModelAttribute(name="datas")
    public ArrayList returnDatas() {
        ArrayList list = new ArrayList<>();

        list.add("新闻");
        list.add("军事");
        list.add("游戏");

        return list;
    }
}

image.png

image.png

其它

• 获取ModeAndView传来的数据