Thymeleaf模板引擎

Posted 2021-03-06 fantongxue

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Thymeleaf模板引擎相关的知识，希望对你有一定的参考价值。

1.springboot直接引入
2.配置thymeleaf视图解析器
3.编写模板html
选择变量表达式
- 链接表达式
下面是我在商城项目中遇到的thymeleaf的冷知识点，主要是thymeleaf，还有几点其他的，顺便总结一下

@(thymeleaf这样玩)

1.springboot直接引入

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId><br></dependency>

非springboot项目使用如下依赖：

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>2.1.4</version>
</dependency>

默认的模板映射路径是：src/main/resources/templates

springboot1.4之后，可以使用thymeleaf3来提高效率，并且解决标签闭合问题，配置方式：

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <!-- set thymeleaf version -->
    <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
    <!--set java version-->
    <java.version>1.8</java.version>
</properties>

2.配置thymeleaf视图解析器

这点与springMVC是相类似的：

#thymeleaf start
spring.thymeleaf.mode=html5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
#thymeleaf end

3.编写模板html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <!--/*@thymesVar id="name" type="java.lang.String"*/-->
    <p th:text="'Hello！, ' + ${name} + '!'">3333</p>
</body>
</html>

选择变量表达式

<div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text={nationality}">Saturn</span>.</p>
</div>
等价于
<div>
    <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>

链接表达式

<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a> <!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<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})}">Content路径,默认访问static下的order文件夹</a>

条件　if/unless 　　
使用th:if和th:unless属性进行条件判断，th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
　　　switch
<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>

循环通过th:each

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <!-- 不存在则忽略，显示hello null!(可以通过默认值进行设置)-->
    <p th:text="'Hello ' + (${name}?:'admin')">3333</p>
    <table>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
        </tr>
        <tr th:each="emp : ${empList}">
            <td th:text="${emp.id}">1</td>
            <td th:text="${emp.name}">海</td>
            <td th:text="${emp.age}">18</td>
        </tr>
    </table>
</body>
</html>

下面是我在商城项目中遇到的thymeleaf的冷知识点，主要是thymeleaf，还有几点其他的，顺便总结一下

使用thymeleaf前提是

<html xmlns:th="www.thymeleaf.org">

Thymeleaf th:each 遍历格式如下

<table border="1">
    <thead>
    <tr>
        <th>工号</th>
        <th>姓名</th>
        <th>生日</th>
        <th>是否已婚</th>
        <th>工资</th>
    </tr>
    </thead>
    <tbody>
    
    一定要谨记！！！！下面的userList一定得是后台controller通过把查到的list集合存储到了model中然后才转发到html页面的。
    <!-- 遍历集合，如果被遍历的变量 userList 为 null 或者不存在，则不会进行遍历，也不报错-->
    <tr th:each="user : ${userList}">
        <!-- 将用户的主键 uId 存在在 name 属性中-->
        <td th:text="${user.uId}" th:name="${user.uId}"></td>
        <td th:text="${user.uName}"></td>
        <!-- 使用dates对象格式化日期-->
        <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm')}"></td>
        <!-- 三运运算判断是否已婚-->
        <td th:text="${user.isMarry}?'是':'否'"></td>
        <td th:text="${user.price}"></td>
    </tr>
    </tbody>
</table>

通过thymeleaf模板遍历Controller层传递来的数组对象，并通过超链接将对象的某个属性当作参数再传到Controller层，重点是后面的删除链接拿到参数

<!DOCTYPE html>
<!-- 引用thymeleaf模板-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
  <tr th:each="user : ${users}">
       <td th:text="${user.userId}">1</td>
      <td th:text="${user.userName}">yxc</td>
      <td th:text="${user.userPwd}">123456</td>
      <td th:text="${user.userEmail}">yes</td>
        <!-- 用 / 打头, 会自动把上下文路径(比如 http://localhost:8888/demo) 路径加上去. -->
     <td style="text-align: center" width="100px"><intput type="button" th:onclick="del([[${user.id}]]);">删除</intput></td>
  </tr>
</table>
</body>
</html>

上传的图片回显
把图片上传的文件夹设置为静态资源，然后进行访问，这里的picpath我添加的信息其实是图片的名字，并不是路径

$.ajax({
                url:"/demo/getPic",
                data:{"kind":"男装"},
                type:"post",
                dataType:"json",
                success:function (data) {
                    alert(JSON.stringify(data));
                    var path="D:/tempFiles/files/";
                    var str = "";
                    if (data != "") {
                        for (var i = 0; i < data.length; i++) {
                            str+= '<a href="/demo/buy" class="floor-item"><div class="item-img hot-img">[外链图片转存失败(img-HtyDtpRY-1562144284695)(https://mp.csdn.net/mdeditor/images/'+data[i].picpath+')]</div> <div class="price clearfix"><span class="pull-left cr fz16">' + data[i].price + '</span> <span class="pull-right c6">进货价</span></div> <div class="name ep" title="'+data[i].name+'">' + data[i].name + '</div></a>';
                        }
                        $("#nanzhuang").append(str);
                    }
                }
                });

thymeleaf标签之th:href的使用
如果是需要从model中取值的话，写法为

java th:href="@{${model中的name值}}"java
有的时候我们不止需要从model中进行取值，还需写字符串与model中的值进行拼接，写法为

 th:href="@{'字符串'+${model中的nam值}}"

获取到url路径的参数

var str=location.href;//获取url整条路径
            var num=str.indexOf("=");//获取“=”之前的字符个数
            var slice=str.slice(num+1);//截取多少个字符之后的字符串，从多少个开始截取
            alert(slice);//获取到参数

以上是关于Thymeleaf模板引擎的主要内容，如果未能解决你的问题，请参考以下文章

Spring MVC 3.2 Thymeleaf Ajax 片段

认识模板引擎-Thymeleaf

❤️SpringBoot模板引擎❤️——Thymeleaf