精华内容
下载资源
问答
  • spring-boot(thymeleaf)中th:field和th:value的区别

    万次阅读 多人点赞 2019-01-17 21:51:01
    spring-boot中th:field和th:value的区别 一:常用th:标签简介: 我们再用spring-boot框架的时候,可能不会采用我们以往用的jsp页面的方式,而是通过采用thymeleaf渲染的方式进行 前后台数据的交互。常用的标签有 ...

                                   spring-boot中th:field和th:value的区别

    一:常用th:标签简介:

    我们再用spring-boot框架的时候,可能不会采用我们以往用的jsp页面的方式,而是通过采用thymeleaf渲染的方式进行

    前后台数据的交互。常用的标签有

    th:href,用法:th:href="/brand/selectbrand",(用来指明要要跳转的链接)

    th:object,用法:th:object="${brand}",(用来接受后台传过来的对象)

    样例:

        <form class="form form-horizontal" id="form-admin-add" action="#" th:action="@{/brand/updatebyid}" th:object="${brand}">

    th:field,用法:th:field="*{name}",(用来绑定后台对象和表单数据)

    th:value,用法:th:value="${brand.name}",(用对象对name值替换value属性)

    总结:th:field

    样例:

    <form class="form form-horizontal" id="form-admin-add" action="#" th:action="@{/brand/updatebyid}" th:object="${brand}">

            <input type="text" class="input-text" value="" th:value="*{id}" name="id" />

            <input type="text" class="input-text"  value="" th:field="*{code}" placeholder="" id="code"/>

    th:field和th:value的小结:

    thymeleaf里的th:field等同于th:nameth:value,浏览器在解析th:field的时候,会解析成name="${th:field}"的值。

    然后后台就可以接收到从前台传过来的值。而th:value可以接受到后台的的值,后台则可以根据name获取到前台的值。

    th:field和th:value都有两种从后台接受值的方式:1、${obj.name} 2、*{name}。需要注意的是,th:field需要有th:object

    指定前台传过来的参数,否则浏览器在解析的时候会出现错误。

    th:each,用法:th:each="brand:${pageInfo.list}",(后台把对象放在了pageinfo的分页插件的List里,然后用th:each遍

    历后台传过来的对象)。

    样例:

    <tr class="text-c" th:each="order:${pageInfo.list}">
         <td th:text="${order.id}"></td>
         <td th:text="${order.dicMethodDescription}"></td>
         <td th:text="${order.productBrandName}"></td>
         <td th:text="${order.productModelName}"></td>

    th:if,用法:th:if="${pageInfo.list.size() == 0}",(判断传过来的对象是否为空,如果为空,则执行...)

    th:unless,用法:th:unless="${pageInfo.list.size() == 0}"(判断传过来的对象是否为空,如果不为空,则执行...)

    标签只有在th:if中条件成立时才显示,th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。

    样例:

    <td th:if="${order.productStateName}==部分退款" th:text="交易成功" class="validate"></td>
    <td th:unless="${order.productStateName}==部分退款" th:text="${order.productStateName}"></td>

    三:thymeleaf实现动态访问controller:

    我们一般链接地址都是写死了的,这样其实间接的降低了系统的灵活性,我们可以在th:href的链接里添加参数,这样

    就可以动态的访问controller,举个栗子:

    //static页面层:

    <a title="编辑信息" href="javascript:;" th:οnclick="'javascript:brand_edit(\'编辑品牌信息\',\'/brand'+@{/updatebyid}+'/'+${brand.id}+'\',800,400)'" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>

    //controller层:

        //根据品牌名更改品牌的名称和编号信息
        @RequestMapping(value = "/updatebyid/{id}")
        public String updatebyidBefore(Model model, @ModelAttribute(value = "brand") ProductBrand brand,
                @PathVariable("id") Long id) {
            // 根据ID查询用户 和对应的角色
            brand = operatebrand.selectByPrimaryKey(id);
            // 查询对应用户的角色
            model.addAttribute("brand", brand);
            return "maintenance-operate/editor-brand";
        }

    四:对数据库的数据灵活筛选:

    一般我们在访问数据库的时候,可能在数据库中查询的时候写出我们固定需要的值,比如我们想要查的字段需要在某一

    范围内,例如需要查出状态表的状态在(1,3,5,7)状态里。这些状态可以在状态的字典表里查出。

    你可能想到会这样写:select id ,name,code from table where state in(1,3,5,7)。但是别人也想查对应的字段,但是筛选

    的状态不同,比如他筛选的是2,4,6,8。这时候他可能又需要写一套select语句。则这样也失去的代码灵活性。

    我们可以传一个状态数组进去,这时候就会根据状态数组的值来进行筛选。我们来看看实现。

    ServiceImpl层:

    List<OrderInfoForm> result = null;
    result=orderMapper.selectOrdersByStatesSelective(order, new Integer[] {3,4,6,7,8});

    dao层:

    List<OrderInfoForm> selectOrdersByStatesSelective(@Param(value="order")Order order,
        @Param(value="states")Integer[] states);

    mapper层:

    <select id="selectOrdersByStatesSelective" resultMap="AllResultMap" >
        select 
        <include refid="All_Column_List" />
        from order_list
    	LEFT JOIN product_method ON product_method.`code` = order_list.purchase_method
    	LEFT JOIN product_color ON product_color.`code` = order_list.color
    	LEFT JOIN product_guarantee ON product_guarantee.`code` = order_list.guarantee
    	LEFT JOIN product_info ON order_list.product_id = product_info.id
    	LEFT JOIN product_model ON product_info.model = product_model.`code`
    	LEFT JOIN product_standard ON product_info.standard = product_standard.`code`
    	LEFT JOIN product_state ON product_state.`code` = order_list.order_state
    	LEFT JOIN product_apperance ON product_apperance.`code` = order_list.apperance
    	LEFT JOIN product_brand ON product_brand.`code` = product_info.brand
        <where>
        	<if test="order.orderNum != null " >
    	        order_num like "%"#{order.orderNum,jdbcType=VARCHAR}"%"
    	    </if>
    	    <if test="order.operator != null " >
    	        and operator like "%"#{order.operator,jdbcType=VARCHAR}"%"
    	    </if>
    	    <if test="order.purchaseTime != null" >
    	        and purchase_time = #{order.purchaseTime,jdbcType=DATE}
    	    </if>
    	    <if test="order.orderState != null" >
    	        and order_state = #{order.orderState,jdbcType=VARCHAR}
    	    </if>
    	    <if test="order.serialNum != null" >
    	        and serial_num like "%"#{order.serialNum,jdbcType=VARCHAR}"%"
    	    </if>
    	    
    		<if test="states != null and states.length >0">
    			<foreach collection="states" item="state" separator="," open=" and order_state in (" close=")">
    				#{state,jdbcType=BIGINT}
    			</foreach>
    		</if>
    	</where>
      </select>

    注意最后的test的条件:

    解释一下各个的参数:

    1、foreach collection="传过来的状态数组名称"

    2、item="state"用于遍历每个状态

    3、separator=",":用于分割各个状态

    4、open=" 用于在对应位置添加双引号

    5、and order_state in (" close=")"用于在对应结束位置添加双引号

    展开全文
  • th:each 循环迭代 循环基本用法 获取迭代状态 条件判断 th:if th:unless th:switch th:each 循环迭代 循环基本用法 1、对于信息页面,数据格式是一样时,页面通常都是循环迭代它们,写过 JSP 的 JSTL 的就...

    目录

    th:each 循环迭代

    th:each  获取迭代状态

    th:if 条件判断 true

    th:unless 条件判断 false

    th:switch case 条件匹配


    th:each 循环迭代

    1、对于信息页面,数据格式是一样时,页面通常都是循环迭代它们,写过 JSP 的 JSTL 的就知道,JSTL 有一个 <c:foreach>,同理 Thymeleaf 也有一个 th:each。作用都是一样的,都是用于遍历数组、List、Set、Map 等数据。

    2、JSTL th:each 遍历格式如下:

    <c:foreach items ="${lis}" var = "li " begin="2" end ="12">
         ${li}
    </c:foreach>
         Thymeleaf 遍历格式如下:
    <tr th:each="user : ${userList}">
          <td th:text="${user.name}">xxx</td>
    </tr>

    3、Thymeleaf  th:each 遍历格式如下:

    <body>
    <!--后台控制器输出数据:model.addAttribute("userList", User.getUsers());-->
    <!--public static List<User> getUsers(),即数据格式为常见的:List<User>-->
    <table border="1">
        <thead>
        <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>是否已婚</th>
            <th>工资</th>
        </tr>
        </thead>
        <tbody>
        <!-- 遍历集合,如果被遍历的变量 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>
    </body>

    1)th:each="user : ${userList},意味着对于 ${userList} 结果中的每个元素,循环迭代当前模板⽚段,并使⽤名为”user“的变量作为当前迭代元素来填充模版数据。

    2)如果被遍历的变量为 null,或者不存在,则直接不会遍历。

    3)th:each="user : ${userList} 作用域为自己的整个标签内,包括自己,如上所示为 <tr>。

    4)级联获取属性值<td th:text="${user.department.depName}"></td>,假设 User 中关联了 Department 对象.

    4、如下所示为遍历下拉框的代码,因为 th:each 的作用域包括自己,所以遍历与取值都在同一个 <option> 标签中:

    <form class="navbar-form navbar-left" role="search">
        <select class="form-control" style="width: 200px;font-size: 16px"
                id="stationSelect">
            <option>全区</option>
    
    <!--后台会传值:model.addAttribute("stationList", stationList); 下拉框所有选项的值-->
    <!--后台会传值:model.addAttribute("stationName", stationName); 用户当前选中的下拉框的值-->
    
            <option th:each="station : ${stationList}" th:text="${station.name}" th:selected="${stationName} eq ${station.name}">横岗</option>
        </select>
    </form>
    

    被迭代变量的值类型

    1、java.util.List 类型不是可以在 Thymeleaf 中使⽤迭代的唯⼀值类型,下⾯这些类型的对象都可以通过 th:each 进⾏迭代的:

    1)任何实现 java.util.Iterable 接⼝的对象,其值将被迭代器返回,⽽不需要在内存中缓存所有值。
    2)任何实现 java.util.Enumeration 接⼝的对象。
    3)任何实现 java.util.Map 接⼝的对象, 迭代映射时,iter 变量将是 java.util.Map.Entry 类。
    4)任何数组。
    5)任何其将被视为包含对象本身的单值列表。

    th:each  获取迭代状态

    1、迭代过程中,经常会使用到它的一些迭代状态,如:当前迭代的索引,迭代变量中的元素的总数,当前迭代的是奇数还是偶数,当前是否是第一个元素,当前是否是最后一个元素 等等。

    2、在 JSP 的 JSTL 中是 <c:foreach items="${list}" var ="li" varStatus="status"> 里面的 status 属性。

    3、使⽤ th:each 时,Thymeleaf 提供了⼀种⽤于跟踪迭代状态的机制:状态变量。状态变量在每个 th:each 属性中定义,并包含以下数据:

    1)index 属性:当前迭代索引,从0开始
    2)count 属性:当前的迭代计数,从1开始
    3)size 属性:迭代变量中元素的总量
    4)current 属性:每次迭代的 iter 变量,即当前遍历到的元素
    5)even/odd 布尔属性:当前的迭代是偶数还是奇数。
    6)first 布尔属性:当前的迭代是否是第⼀个迭代
    7)last 布尔属性:当前的迭代是否是最后⼀个迭代。

    <body>
    <!--后台控制器输出数据:model.addAttribute("userList", User.getUsers());-->
    <!--public static List<User> getUsers(),即数据格式为常见的:List<User>-->
    <table border="1">
        <thead>
        <tr>
            <th>序号</th>
            <th>工号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>是否已婚</th>
            <th>工资</th>
        </tr>
        </thead>
        <tbody>
        <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
        <!-- 设置状态变量 loopStatus,逗号分隔,当为奇数行时,设置一个 css2 样式-->
        <tr th:each="user,loopStatus: ${userList}" th:class="${loopStatus.odd}?'css2'">
            <!-- 显示当前的行序号-->
            <td th:text="${loopStatus.count}"></td>
            <!-- 将用户的主键 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>

    4、迭代状态变量(本示例中的 loopStatus )在 th:each 属性中通过在变量 user 之后直接写其名称来定义,⽤逗号分隔。 与 iter 变量⼀样,状态变量的作⽤范围也是 th:each 属性的标签定义的代码⽚段中。

    5、如果没有显式地设置状态变量,则 Thymeleaf 将始终创建⼀个默认的迭代变量,该状态迭代变量名称为:迭代变量+“Stat”。

        <tbody>
        <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
        <!-- 没有显示设置状态变量时,Thymeleaf 默认创建一个 userStat 状态变量,直接使用即可-->
        <tr th:each="user:${userList}" th:class="${userStat.odd}?'css2'">
            <!-- 显示当前的行序号-->
            <td th:text="${userStat.count}"></td>
            <!-- 将用户的主键 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>

    th:if 条件判断 true

    1、很多时候只有在满⾜某个条件时,才将⼀个模板⽚段显示在结果中,否则不进行显示。比如只有当用户有订单时,才为它显示订单链接,否则不显示。th:if 属性用于满足这个需求:

    <body>
    <!--if属性结果为 true,模板会进行显示-->
    <p th:if="true">th:if="true"</p>
    <!--if属性结果为 false,模板不会进行显示-->
    <p th:if="false">th:if="false"</p>
    
    <!--后台控制器传出数据:model.addAttribute("isMarry", true);-->
    <p th:if="${isMarry}">已婚</p>
    </body>

    2、th:if 属性不仅只以布尔值作为判断条件,它将按照如下规则判定指定的表达式结果为 true:

    1)如果表达式结果为布尔值,则为 true 或者 false
    2)如果表达式的值为 null,th:if 将判定此表达式为 false
    3)如果值是数字,为 0 时,判断为 false;不为零时,判定为 true
    4)如果 value 是 String,值为 “false”、“off”、“no” 时,判定为 false,否则判断为 true,字符串为空时,也判断为 true
    5)如果值不是布尔值,数字,字符或字符串的其它对象,只要不为 null,则判断为 true

    <body>
    <!--表达式的结果为布尔类型时,if 直接以它为结果-->
    <p th:if="true">th:if="true"</p>
    <!--当表达式结果为null时,则if判定为false-->
    <p th:if="null">th:if="null"</p>
    <!--表达式为数字时,不为0,if判定为true,为0,时,if判定为false-->
    <p th:if="11">th:if="11"</p>
    <p th:if="0">th:if="0"</p>
    
    <!--表达式结果为字符串时,如果为 true,则if判定为true;值为 false,则if判定为false-->
    <!--结果为 off、no 等特殊字符串时,if 判定为false-->
    <p th:if="'true'">th:if="'true'"</p>
    <p th:if="'false'">th:if="'false'"</p>
    <p th:if="'off'">th:if="'off'"</p>
    <p th:if="'no'">th:if="'no'"</p>
    <!--表达式结果字符串不为false,off,no时,if判定为true-->
    <p th:if="'Love China'">th:if="'Love China'"</p>
    
    <!--后台传输:model.addAttribute("userList", User.getUsers());-->
    <!--只要 userList 不等于null,则if判定为true,否则为false-->
    <p th:if="${userList}">th:if="${userList}"</p>
    
    <!--后台传输:model.addAttribute("name", "");-->
    <!--字符串为空时,if判定为 true-->
    <p th:if="${name}eq''">name 等于空</p>
    <p th:if="${name}">th:if="${name}"</p>
    </body>

    th:unless 条件判断 false

    1、th:unless 是 th:if 的反向属性,它们判断的规则一致,只是 if 当结果为 true 时进行显示,unless 当结果为 false 进行显示。

    <body>
    <!--unless与if判定规则一致,但是显示条件相反,unless当结果为false时才进行显示-->
    <p th:unless="false">th:unless="false"</p>
    <p th:unless="true">th:unless="true"</p>
    
    <!--后台传输:model.addAttribute("isMarry", true);-->
    <p th:if="${isMarry}">已婚1</p>
    <p th:unless="!${isMarry}">已婚2</p>
    </body>

    th:switch case 条件匹配

    1、th:switch / th:case 与 Java 中的 switch 语句等效,有条件地显示匹配的内容。

    2、只要其中⼀个 th:case 的值为 true,则同⼀个 switch 语句中的其他 th:case 属性都将被视为 false。当有多个 case 的值为 true 时,则只取第一个。

    3、switch 语句的 default 选项指定为 th:case =“*”,即当没有 case 的值为 true 时,将显示default 的内容,如果有多个 default ,则只取第一个。

    <body>
    <!--数字类型,匹配其中第一个 case 后,其它的 case 都将视为 false-->
    <div th:switch="1">
        <p th:case="0">管理员</p>
        <p th:case="1">操作员</p>
        <p th:case="*">未知用户</p>
    </div>
    
    <!--数字类型:当没有 case 匹配时,取默认值,当有多个匹配,只取第一个-->
    <div th:switch="-1">
        <p th:case="0">管理员</p>
        <p th:case="*">操作员</p>
        <p th:case="*">未知用户</p>
    </div>
    
    <!--布尔类型,多个case满足时,只取第一个-->
    <div th:switch="true">
        <p th:case="true">已婚</p>
        <p th:case="true">已成年</p>
        <p th:case="false">未婚</p>
    </div>
    
    <!--字符串类型-->
    <div th:switch="'For China'">
        <p th:case="'For USA'">美国</p>
        <p th:case="'For UK'">英国</p>
        <p th:case="'For China'">中国</p>
        <p th:case="*">未知国籍</p>
    </div>
    </body>

     

    展开全文
  • th:fragment 模板布局 模板片段说明 ⽚段表达式语法 th:insert 与 th:replace 区别 参数化片段签名 编码示例 commons.html 公共模板 user/home.html 引入模板片段 运行效果 th:remove 删除模版片段 th:...

    目录

    th:fragment  模板布局

    模板片段说明

    ⽚段表达式语法

    th:insert 与 th:replace 区别

    参数化片段签名

    编码示例

    commons.html 公共模板

    user/home.html 引入模板片段 

    运行效果

    th:remove 删除模版片段


    th:fragment  模板布局

    模板片段说明

    1、模板中,经常希望从其他模板中包含⼀些部分,如⻚眉,⻚脚,公共菜单等部分,为了做到这⼀点,Thymeleaf 可以使⽤th:fragment 属性来定义被包含的模版⽚段,以供其他模版包含。

    如下所示定义模板片段:

    <div th:fragment="copy">
          &copy; 2011 The Good Thymes Virtual Grocery
    </div>

    2、上⾯的代码定义了⼀个名为 copy 的⽚段,然后可以使⽤ th:insert 或 th:replace属性(Thymeleaf 3.0 不再推荐使⽤ th:include)轻易地包含进需要的页面中。

    <body>
         ...     <div th:insert="~{footer :: copy}"></div>     ...
    </body>

    3、footer:表示模板名称,就是 html 文件的名称,如果是 springboot 开发,则根据 Spring Boot 配置的 Thymeleaf 映射查找。

    copy:表示模板片段名称,即 th:fragment="copy" 的名称

    th:insert 中的 〜{...} 表示⽚段表达式,它是可选的,上⾯的代码等价于如下所示写法,这也是实际开发中常用的写法:

    <body>
         ...     <div th:insert="footer :: copy"></div>     ...
    </body>

    ⽚段表达式语法

    1、th:insert/th:replace 中,〜{...} 片段表达式是可选的,可写可不写

    2、被引用的 th:fragment 模板片段与引用的 th:insert 或 th:replace 可以是在同一个 Html 文件中,也可以不在同一个 html 中。

    ⽚段表达式语法⾮常简单,有如下三种不同的格式:

    1)〜{templatename :: selector} -:- templatename 表示模板名称(html 文件名称),springboot 项目中就是 “templates”目录下的 html 文件名称,它根据 springboot 对 thymeleaf 的规则进行映射。selector 即可以是 th:fragment 定义的片段名称,也可以选择器,如标签的 id 值、CSS 选择器、或者 XPath 等。

    2)〜{templatename} -:- 包含名为 templatename 的整个模板。
    3)〜{:: selector} 或 〜{this :: selector}:包含在同⼀模板中的指定选择器的⽚段

    模板名 templatename  和选择器 selector 都可以是表达式(甚⾄是条件表达式!)如:

    <div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

    再次注意,th:insert/th:replace 中的 〜{...} 是可选的。

    〜{templatename :: selector} 中的 selector 可以是普通的选择器,如标签的 id 值、CSS 选择器、或者 XPath 等:

    ...
    <div id="copy-section"> &copy; 2011 The Good Thymes Virtual Grocery</div>
    ...

    可以直接通过 ID 属性来引⽤上⾯的⽚段,也可以是 CSS 选择器(.content)、XPath (//div[@class='content']):

    ...
    <div th:insert="~{footer :: #copy-section}"></div>

    ...

    th:insert 与 th:replace 区别

    1、Thymeleaf 3.0 之后不再推荐使⽤ th:include.

    th:insert:将被引用的模板片段插⼊到自己的标签体中
    th:replace:将被引用的模板片段替换掉自己
    th:include:类似于 th:insert,⽽不是插⼊⽚段,它只插⼊此⽚段的内容。

    <!--1、比如抽取的公用代码片段如下-->
    <footer th:fragment="copy">
        &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
     
    <!--2、采用如下三种方式进行引用-->
    <div th:insert="footer :: copy"></div>
    <div th:replace="footer :: copy"></div>
    <div th:include="footer :: copy"></div>
     
    <!--3、则三种引用方式的效果分别对应如下-->
    <div>
        <footer>
            &copy; 2011 The Good Thymes Virtual Grocery
        </footer>
    </div>
     
    <footer>
        &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
     
    <div>
        &copy; 2011 The Good Thymes Virtual Grocery
    </div>

    再次强调:

    1)th:fragment 与 th:insert、th:replace、th:include 可以在同一模板中,也可以是在不同的模板中

    2)th:insert 、th:replace、th:include 在标签中进行引用时可以不用片段表达式 〜{...} ,但是行内写法时,必须要用片段表达式,如:[[~{}]]、[(~{})]

    参数化片段签名

    为了使模板⽚段具有类似函数的功能,th:fragment 定义的⽚段可以指定⼀组参数:

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

    于是在 th:insert、th:replace 引用模板片段的时候,就可以传递参数过去:

    <div th:replace="templatename :: frag (${value1},${value2})">...</div>     //按参数定义时的顺序进行传递
    <div th:replace="templatename :: frag (onevar=${value1},twovar=${value2})">...</div>     //按参数名称传递,此时与参数定义的顺序无关

    比如公共菜单中高亮显示当前菜单时就可以使用这种传递参数的方式进行标识当前活动的菜单。

    编码示例

    SpringBoot 项目结构如上:

    1)commons/commons.html:公共页面,其中包含公共的头部,公共的底部,公共的左侧菜单。项目中这些公共部分都是得提取出来,然后供各个模块引用即可。公共的头、尾、左侧菜单可以放在一个 html 模板中,也可以放在单独的模板中。

    2)tiger/home.html:tiger 的首页,会引用公共模板片段,自己的 css 文件为 css/tigerHome.css

    3)user/home.html:用户的首页,会引用公共模板片段,自己的 css 文件为 css/userHome.css

    4)css/commons.css 这是公共模板 commons.html 中的代码片段引用的样式,因为 tiger/home.html、user/home.html 会引用 commons.html 中的代码片段,这些片段又需要 commons.css 中的样式,所以 commons.css 必须也在 tiger/home.html、user/home.html 文件中进行 link 引用。

    当点击:http://localhost/thymeleaf/tiger/home 时进入 tiger/home.html

    当点击:http://localhost/thymeleaf/user/home 时进入 user/home.html

    commons.html 公共模板

    公共页面,其中包含公共的头部,公共的底部,公共的左侧菜单。项目中公共部分都可以提取出来,然后供各个模块引用即可。公共的头、尾、左侧菜单可以放在一个 html 模板中,也可以放在单独的模板中。

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">
        <meta charset="UTF-8">
        <title>公共模板</title>
        <!-- 公共模板中,这个样式文件可以不用引用,因为不会从浏览器直接访问公共模板,而是访问具体的模块-->
        <!-- 注意:如果模板片段中应用了其中的样式,则谁引用了模板片段,谁就要导入此样式文件-->
        <link type="text/css" rel="stylesheet" th:href="@{/css/commons.css}">
    </head>
    <body>
    <!--定义公共的头部,commonHeader 为模板片段名称-->
    <header th:fragment="commonHeader">
        <h2>护龙山庄</h2>
    </header>
    
    <article>
        <!-- 定义公共的左侧菜单,commonMenu 表示片段名称,index 为传递进来的参数-->
        <div class="articleLeft" th:fragment="commonMenu(index)">
            <!-- 根据传递的参数 index 来设置当前活动的菜单样式;三元运算符,第三个参数缺省,当 ? 判断为 false 时返回 null-->
            <div><a th:href="@{/user/home}" th:class="${index}==0?'activeMenu'">用户首页</a></div>
            <div><a th:href="@{/tiger/home}" th:class="${index}==1?'activeMenu'">Tiger Home</a></div>
            <!-- 同理如果还有其它更多的菜单时,可以依次往下传递参数-->
        </div>
        <div class="content">
        </div>
    </article>
    
    <!--定义公共的底部,这里使用 id 选择器,当然也可以用片段名,如 th:fragment="commonFooter"-->
    <footer id="commonFooter">
        Copyright © 1998 - 2018 YYServer. All Rights Reserved
    </footer>
    
    </body>
    </html>

    user/home.html 引入模板片段 

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">
        <meta charset="UTF-8">
        <title>用户首页</title>
        <!-- 被引用的模板片段应用了 commons.css 中的样式时,在引用的模块中必须导入进来-->
        <link type="text/css" rel="stylesheet" th:href="@{/css/commons.css}">
        <!-- 这是本文件自己的样式文件-->
        <link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}">
    </head>
    <body>
    <!--引入公共的头部,使用 replace 替换自己的 header 标签-->
    <!--注意:模板名称会根据 springboot 对 Thymeleaf 的配置规则进行映射-->
    <!--默认情况下就是 templates 目录下的 html 文件-->
    <header th:replace="commons/commons :: commonHeader"></header>
    <article>
        <!-- 引入公共的左侧菜单,使用 replace 替换自己的 div;传递参数 0 ,与定义时约定的参数要保持一致-->
        <div th:replace="commons/commons :: commonMenu(0)">
        </div>
        <div class="content">
            <h2 class="hint">用户首页</h2>
        </div>
    </article>
    <!--引入公共的底部,这里使用 id 选择器,而不是片段名称-->
    <footer th:replace="commons/commons :: #commonFooter"></footer>
    </body>
    </html>

    与此同理,tiger/home.html 写法也是一样,只是在引入公共的左侧菜单时传递的参数不同:

    <div th:replace="~{commons/commons :: commonMenu(1)}">

    如果还有更多的公共左侧菜单,则只需要约定传递不同的参数即可。

    运行效果

    th:remove 删除模版片段

    1、如果想在某些情况下直接删除模板中的某些代码片段,则可以使用 th:remove,如 <tr th:remove="all">...。

    2、th:remove 可以有五种不同的删除⽅式:

    1)all:删除包含标签及其所有⼦项
    2)body:不删除包含标签,但删除所有的⼦项
    3)tag:删除包含标签,但不要删除其⼦项
    4)all-but-first:删除第一个子项以外的其它所有子项
    5)none:什么都不做。 该值对于动态计算有⽤。null 也会被视为 none

    <body>
    <!--hint 样式会为 div 加一个 1px 的红色边框-->
    <div class="hint">
        <p>th:remove<span> !</span></p>
    </div>
    <!--all:删除所有标签,包含自己-->
    <div class="hint" th:remove="all">
        <p>all<span> @</span></p>
    </div>
    <!--body:不删除自己,但删除所有子项-->
    <div class="hint" th:remove="body">
        <p>body<span> #</span></p>
    </div>
    <!--tag:删除自己,但不删除所有子项-->
    <div class="hint" th:remove="tag">
        <p>tag<span> $</span></p>
    </div>
    <!--all-but-first:除第一个子项以外,删除其它所有子项-->
    <div class="hint" th:remove="all-but-first">
        <p>all-but-first1<span> %</span></p>
        <!-- 上面第一个子项不会被删除,从第二个子项开始全部会被删除-->
        <p>all-but-first2<span> %</span></p>
    </div>
    <!--none:不做任何处理。该值对于动态计算时有用-->
    <div class="hint" th:remove="none">
        <p>none<span> ^</span></p>
    </div>
    </body>

         只要 th:remove 返回⼀个允许的字符串值(all,tag,body,all-but-first ,none),则 th:remove 属性可以使⽤任何 Thymeleaf 标准表达式,如:

    <a href="/something" th:remove="${condition}? tag : none">Link text not to be removed</a>

         th:remove 将 null 视为 none,因此以下⼯作与上述示例作用相同:

    <a href="/something" th:remove="${condition}? tag">Link text not to be removed</a>

         在这种情况下,如果 $ {condition} 为 false,则返回 null,因此不会执⾏删除。

     

     

    展开全文
  • thymeleaf th:text拼接

    万次阅读 2018-06-08 21:41:03
    xmlns:th="http://www.w3.org/1999/xhtml"&gt;比如:当前日期:2018年6月8日,超出平均值30%,对应如下源码:当前日期:&lt;span th:text="${dt}"&gt;&lt;/span&gt;超出平均...

    html页面开头:

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">

    比如:当前日期:2018年6月8日,超出平均值30%,

    对应如下源码:

    当前日期:<span th:text="${dt}"></span>超出平均值 <span th:text="${ratioPercent}+'%'"></span>,

    其中显示百分比部分,

    如果写成如下,则不显示百分号

    <span th:text="${ratioPercent}">%</span>

    如果写成如下,则提示错误

    <span th:text="${ratioPercent}%"></span>

    如果写成如下,则提示错误

    <span th:text="${ratioPercent}+%"></span>
    <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.

    In two years, it will be 2015.

    只会显示th:text里的内容,标签中间的文字并不会显示。

    以上结论是亲测!

    thymeleaf版本:3.0.1

     

    更多企业内的技术应用和使用技巧,请移步至我的公众号【程序员实用技能】

    图片

     

    展开全文
  • thymeleaf th:if 判断表达式

    万次阅读 多人点赞 2018-01-13 16:36:42
    作者:LoveEmperor-王子様 thymeleaf 判断表达式注意: gt:great than(大于)&gt; ge:great equal(大于等于)&gt;= eq:equal(等于)== ...这里以th:if为例,其他差不多 用...
  • Thymeleaf th:select th:checked th:if

    万次阅读 2018-05-21 19:26:42
    &lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"...head th:include="include :: header"&gt;&lt;/head&gt; &lt;body class="gray
  • thymeleaf th:replace th:include th:insert 的区别

    万次阅读 多人点赞 2017-06-27 16:57:14
    关于thymeleaf th:replace th:include th:insert 的区别 th:insert :保留自己的主标签,保留th:fragment的主标签。 th:replace :不要自己的主标签,保留th:fragment的主标签。 th:include :保留...
  • Thymeleaf th:include、th:replace使用

    万次阅读 多人点赞 2018-04-18 17:32:22
    由于每个模块都需要分页,所以每个页面都需要将分页的页码选择内容重复的写N遍,如下所示:重复的代码带来的就是Ctrl+C,Ctrl+V ,于是了解了一下thymeleaf的fragment加载语法以及th:include、th:replace的区别,得以...
  • th:fragment 布局标签,定义一个代码片段,方便其它地方引用 <div th:fragment="alert"> th:include 布局标签,替换内容到引入的文件 <head th:include="layout :: ...
  • Thymeleaf中th:href、th:src、th:onclick

    千次阅读 2020-09-02 19:59:38
    Thymeleaf 中 th:href、th:src、th:onclick需要拼接动态数据时(后端传递的动态数据),需要遵守相关的语法规定。 一般来说,上面的三种表达式都需要用到@{xxx},如<a th:href="@{/user/1}"></a> ==>...
  • 控制台报错信息 Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.NullPointerException] with root cause...
  • 文章目录th:attr 的使用th:href URL链接中传参th:insert 、th:replace、th:include 代码片段引入时传参th:inline 内联th:inline="text" 文本内联th:inline="javascript" 脚本内联th:inline="none" 禁止内联 th:attr ...
  • the 95th-percentile ,50th,99th

    千次阅读 2020-04-16 09:18:20
    用the 95th-percentile 举例 95th percentile百分点指的是所给数集中超过其95%的数。它是一个统计学上的概念。对于某个接口,准确统计它的流量时非常有用,它可以取出一些偶然得到的异常值。 95th百分点是统计时所...
  • th:if、th:unless th:if 如果值为true 则显示出该标签 否则 不显示(隐藏) #lists.isEmpty(userList) true 集合为空 #lists.isEmpty(userList) false 集合非空 <h3 th:if ="not ${#lists.isEmpty(userList)}"&...
  • 关于thymeleaf th:replace th:include th:insert 的区别 th:insert :保留自己的主标签,保留th:fragment的主标签。 th:replace :不要自己的主标签,保留th:fragment的主标签。 th:include :保留自己的主标签,...
  • 在Thymeleaf中一般采用 th:replace 或 th:insert . th:insert :保留自己的主标签,保留th:fragment的主标签。 th:replace :不要自己的主标签,保留th:fragment的主标签。 th:include :保留自己的主标签,不要th:...
  • th:href传参 直接将参数放到括号里面,th:href跳转需要使用@{},获取后台传来的值使用${} th:onclick传参 这个需要使用[[]]将参数包括起来 script里面获取后台传来的值也是这样 th:fragment传参 直接将参数放在...
  • 一、th:if gt: great than(大于)> ge: great equal(大于等于)>= eq: equal(等于)== lt: less than(小于)< le: less equal(小于等于)<= ne: not equal(不等于)!= 写法如下,其它写法...
  • 文章目录th:each 循环迭代循环基本用法获取迭代状态条件判断th:ifth:unlessth:switch th:each 循环迭代 循环基本用法 1、对于信息页面,数据格式是一样时,页面通常都是循环迭代它们,写过 JSP 的 JSTL 的就知道,...
  • thymeleaf中th:field和th:value的区别

    千次阅读 2020-08-01 07:21:29
    th:href,用法:th:href="/brand/service",(用来指明要要跳转的链接) th:object,用法:th:object="${brand}",(用来接受后台传过来的对象) th:field,用法:th:field="*{name}",(用来绑定后台对象和表单数据) th:...
  • Thymeleaf中th:field和th:value的一些区别

    万次阅读 2019-04-26 11:31:11
    1. th:field取值时,后台不能用reques.setAttribute()来传值,可以用model.addAttribute()来传值;而这两种方式th:value都可以接收。 2.使用th:field属性可以在页面初始化的时候给对应的元素生成Id。如下图: ...
  • th:replace & th:include

    千次阅读 2018-03-26 14:03:23
    原文:https://blog.csdn.net/h1021456873/article/details/79085505Thymeleaf html 导入(th:replace &amp; th:include)模板模块导入首先定义一个/WEBINF/templates/footer.html文件:&lt;!DOCTYPE ...
  • th:include (3.0版本后已不推荐使用) 类似于th:insert, 不同的是在插入的时候不带代码片段的标签,只插入代码 代码展示 代码片段 &lt;footer th:fragment="copy"&gt; &amp;copy; 2...
  • th:value和th:field中遇到的问题 <input th:value="*{userName}" type="text"> 等同于 <input value="userName返回的值" type="text"> <input type="text" th:field="*{userName}" > 等同于 &...
  • th:field 用法:th:field="*{name}",(用来绑定后台对象和表单数据) th:value 用法:th:value="${brand.name}",(用对象对name值替换value属性) thymeleaf里的th:field等同于th:name和th:value,浏览器在解析th:...
  • 原文来自:https://blog.csdn.net/sun_jy2011/article/details/402154237.1 th:attr用于设置其他属性的值,但不是所有属性的值都能设置,如text。... th:attr="action=@{/subscribe}"&gt; &lt...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 133,917
精华内容 53,566
关键字:

th