# thymeleaf [视频教程](https://www.bilibili.com/video/BV1qy4y117qi/) ## 配置 ```xml org.springframework.boot spring-boot-starter-parent 2.3.6.RELEASE org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web ``` ```yml spring: # 配置thymeleaf的相关信息 thymeleaf: # 开启视图解析 enabled: true #编码格式 encoding: UTF-8 #前缀配置 prefix: classpath:/templates/ # 后缀配置 suffix: .html #是否使用缓存 开发环境时不设置缓存 cache: false # 格式为 HTML 格式 mode: HTML5 # 配置类型 servlet: content-type: text/html ``` ## 一个简单的例子 static:用于存放静态资源,例如html、JavaScript、css以及图片等。 templates:用来存放模板引擎Thymeleaf(本质依然是.html文件) 需要在controller中指定Thymeleaf页面的url,然后再Model中绑定数据。 controller ```java @Controller public class HelloController { @GetMapping("/index") public String hello(Model model) //对应函数 { model.addAttribute("name","Leo"); return "index"; //与templates中index.html对应 } } public String basicTrain(Model model){ Userv0.userv0=new UserV0(); Userv0.setUsername("lookroot"); Userv0.setAge(22); Userv0.setIsVip(true); Userv0.setTags(Arrays.asList("php","node","java")); model.setAttribute("user",userV0); return "basic"; } ``` 注意引入 ```html Title hello 第一个Thymeleaf程序
name是Leo>(我是离线数据)
``` 常用方法 ``` th:id 替换id th:text 文本替换

bigsai

th:utext 支持html的文本替换

content

th:object 替换对象
th:include 替换内容到引入文件 th:value 替换值 th:each 迭代 th:href 替换超链接 超链接 th:src 替换资源 声明。 ``` ## 语法 ```html
name是Leo>(我是离线数据)

name

age

``` ```html

name

age

` ``` 字符串链接 1 `
name是Leo>(我是离线数据)
` 2 `
name是Leo>(我是离线数据)
` if `

会员

` each `user.setTags(Arrays.asList("PHP,Node,"java"))` ```html ``` switch ```html

默认

``` 引入script ```html ``` 引入 js 并且传入参数 ```html ``` ```js var userId = [[${ session.user.id }]]; ``` 切片 `component.html` 两种方式,但是引入的时候用法不同 ```html
com2
``` 在index.html 中 第一个会替换掉标签 第二个不会替换掉 第三个配合上述的写法 ```html
``` ## 表单提交 ```html
用户名:
密码:

   还没有账号,立即注册

``` ```java @RequestMapping("login") public String login(String username,String password,HttpSession session){ if...{ return "redirect:/login";//登录失败回到登录界面 } return "redirect:/employee/lists";//登录成功之后,跳转到查询所有员工信息控制器路径 } ``` ## 工具类 ## 组件拓展和组件传播 # store ### 语法 新建basic.html,此时如果我们想渲染User这个对象的信息我们可以这样 ```html

``` 也可以将User定义为临时变量,接着使用*{xxx}就能取到值了 ```html

``` 还可以不使用get的方式,直接使用属性名 ```html

``` th:if th:if通过布尔值决定这个元素是否渲染 ```html

会员

``` th:each th:each可以迭代循环出数据,前面我们User对象里面的tags是一个数组,我们来渲染一下 ```html
``` 状态变量在th:each属性中定义,并且包含以下数据: 当前的迭代索引,从0开始。这是index属性。 从1开始的当前迭代索引。这是count属性。 迭代变量中元素的总数。这是size财产。 每次迭代的iter变量。这是current财产。 当前迭代是偶数还是奇数。这些是even/odd布尔属性。 当前迭代是否是第一个。这是first布尔属性。 当前迭代是否为最后一次。这是last布尔属性。 th:switch th:switch选择语句 ```html

默认

``` 如果在springboot中需要引入static目录下的静态资源可以使用@{xxx}的方式 ```html ``` 同理css也是可以的 ```html ``` ### 碎片(组件) 日常开发中呢我们经常将有些可以复用的部分抽离出来 新建一个component.html,一个文件里面可以写多个碎片,使用th:fragment来定义 ```html
this is com1
this is com2
``` 使用碎片主要有两种方式replace和insert,在index.html中编写 ```html
``` 这两种方式的区别就是,replace会将新标签完全替换原本的标签,也就是说原本写th:replace属性的标签就不会渲染出来,insert是往这个地方插入标签 直接通过选择器使用 对于碎片,甚至可以不定义,我们再次添加一个 碎片 ```html
this is com2
``` 然后使用它 ```html
``` 组件传递参数 组件也是可以传递数据的 ```html

``` 使用的时候 ```html
``` 局部替换组件 我们使用一个组件的时候,想要局部替换掉这个组件里面的部分内容该怎么做呢?通过传递参数的方式传递一个组件过来,并把这个组件替换原本的一部分 ```html

原本的message

``` 使用的时候 ```html

替换的message

``` 基本对象 #ctx:上下文对象 ${#ctx.request} ${#ctx.response} ${#ctx.session} ${#ctx.servletContext} 请求/会话属性 ${session.xxx} ${application.xxx} ${#request.getAttribute('xxx')} ### 工具类 在thymeleaf里面是可以直接使用一些Java的函数的,并且你可以通过传递参数的方式把一些自己写的方法传递给页面,在里面调用也是可以的 一些可以直接的使用函数 #dates #calendars #strings #numbers #objects #bools #arrays #lists #sets #maps #aggregates 以日期格式化来举例 ```html

```