• Thymeleaf模板

    Thymeleaf可用于前后端分离，  下图，value="aa"， 在本地静态资源可以改变值，但是在web端不可以

    前端可以在本地测试，有数据了显示数据  所以前后端分离

     

     

    th属性

    常用th属性解读
    html 有的属性， Thymeleaf 基本都有，而常用的属性大概有七八个。其中 th 属性执行的优先级从 1~8 ，数字越低优先
    级越高。

     

    一、 th:text ：设置当前元素的文本内容，相同功能的还有 th:utext ，两者的区别在于前者不会转义 html 标签，后者
    会。优先级不高： order=7
    二、 th:value ：设置当前元素的 value 值，类似修改指定属性的还有 th:src ， th:href 。优先级不高： order=6
    三、 th:each ：遍历循环元素，和 th:text 或 th:value 一起使用。注意该属性修饰的标签位置，详细往后看。优先级很
    高： order=2
    四、 th:if ：条件判断，类似的还有 th:unless ， th:switch ， th:case 。优先级较高： order=3
    五、 th:insert ：代码块引入，类似的还有 th:replace ， th:include ，三者的区别较大，若使用不恰当会破坏 html 结
    构，常用于公共代码块提取的场景。优先级最高： order=1
    六、 th:fragment ：定义代码块，方便被 th:insert 引用。优先级最低： order=8
    七、 th:object ：声明变量，一般和 *{} 一起配合使用，达到偷懒的效果。优先级一般： order=4
    八、 th:attr ：修改任意属性，实际开发中用的较少，因为有丰富的其他 th 属性帮忙，类似的还有 th:attrappend ，
    th:attrprepend 。优先级一般： order=5

     

    常用th属性使用  

    使用 Thymeleaf 属性需要注意点以下五点：
    一、若要使用 Thymeleaf 语法，首先要声明名称空间：
    xmlns:th="http://www.thymeleaf.org"
    二、设置文本内容 th:text ，设置 input 的值 th:value ，循环输出 th:each ，条件判断 th:if ，插入代码块 th:insert ，定
    义代码块 th:fragment ，声明变量 th:object
    三、 th:each 的用法需要格外注意，打个比方：如果你要循环一个 div 中的 p 标签，则 th:each 属性必须放在 p 标签上。
    若你将 th:each 属性放在 div 上，则循环的是将整个 div 。
    四、变量表达式中提供了很多的内置方法，该内置方法是用 # 开头，请不要与 #{} 消息表达式弄混。
    五、 th:insert ， th:replace ， th:include 三种插入代码块的效果相似，但区别很大。
    pom.xml 引入 Thymeleaf 的依赖，并确定其版本

    th:text:

     th:value:

     

     th:each：

     

    th:if：

    flag=false时，整个p标签不显示，可以用作登录，登录显示，不登录不显示。

     

     th:insert：   th:fragment：

     

     

     

    th:object：

     

    标准表达式语法

    ${...} 变量表达式， Variable Expressions
    @{...} 链接表达式， Link URL Expressions
    #{...} 消息表达式， Message Expressions
    ~{...} 代码块表达式， Fragment Expressions
    *{...} 选择变量表达式， Selection Variable Expressions
    变量表达式使用频率最高，其功能也是非常的丰富。所以我们先从简单的代码块表达式开始，然后是消息表达式，再是链接表达式，最后是变量表达式，随带介绍选择变量表达式。

    链接表达式好处 

    不管是静态资源的引用， form 表单的请求，凡是链接都可以用 @{...} 。这样可以动态获取项目路径，即便项目名变了，依然可以正常访问
    链接表达式结构
    无参： @{/xxx}
    有参： @{/xxx(k1=v1,k2=v2)} 对应 url 结构： xxx?k1=v1&k2=v2
    引入本地资源： @{/ 项目本地的资源路径 }
    引入外部资源： @{/webjars/ 资源在 jar 包中的路径 }
    列举：第三部分的实战引用会详细使用该表达式

     

    常用的内置方法

    一、 strings ：字符串格式化方法，常用的 Java 方法它都有。比如： equals ， equalsIgnoreCase ， length ， trim ，
    toUpperCase ， toLowerCase ， indexOf ， substring ， replace ， startsWith ， endsWith ， contains ，
    containsIgnoreCase 等
    二、 numbers ：数值格式化方法，常用的方法有： formatDecimal 等
    三、 bools ：布尔方法，常用的方法有： isTrue ， isFalse 等
    四、 arrays ：数组方法，常用的方法有： toArray ， length ， isEmpty ， contains ， containsAll 等
    五、lists，sets：集合方法，常用的方法有： toList ， size ， isEmpty ， contains ， containsAll ， sort 等
    六、 maps ：对象方法，常用的方法有： size ， isEmpty ， containsKey ， containsValue 等
     
    七、 dates ：日期方法，常用的方法有： format ， year ， month ， hour ， createNow 等 
    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>ITDragon Thymeleaf 内置方法title>
    6. head>
    7. <body>
    8. <h2>ITDragon Thymeleaf 内置方法h2>
    9. <h3>#strings h3>
    10. <div th:if="${not #strings.isEmpty(itdragonStr)}" >
    11. <p>Old Str : <span th:text="${itdragonStr}"/>p>
    12. <p>toUpperCase : <span th:text="${#strings.toUpperCase(itdragonStr)}"/>p>
    13. <p>toLowerCase : <span th:text="${#strings.toLowerCase(itdragonStr)}"/>p>
    14. <p>equals : <span th:text="${#strings.equals(itdragonStr, 'itdragonblog')}"/>p>
    15. <p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(itdragonStr,
    16. 'itdragonblog')}"/>p>
    17. <p>indexOf : <span th:text="${#strings.indexOf(itdragonStr, 'r')}"/>p>
    18. <p>substring : <span th:text="${#strings.substring(itdragonStr, 2, 8)}"/>p>
    19. <p>replace : <span th:text="${#strings.replace(itdragonStr, 'it', 'IT')}"/>p>
    20. <p>startsWith : <span th:text="${#strings.startsWith(itdragonStr, 'it')}"/>p>
    21. <p>contains : <span th:text="${#strings.contains(itdragonStr, 'IT')}"/>p>
    22. div>
    23. <h3>#numbers h3>
    24. <div>
    25. <p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入: <span
    26. th:text="${#numbers.formatDecimal(itdragonNum, 0, 2)}"/>p>
    27. <p>formatDecimal 整数部分保留五位数，小数点后保留两位，四舍五入: <span
    28. th:text="${#numbers.formatDecimal(itdragonNum, 5, 2)}"/>p>
    29. div>
    30. <h3>#bools h3>
    31. <div th:if="${#bools.isTrue(itdragonBool)}">
    32. <p th:text="${itdragonBool}">p>
    33. div>
    34. <h3>#arrays h3>
    35. <div th:if="${not #arrays.isEmpty(itdragonArray)}">
    36. <p>length : <span th:text="${#arrays.length(itdragonArray)}"/>p>
    37. <p>contains : <span th:text="${#arrays.contains(itdragonArray, 5)}"/>p>
    38. <p>containsAll : <span th:text="${#arrays.containsAll(itdragonArray,
    39. itdragonArray)}"/>p>
    40. div>
    41. <h3>#lists h3>
    42. <div th:if="${not #lists.isEmpty(itdragonList)}">
    43. <p>size : <span th:text="${#lists.size(itdragonList)}"/>p>
    44. <p>contains : <span th:text="${#lists.contains(itdragonList, 0)}"/>p>
    45. <p>sort : <span th:text="${#lists.sort(itdragonList)}"/>p>
    46. div>
    47. 后台给负责给变量赋值，和跳转页面。
    48. 4.3 总结
    49. 一、Thymeleaf 是Spring Boot 官方推荐的Java模版引擎框架，其文件扩展名为.html
    50. 二、Thymeleaf 几乎支持所有的html属性，用于赋值的th:text和th:value，用于循环遍历的th:each，用于条件判
    51. 断的th:if
    52. 三、Thymeleaf 提供四种标准的表达式，有丰富内置方法的${}，用于国际化的#{}，用于代码插入的~{}，用于处理
    53. 链接的@{}
    54. 四、一定要注意循环遍历的th:each和代码插入的th:insert用法，尽量避免破坏html结构的细节问题
    55. <h3>#maps h3>
    56. <div th:if="${not #maps.isEmpty(itdragonMap)}">
    57. <p>size : <span th:text="${#maps.size(itdragonMap)}"/>p>
    58. <p>containsKey : <span th:text="${#maps.containsKey(itdragonMap, 'thName')}"/>p>
    59. <p>containsValue : <span th:text="${#maps.containsValue(itdragonMap, '#maps')}"/>
    60. p>
    61. div>
    62. <h3>#dates h3>
    63. <div>
    64. <p>format : <span th:text="${#dates.format(itdragonDate)}"/>p>
    65. <p>custom format : <span th:text="${#dates.format(itdragonDate, 'yyyy-MM-dd
    66. HH:mm:ss')}"/>p>
    67. <p>day : <span th:text="${#dates.day(itdragonDate)}"/>p>
    68. <p>month : <span th:text="${#dates.month(itdragonDate)}"/>p>
    69. <p>monthName : <span th:text="${#dates.monthName(itdragonDate)}"/>p>
    70. <p>year : <span th:text="${#dates.year(itdragonDate)}"/>p>
    71. <p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(itdragonDate)}"/>p>
    72. <p>hour : <span th:text="${#dates.hour(itdragonDate)}"/>p>
    73. <p>minute : <span th:text="${#dates.minute(itdragonDate)}"/>p>
    74. <p>second : <span th:text="${#dates.second(itdragonDate)}"/>p>
    75. <p>createNow : <span th:text="${#dates.createNow()}"/>p>
    76. div>
    77. body>
    78. html>

    。

  • 相关阅读:
    使用 WebView2 封装一个生成 PDF 的 WPF 控件
    2022年8月9日：使用 ASP.NET Core 为初学者构建 Web 应用程序--使用 HTML、CSS 和 Javascript 构建简单的网站
    RabbitMQ之消息模式简单易懂，超详细分享~~~
    C++从静态类型到单例模式
    不同背景+目标图像 Augmentation 代码及使用方法
    如何恢复U盘里面的已经损坏的数据？
    一个或多个主机没有报告其操作系统分配。这可能是由于运行已过期的 Cloudera Manager Agent 版本造成的。
    Java反射
    基于51单片机万年历设计—显示温度农历
    【LeetCode】一周中的第几天+ 一年中的第几天
  • 原文地址：https://blog.csdn.net/weixin_60934893/article/details/128070297