• springboot整合thymeleaf


    springboot整合thymeleaf

    1. 导入起步依赖

    <dependency>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-thymeleafartifactId>
    dependency>
    
    • 1
    • 2
    • 3
    • 4

    2. 更改引入版本

    <properties>
        <springboot-thymeleaf.version>3.0.2.RELEASEspringboot-thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.1.1thymeleaf-layout-dialect.version>
    properties>
    
    • 1
    • 2
    • 3
    • 4
    1. springboot自带的thymeleaf依赖为2.1.3版本,使用thymeleaf-layout-dialect版本为2以下版本。
    2. 使用3或3以上的thymeleaf时,需要thymeleaf-layout-dialect的版本为2或以上。
    3. 锁定thymeleaf版本时不能使用thymeleaf.version标签,会和springboot内部的依赖标签冲突。应当使用springboot-thymeleaf.version标签来锁定版本。

    3. 配置文件配置

    spring.thymeleaf.prefix=classpath:/templates/
    spring.thymeleaf.check-template-location=true
    spring.thymeleaf.suffix=.html
    spring.thymeleaf.encoding=UTF-8
    spring.thymeleaf.content-type=text/html
    spring.thymeleaf.mode=HTML
    spring.thymeleaf.cache=false
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    spring.thymeleaf.cache为缓存,需要热部署时,需要设置为false

    语法

    1. 替换标签体内容

    
    <div  th:text="${Hello}">显示欢迎div>
    
    <div  th:utext="${Hello}">显示欢迎div>
    
    • 1
    • 2
    • 3
    • 4

    2. 替换属性

    <div id="div01" th:id="${Hello}" th:class="${Hello}" th:text="${Hello}">显示欢迎div>
    
    <div style="background-color: yellow" th:style="'background-color:green'">div>
    
    
    • 1
    • 2
    • 3
    • 4

    3. 在表达式中访问属性域

    <h3>访问属性域h3>
    <p th:text="${attrRequestScope}">访问请求域 方式一p>  <br>
    <p th:text="${#httpServletRequest.getAttribute('attrRequestScope')}">访问请求域 方式二p><br/>
    
    <h3>访问Session域h3>
    <p th:text="${session.atttrSessionScope}">访Session域 方式一p><br/>
    <p th:text="${application.attrAppSocpe}">访问Application域 方式一p>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    4. 解析url地址

    <h3>解析URL地址,获取ContextPath的值h3>
    <p th:text="@{/success}">@{}是把ContextPath的值附加到指定的地址前p>
    <a th:href="@{/test}">@{}是把ContextPath的值附加到指定的地址前a>
    
    • 1
    • 2
    • 3

    5. 直接执行表达式

    <h3>直接执行表达式h3>
    <p>无转义效果 : [[${attrRequestScope}]] p>
    <p>有转义效果 : [(${attrRequestScope})] p>
    
    • 1
    • 2
    • 3

    6. 分支与迭代

    1. if 判断
    <h3>if判断字符串是否为空h3>
    <p th:if="${not #strings.isEmpty(attrRequestScope)}">attrRequestScope不为空显示p>
    ~~~<p th:if="${#strings.isEmpty(attrRequestScope)}">attrRequestScope为空显示p>~~~~
    
    • 1
    • 2
    • 3
    2. 测试循环
    <h3>测试循环h3>
    <div>
        <p th:text="${str}" th:each="str :${list}">p>
    div>
    
    • 1
    • 2
    • 3
    • 4
    1. 使用th:each进行集合数据迭代
    2. th:each=“声明变量:${集合}”
    3. th:each 用在哪个标签上,哪个标签就会出现多次

    7. 引入外部代码

    1. 要被引入的代码 include/part.html

      <html xmlns:th="http://www.thymeleaf.org">
      <div th:fragment="myFirstPart">
      <p>
          被包含的内容1111
      p>
      div>
      
      <div th:fragment="mySecondPart">
          <p>
              被包含的内容2222
          p>
      div>
      
      <div th:fragment="myThirdPart">
          <p>
              被包含的内容3333
          p>
      div>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
    2. 需要引入的页面

      <div th:insert="~{include/part :: myFirstPart }">div>
      <div th:replace="~{include/part :: mySecondPart }" style="background-color: yellow">div>
      <div th:include="~{include/part ::myThirdPart }" style="background-color: red">div>
      
      • 1
      • 2
      • 3
    3. 渲染后的页面源码

      <div>
          <div>
              <p>
                  被包含的内容1111
              p>
          div>
      div>
      <div>
          <p>
              被包含的内容2222
          p>
      div>
      <div style="background-color: red">
          <p>
              被包含的内容3333
          p>
      div>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
    1. " :: "左边的值拼前后缀后必须能够找到要包含的文件。
    2. " :: " 右边的值是代码片段的名字 ,就是th:fragment的值。
    3. insert将代码原样引入。
    4. replace使用被引入的代码和属性替换原有的。
    5. include使用被引入的代码div内部的代码。
  • 相关阅读:
    机器学习 day34(机器学习项目的完整周期、精确度和召回率、F1)
    mongo加入systemctl进行管理服务
    遥感数据与作物模型同化:遥感数据、PROSAIL模型、DSSAT模型、参数敏感性分析、数据同化算法、模型耦合
    DL/T645-2007通信协议调试记录(DDS1886)
    QT安装和运行
    找不到d3dcompiler_43.dll,无法继续执行代码如何解决
    计算机竞赛 多目标跟踪算法 实时检测 - opencv 深度学习 机器视觉
    第三周:天气识别 | 365天深度学习训练营
    Node的web编程(二)
    docker network
  • 原文地址:https://blog.csdn.net/qq_41972686/article/details/127877500