SpringBoot集成thymeleaf

2022-12-27 13:39:15 浏览数 (1)

导入依赖

代码语言：javascript复制
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

基本语法

1、表达式

表达式名字

语法

用途

变量取值

${…}

获取请求域、session域、对象等值

选择变量

*{…}

获取上下文对象值

消息

#{…}

获取国际化等值

链接

@{…}

生成链接

片段表达式

~{…}

jsp:include 作用，引入公共页面片段

2、字面量

文本值: ‘one text’ , ‘Another one!’ ,…数字: 0 , 34 , 3.0 , 12.3 ,…布尔值: true , false

空值: null

变量： one，two，…. 变量不能有空格

3、文本操作

字符串拼接:

变量替换: |The name is ${name}|

4、数学运算

运算符: , - , * , / , %

5、布尔运算

运算符: and , or

一元运算: ! , not

6、比较运算

比较: > , <** **,** **>= , <= ( gt , lt , ge , le **)**等式: == , != ( eq , ne )

7、条件运算
代码语言：javascript复制
If-then: **(if) ? (then)**

If-then-else: **(if) ? (then) : (else)**

Default: (value) **?: (defaultvalue)**
8、特殊操作

无操作： _

3、设置属性值-th:attr

设置单个值

代码语言：javascript复制
<form action="subscribe.html" th:attr="action=@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
  </fieldset>
</form>

设置多个值

代码语言：javascript复制
<img src="../../images/gtvglogo.png"  th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

以上两个的代替写法 th:xxxx

代码语言：javascript复制
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
<form action="subscribe.html" th:action="@{/subscribe}">

所有h5兼容的标签写法

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes

4、迭代

代码语言：javascript复制
<tr th:each="prod : ${prods}">
        <td th:text="${prod.name}">Onions</td>
        <td th:text="${prod.price}">2.41</td>
        <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
代码语言：javascript复制
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
  <td th:text="${prod.name}">Onions</td>
  <td th:text="${prod.price}">2.41</td>
  <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

5、条件运算

代码语言：javascript复制
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>
代码语言：javascript复制
<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

6、属性优先级

关闭页面缓存
代码语言：javascript复制
spring.thymeleaf.cache=false

UserController

代码语言：javascript复制
@Controller
public class UserController {
    @RequestMapping(value = "/user/detail")
    public String message(Model model){
        model.addAttribute("data","springboot继承thtmeleaf模板引擎!");
        return "message";
    }
}

message.html

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2 th:text="${data}">展示要显示的内容</h2>
</body>
</html>

常用属性

代码语言：javascript复制
用户名称:<input type="text" th:name="username" th:id="username"/>
<a th:href="@{/test1(id=${id},username=${username},age=${age})}">相对路径多个参数(强烈推荐)</a>
<a th:href="@{'/test3/' ${id} '/' ${username}}">请求路径为RESTful风格</a>
<script type="text/javascript" th:src="@{/js/jQuery.js}"></script>
<img th:src="@{/img/005XKz6xgy1g5c1bt9q9nj31hc0u0n17.jpg}">
<h1>标准变量表达式${}</h1>
<span th:text="${user.username}"></span>
<h1>选择变量表达式:*{}</h1>
<span th:text="*{id}"></span>
<h1>混合使用</h1>
<span th:text="*{user.username}"></span>

循环遍历l集合

list集合
代码语言：javascript复制
<!--user 当前循环的对象变量名（随意）-->
<!--userStat 当前循环对象状态的变量 可选 默认就有-->
<!--${userList} 当前循环的集合-->
<div th:each="user,userStat:${userList}">
<span th:text="${userStat.count}"></span>
<span th:text="${user.id}"></span>
<span th:text="${user.nick}"></span>
<span th:text="${user.phone}"></span>
<span th:text="${user.address}"></span>
</div>
map集合
代码语言：javascript复制
<div th:each="userMap,userMapStat:${userMaps}">
    <span th:text="${userMapStat.count}"></span>
    <span th:text="${userMapStat.index}"></span>
    <span th:text="${userMap.key}"></span>
    <span th:text="${userMap.value}"></span>
    <span th:text="${userMap.value.id}"></span>
</div>
数组
代码语言：javascript复制
<div th:each="user,userStat:${userArray}">
    <span th:text="${userStat.index}"></span>
    <span th:text="${userStat.count}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.nick}"></span>
    <span th:text="${user.phone}"></span>
    <span th:text="${user.address}"></span>
</div>
复杂集合
代码语言：javascript复制
@RequestMapping(value = "/each/all")
    public String eachAll(Model model){
        List<Map<Integer, List<User>>> myList = new ArrayList<>();
        for (int i = 0; i <2 ; i  ) {
            Map<Integer, List<User>> myMap = new HashMap<>();
            for (int j = 0; j <2 ; j  ) {
                List<User> myUserList = new ArrayList<>();
                for (int k = 0; k <3 ; k  ) {
                    User user = new User();
                    user.setId(k);
                    user.setNick("zs" i);
                    user.setPhone("111111" i);
                    user.setAddress("运城" i);
                    myUserList.add(user);

                }
                myMap.put(j,myUserList);

            }
            myList.add(myMap);

        }
        model.addAttribute("myList",myList);
        return "eachAll";

    }
代码语言：javascript复制
<div th:each="myListMap:${myList}">
    <div th:each="myListMapObj:${myListMap}">
        Map集合的key:<span th:text="${myListMapObj.key}"></span>
            <div th:each="myListMapObjList:${myListMapObj.value}">
                <span th:text="${myListMapObjList.id}"></span>
                <span th:text="${myListMapObjList.nick}"></span>
                <span th:text="${myListMapObjList.address}"></span>
                <span th:text="${myListMapObjList.phone}"></span>
            </div>
    </div>

条件判断

代码语言：javascript复制
<div th:if="${sex eq 1}">
    男
</div>
<div th:if="${sex eq 0}">
    女
</div>
<!-- th:unless 与if相反-->
<div th:unless="${sex ne 1}">
    女
</div>

<div th:switch="${productType}">
    <span th:case="0">产品0</span>
    <span th:case="1">产品1</span>
    <span th:case="*">无产品</span>
</div>

内敛表达式

代码语言：javascript复制
<h3>内敛文本</h3>
<div th:inline="text">
    数据：[[${data}]]
</div>

数据：[[${data}]]

<h3>内敛脚本</h3>
    <script type="text/javascript" th:inline="javascript">
        function showData() {
            alert("-------")
            alert([[${data}]])
        }
    </script>
<button th:onclick="showData()">展示数据</button>

字面量

代码语言：javascript复制
<h1>文本字面量，用单引号引起来的就是字面量''</h1>
<a th:href="@{'/user/detail?sex=' ${sex}}">a</a>
<span th:text="Hello"></span>
<h3>数字字面量</h3>
今年是<span th:text="2020">1949</span>年
20年后是<h5 th:text="2020 20">1969</h5>年

<h3>boolean字面量</h3>
<div th:if="${flag}">
    执行成功
</div>
<div th:if="${!flag}">
    执行失败
</div>
<div th:unless="${!flag}">
    执行成功
</div>
<h3>null字面量</h3>
<span th:text="${user.id}"></span>
<span th:unless="${userDetail eq null}">对象已创建,地址不为空</span>
<div th:if="${userDetail.id eq null}">空</div>

字符串拼接

代码语言：javascript复制
<span th:text="'共' ${totalRows} '条记录' ${totalPage} '页,当前第' ${currentPage} '页' ' 尾页'"></span>
<h3>使用更优雅的方式</h3>
<span th:text="|共${totalRows}条${totalPage}页,当前第${currentPage}页,首页,尾页|">共120条12页,当前第一页,首页,尾页</span>

运算符

代码语言：javascript复制
<h3>三元运算符</h3>
<div th:text="${sex eq 1 ? '男':'女'}"></div>
<div th:text="${sex == 1 ? '男':'女'}"></div>
20 2=<span th:text="20 2"></span>
5>2为<span th:if="5  gt 2">真</span>
5<2<span th:unless="5 lt 2">假</span>
1>=1<span th:if="1 ge 1">真</span>
1<=1<span th:if="1 le 1">真</span>
<span th:if="${sex eq 1}">男</span>
<span th:unless="${sex ne 1}">女</span>

表达式内置对象

代码语言：javascript复制
<h1>送session中获取值</h1>
<span th:text="${#session.getAttribute('data')}"></span><br>
<span th:text="${#httpSession.getAttribute('data')}"></span><br>
<span th:text="${session.data}"></span>
<span th:text="${username}"></span>

<script type="text/javascript" th:inline="javascript">
    var scheme = [[${#request.getScheme()}]];
    alert([[${#request.getScheme()}]])

    alert([[${#request.getServerName()}]])

    alert([[${#request.getServerPort()}]])

    alert([[${#request.getContextPath()}]])

    var requestURL = [[${#httpServletRequest.requestURL}]];
    var requestString = [[${#httpServletRequest.queryString}]];
    var  requestAddress = requestURL   "?"   requestString;
    alert(requestURL)
    alert(requestString)
    alert(requestAddress)
</script>

<div th:text="${time}"></div>
<div th:text="${#dates.format(time,'yyyy-MM-dd HH-mm-ss-SSS')}"></div>
<div th:text="${data}"></div>
<div th:text="${#strings.substring(data,3,5)}"></div>
html 编程算法

0 人点赞