10分钟带你学会thymeleaf

文章目录

引入命名空间HTML中的使用

1. 表达式（和下面的设置属性值一起使用）2. 支持的字面量3. 设置属性值

1. 设置自定义属性值 th:attr2. 设置html原生属性值3. 替换所在标签内的文本内容 th:text4. 替换所在标签内的文本内容（会解析html） th:utext 4. 迭代器 th:each5. 条件语句6. 内联（写在开始标签和结束标签之间）7. 组件

定义组件：其他页面引入组件：组件传参组件的局部替换 Javascript中的使用CSS中的使用内置对象工具类

格式化时间

引入命名空间

HTML中的使用 1. 表达式（和下面的设置属性值一起使用）

1.变量表达式 ${…}
获取后端（springmvc）传递的模型数据

2.消息表达式 #{…}

3.${…}和#{…}的区别：
#{…}是${…}的扩展，不仅可以获取后端传递的数据，还可以获取国际化文件的数据

4.选择表达式 *{…}

相当于

就是配合${…}使用减少代码冗余，如果一个对象有很多个属性，建议用这种方式

5.链接表达式 @{…}

它会去 resources/static/下找

2. 支持的字面量

字符串：
数字：
布尔： user.isAdmin() return true or false
null：

算术运算符：+ - * / %
比较运算符：gt（大于）、lt（小于）、ge（大于等于）、le（小于等于）、eq（等于）、ne（不等于）
条件运算符：? :

3. 设置属性值 1. 设置自定义属性值 th:attr

在html标签上设置一些自定义属性，方便请求传参

2. 设置html原生属性值

th:action、th:value、th:href、th:title……html所有属性基本上都能用th:修饰

3. 替换所在标签内的文本内容 th:text 4. 替换所在标签内的文本内容（会解析html） th:utext 4. 迭代器 th:each

相当于Java的增强for循环：for (User user : userList)

state 状态变量

    

    
    state.count 当前遍历的是第几个，从1开始
    state.index 当前遍历的是第几个，从0开始
    state.even  当前遍历的是否是第偶数个
    state.odd   当前遍历的是否是第奇数个
    state.first 当前遍历的是否是第一个
    state.last  当前遍历的是否是最后一个
    state.index 当前遍历的是第几个
    state.size  集合中元素的总个数

5. 条件语句

th:if 内的值为true显示，false隐藏

您是会员

th:unless 正好和th:if相反，它们可以组合成if…else…
th:switch 就是Java里的switch，唯一的区别是不会case穿透，不用加break

6. 内联（写在开始标签和结束标签之间）

[[${content}]]   等价于th:text
[(${content})]   等价于th:utext

7. 组件

用于html代码复用，比如多个页面都有相同的导航栏和页脚，只要在一个页面中设计html，其他页面进行引入（相当于jsp的）

定义组件：

其他页面引入组件：

或

th:insert是将组件放到外层div内，th:replace是用组件替换掉这个div

还有一种不写th:fragment的方式，有id或class属性就行，但是我感觉这种方式没有语义化，不好辨别它是组件还是普通的DOM元素，这里就不介绍了

当某个页面使用组件时，组件内部可以使用后端传递到该页面的数据，但是IDEA会报错，所以要加上一个注释（按alt+enter自动加上）

组件传参

定义部分：

引用部分：

组件的局部替换

定义部分：

引用部分：

    
替换的内容

Javascript中的使用

首先要在script上加上th:inline=“javascript”

CSS中的使用

内置对象

${#ctx}：上下文对象${#locale}：java.util.Locale${#request}：请求${#session}：会话 ${session.user.name} == session.getAttribute(“user”).getName()${#param}：请求参数 ${param.username} == request.getParameter(“username”)…… 工具类 格式化时间