官方文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#link-urls

定义和引用片段

在我们的模板中，我们经常需要包含其他模板中的部分，页脚，标题，菜单等部分......

为了做到这一点，Thymeleaf需要我们定义这些部分，“片段”，以便包含，这可以使用th:fragment属性来完成。

假设我们要在所有杂货页面上添加标准版权页脚，因此我们创建一个/WEB-INF/templates/footer.html包含以下代码的文件：

<!DOCTYPE html>
<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

  <body>

    <div th:fragment="copy">

      &copy; 2011 The Good Thymes Virtual Grocery

    </div>

  </body>

</html>

上面的代码定义了一个名为的片段copy，我们可以使用其中一个th:insert或th:replace属性轻松地在我们的主页中包含这些片段（并且th:include，尽管自Thymeleaf 3.0以来不再推荐使用它）：

<body>

  ...

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

</body>

4.4链接URL

由于它们的重要性，URL是Web应用程序模板中的一等公民，而Thymeleaf标准方言具有特殊的语法，@语法：@{...}

<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->

<a href="details.html"

   th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->

<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->

<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

这里要注意的一些事情：

  • th:href是一个修饰符属性：一旦处理，它将计算要使用的链接URL并将该值设置href为<a>标记的属性。
  • 我们被允许使用表达式来指定URL参数（如您所见orderId=${o.id}）。还将自动执行所需的URL参数编码操作。
  • 如果需要几个参数，这些参数将用逗号分隔： @{/order/process(execId=${execId},execType='FAST')}
  • URL路径中也允许使用变量模板： @{/order/{orderId}/details(orderId=${orderId})}
  • 以/（例如:)开头的相对URL /order/details将自动以应用程序上下文名称为前缀。

内联

一.文本内联

[[…]]之间的表达式在Thymeleaf被认为是内联表达式,在其中您可以使用任何类型的表达式,也会有效th:text属性。

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

等同于：

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

为了让内联工作,我们必须激活它使用th:inline 属性,它有三个可能的值或模式(text, javascript 和 none)。让我们试着文本:

<p th:inline="text">Hello, [[${session.user.name}]]!</p>

如果不使用th:inline="text",则会被当做字符串显示。th:inline="javascript"表示能在js中使用[ [] ]取值。

标签的th:inline不需要包含内联的一个表达式，任何父标签都行，例如如下也是可以的：

<body th:inline="text">

   ...

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

   ...

</body>

二.脚本内联

　　Thymeleaf提供一系列的“脚本”的内联模式功能,这样你就可以将你的数据在脚本中创建一些脚本语言。

　　我们可以做的第一件事,写脚本内联表达式的值到我们的脚本。

<script th:inline="javascript">

    var user = [[${user.username}]];

      alert(user);

</script>
<script th:inline="javascript">

      var msg  = 'Hello, ' + [[${user.username}]];

      alert(msg);

</script>

　　只要加入th:inline="javascript"在js代码中才能使用[ [] ]

项目thymeleaf的更多相关文章

  1. thymeleaf模板引擎shiro集成框架

    shiro权限框架.前端验证jsp设计.间tag它只能用于jsp系列模板引擎. 使用最近项目thymeleaf作为前端模板引擎,采用HTML档,未出台shiro的tag lib,假设你想利用这段时间s ...

  2. 8.SpringBoot 模板引擎 Thymeleaf

    1.模板引擎原理 JSP.Velocity.Freemarker.Thymeleaf 都是模板引擎.SpringBoot推荐的Thymeleaf:语法更简单,功能更强大: Thymeleaf模板引擎 ...

  3. spring boot + Thymeleaf开发web项目

    "Spring boot非常适合Web应用程序开发.您可以轻松创建自包含的HTTP应用.web服务器采用嵌入式Tomcat,或者Jetty等.大多数情况下Web应用程序将使用 spring- ...

  4. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

  5. springboot配置server相关配置&整合模板引擎Freemarker、thymeleaf&thymeleaf基本用法&thymeleaf 获取项目路径 contextPath 与取session中信息

    1.Springboot配置server相关配置(包括默认tomcat的相关配置) 下面的配置也都是模板,需要的时候在application.properties配置即可 ############## ...

  6. IDEA上创建 Maven SpringBoot+mybatisplus+thymeleaf 项目

    概述 在WEB领域,Java也是在不断的探索和改进,从开始的JSP--->Struts1--->Struts2+Spring--->Spring MVC--->SpringBo ...

  7. springboot+mybatis+thymeleaf+docker构建的个人站点开源项目（集成了个人主页、个人作品、个人博客）

    前言 My Site 主要功能有:个人首页.个人作品.个人博客为一体的站点,网站的文章和作品均由markdown进行编写,可以满足你的基本需求.如果觉得这个项目不错,请为它点赞支持. 项目架构 JDK ...

  8. Spring 4 mvc+shiro+thymeleaf+JPA(Hibernate)+MySql eclipse项目模板

    本模板基本配制为:spring 4.3.8+thymeleaf 3.0.3 +hibernate 5.5.5 + mysql 5.7 IDE:eclipse 运行环境为:Tomcat 8.0.28 项 ...

  9. Thymeleaf 在项目中的应用及前后端交互的一些知识（1）

    经过一段时间的工作,我的第一个项目已经快要上线了.本篇文章介绍些thymeleaf在工作中的实际应用,但是更多的还是一些前端处理后台数据的一些思路,如果有什么不正确的地方,希望大家指点. 1.th:e ...

随机推荐

  1. Web页面执行shell命令

    本文以apache为web服务器为例 安装apache服务yum -y install httpd 启动apachesystemctl restart httpd 创建shell脚本cd /var/w ...

  2. Nagios故障 CHECK_NRPE: Socket timeout after 10 seconds.

    Nagios 的警报信息如下,意思是 nrpe 进程执行某些脚本超过了 10 秒钟,就会发警报 CHECK_NRPE: Socket timeout after 10 seconds 修改 comma ...

  3. 自学华为IoT物联网之路

    自学华为IoT物联网之路 01 自学华为IoT物联网_01 物联网概述 02 自学华为IoT物联网_02 常见物联网通信技术 03 自学华为IoT物联网_03 公共事业物联网常见问题及解决方案 04  ...

  4. Android RadioGroup中设置默认选中RadioButton 后,选中两个的问题 解决方法

    项目中遇到多个RadioGroup中单选RadioButton ,设置了默认选中第一个 . 然后就 能选中两个RadioButton . . .. 我开始这样给设置默认选中一个的: for (int ...

  5. [luogu2476][bzoj1079][SCOI2008]着色方案【动态规划】

    题目描述 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块.所有油漆刚好足够涂满所有木块,即c1+c2+-+ck=n.相邻两个木块涂相同色显得很难 ...

  6. Pycharm自动添加文件头注释

    1.选择File -> Settings 2.选择 File and Code Templates -> Files -> Python Script 3.设置 #!/usr/bin ...

  7. 原生JS节点操作

    获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...

  8. Atlantis HDU - 1542 （扫描线，线段树）

    扫描线的模板题,先把信息接收,然后排序,记录下上边和下边,然后用一条虚拟的线从下往上扫.如果我扫到的是下边,那么久用线段树在这个区间内加上1,表示这个区间现在是有的,等我扫描到上边的时候在加上-1,把 ...

  9. 从Java的角度修复文件下载漏洞

    从Java的角度谈下文件下载漏洞的产生,然后到他的修复方案.这里我的修复方案是白名单,而没有采用黑名单的方式. 首先先看一段存在文件下载漏洞的代码code: HTML视图页面  download.ht ...

  10. Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门）

    1.Vue-cli 1.新建一个vue项目 打开cmd 官方命令行工具 npm install -g vue-cli //安装脚手架 cd到你想要存放demo的目录下,然后 vue init webp ...