企业网站首页布局尺寸,响应设网站多少钱可以做,微站设计,叫人做网站要注意## 一、Thymeleaf介绍
Thymeleaf是一种Java XML / XHTML / HTML5模板引擎#xff0c;可以在Web和非Web环境中使用。它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5#xff0c;但即使在脱机环境中#xff0c;它也可以处理任何XML文件。它提供了完整的Spring Fram…## 一、Thymeleaf介绍
Thymeleaf是一种Java XML / XHTML / HTML5模板引擎可以在Web和非Web环境中使用。它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5但即使在脱机环境中它也可以处理任何XML文件。它提供了完整的Spring Framework集成。
关于Spring推荐Thymeleaf的这种说法我在Spring官方文档并没有看到具体的说明只是在和JSP比较的时候说了JSP和Thymeleaf对比JSP的一些不足而Thymeleaf只是作为其他模板引擎的一种代表。
作为一款优秀的模板引擎除了易用性、活跃的社区、健康快速的发展外还有非常重要的一点就是性能了那Thymeleaf 3 和 FreeMaker 的性能对比是怎么样的后续文章会陆续更新。 二、Thymeleaf基础使用
Thymeleaf的使用是由两部分组成的标签 表达式标签是Thymeleaf的语法结构而表达式就是语法里的内容实现。
通过标签 表达式让数据和模板结合最终转换成html代码返回给用户。
Thymeleaf基础使用分为三部分
标签使用表达式使用设置IDEA 对 Thymeleaf 代码补全
1.标签使用
1.1 th:text 基础信息输出
HTML代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title王磊的博客/title
/head
body
span th:text${name}/span
/body
/html
Java代码
RequestMapping(/)
public ModelAndView index() {ModelAndView modelAndView new ModelAndView(/index);modelAndView.addObject(name, 老王);return modelAndView;
}
最终效果 老王
1.2 th:utext html内容输出
使用”th:text”是对内容的原样输出使用“th:utext”可以进行html标签输出。
Java代码
RequestMapping(/eat)
public ModelAndView eat() {ModelAndView modelAndView new ModelAndView(/cat);modelAndView.addObject(data, span stylecolor:red老王是吃货/span);return modelAndView;
}
HTML代码
h4 th:textth:text ${data}/h4
h4 th:utextth:utext ${data}/h4
展示效果 1.3 th:if, th:unless 条件判断
span th:if${age 18}成年
/span
span th:unless${age 18}未成年
/span
th:if为满足条件的业务处理th:unless正好相反是除去的意思。
1.4 th:switch, th:case 多条件判断
div th:switch${age}span th:case1818岁/spanspan th:case1919岁/spanspa th:case*其他/spa
/div
注意 默认选项使用th:case* 指定。
1.5 th:each 循环
HTML代码
div th:eachname,item:${names}span th:text${item.count}/spanspan th:text${name}/span
/div
Java代码
RequestMapping(/)
public ModelAndView index() {ArrayListString names new ArrayList();names.add(java);names.add(golang);names.add(nodejs);ModelAndView modelAndView new ModelAndView(/index); modelAndView.addObject(names,names);return modelAndView;
}
访问效果如下 其中item为每行的详细值key值如下
index 下标从0开始count 第x个从1开始size 这个集合的大小current 当前行的值
1.6 th:fragment、th:insert、th:replace、th:include 代码片段复用
th:fragment标签是声明代码片段用于解决代码复用的问题好比Java程序写的公用代码一样每个需要的地方都可以直接调用th:insert 引用fragment的代码保留自己的主标签th:replace 引用fragment的代码不保留自己的主标签th:include 使用类似th:replaceThymeleaf3.0之后不推荐使用
footer.html页面代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title王磊的博客/title
/head
bodydiv th:fragmentcopyright© 著作权归 老王 所有
/divdiv th:fragmentabout关于
/divdiv th:fragmentlinksCCTV
/div/body
/html
声明了两个代码片段copyright和about。
cat.html页面代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title王磊的博客/title
/head
body
div th:replacefooter :: copyright/divdiv th:insertfooter :: about/divdiv th:includefooter :: links/div
/body
/html
其中第一个div引用了footer.html 的 copyright 代码片段第二个div引用了 footer.html 的 about 代码片段。
双冒号的理解 其中使用“::”双冒号来完成对页面片段的引用有点像php里面的语法使用双冒号来表示对类的静态属性和方法进行直接引用。
执行效果如下图 总结 可以很清晰的看出th:insert、th:replace、th:include之间的区别在于是否保留自己的主标签th:include 在3.0之后已经不推荐使用了可以使用th:replace标签替代。
提高班——fragment代码传参
使用fragment我们是可以在html代码中传参的比如我们定义了一个top.html其中有一个“欢迎XXX”的提示而这个人名XXX就是需要动态传递的这样我们可以最大程度的完成代码的复用这个时候就是一个很好的使用场景我们需要这样做。
页面main.html代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.orgheadmeta charsetUTF-8title王磊的博客/title
/head
bodydiv th:replacefooter :: webcome(老王)/div/body
/html
页面top.html
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.orgheadmeta charsetUTF-8title王磊的博客/title
/head
bodydiv th:fragmentwebcome(about)span th:text欢迎${about}/span
/div/body
/html
最终的效果 1.7 th:with 定义局部变量
页面代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.orgheadmeta charsetUTF-8title王磊的博客/title
/head
body
div th:withsum4-2span th:text${sum}/span
/div
/body
/html
页面输出结果2
1.8 th:remove 删除标签
th:remove用于html代码的删除th:remove值有五个
all 删除本段所有代码body 删除主标签内的所有元素tag 删除主标签保留主标签所有的元素all-but-first 保留主标签和第一个元素其他全部删除none 不删除任何标签
示例index.html代码如下
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title王磊的博客/title
/head
bodydiv idall th:removeallspanall/spanspan1/span
/divdiv idbody th:removebodyspanbody/spanspan2/span
/divdiv idtag th:removetagspantag/spanspan3/span
/divdiv idall-but-first th:removeall-but-firstspanall-but-first/spanspan4/span
/divdiv idnone th:removenonespannone/spanspan5/span
/div/body
/html
最终展示效果如下 1.9 其他标签
th:style 定义样式 div th:stylecolor:${skinColor}th:onclick 点击事件 input typebutton value Click th:onclickonsub()th:href 赋值属性href a th:href${myhref}/ath:value 赋值属性value input th:value${user.name} /th:src 赋值src img th:src${img} /th:action 赋值属性action form th:action{/suburl}th:id 赋值属性id form id${fromid}th:attr 定义多个属性 img th:attrsrc{/img/stone.jpg},alt${alt} /th:object 定义一个对象 div th:object${user}…
2.表达式使用
2.1 表达式概要
2.1.1 简单表达式
变量表达式${…} 选择变量表达式*{…} 消息表达式#{…} 链接表达式{…} 片段表达~{…}
2.1.2 数据的类型
文字’one text’, ‘Another one!’,… 数字文字0, 34, 3.0, 12.3,… 布尔文字true, false NULL文字null 文字标记one, sometext, main,…
2.1.3 文本操作
字符串拼接 字面替换|The name is ${name}|
2.1.4 算术运算
二进制运算符, -, *, /, % 减号(一元运算符)-
2.1.5 布尔运算
二进制运算符and, or 布尔否定(一元运算符)!, false
2.1.6 条件运算符
比较值, , , 相等判断 , !
2.1.7 条件判断
如果-然后(if) ? (then) 如果-然后-否则(if) ? (then) : (else) 违约(value) ?: (defaultvalue)
所有以上这些表达式都可以组合和嵌套例如 ‘User is of type ’ (user.isAdmin()?′Administrator′:(user.isAdmin()?′Administrator′:({user.isAdmin()} ? 'Administrator' : ({user.type} ?: ‘Unknown’)) 2.2 表达式使用实例
2.2.1 变量表达式 ${…}
变量表达式的使用我们前面的代码已经见到了$是我们平常开发中最常用的表达式用于把后台Java类的动态数据映射到页面例如
Java代码
public ModelAndView index() {ModelAndView modelAndView new ModelAndView(/cat);modelAndView.addObject(data, 我是老王);return modelAndView;
}
HTML代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title王磊的博客/title
/head
body
span th:text${data}/span
/body
/html
最终效果 2.2.2 选择表达式 *{…}
选择表达式相当于选择了一个对象在使用的时候不在需要这个对象的前缀直接使用属性的key进行内容展示代码如下
div th:object${goods}span th:text${goods.name}/spanspan th:text*{price}/spanspan th:text${#dates.format(goods.createTime, yyyy-MM-dd HH:mm:ss)}/span
/div
最终效果
iMac 7999.0 2018-08-10 14:03:51
总结 *{price} ${goods.price}只是省去了“goods.”前缀效果都是一样的。
2.2.3 链接表达式 {…}
用于转换url代码如下
a th:href{/footer(id666,namelaowang)}链接/a
最终呈现的效果
a href/footer?id666namelaowang链接/a
链接表达式可以传递参数用逗号分隔。
服务器根相对路径{~/path/to/something}
2.2.4 文本操作
文本操作分为两个文本拼加、文本替换
文本拼加
span th:text我叫${name}/span
文本替换
文本替换的语法|内容${tag}|
span th:text|我叫${name}是一名开发工程师。|/span
2.2.5 三元表达式 2.2.6 双括号作用
p th:text${val}.../p
p th:text${{val}}.../p
结果
p1234567890/p
p1,234,567,890/p
2.2.7 嵌入文本标签
虽然标准的标签几乎可以满足所有的业务场景但某些情况我们更喜欢直接写入HTML文本例如
pHello, [[${name}]]/p
嵌入文本有两种写法“[[…]]”和“[(…)]”分别的作用就像th:text 和 th:utext 一样例如
p[[${name}]]
/p
p[(${name})]
/p
看到的效果是这样的 2.3 表达式对象概述
表达式里面的对象可以帮助我们处理要展示的内容比如表达式的工具类dates可以格式化时间这些内置类的熟练使用可以让我们使用Thymeleaf的效率提高很多。
2.3.1 表达式基本对象
#ctx: 操作当前上下文.#vars: 操作上下文变量.#request: (仅适用于Web项目) HttpServletRequest对象.#response: (仅适用于Web项目) HttpServletResponse 对象.#session: (仅适用于Web项目) HttpSession 对象.#servletContext: (仅适用于Web项目) ServletContext 对象.
2.3.2 表达式实用工具类
#execInfo: 操作模板的工具类包含了一些模板信息比如${#execInfo.templateName} .#uris: url处理的工具#conversions: methods for executing the configured conversion service (if any).#dates: 方法来源于 java.util.Date 对象用于处理时间比如格式化.#calendars: 类似于 #dates, 但是来自于 java.util.Calendar 对象.#numbers: 用于格式化数字.#strings: methods for String objects: contains, startsWith, prepending/appending, etc.#objects: 普通的object对象方法.#bools: 判断bool类型的工具.#arrays: 数组操作工具.#lists: 列表操作数据.#sets: Set操作工具.#maps: Map操作工具.#aggregates: 操作数组或集合的工具.
每个类中的具体方法点击查看https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects
3.IDEA设置Thymeleaf自动补全
先上效果图 IDEA默认是开启了Thymeleaf 插件支持的如果不放心需要验证请访问https://www.jetbrains.com/help/idea/2018.2/thymeleaf.html
但仅仅是配置上面的效果依然是无法正常使用的原因是你要在html中声明 Thymeleaf 命名空间 xmlns:thhttp://www.thymeleaf.org 完整代码如下
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8titleTitle/title
/head
bodyh2 th:text${hi}/h2
/body
/html
其中关键的代码是 xmlns:th”http://www.thymeleaf.org” 这样当你在代码输入“th:”的时候就会看到 Thymeleaf 的所有标签了。
三、Spring Boot 集成 Thymeleaf
3.1 开发环境
Spring Boot 2.0.4Thymeleaf 3.0.9Jdk 8Windows 10IDEA 2018.2
在正式集成Thymeleaf引擎之前先来看下目录结构如图
3.2 Spring MVC目录结构 除去包名我们来解释一下这些目录代表的含义
common 通用公共类controller 控制器类dao 数据交互类service 业务逻辑处理类Application.java 启动文件resources 静态文件存储文件夹resources/templates 所有的Thymeleaf目录存放目录resources/application.properties 全局配置类pom.xml Maven 配置文件
3.3 Spring Boot 集成 Thymeleaf 分为四步
pom.xml 添加 Thymeleaf 模板引擎application.properties 配置 Thymeleaf 信息创建controller类编写代码创建模板编写html代码
接下来我们具体分别来看具体的步骤。
3.3.1 pom.xml 添加 Thymeleaf 模板引擎
!--thymeleaf模板--
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId
/dependency
3.3.2 application.properties 配置 Thymeleaf 信息
# 启用缓存:建议生产开启
spring.thymeleaf.cachefalse
# 建议模版是否存在
spring.thymeleaf.check-template-locationtrue
# Content-Type 值
spring.thymeleaf.servlet.content-typetext/html
# 是否启用
spring.thymeleaf.enabledtrue
# 模版编码
spring.thymeleaf.encodingutf-8
# 应该从解析中排除的视图名称列表用逗号分隔
spring.thymeleaf.excluded-view-names
# 模版模式
spring.thymeleaf.modeHTML5
# 模版存放路径
spring.thymeleaf.prefixclasspath:/templates/
# 模版后缀
spring.thymeleaf.suffix.html
Thymeleaf常用配置说明
配置项类型默认值建议值说明spring.thymeleaf.enabledbooltrue默认是否启用spring.thymeleaf.modeStringHTML默认模板类型可以设置为HTML5spring.thymeleaf.cachebooltrue默认是否启用缓存生成环境建议设置为truespring.thymeleaf.prefixStringclasspath:/templates/默认模版存放路径spring.thymeleaf.suffixString.html默认模版后缀spring.thymeleaf.servlet.content-typeStringtext/html默认Content-Type 值spring.thymeleaf.encodingString-utf-8模版编码
3.3.3 创建controller类编写代码
我们在controller文件夹创建index.java代码如下
package com.hello.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
Controller
RequestMapping(/)
public class Index {RequestMapping(/)public ModelAndView index() {ModelAndView modelAndView new ModelAndView(/index);modelAndView.addObject(name, 王磊的博客);return modelAndView;}
}
关键代码解读
ResponseBody注解如果使用该注解返回结果会直接输出而不是使用模板引擎渲染 使用ModelAndView对象指定视图名添加视图对象
3.3.4 创建模板编写html代码
我们在resources/templates下创建index.html代码如下
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtmlxmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8title王磊的博客/title
/head
body
span th:text${name}/span
/body
/html
启动调试在浏览器输入http://localhost:8080/
效果如下 相关代码GitHubhttps://github.com/vipstone/springboot-example.git
四、参考资料
thymeleaf官方文档 Thymeleaf https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
thymeleaf官方文档 Spring Thymeleaf https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html
