项目thymeleaf
官方文档：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">
© 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的更多相关文章
- thymeleaf模板引擎shiro集成框架
shiro权限框架.前端验证jsp设计.间tag它只能用于jsp系列模板引擎. 使用最近项目thymeleaf作为前端模板引擎,采用HTML档,未出台shiro的tag lib,假设你想利用这段时间s ...
- 8.SpringBoot 模板引擎 Thymeleaf
1.模板引擎原理 JSP.Velocity.Freemarker.Thymeleaf 都是模板引擎.SpringBoot推荐的Thymeleaf:语法更简单,功能更强大: Thymeleaf模板引擎 ...
- spring boot + Thymeleaf开发web项目
"Spring boot非常适合Web应用程序开发.您可以轻松创建自包含的HTTP应用.web服务器采用嵌入式Tomcat,或者Jetty等.大多数情况下Web应用程序将使用 spring- ...
- springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
- springboot配置server相关配置&整合模板引擎Freemarker、thymeleaf&thymeleaf基本用法&thymeleaf 获取项目路径 contextPath 与取session中信息
1.Springboot配置server相关配置(包括默认tomcat的相关配置) 下面的配置也都是模板,需要的时候在application.properties配置即可 ############## ...
- IDEA上创建 Maven SpringBoot+mybatisplus+thymeleaf 项目
概述 在WEB领域,Java也是在不断的探索和改进,从开始的JSP--->Struts1--->Struts2+Spring--->Spring MVC--->SpringBo ...
- springboot+mybatis+thymeleaf+docker构建的个人站点开源项目（集成了个人主页、个人作品、个人博客）
前言 My Site 主要功能有:个人首页.个人作品.个人博客为一体的站点,网站的文章和作品均由markdown进行编写,可以满足你的基本需求.如果觉得这个项目不错,请为它点赞支持. 项目架构 JDK ...
- 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 项 ...
- Thymeleaf 在项目中的应用及前后端交互的一些知识（1）
经过一段时间的工作,我的第一个项目已经快要上线了.本篇文章介绍些thymeleaf在工作中的实际应用,但是更多的还是一些前端处理后台数据的一些思路,如果有什么不正确的地方,希望大家指点. 1.th:e ...
随机推荐
- 使用python和selenium写一个百度搜索的case
今天练习的内容主要写了一个小功能,在百度上搜索某词汇,然后实现web上的back功能 代码如下: import unittest from selenium import webdriver from ...
- Ionic3新页面去除Tabs的菜单问题总结
问题 要求在[我的]页面,点击[退出登录]按钮,返回到登录页面. 使用 this.navCtrl.setRoot(LoginPage); 或者 this.navCtrl.push(LoginPage) ...
- composer 重装常见错误
install composer error: ------------------------------------ The PHP exe file you specified did not ...
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
npm init -y 初始化项目 //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...
- ansible 开源批量管理服务器工具
Ansible 是一款基于 Python 开发的自动化运维工具,可以进行配置管理.批量部署等功能.对于机器较多的场景,可以使用 Ansible 来免去重复敲命令的烦恼. 安装ansibleyum -y ...
- Vue中的slot内容分发
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...
- 「SCOI2016」萌萌哒 解题报告
「SCOI2016」萌萌哒 这思路厉害啊.. 容易发现有个暴力是并查集 然后我想了半天线段树优化无果 然后正解是倍增优化并查集 有这个思路就简单了,就是开一个并查集代表每个开头\(i\)每个长\(2^ ...
- 【linux】Linux系统SELinux简介
安全加强型Linux(Security-Enhanced Linux)简称 SELinux,它是一个 Linux 内核模块,也是 Linux 的一个安全子系统. 是linux安全加强的另一种实现方式. ...
- 自动驾驶技术之——无人驾驶中的CAN总线
CAN总线在整个无人驾驶系统中有着十分重要的作用.除了在VCU信号需要通过CAN总线进行传输外,无人车上的某些传感器(如雷达.Mobileye)的信号传递也是通过CAN实现的. 前言 本文主要内容是— ...
- Linux里文件和文件夹权限的含义
文件的权限: r : 可以读取此文件的实际内容. w: 可以编辑.新增或者是修改该文件的内容(但不含删除该文件),如果没有r权限,无法w. x : 该文件具有被系统执行的权限,可以删除. 文件夹的 ...