thymeleaf入门基础语法笔记

小灰灰 2022-11-03 11:39 64阅读 0赞

## 记录一下，等做项目的时候不需要满世界的百度查语法 ##

### 什么是thymeleaf ###

thymeleaf是一个流行的模板引擎，该模板引擎采用java语言开发，模板引擎是一个技术名词,是跨领域跨平台的概念,在java语言体系下有模板引擎，在C\#、PHP语言下也有模板引擎,甚至在javascrip中也会用到模板引擎技术。java生态下的模板引擎有Thymeleaf、freemaker、velocity、Beetl（国产）等。

### thymeleaf的maven坐标依赖 ###

引入坐标依赖

1、第一步引入maven坐标
     
    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

### springboot的核心配置文件application.properties中对thymeleaf进行配置 ###

# 配置thymeleaf
    spring.thymeleaf.prefix=classpath:/templates/
    spring.thymeleaf.suffix=.html
    spring.thymeleaf.mode=HTML5
    spring.thymeleaf.check-template=true
    spring.thymeleaf.encoding=UTF-8
    spring.thymeleaf.cache=false
    spring.thymeleaf.servlet.content-type=text/html
    spring.web.resources.static-locations=classpath:/templates/,classpath:/static/

### 标签的action属性 ###

如果你需要展示动态的数据,类似标签的action属性，比如：

### 在使用thymeleaf的时候我们需要在html页面的头顶加入thymeleaf的命名空间 ###

<html xmlns:th="http://www.thymeleaf.org">
    
      <head>
        <title>Good Thymes Virtual Grocery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
      </head>
      <body>
     
        <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
      
      </body>
    
    </html>

### 展示单个数据 ###

*  在mvc层设置数据：

model.addAttribute("name", "小苍");

*  在html页面获取数据：

*  当展示的数据里有html标签的时候：

model.addAttribute("username", "<a href=''>数据</a>");

*  获取数据的时候使用utext解析：

*  其他的例子：

总结：

*  使用 th:text="$\{属性名\}" 获取对应数据，获取数据时会将对应标签中的数据清空，因此最好是空标签
 *  使用 th:utext="$\{属性名\}" 获取对应的数据，可以将数据中html先解析再渲染到页面
 *  使用 th:value="$\{属性名\}" 获取数据直接作为表单元素value属性

### 展示对象数据 ###

@Controller
    public class HelloController { 
    
        @RequestMapping("hello")
        public String hello(Model model){ 
            model.addAttribute("user", new User("21","小三",23,new Date()));
            return "index";
        }
    }

<ul>
                <li>id:<span th:text="${user.getId()}"></span></li>
                <li>name:<span th:text="${user.getName()}"></span></li>
                <li>age:<span th:text="${user.getAge()}"></span></li>
                <li>bir:<span th:text="${#dates.format(user.getDate(),'yyyy-MM-dd')}"></span></li> 这里需要对日期进行格式化
            </ul>

### 条件展示数据 ###

*  运算符：  
    比较：>，<，>=，<=（gt，lt，ge，le）  
    等号运算符：==，!=（eq，ne）

model.addAttribute("user", new User("21","小三",23,new Date()));

*  当user.age的值大于23的时候显示user.name

其他的运算符同理

### 展示多个数据 ###

*  直接遍历集合

*  遍历时获取遍历状态

<ul th:each="user,userStat:${users}">
                <li>当前遍历的次数: <span th:text="${userStat.count}"/>
                    当前遍历的索引: <span th:text="${userStat.index}"/>
                    当前遍历是否是奇数行:   <span th:text="${userStat.odd}"/>
                    当前遍历是否是偶数行:   <span th:text="${userStat.even}"/></li>
                <li>集合的总记录数：<span th:text="${userStat.size}"></span></li>
            </ul>

### map类型的循环数据展示 ###

<p th:each="user : ${userMap}">
    <span th:text="${user.key}">输出名字</span>
    <span th:text="${user.value.name}">输出名字</span>
    <span th:text="${user.value.getAge()}">输出年龄</span>
    <span th:text="${user.value.getAddress()}">输出地址</span>
    <span th:text="${user.value.getPhone()}">输出电话号码</span>
    </p>
    
    ${user.key} 展示的是map中key的值,${user.value}是获取map中的value

### 定义超链接 th:href ###

### 判断th:if ###

条件判断，比如后台传来一个变量，判断改变量的值，1为男，2为女：

### 选择th:switch/th:case ###

switch，case判断语句,比如
    <div th:switch="${sex}">
    <p th:case="1">性别：男</p>
    <p th:case="2">性别：女</p>
    <p th:case="*">性别：未知</p>
    </div>
    
    星号的那一项代表默认

### 三目运算 ###

或者

或者

### 标准表达式功能摘要 ###

标准表达式功能的快速摘要：

*  简单表达式：  
    变量表达式： $\{…\}  
    选择变量表达式： \*\{…\}  
    消息表达： \#\{…\}  
    链接URL表达式： @\{…\}  
    片段表达式： ~\{…\}
 *  文字  
    文本文字：‘one text’，‘Another one!’，…  
    号码文字：0，34，3.0，12.3，…  
    布尔文字：true，false  
    空文字： null  
    文字标记：one，sometext，main，…
 *  文字操作：  
    字符串串联： +  
    文字替换： |The name is $\{name\}|
 *  算术运算：  
    二元运算符：+，-，\*，/，%  
    减号（一元运算符）： -
 *  布尔运算：  
    二元运算符：and，or  
    布尔否定（一元运算符）： !，not
 *  比较和平等：  
    比较：>，<，>=，<=（gt，lt，ge，le）  
    等号运算符：==，!=（eq，ne）
 *  条件运算符：  
    如果-则： (if) ? (then)  
    如果-则-否则： (if) ? (then) : (else)  
    默认： (value) ?: (defaultvalue)  
    \-特殊令牌：  
    无操作： \_  
    官方说了所有的功能都是可以嵌套使用的：

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

### 引入静态资源 ###

*  引入的静态资源的案例  
    springboot存放静态资源，建议放在static目录下

项目引入静态资源的时候

*  当跳转资源需要传递参数的时候：

*  多参数传递

官方的案例：

<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
    
    
    <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
    
    
    <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

### th:chlick 的用法案例 ###

点击事件：th:οnclick=“getCollect()”

<span th:attr="data-ref=${user.name}" th:onclick="clickMe()">22</span>
    <script> function clickMe() { alert("click") } </script>

### th:src ###

此标签用于对外部资源的引入，加入了/相当于加上了项目的上下文：

如果你想了解更多：  
请点击这里的按钮[study Many][]

[study Many]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#link-urls