thymeleaf引入（jquery怎么用thymeleaf）

本文目录

• jquery怎么用thymeleaf
• eclipse WebContent 目录下的文件夹怎么在jsp中引入
• 关于thymeleaf的使用

jquery怎么用thymeleaf

• 文字语法

• 文字原型注释添加代码

• 文字编译级注释删除代码

• 自然语法

• 直接插入表达式

• 标准HTMLXML注释

• Thymeleaf编译级注释块

• Thymeleaf原型注释块

• 引入模板片段

• 模板片段传递参数

• 移除模板片段

• if 和 unless

• switch

• 设置任意属性

• 设置特殊属性

• 同时设置两个属性

• 添加属性值

• 混合值布尔属性

• 设置任意属性值

• HTML5属性名

• Messages

• Variables

• 选择上的表达式

• 链接URLs

• 片段

• 文本值

• 数字值

• 布尔值

• NULL值

• 文字标记

• 文本相加

• 文字替换

• 算术操作

• 逻辑操作

• 比较操作

• 条件表达式

• 默认表达式

• 不操作标记

• 数据转换格式化

• 预处理

• 标准表达式语法

• 设置文本内容

• 设置属性值

• 迭代

• 条件分支

• 模板布局

• 本地变量

• 注释

• 直接插入

• 文字模板模式

• 解耦模板逻辑

Thymeleaf是一个模板引擎，支持的模板类型有

• HTML

• XML

• TEXT

• JAVASCRIPT

• CSS

• RAW

标准表达式语法

Messages

语法：#{...} 
示例：

• #{home.welcome(${session.user.name})} home.welcome=Hello {0}!12



Variables

语法：${...} 
示例：

• ${today} ${param.user.name} ${session.user.name} ${application.user.name} ${person.createCompleteNameWithSeparator(’-’)}12345



特殊变量：

选择上的表达式

语法：*{...} 
示例：

• *{name} = ${user.name} //th:object=${user} = ${#object.name}123



链接URLs

语法：@{...} 
示例：

• ***隐藏网址***



片段

语法：~{...} 
示例：

• ~{footer :: copy}1



文本值

语法：’...’ 
示例：

• ’I\’m Beach Chou!’1



数字值

语法: number 
示例：

• 2016 3.14f12



布尔值

语法: true, false

NULL值

语法：null

文字标记

语法： token 
备注：只能使用A-Z, a-z, 0-9, ‘’, ‘.’, ‘-‘, ‘_’ 
示例：

• IPhone71



文本相加

语法：expression + expression

文字替换

语法：|…| 
备注：内部只能使用变量 
示例：

• |The name is ${name}|1



算术操作

语法：+, -, *, /, %, div, mod 
示例：

• 1 + 11



逻辑操作

语法： and, or, not 
示例：

• ${con} and ${co}1



比较操作

语法：gt, lt, ge, le, eq, ne 
示例：

• 3 gt 21



条件表达式

语法： 
If-then: (if) ? (then) 
If-then-else: (if) ? (then) : (else) 
示例：

• ${con} ? true : false1



默认表达式

语法： 
Default: (value) ?: (defaultvalue) 
示例：

• ${con} ?: default1



不操作标记

语法： _

数据转换/格式化

语法：${{...}}, *{{...}} 
示例：

• ${{user.lastAccessDate}}1



预处理

语法： __...__

设置文本内容

语法：th:text="...", th:utext="..." 
备注：text转义，utext不转义

设置属性值

设置任意属性

语法：th:attr="attrname=..." 
示例：

• th:attr="class=’main’"1



设置特殊属性

语法： th:name="..." 
示例：

• th:class="’main’"1



同时设置两个属性

语法：

• th:alt-title="..." th:lang-xmllang="..."12



示例：

• th:alt-title="${title}"1



添加属性值

语法：

• th:attrappend="attr1=...,attr2=..." th:attrprepend="attr1=...,attr2=..." th:classappend="..." th:styleappend="..."1234



示例：

• th:classappend="’main’"1



混合值布尔属性

语法：th:name="true" 
示例：

• th:checked="true"1



设置任意属性值

语法：th:*="..."

HTML5属性名

语法： data-th-*=”…” = th:*="..."

迭代

语法：th:each="iter : ${iterated}" 
示例：

• th:each="prod : ${prods}" th:each="prod, iterStat : ${prods}" 迭代状态，默认为prodStat： iterStat.index iterStat.count iterStat.size iterStat.current iterStat.even iterStat.odd iterStat.first iterStat.last1234567891011



条件分支

if 和 unless

语法：

• th:if="..." th:unless="..."12



switch

语法：

• th:switch="..." th:case="..."12



模板布局

引入模板片段

语法：

• th:fragment="..." th:insert="..." th:replace="..."123



示例：

• th:insert="~{templatename::selector}" th:insert="~{templatename}" th:insert="~{::selector}" th:insert="~{}" th:insert="_"12345



模板片段传递参数

示例：

• th:fragment="frag (onevar,twovar)" th:replace="::frag (${value1},${value2})" th:replace="::frag (onevar=${value1},twovar=${value2})"123



移除模板片段

语法：th:remove="..." 
备注：可以使用的值，all, body, tag, all-but-first, none

本地变量

语法：th:with="name=..." 
示例：

• th:with="firstPer=${persons}"1



注释

标准HTML/XML注释

语法：

• 《!--...--》1



示例：

• 《!-- User info follows --》1



Thymeleaf编译级注释块

语法：

• 《!--/* ... */--》1



示例：

• 《!--/*--》 《div》 you can see me only before Thymeleaf processes me! 《/div》 《!--*/--》12345



Thymeleaf原型注释块

语法：

• 《!--/*/ ... /*/--》123



示例：

• 《!--/*/ 《div th:text="${...}"》 ... 《/div》 /*/--》12345



直接插入

直接插入表达式

语法：

• th:inline="...", none, text, javascript, css = th:utext="..."123



示例：

• var username = /**/ "Gertrud Kiwifruit";1



文字模板模式

文字语法

语法：

• 如果element为th:block可以省略123



文字原型注释：添加代码

语法：

• /**/123



示例：

• /**/123



文字编译级注释：删除代码

语法：

• /**/123



示例：

• /**/123



自然语法

语法：

• /**/ ...;1



备注：前面的代码编译起效，后面的静态起效 
示例：

• var username = /**/ "Sebastian Lychee";1



解耦模板逻辑

home.html

• 《!DOCTYPE html》 《html》 《body》 《table id="usersTable"》 《tr》 《td class="username"》Jeremy Grapefruit《/td》 《td class="usertype"》Normal User《/td》 《/tr》 《tr》 《td class="username"》Alice Watermelon《/td》 《td class="usertype"》Administrator《/td》 《/tr》 《/table》 《/body》 《/html》123456789101112131415



home.th.xml

• 《?xml version="1.0"?》 《thlogic》     《attr sel="#usersTable" th:remove="all-but-first"》         《attr sel="/tr" th:each="user : ${users}"》             《attr sel="td.username" th:text="${user.name}" /》             《attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" /》         《/attr》     《/attr》 《/thlogic》123456789



sel=”whatever”, selector可以为：

• 《whatever》

• th:fragment=”whatever”

• th:ref=”whatever”

eclipse WebContent 目录下的文件夹怎么在jsp中引入

eclipse WebContent 目录下的文件夹可以用绝对路径定位到文件后直接引入：
比如webcontent下有目录：
|--WebContent
|--dataset
|--a.txt
那么要访问a.txt，方法如下：
getServletContext().getRealPath("/dataset/a.txt");
在jsp中通过以上写法引入需要引入的文件即可。

关于thymeleaf的使用

浏览器忽略一切不能够识别的属性

例如 th:text="xxxx" ,这样的属性浏览器会忽略，对于html5的标准属性写法 也是支持的

属性只需要 data-开头  例如 ：data-th-text(html5标准写法)=》th:text写法

加入这个原因官方解释为了 不让我们的IDE在校验html文件时 出现烦人的警告。

常用属性

th:text--计算表达式的值，把结果 填充到 当前的标签内 即tags 的 body替换，类似于 jquery 的 text() 方法。

th:utext--与 th:text类似 但是其不转码表达式的计算结果  比如 这种标签类的文本计算出来后 会被 th:text转码

表达式语法

变量访问表达式 ${....},例如 ${user.name}

消息访问表达式 #{...},主要是访问 配置文件中的值 支持国际化的显示

url表达式 @{....} 处理url使用

片段表达式 ~{...} 引入其他片段使用

表达式中 可用的字面量

字符串：用单引号包裹 ‘this is demo’  例如

111
param.true22
也可以省略 单引号

数字 ： 123.1  0.1 9 

-1.5
布尔：true false 

null 字面量： null

字面量标记： one  param1 等

字符串连接 用加号  ‘this is’+’demo’

文字替换 |this is demo ${test}|  其中 test为 某个变量或者 变量的字面量标记

二元运算符  + - * / %  加 减 乘 除 取余

一元运算符 - 取负

二元逻辑运算  or  and

一元逻辑运算 ！ not  都是取反的意思

比较运算符  》 , 《 , 》= , 《= ( gt , lt , ge , le )

等值比较  == , != ( eq , ne )

条件判断  （if）? （then）

(if) ? (then) : (else)

(value) ?: (defaultvalue)

多语言的支持
Welcome to our grocery store!
thymeleaf

th:text="#{}"---获取 properties文件中的 数据

html5的格式可以写成  data-th-text=""

${x} will return a variable x stored into the Thymeleaf context or as a request attribute.

${param.x} will return a request parameter called x (which might be multivalued).

${session.x} will return a session attribute called x .

${application.x} will return a servlet context attribute called x .

想要 th:text展示标签 即富文本展示的时候 采用  等   使用 th:utext代替

like ${user.name} for “get the variable called user, and call its getName() method”).

Variable Expressions: ${...}

Selection Variable Expressions: *{...}

Message Expressions: #{...}

Link URL Expressions: @{...}

Fragment Expressions: ~{...}

一个综合的表达式

’User is of type ’ + (${user.isAdmin()} ? ’Administrator’ : (${user.type} ?: ’Unknown’))

消息中嵌入参数
Welcome to our grocery store, Sebastian Pepper!
多个参数用逗号分开 

key值也可以用参数
Welcome to our grocery store, Sebastian Pepper!
#ctx : the context object.

#vars: the context variables.

#locale : the context locale.

#request : (only in Web Contexts) the HttpServletRequest object.

#response : (only in Web Contexts) the HttpServletResponse object.

#session : (only in Web Contexts) the HttpSession object.

#servletContext : (only in Web Contexts) the ServletContext object.

Established locale country: US.

使用星号表达式
Name: Sebastian.
Surname: Pepper.
Nationality: Saturn.
而且 $和 *的取值方式还能通用