thymeleaf使用

joan_85

1665人浏览 · 2022-05-06 16:43:51

joan_85 · 2022-05-06 16:43:51 发布

thymeleaf使用

thymeleaf基本使用
th:block th:switch th:case
th:inline="javascript"
页面获取值的方式
判断
判断
时间转换：
js中可以获取到接口
循环获取index

thymeleaf基本使用

用法
1.需要在html里添加< html xmlns:th=“http://www.thymeleaf.org”>
这样才能正确使用th:*的形式
2.通过${}取值和ONGL表达式一致
3选择变量表达式*{}
4链接表达式@{}
5循环：通过th：each

 <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>

在这里插入图片描述

 1.简单表达式
 变量表达式:${...} 例如:${my.name}
 选择性/星号表达式:*{...} 一般是 th:object 后 取的 object中的属性,当没有选取对象时,功能等同于${...},*{firstName}也等同于${#object.firstName}
 消息表达式:#{...}
 链接表达式:@{...}
 <div th:object="${session.user}">
   <p>Name:<span th:text="*{firstName}">Seb</span>.</p>
   <p>Surname:<span th:text="*{lastName}">Pep</span>.</p>
 </div>
 等价于
 <div >
   <p>Name:<span th:text="${session.user.firstName}">Seb</span>.</p>
   <p>Surname:<span th:text="${session.user.lastName}">Pep</span>.</p>
 </div>
 <script th:src="@{//scriptserver.example.net/myscript.js}">...</script>
 等价于
 <script src="//scriptserver.example.net/myscript.js">...</script>
 
 2.文字
 
 2.1 文本(text literals)(放在单引号里面,可以是任意字符)
   <div th:class="‘the content’">...</div>
 
 2.2 数字(number literals)
  <p>The year is <span th:text="2013">1492</span>.</p>
  <p>In two years, it will be <span th:text="2013 + 2">1494</span>.</p>
 结果是：The year is 2013.
  The year is 2015.
 
 2.3 布尔值(boolean literals)：true,false
  <div th:if="${user.isAdmin()} == false">
  <div th:if="${user.isAdmin() == false}">

 2.4  null(the null literal)：null
  <div th:if="${variable.something} == null">
 
 2.5 文字符号(literal tokens)（不需单引号）：
  <div th:class="content">...</div>
 
 3.文本操作符
 3.1.字符串并置：+ (就是普通的连接符号)
 3.2.文字替换：|The name is ${name}| 
 
 4.算数运算符
 +, -, *, /, %
  <ol>
    <li>+：<span th:text="1+1">1+1</span>.</li>
    <li>-： <span th:text="2-1">2-1</span>.</li>
    <li>*：<span th:text="2*3">2*3</span>.</li>
    <li>/： <span th:text="9/4">9/4</span>.</li>
    <li>%：<span th:text="9%4">9%4</span>.</li>
  </ol>
 
 5.布尔运算
 <ol>
   <li>and：<span th:if="${!#lists.isEmpty(list)} and ${#lists.isEmpty(list2)}" th:text="${!#lists.isEmpty(list)} and ${!#lists.isEmpty(list2)}">and</span>
   </li>
    <li>or：<span th:if="${!#lists.isEmpty(list)} or ${#lists.isEmpty(list)}" 
     th:text="${!#lists.isEmpty(list)} or ${#lists.isEmpty(list)}">or</span>
    </li>
    <li>!(not)：<span th:if="${!#lists.isEmpty(list)}" 
     th:text="${!#lists.isEmpty(list)}">not</span>
  </li>
 </ol>

 6.比较和相等运算符
 <ol>
   <li>>(gt)：<span th:if="${#lists.size(list)} > 1">大于></span>else</li>
   <li>小于lt：<span th:if="${#lists.size(list)} lt 1">小于</span>else</li>
   <li>>=(ge)：<span th:if="${#lists.size(list)} >= 1">大于等于>=</span>else</li>
   <li>小于等于(le)：<span th:if="${#lists.size(list)} le 1">小于等于</span>else</li>
   <li>!(not)：<span th:if="${!#lists.isEmpty(list)}">!(not)</span>else</li>
   <li>==(eq)：<span th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')">等于==</span></li>
   <li>!=(ne/neq)：size:<span th:text="${#lists.size(list)}" th:if="${#lists.size(list)} != 1"> </span></li>
 </ol>
 
 7.条件表达式
 <1>a ? b:c  (if then:else)
 <2>a?c (if else)
 例如:
 <li>? 'xx' :'xx'(if ? then:else)<span th:class="${title} ? 'green' :' red'">样例一</span></li>
 <li>?'xx'(if ? then)<span th:class="${title1} ? 'green'">样例二</span></li>
 
 8.默认表达式
 语法: ?: (if:defaultValue)
 <div th:object=${session.user}>
   <p>Age:<span th:text="*{age}? : '(no age specified)' ">27</span>.</p>
 </div>
 等价于
 <div th:object=${session.user}>
   <p>Age:<span th:text="*{age！=null}? *{age} : '(no age specified)' ">27</span>.</p>
 </div>
 
 8.th:each 
  <select th:field="*{departmentId}" style="width:100px;">
    <option th:each="department : ${allDepartments}"
    th:value="${department .id}" th:text="${department .name}">Credit</option>
  </select>

参考：
https://www.pianshen.com/article/3836348992/
https://blog.csdn.net/weixin_47120348/article/details/116379165
https://blog.csdn.net/android_heng/article/details/54408812

th:block th:switch th:case

<select name="proMatType" lay-verify="required" lay-search>
        <th:block th:switch="${proflow?.proMatType}">
        //编辑
            <th:block th:case="1">
              <option th:value="1" checked>成品</option>
              <option th:value="2">原料</option>
               <option th:value="3">辅料</option>
               <option th:value="4">领料条形码</option>
               <option th:value="5">成品条形码</option>
           </th:block>
            <th:block th:case="2">
              <option th:value="1" checked>成品</option>
              <option th:value="2">原料</option>
               <option th:value="3">辅料</option>
               <option th:value="4">领料条形码</option>
               <option th:value="5">成品条形码</option>
           </th:block>
           //新建
            <th:block th:case="*">
              <option th:value="1" checked>成品</option>
              <option th:value="2">原料</option>
               <option th:value="3">辅料</option>
               <option th:value="4">领料条形码</option>
               <option th:value="5">成品条形码</option>
           </th:block>
        </th:block>
          
                                                
</select>

th:inline=“javascript”

th:inline="javascript"这是Thymeleaf中的内联写法，支持在javascript访问model中的数据，所以以后想写[[${xxx.xxx}]]这样写法的时候一定要记得在script中写上th:inline="javascript"这样才能骚起来……

页面获取值的方式

thymeleaf的textarea数据回显用th:text，th:value不能回显

thymeleaf中th:text和th:utext的区别

th:text
1.可以对表达式或变量进行求值
2.用“+”符号可进行文本连接
3.当获取后端传来的参数时，若后端有标签，如：

@RequestMapping("/")
public String aa(Model model) {
    String msg = "<h1>啦啦啦</h1>";
    model.addAttribute("msg", msg);
    return "index";
}
则用th:text获取传来的参数值时
<p th:text="采用text标签： + ${msg}"></p>
结果为
采用text标签：<h1>啦啦啦</h1>
th:utext
上面的例子，用th:utext
<p th:utext="采用utext标签： + ${msg}"></p>
结果为：
采用utext标签：
啦啦啦

也就是说用utext，会解析html，显示相应的效果

常用语法

${}
Thymeleaf通过${}来获取model中的变量
欢迎您：<span th:text="${user.name}">请登录</span>

th:object
<h2>
   <p th:text="${user.name}">Jack</p>
   <p> th:text="${user.age}">21</p>
   <p th:text="${user.friend.name}">Rose</p>
</h2>
因此，Thymeleaf提供了自定义变量来解决：当数据量比较多的时候，频繁的写user.就会非常麻烦。我们获取用户的所有信息，分别展示。

<h1 th:object="${user}">
   <p th:text="*{name}">Jack</p>
   <p th:text="*{age}">21</p>
   <p th:text="*{friend.name}">Rose</p>
</h1>
 在 h2上 用 th:object="${user}"获取user的值，并且保存
 在h2内部的任意元素上，可以通过 *{属性名}的方式，来获取user中的属性，这样就省去了user.前缀了

[ thymeleaf ] - th:field和th:value的区别

th:field 用法：th:field=“*{name}”，(用来绑定后台对象和表单数据)
th:value 用法：th:value=“${brand.name}”，(用对象对name值替换value属性)

thymeleaf里的th:field等同于th:name和th:value，浏览器在解析th:field的时候，会解析成name="${th:field}"的值。
然后后台就可以接收到从前台传过来的值。而th:value可以接受到后台的的值，后台则可以根据name获取到前台的值。

th:field和th:value都有两种从后台接受值的方式:
1、${obj.name} 
2、*{name}
需要注意的是，th:field需要有th:object指定前台传过来的参数，否则浏览器在解析的时候会出现错误。

参考：
https://blog.csdn.net/qq_43279637/article/details/86406836?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-86406836-blog-106216362.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-86406836-blog-106216362.pc_relevant_default&utm_relevant_index=1

https://blog.csdn.net/yzx3105/article/details/106216362

https://blog.csdn.net/qq_42282074/article/details/108111432

https://blog.csdn.net/rongxiang111/article/details/79678765?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-79678765-blog-89394269.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-79678765-blog-89394269.pc_relevant_paycolumn_v3&utm_relevant_index=1

https://blog.csdn.net/zflb2008/article/details/89394269

判断

https://blog.csdn.net/heiren_a/article/details/119011471

IF判断
Thymeleaf 条件

gt：great than（大于）>
ge：great equal（大于等于）>=
eq：equal（等于）==
lt：less than（小于）<
le：less equal（小于等于）<=
ne：not equal（不等于）!=

案例
 <div th:if="${score gt 60}">及格了</div>

其实按照常规写法也是可以的
 <div th:if="${score >= 60}">及格了</div>

多个判断可以用and 或者or来连接
<div th:if="${score lt 60 and score gt 0.0}"></div >

我们还可以给不同的值设置不同的样式，比如成绩大于60字体颜色位绿色，小于60的为红色

<div th:if="${score>=60}" th:text="${score}" style="color: green"></div >
<div  th:if="${score<60 and score > 0.0}" th:text="${score}" style="color: red"></div >


Switch Case
<select th:switch="${gender}">
        <option th:case="1">男</option>
        <option th:case="0">女</option>
        <option th:case="*">其他</option>
</select>


unless
Thymeleaf中是没有else的，但是可以使用unless配合if来完成if else的操作
unless字面意思就是除非
unless也可以理解为在表达式前加了个非

            <!--/* word不为空时显示 */-->
            <div th:if="${word}" th:text="${word}"></div>

            <!--/* word为空时显示（除非word不为空才不显示） */-->
            <div th:unless="${word}" th:text="${word}"></div>

在js中获取后端的值
https://blog.csdn.net/weixin_43992455/article/details/123945744

分为两种情况

获取java的字段
获取Thymeleaf的路径
针对这两种情况
首先要在script的标签上加th:inline=“javascript”

然后第一种情况：

<script type="text/javascript" th:inline="javascript">
	let a = [[${a}]];
</script>

第二种情况

<script type="text/javascript" th:inline="javascript">
	window.location.href = [[@{/login}]];
</script>

th:selected 回显遇到的问题

<select name="subcontractor" class="form-control m-b"  required >
	<option  th:each="LwOrg:${LwOrgs}"  th:text="${LwOrg.orgName}" th:value="${LwOrg.orgId}" th:selected="${lwPersonalInformation.subcontractor} == ${LwOrg.orgId}">
	</option>
</select>

selected中用以上写法${lwPersonalInformation.subcontractor} == ${LwOrg.orgId} 获取值判断没有问题，但是不能写在一个括号里面，如：
${lwPersonalInformation.subcontractor == LwOrg.orgId}
上面的表达式会取不到值

参考：https://blog.csdn.net/morningrain1995/article/details/105366085

判断

有时候在th:selected中写三元不生效，可以试试在外面写

//不生效
<option th:if="${pmPlan!=null}" th:selected="${pmAffiliatedEnterprises != null  ? (pro.id eq pmAffiliatedEnterprises.productId) : (pro.id eq promat.productId)}"

//生效
 th:selected="${pro.id}== ${pmAffiliatedEnterprises.productId}"

例子

<select name="productId" lay-verify="" lay-search lay-filter="productId"
        id="selectProductId">
    <option value="">请选择</option>
    <th:block th:if="${pmPlan!=null}">
        <option
                th:if="${pmAffiliatedEnterprises!=null}"
                th:selected="${pro.id}== ${pmAffiliatedEnterprises.productId}"
                th:value="${pro.id}" th:each="pro:${templateList}"
                th:text="${pro.productname}"
                th:img="${pro.productImg}"></option>
        <option
                th:unless="${pmAffiliatedEnterprises!=null}"
                th:selected="${pro.id}==${promat.productId}"
                th:value="${pro.id}" th:each="pro:${templateList}"
                th:text="${pro.productname}"
                th:img="${pro.productImg}"></option>
    </th:block>

    <th:block th:unless="${pmPlan}">
        <option  th:value="${pro.id}" th:each="pro:${templateList}"
                th:text="${pro.productname}" th:img="${pro.productImg}">
        </option>
    </th:block>
</select>

时间转换：

在这里插入图片描述

<span th:text="${#dates.format(createDate, 'yyyy-MM-dd HH:mm:ss')}"></span>

js中可以获取到接口

//js中可以接收后端参数thymeleaf：
<script type="text/javascript" th:inline="javascript"></script>

循环获取index

在这里插入图片描述
参考：
https://blog.51cto.com/u_15300825/5219231
https://blog.csdn.net/FCXAIQQ/article/details/109816991

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

华为云数据仓库专业级开发者认证重磅发布

华为开发者空间

KubeEdge 新版本5大特性解读：更完备的节点设备能力，全新的Dashboard体验

华为开发者空间

一文带你搞懂GaussDB数据库性能调优

华为开发者空间

所有评论(0)

查看更多评论

joan_85

@hnn567

已为社区贡献3条内容

thymeleaf使用

joan_85

thymeleaf使用

thymeleaf基本使用

th:block th:switch th:case

th:inline=“javascript”

页面获取值的方式

判断

判断

时间转换：

js中可以获取到接口

循环 获取index

所有评论(0)

joan_85

循环获取index