原创

Thymeleaf的基本使用

  1. 导入pom依赖
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>
  1. 关闭缓存
spring:
  thymeleaf:
    cache: false  #关闭模板引擎的缓存
  1. 基本语法
<!DOCTYPE html>
<!--引入 thymeleaf标签-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>案例1</title>
</head>
<body>
    <!--显示文本内容-->
    <h2 th:text="${content}"></h2>

    <!--实体对象-->
    <h2 th:text="${user.name}"></h2>
    <h2 th:text="${user.age}"></h2>
    <h2 th:text="${user.address}"></h2>
    <!--表单提交-->
    <form th:action="@{/test/hello}">
        <input type="submit" value="提交">
    </form>

    <!--
    遍历List, index.count: 在集合中的第几个
          index.index: 索引
    -->
    <ul th:each="item,index: ${list}">
        <li th:text="${index.index + '名称:' + item.name +'年龄:'+ item.age +'地址:'+ item.address}"></li>
    </ul>

    <!--
        读取Map结构,
        1.知道key的情况下--》 直接取
        2.不知道key,遍历
    -->
    <span th:text="${myMap.myName}"></span>
    <span th:text="${myMap.myAge}"></span>

    <div th:each="m: ${myMap}">
       <span th:text="${m.key +':'+ m.value}"></span>
    </div>

    <!--时间类型格式化-->
    <h3 th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></h3>

    <!--if控制语句-->
    <span th:if="${user.age > 18}">已成年</span>

    <!--not if 语句  表示取反  大于18显示未成年-->
    <span th:unless="${user.age < 18}">已成年</span>

    <!--使用fragment 引入单独抽离的页面-->
    <div id="A" style="color: red;background-color: antiquewhite" th:include="footer::copy">

    </div>

    <!--如果不是最后一个元素 就加上、符号-->
    <em th:unless="${index.last}">、</em>


    <!--maps.containsKey()
    在searchMap中查询 是否有keuwords这个key 有则为true-->
    <input type="text" th:value="${#maps.containsKey(searchMap,'keywords')? searchMap.keywords:''}" />

    <!--字符串截取,超过指定长度使用...省略 -->
    <a target="_blank" href="item.html"  th:title="${item.name}" th:utext="${#strings.abbreviate(item.name,70)}"></a>

    <!--categoryList 存在 再渲染-->
    <div class="type-wrap" th:if="${#maps.containsKey(result,'categoryList')}">
        <div class="fl key">分类</div>
        <div class="fl value">
                        <span th:each="category,index: ${result.categoryList}">
                            <a href="" th:text="${category}"></a>
                            <!--如果不是最后一个元素 就加上、符号-->
                            <em th:unless="${index.last}">、</em>
                        </span>
        </div>
        <div class="fl ext">分类</div>
    </div>


    <!-- 当用户选择了某种规格(比如颜色,则不再渲染颜色相关参数)-->
    <div class="type-wrap" th:each="spec:${result.specList}" th:unless="${#maps.containsKey(searchMap,'spec_'+ spec.key)}">
        <div class="fl key" th:text="${spec.key}"></div>
        <div class="fl value">
            <ul class="type-list">
                <li th:each="val: ${spec.value}">
                    <a th:text="${val}"></a>
                </li>
            </ul>
        </div>
        <div class="fl ext"></div>
    </div>

    <!--在url后面追加参数(key=value)-->
    <a th:href="@{${url}(category=${category})}" th:text="${category}"></a>

</body>
</html>
Java
前端

留言板