精华内容
下载资源
问答
  • 文章目录th:attr 的使用th:href URL链接中传参th:insert 、th:replace、th:include 代码片段引入时传参th:inline 内联th:inline="text" 文本内联th:inline="javascript" 脚本内联th:inline="none" 禁止内联 th:attr ...

    1、表达式

    1.1、简单表达式

    ${...} 变量表达式
    *{...} 选择变量表达式
    #{...} 消息表达式
    @{...} 链接url表达式

    1.2、三元运算、条件表达式:

    a? b:c   # 如果a为true,则输出b,否则输入c。     相当于 (if  else) 
    a? b     # 如果a为true,则输出b,否则输入'' 。   相当于 a? b:''
    

    示例:

    Controller :

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {
        map.put("name", "zhangsan");    
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> 条件表达式语法</h3>
    <div >
        1. <span th:text="${name}"></span ><br>
        2. <span th:text="${name} ? ${name}+'学习好':'李四体育好 '"></span ><br>
        3. <span th:text="${name} ? ${name}+'学习好' "></span ><br>
        4. <span th:text="${name2} ? '李四体育好 '"></span ><br>
    </div>
    

    运行结果:
    在这里插入图片描述

    说明:
    第2个表达式: name不为空时,即是true,则输出第一个值 zhangsan学习好
    第3个表达式: name不为空时,即是true,则输出第一个值 zhangsan学习好
    第4个表达式: name2不存在,即是false,则输出 ' ',即空。
    从第2与第4 可以看出 a? b 相当于 a? b:''

    解析后的 html 代码:

    <h3> 条件表达式语法</h3>
    <div >
        1. <span>zhangsan</span ><br>
        2. <span>zhangsan学习好</span ><br>
        3. <span>zhangsan学习好</span ><br>
        4. <span></span ><br>
    </div>
    

    1.3、默认表达式

    当我们取一个值,可能为空时,我们可以提前设置一个默认值 。

    语法:
    ?: b 相当于 ${a} ? ${a}:b

    如果 a不为空时,输出a的值,否则输入b的值。

    示例:

    Controller :

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {
        map.put("name", "zhangsan");    
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> th:text 默认值</h3>
    <div >
        <div th:text="${name ?: '李四'}"></div >
        <div th:text="${name2 ?: '李四'}"></div >
    </div>
    

    说明:
    已经设置了name 为 zhangsan,则第一个表达式,输出zhangsan 。
    第2个表达式,name2不存在,为空,则输入默认值李四

    运行结果:
    在这里插入图片描述

    解析后的html 代码:

    <h3> th:text 默认值</h3>
    <div >
        <div>zhangsan</div >
        <div>李四</div >
    </div>
    

    1.4、综合使用,属性值的 if - else

    html 静态页面如下:

    <li> <a href="javascript:void(0)" > <span> 菜单AAAA</span>  </a> </li>
    <li> <a href="/elements.html" class="multitabs" > <span> 菜单BBBB</span>  </a> </li>
    

    改造说明: items 是一个内含多个 item对象的集合, item 有url、icon、text 等属性值。
    当 url 为空时,href 值设为空方法,即 javascript:void(0) ,没有 class 属性;
    当 url 有值时,href 设为对应的值,并且增加 class="multitabs" 属性值 。

    使用 thymeleaf 如下(部分代码):

    <li  th:each="item,stat : ${items}" >
    	<a th:href="${item.url==''} ? 'javascript:void(0)':${item.url}" th:class="${item.url !=''}? 'multitabs'">
    		<span th:text="${item.text}" ></span>
    	</a> 
    <li>
    

    说明: 使用条件表达式的方法实现的 if-else 条件输出。

    2、字符串连接、拼接

    字符串连接有两种方式 :

    • 通过 ' '+ 拼接字符串 ;
    • | | 拼接字符串(推荐);

    示例1
    html 代码:

    变量:[[${hello}]]
    
    <!-- 通过 '' 和 + 拼接字符串 -->
    <div th:text="'哈哈,'+${hello}+''+${name}+''" ></div>
    
    <!-- 通过 | | 拼接字符串(推荐) -->
    <div th:text="|哈哈,${hello},${name}!|" ></div>
    

    运行结果:
    在这里插入图片描述
    解析后的html 代码:

    变量:hello world
    
    <!-- 通过 '' 和 + 拼接字符串 -->
    <div >哈哈,hello world,张三!</div>
    
    <!-- 通过 | | 拼接字符串(推荐) -->
    <div >哈哈,hello world,张三!</div>
    

    示例2:

    <!-- 通过 '' 和 + 拼接字符串 -->
    <a href="javascript:void(0)" th:onclick=" 'javascript:permission_audit('+ ${id} +') '">通过</a>
    
    <!-- 通过 | | 拼接字符串(推荐) -->
    <a href="javascript:void(0)" th:onclick="|javascript:permission_audit(${id})|">通过</a>
    

    解析后的代码:

    <a href="javascript:void(0)" onclick="javascript:permission_audit(12) ">通过</a>
    <a href="javascript:void(0)" onclick="javascript:permission_audit(12)">通过</a>
    

    3、th:attr 的使用

    th:attr 的用处就是把数据以属性值的保存起来。

    多个属性时,请逗号(,)的方式分割。格式如下:

    th:attr="attr1=${value1}, attr2=${value2}"
    

    说明:
    th:attr 标签定义多个属性的使用方式已经过时了,不推荐使用。推荐的方式:

    attr1="${value1}"  attr2="${value2}"
    

    示例1:

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {
    
        map.put("cityName", "北京");
        map.put("cityId", "00001");
        map.put("regionId", "010");
        
        map.put("title", "这是一张图片哦");
        map.put("logo", "风景图");
        
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> th:attr </h3>
        
    <div id="cityBtn" class="btn" th:attr="data-cityId=${cityId}, data-regionId=${regionId}" th:text="${cityName}" >上海
        <span class="fa fa-angle-down"></span>
    </div>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3> th:attr </h3>
        
    <div id="cityBtn" class="btn" data-cityId="00001" data-regionId="010" >北京</div>
    

    说明:

    可以看到数据以标签属性的方式保存起来。

    示例2:

    <img  src="../../images/ccc.jpg" 
    	  th:attr="src=@{/images/ccc.jpg},title=${title},alt=${logo},myName=${logo}" />
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <img  src="/images/ccc.jpg" title="这是一张图片哦" alt="风景图" myName="风景图" />  
    

    4、th:href URL链接中传参

    url 的参数 写在 括号内,多个参数时,用逗号分割。

    示例:

    Controller :

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {  
    
        map.put("id", "12");
        map.put("name", "zhangsan");
    
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> 在 th:href url 中实现参数传递 </h3>
    
    <a th:href="@{/show( id=${id } ,name=${name} )}">相对路径-传参</a>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    多个参数时,用逗号分割

    <h3> 在 url 中实现参数传递 </h3>
    
    <a href="/show?id=12&amp;name=zhangsan">相对路径-传参</a>
    

    5、th:insert 、th:replace、th:include 代码片段引入时传参

    Controller :

    @RequestMapping("/contentPage2")
    public String contentPage2(ModelMap map) {
        map.put("varA", "aaaaaa");
        map.put("varB", "bbbbbbb");
        return "/fragments/contentPage2";
    }
    

    html:
    /fragments/pagefrag3.html 代码片段:

    <div th:fragment="frag (varC,varD)">
        <p th:text="${varC} + ' - ' + ${varD}">...</p>
    </div>
    

    contentPage2.html :

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymleaf th:include 传参</title>
    </head>
    <body>
    
    <div th:include="fragments/pagefrag3::frag(${varA},${varB})">...</div>
    
    <div th:include="fragments/pagefrag3::frag(varC=${varA},varD=${varB})">...</div>
    </body>
    </html>
    

    运行结果:
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>thymleaf th:include 传参 </title>
    </head>
    <body>
    
    <div>
        <p>aaaaaa - bbbbbbb</p>
    </div>
    
    <div>
        <p>bbbbbbb - aaaaaa</p>
    </div>
    
    </body>
    </html>
    

    对于 th:include="fragments/pagefrag3::frag(varC=${varA},varD=${varB}) 指定参数名的方式时,

    • 代码片段中也有对应的参数名,否则报错;
    • 代码片段中是按照参数名的顺序来的, 无关主页面与代码片段指定的参数名是否一致。

    6、th:inline 内联

    虽然通过Thymeleaf标准⽅⾔中的标签属性已经⼏乎满⾜了我们开发中的
    所有需求,但是有些情况下我们更喜欢将表达式直接写⼊我们的HTML⽂
    本。 例如,我们喜欢这样写代码:

    <p>Hello, [[${session.user.name}]]!</p>
    

    ⽽不喜欢这样写代码:

    <p>Hello, <span th:text="${session.user.name}">Sebastian</
    span>!</p>
    

    [[...]][(...)] 中的表达式被认为是在Thymeleaf中内联的表达式。

    thymeleaf 在html标签内可通过th标签加${}表达式访问model里的对象数据。

    但如果不想通过th标签,而是简单地访问model对象数据,或是想在 javascript代码块里访问model中的数据,则要使用内联的方法。

    th:inline 内联的取值有三种:text、javascript、 none

    使用方式:

    [[${ 变量名 }]]

    7.1、th:inline=“text” 文本内联

    Controller

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {        
    
        map.put("id", "12");
        map.put("name", "zhangsan");        
    
        return "/grammar/thymeleaf";
    }
    

    html:

    <p>Hello, [[${name}]]!</p>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3>th:inline 内联</h3>
    <p>Hello, zhangsan!</p>
    

    约等于 th:tex 标签:

    <p>Hello, <span th:text="${name}">Sebastian</span>!</p>
    

    解析事的代码是

    <p>Hello, <span>zhangsan</span>!</p>
    

    7.2、th:inline=“javascript” 脚本内联

    如果想在javascript中 获取 变量值时,则需要加上th:inline="javascript"

    <script type="text/javascript" th:inline="javascript">	
        var max =  [[${name}]];
        console.log(max); 
    </script>
    

    注意:

    由于thymeleaf 的版本不同,有时变量外层要加引号(单引号,双引号都可以),即var max = "[[${name}]]"

    7.3、th:inline=“none” 禁止内联

    因为内联的表达式是双层中括号 [[${ 变量名 }]] , 当使用数组、二维数组时,就会与thymleaf 语法冲突,如果还想使用数据,此时必须禁止内联 h:inline="none",才使用常规的 javascript语法。

    <input type="text" id="maxSumOfDateInYear" value="aaaaaaaaa"/>
    
    <script type="text/javascript" th:inline="none">
        var max = document.getElementById("maxSumOfDateInYear").value;
        var data = [["2012-05-07", 6], ["2012-04-16", 4]];
        console.log(max);
        console.log(data);
    </script>
    

    此处,data表示二维数组,如果不禁止内联时,模板解析会出错的,所有要加上`th:inline=“none”,禁止使用 thymeleaf 语法,使用常规的 javascript 。

    7、th:each 循环

    th:each 迭代的同时,我们也可以获取迭代的状态对象 stat

    stat 对象包 含以下属性:

    • index,从0开始的角标
    • count,元素的个数,从1开始
    • size,总元素个数
    • current,当前遍历到的元素
    • even/odd,返回是否为奇偶,boolean值
    • first/last,返回是否为第一或最后,boolean值

    controller

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {        
         List list=new ArrayList();
         list.add(new User(10,"张三",20,"北京"));
         list.add(new User(25,"李四",34,"上海"));
         list.add(new User(28,"王五",56,"深圳"));
         list.add(new User(32,"赵六",66,"广州"));
         
         map.put("userList", list);
         return "/grammar/thymeleaf";
    }
    
    
    class User{    	
       	private int id;
       	private String name;
       	private int age;
       	private String address;	
    	
    	public User(int id, String name, int age, String address) {
    		super();
    		this.id = id;
    		this.name = name;
    		this.age = age;
    		this.address = address;
    	}
    	// setter/getter 省略
    }
    

    html :

    <h3> th:each 循环</h3>
    <div th:each="user,stat  : ${userList}">
        <span th:text="${stat.index}">index</span>
        <span th:text="${user.name}">name</span>
        <span th:text="${user.age}">age</span>
        <span th:text="${user.address}">address</span>
        <span th:if="${stat.even}">奇行</span>
        <span th:if="${stat.odd}">偶行</span>
        <span th:if="${stat.first}">第一行</span>
        <span th:if="${stat.last}">最后一行</span>
    </div>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3> th:each 循环</h3>
    h3> th:each 循环</h3>
    <div>
        <span>0</span>
        <span>张三</span>
        <span>20</span>
        <span>北京</span>    
        <span>偶行</span>
        <span>第一行</span>    
    </div>
    <div>
        <span>1</span>
        <span>李四</span>
        <span>34</span>
        <span>上海</span>
        <span>奇行</span>    
        
    </div>
    <div>
        <span>2</span>
        <span>王五</span>
        <span>56</span>
        <span>深圳</span>    
        <span>偶行</span>
    </div>
    <div>
        <span>3</span>
        <span>赵六</span>
        <span>66</span>
        <span>广州</span>
        <span>奇行</span>    
        <span>最后一行</span>
    </div>
    

    8、th:remove 删除模板片段

    th:remove 的值如下:

    • all : 删除包含标签和所有的孩子 ;
    • body : 不包含标记删除,但删除其所有的孩子 ;
    • tag : 包含标记的删除,但不删除它的孩子 ;
    • all-but-first : 删除所有包含标签的孩子,除了第一个 ;
    • none :什么也不做。这个值是有用的动态评估 。

    示例1

    Controller

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {  
        map.put("id", "12"); 
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> th:remove </h3>
    <div >
    	all:<div th:remove="all"><div id="hello">你好11</div></div>
    	body:<div th:remove="body"><div id="hello">你好11</div></div>
    	tag:<div th:remove="tag"><div id="hello">你好11</div></div>
    	tag:<div th:remove="none"><div id="hello">你好11</div></div>
    	
    </div>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3> th:remove </h3>
    <div >
    	all:
    	body:<div></div>
    	tag:<div id="hello">你好33</div>
    	tag:<div><div id="hello">你好44</div></div>
    	
    </div>
    

    示例2、th:remove 支持条件表达式

    <h3> th:remove 支持条件表达式 </h3>
    <div >
    	<!-- 表达式1与表达式2效果 一样的 -->	
    	表达式1:<div th:remove="${id}==12 ? tag"><div id="hello">你好11</div></div>
    	表达式2:<div th:remove="${id}==12 ? tag:none"><div id="hello">你好22</div></div>
    	
    	<!-- 表达式3: id==12时,返回body,即删除子标签的内容-->
    	表达式3:<div th:remove="${id}==12 ? body:tag"><div id="hello">你好33</div></div>
    </div>
    

    说明:
    表达式1与表达式2效果 是一样的。id=12时,返回tag, 否则,返回’’ ,即为none 。
    表达式3:id==12 时,返回body,即删除子标签的内容;id不等于12时,返回tag,删除当前标签。

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3> th:remove 支持条件表达式 </h3>
    <div >
    	<!-- 表达式1与表达式2效果 一样的 -->	
    	表达式1:<div id="hello">你好11</div>
    	表达式2:<div id="hello">你好22</div>
    	
    	<!-- 表达式3: id==12时,返回body,即删除子标签的内容-->
    	表达式3:<div></div>
    </div>
    

    9、th:with 定义局部变量

    9.1、th:with 定义一个局部变量

    thymeleaf - html:

    <div th:with="hello2=${name}+',你好' ">
    	<div id="hello"  th:text="${hello2}"></div>
    </div>
    

    解析后的代码:

    <div>
    	<div id="hello">zhangsan,你好</div>
    </div>
    

    9.2、th:with 定义的局部变量有是作用范围的

    th:with 定义的局部变量有作用范围的, 作用域限定于子标签以内。

    thymeleaf - html:

    <div th:with="hello2=${name}+',你好' ">
    	<div id="hello"  th:text="${hello2}"></div>
    </div>
    <div id="hello"  th:text="${hello2}"></div>
    

    解析后的代码:

    <div>
    	<div id="hello">zhangsan,你好</div>
    </div>
    <div id="hello"></div>
    

    说明:
    hello2 在作用域外使用,没有任何输出,为空的。

    9.3、th:with 一次性定义多个变量

    一次性定义多个变量,用逗号分割。

    thymeleaf - html:

    <div th:with="hello2=${name}+',你好',cityName2=${cityName}+',真美丽' ">
    	<div  th:text="${hello2}"></div>
    	<div  th:text="${cityName2}"></div>
    </div>
    

    解析后的代码:

    <div>
    	<div>zhangsan,你好</div>
    	<div>北京,真美丽</div>
    </div>
    

    9.4、th:with 定义的变量可以复用

    h:with 定义的变量可以复用,但必须在作用域内。

    thymeleaf - html:

    <div th:with="cityName2=${cityName}+',真美丽' , myDream=${cityName2}+',我真的好想去' ">
    	<div  th:text="${myDream}"></div>
    </div>
    

    解析后的代码:

    <div>
    	<div>北京,真美丽,我真的好想去</div>
    </div>
    

    说明:
    myDream 复用了 cityName2 的值。

    10、th:block 空标签,标签本身不显示

    <th:block> </th:block>是 Thymeleaf 提供的唯一的一个Thymeleaf块级元素,其特殊性在于Thymeleaf模板引擎在处理 <th:block> 的时候会删掉它本身,标签本身不显示,而保留其内容,应用场景主要有如下两个:

    10.1、同时控制相连两个标签是否显示

    如下代码:

    <div id="div1" th:if="...">
    </div>
    <div id="div2" th:if="...">
    </div>
    

    div1 和 div2 中两个if条件一样时,可以改成如下写法:

    <th:block th:if="...">
    	<div id="div1">
    	</div>
    	<div id="div2">
    	</div>
    </th:block>
    

    示例:

    thymeleaf - html:

    <th:block th:if="${id}==12">
    	<div id="div1">
    		张三的新增权限
    	</div>
    	<div id="div2">
    		张三的删除权限
    	</div>
    </th:block>
    

    解析后的代码:

    	<div id="div1">
    		张三的新增权限
    	</div>
    	<div id="div2">
    		张三的删除权限
    	</div>
    

    10.2、循环同级标签

    比如在表格中需要使用 th:each 循环 两个 tr,在不知道 th:block 标签时,可能会用 th:each 配合 th:if 使用,但是使用 th:block 就简单了,如下:

    <table>
    	<th:block th:each="...">
    		<tr>...</tr>
    		<tr>...</tr>
    	</th:block>
    </table>
    

    10.3、用于占位符

    Controller :

     @RequestMapping("/main")
    public String main(ModelMap map) {
    	return "/fragments5/main";
    }
    

    模板代码片段 base.html :

    <head th:fragment="common_header(title,links)">
    <title th:replace="${title}">The awesome application</title>
    
    	<!-- 共用的css和js -->
      <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
      <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
      <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
    
    	<!-- 额外添加的链接 -->
      <th:block th:replace="${links}" />
      
    </head>
    

    主页面 main.html

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="/fragments5/base :: common_header(~{::title},~{::link})">
      <title>Main页面</title>
      <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
      <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
    </head>
    <body>
    
    <h1>th:replace</h1>
    
    </body>
    </html>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Main页面</title>
    
    	<!-- 共用的css和js -->
      <link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
      <link rel="shortcut icon" href="/images/favicon.ico">
      <script type="text/javascript" src="/sh/scripts/codebase.js"></script>
    
    	<!-- 额外添加的链接 -->
      <link rel="stylesheet" href="/css/bootstrap.min.css"><link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
      
    </head>
    <body>
    
    <h1>th:replace</h1>
    
    </body>
    </html>
    

    具体参考文章:
    https://blog.csdn.net/xiaojin21cen/article/details/102919572

    11、th:if 条件判断

    11.1、th:if 多条件判断,使用 &&||

    <ul class="nav nav-second-level">
       <li th:each="cmenu : ${menu.children}">
           <a class="J_menuItem"  th:if="${cmenu.text!= '角色管理' && cmenu.text!= '系统菜单'}"
               href="graph_echarts.html" th:text="${cmenu.text}"
               th:href="${cmenu.attributes.url}">系统管理</a>
       </li>
    </ul>
    

    11.2、if elseif else 即 th:switch th:case

    如果要实现if elseif else 判断表达式,在thymeleaf要使用 th:switch 代替,th:case="*" 表示默认,需写在最后

    <div class="top" th:switch="${area}">
       <div class="logo" th:case="'a'">
           <img th:src="@{/static/images/logo-A.png}">
       </div>
       <div class="logo" th:case="'b'">
           <img th:src="@{/static/images/logo-B.png}">
       </div>
       <div class="logo" th:case="*">
           <img th:src="@{/static/images/logo-c.png}">
       </div>
    </div>
    

    注意:th:case 所在的标签必须在 th:switch 所在标签的里面。

    展开全文
  • 1. Thymeleaf中hrefth:href的区别: 转自:https://www.cnblogs.com/q924152020/p/10602807.html 语法格式如下: <a th:href="@{/channel/page/add}">添加渠道 </a> <a href="/channel/page/add...

    1. Thymeleaf中href与 th:href的区别:

    转自:https://www.cnblogs.com/q924152020/p/10602807.html
    语法格式如下:

    <a th:href="@{/channel/page/add}">添加渠道 </a>
    
    <a href="/channel/page/add">添加渠道 </a>
    

    在默认项目路径为空时,打Jar包单独运行时。二者效果一致。
    在使用Maven内嵌Tomcat或打War包部署到Servlet容器,或者在项目内执行App启动类,且有配置项目路径时。
    二者区别如下:

    href始终从端口开始作为根路径,如http://localhost:8080/channel/page/add

    th:href会寻找项目路径作为根路径,如http://localhost:8080/dx/channel/page/add

    2. th:href怎么带参数

    转自:https://www.cnblogs.com/w123w/p/11870775.html
    th:href带参数的写法,下面分别是带一个参数和两个参数的写法

    带一个参数:<a th:href="@{/sign/details(signId=${t.signId})}" ></a>
    带两个参数:<a th:href="@{/mobileSign/signDetails(id=${id},name=${name})}"></a>

    其实就是用逗号将两个参数分开
    传统URL传递多参数使用?和&拼接<a th:href="/teacherShowMember?id=123&name=小明"></a>

    3.要点总结

    如下是我项目中thymeleaf的配置文件:

    #thymeleaf 配置
    spring.thymeleaf.mode=HTML5
    spring.thymeleaf.encoding=UTF-8
    spring.thymeleaf.content-type=text/html
    spring.thymeleaf.cache=false
    spring.thymeleaf.prefix=classpath:/templates/
    spring.thymeleaf.suffix=.html
    spring.thymeleaf.check-template-location=true
    #上下文
    server.context-path=/thymeleaf
    
    #数据库
    spring.datasource.url=jdbc:mysql://127.0.0.1:3306/how2java?characterEncoding=UTF-8
    spring.datasource.username=root
    spring.datasource.password=admin
    spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    

    如果没有这个#上下文
    server.context-path=/thymeleaf
    则这两种写法都没有区别。如果有这个上下文,则要用第一种@写法

    <a th:href="@{/channel/page/add}">添加渠道 </a>
    
    <a href="/channel/page/add">添加渠道 </a>
    
    展开全文
  • Thymeleaf中th:hrefth:src、th:onclick

    千次阅读 2020-09-02 19:59:38
    Thymeleaf 中 th:hrefth:src、th:onclick需要拼接动态数据时(后端传递的动态数据),需要遵守相关的语法规定。 一般来说,上面的三种表达式都需要用到@{xxx},如<a th:href="@{/user/1}"></a> ==>...

    Thymeleaf 中 th:href、th:src、th:onclick需要拼接动态数据时(后端传递的动态数据),需要遵守相关的语法规定。

    一般来说,上面的三种表达式都需要用到@{xxx},如<a th:href="@{/user/1}"></a>  ==>解析完也就是 <a th:href="/user/1"></a>

    但是当需要进行动态拼接时,则不是简单的<a th:href="@{/user/${id}}"></a>,相关的写法如下。

    th:href

    我尝试的 th:href 三种写法如下,个人角色第一种好一些。即 th:href="@{ '字符串' + ${xx.xx}} "

    <a th:href="@{'/user/query'+${id}}">bb</a> <!-- 个人觉得这种更好一点 -->
    
    <a th:href="@{|/user/query${id}|}">bb</a>
    
    <a th:href="@{/user/query}+${id}">bb</a>

    th:src

    th:src和th:href差不多,可以用同样的方式拼接

    th:onclick

    在ssm项目中我使用

    <a href="#" th:οnclick="'deleteCart('+${cart.id}+')'">删除</a>

    没有发现问题,但是在Springboot中报错,一番百度后,找到一种好的写法,使用 [ [ ${xx.xx} ] ] 。

    <a href="#" th:οnclick="deleteCart([[${cart.id}]])">删除</a>

    总结

    用vue它不香吗

    展开全文
  • th:href传参 直接将参数放到括号里面,th:href跳转需要使用@{},获取后台传来的值使用${} th:onclick传参 这个需要使用[[]]将参数包括起来 script里面获取后台传来的值也是这样 th:fragment传参 直接将参数放在...

    th:href传参
    直接将参数放到括号里面,th:href跳转需要使用@{},获取后台传来的值使用${}
    在这里插入图片描述

    th:onclick传参
    这个需要使用[[]]将参数包括起来
    在这里插入图片描述
    script里面获取后台传来的值也是这样
    在这里插入图片描述

    th:fragment传参
    直接将参数放在括号里面,编译器无法识别所以报错,但是其实没问题
    在这里插入图片描述
    将参数传入th:fragment片段
    在这里插入图片描述

    展开全文
  • th:href路径问题

    千次阅读 2020-03-05 19:53:15
    th:href="@{路径}"路径问题记录 测试路径 http://127.0.0.1:8080/admin/blogs/input 出错点 th:href="@{lib/editormd/css/editormd.min.css}" 问题 测试时候没有找到该文件 分析 文件实际路径 打开控制台发现实际...
  • themleaf中th:href传入动态参数

    万次阅读 多人点赞 2019-02-26 16:58:42
    a th:href="@{'/pageController?pageNum='+${pageNum}}" th:text="${pageNum}"&gt;&lt;/a&gt; 格式:th:href="@{'字符串'+${model中的nam值}}"。 Controller中获取值:...
  • thymeleaf标签之th:href的使用

    万次阅读 多人点赞 2018-12-19 10:37:46
    介绍下th:href在项目中的使用。 它的写法与th:src一样 一般写法为th:href="@{值}" 如果是需要从model中取值的话,写法为 th:href="@{${model中的name值}}" 有的时候我们不止需要从model中进行...
  • thhref,th:src等标签使用小坑

    万次阅读 2019-04-20 13:04:49
    link rel="stylesheet" type="text/css" href="statics/css/index.css" th:href="@{/statics/css/index.css}" media="all" /> 其中的@{}里边必须要以“/”开头,才能正确根据项目路径找到相应的静态资源。 ...
  • thymeleaf中th:src和th:href动态拼接参数

    千次阅读 2021-02-11 10:15:37
    link rel="stylesheet" type="text/css" th:href="@{/static/{sys}/css/common/commons.css(sys=${pageVO.sys})}" /> <script type="text/javascript" th:src="@{/static/{sys}/js/{sec}/info.js(sys=${...
  • 一、th:if gt: great than(大于)> ge: great equal(大于等于)>= eq: equal(等于)== lt: less than(小于)< le: less equal(小于等于)<= ne: not equal(不等于)!= 写法如下,其它写法...
  • 推荐写法,简单好看,可读性高,如果是多个参数用逗号(,)分隔 URL表达式: <form id="listForm" th:action="@{/album/reductionItems(uid=${session.user.getUid()...a th:href="@{'/order.html?pageNum='+${pageI
  • th:href怎么带参数

    2020-04-10 12:11:19
    th:href怎么带参数 th:href带参数的写法,下面分别是带一个参数和两个参数的写法 带一个参数: <ath:href="@{/sign/details(signId=${t.signId})}"></a> 带两个参数: <a th:href="@{/...
  • a th:href="@{/product/add}" target="_blank">产品</a> 可以得到<a th:href="/product/add" target="_blank">产品</a> 使用 <a th:href="@{/product/show(skuid=${produc...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,262
精华内容 37,704
关键字:

th:href