应用网站建设,广告公司业务推广,方便做简笔画的网站或软件,仙居谁认识做网站的Spring Boot 集成 Thymeleaf 模板引擎
1、Thymeleaf 介绍
Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。
Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板#xff0c;既可以在浏览器中正确显示的 HTML#xff0c;也可以用作静态原型#xf…Spring Boot 集成 Thymeleaf 模板引擎
1、Thymeleaf 介绍
Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。
Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板既可以在浏览器中正确显示的 HTML也可以用作静态原型从而在开发团队中实现更强大的协作。
传统的 JSPJSTL 组合是已经过去了Thymeleaf 是现代服务端的模板引擎与传统的 JSP 不同Thymeleaf可以使用浏览器直接打开因为可以忽略掉拓展属性相当于打开原生页面给前端人员也带来一定的便利。
在本地环境或者有网络的环境下Thymeleaf 均可运行。由于 thymeleaf 支持 html 原型也支持在 html标签里增加额外的属性来达到【模板数据】的展示方式所以美工可以直接在浏览器中查看页面效果当服务启动后也可以让后台开发人员查看带数据的动态页面效果。
div classui right aligned basic segmentdiv classui orange basic label th:text${blog.flag}静态原创信息/div
/div
h2 classui center aligned header th:text${blog.title}这是静态标题
/h2类似于这样在静态页面时会展示静态信息当服务启动后动态获取数据库中的数据后就可以展示动态数据th:text 标签是用来动态替换文本的。该例子说明浏览器解释 html 时会忽略 html 中未定义的标签属性比如 th:text所以 thymeleaf 的模板可以静态地运行当有数据返回到页面时Thymeleaf 标签会动态地替换掉静态内容使页面动态显示数据。
2、依赖导入
在 Spring Boot 中使用 thymeleaf 模板需要引入依赖可以在创建项目工程时勾选 Thymeleaf也可以创建之后再手动导入
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId
/dependency另外在 html 页面上如果要使用 thymeleaf 模板需要在页面标签中引入 th 命名空间
html xmlns:thhttp://www.thymeleaf.org3、Thymeleaf 相关配置
因为 Thymeleaf 中已经有默认的配置了不需要再对其做过多的配置需要注意一下Thymeleaf 默认是开启页面缓存的所以在开发的时候需要关闭这个页面缓存
spring:thymeleaf:cache: false #关闭缓存否则会有缓存导致页面没法及时看到更新后的效果。比如修改了一个文件已经 update 到 tomcat 了但刷新页面还是之前的页面就是因为缓存引起的。
4、Thymeleaf 的使用
4.1 访问静态页面
这个实际上和 Thymeleaf 没有什么关系应该说是通用的把它一并写到这里的原因是一般做网站时都会做一个 404 页面和 500 页面为了出错时给用户一个友好的展示而不至于一堆异常信息抛出来。Spring Boot中会自动识别模板目录 templates/下的 404.html 和 500.html 文件。在 templates/目录下新建一个 error 文件夹专门放置错误的 html 页面然后分别打印些信息。例如 404.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body这是 404 页面/body
/html再写一个 controller 来测试一下 404 和 500 页面
Controller
RequestMapping(/thymeleaf)
public class ThymeleafController {RequestMapping(/test404)public String test404() {return index;}RequestMapping(/test500)public String test500() {int i 1 / 0;return index;}
}当在浏览器中输入 localhost:8080/thymeleaf/test400 时故意输入错误找不到对应的方法就会跳转到404.html 显示。
当在浏览器中输入 localhost:8088/thymeleaf/test505 时会抛出异常然后会自动跳转到 500.html 显示。
【注】这里有个问题需要注意一下在微服务应用开发中会走向前后端分离在 Controlle 层上都是使用的RestController 注解自动会把返回的数据转成 json 格式。但是在使用模板引擎时Controller 层就不能用RestController 注解了因为在使用 thymeleaf 模板时返回的是视图文件名比如上面的 Controller 中是返回到 index.html 页面如果使用RestController 的话会把 index 当作 String 解析了直接返回到页面了
而不是去找 index.html 页面所以在使用模板时要用Controller 注解。
4.2 Thymeleaf 中处理对象
thymeleaf 模板中应该如何处理对象信息呢假如在做个人博客的时候需要给前端传博主相关信息来展示那么会封装成一个博主对象比如
public class Blogger {private Long id;private String name;private String pass;// 省去 set 和 get
}然后在 controller 层中初始化一下
GetMapping(/getBlogger)
public String getBlogger(Model model) {Blogger blogger new Blogger(1L, 小灰灰, 123456);model.addAttribute(blogger, blogger);return blogger;
}先初始化一个 Blogger 对象然后将该对象放到 Model 中然后返回到 blogger.html 页面去渲染。接下来再写一个 blogger.html 来渲染 blogger 信息
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.org
html langen
headmeta charsetUTF-8title博主信息/title
/head
body
form action th:object${blogger} 用户编号input nameid th:value${blogger.id}/br用户姓名input typetext nameusername th:value${blogger.getName()} /br登陆密码input typetext namepassword th:value*{pass} /
/form
/body
/html可以看出在 thymeleaf 模板中使用 th:object${}来获取对象信息然后在表单里面可以有三种方式来获取对象属性。 1、使用 th:value“*{属性名}” 2、使用 th:value“${对象.属性名}”对象指的是上面使用 th:object 获取的对象 3、使用 th:value“${对象.get 方法}”对象指的是上面使用 th:object 获取的对象 可 以 看 出 在 Thymeleaf 中 可 以 像 写 java 一 样 写 代 码 很 方 便 。在 浏 览 器 中 输 入localhost:8080/thymeleaf/getBlogger 来测试一下数据
4.3 Thymeleaf 中处理 List
处理 List 和处理对象差不多但是需要在 thymeleaf 中进行遍历。先在 Controller 中模拟一个 List。
GetMapping(/getList)
public String getList(Model model) {Blogger blogger1 new Blogger(1L, 羊羊, 123456);Blogger blogger2 new Blogger(2L, 小灰灰, 123456);ListBlogger list new ArrayList();list.add(blogger1);list.add(blogger2);model.addAttribute(list, list);return list;
}接下来写一个 list.html 来获取该 list 信息然后在 list.html 中遍历这个 list
!DOCTYPE html
html xmlns:thhttp://www.thymeleaf.org
html langen
headmeta charsetUTF-8title博主信息/title
/head
body
form action th:object${blogger} 用户编号input nameid th:value${blogger.id}/br用户姓名input typetext nameusername th:value${blogger.getName()} /br登陆密码input typetext namepassword th:value*{pass} /
/form
/body
/html可以看出其实和处理单个对象信息差不多Thymeleaf 使用 th:each 进行遍历 取 m o d e l 中传过来的参数然后自定义 l i s t 中取出来的每个对象这里定义为 b l o g g e r 。表单里面可以直接使用 {}取 model 中传过来的参数然后自定义 list 中取出来的每个对象这里定义为 blogger。表单里面可以直接使用 取model中传过来的参数然后自定义list中取出来的每个对象这里定义为blogger。表单里面可以直接使用{对象.属性名}来获取list 中对象的属性值也可以使用${对象.get 方法}来获取这点和处理对象信息是一样的但是不能使用*{属性名}来获取对象中的属性thymeleaf 模板获取不到。
4.4 其他常用 thymeleaf 操作
thymeleaf 中的一些常用的标签操作 Thymeleaf 还 有 很 多 其 他 用 法 这 里 就 不 总 结 了 具 体 的 可 以 参 考 Thymeleaf 的 官 方 文 档
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
主要要学会如何在 Spring Boot 中去使用thymeleaf遇到对应的标签或者方法查阅官方文档即可。
5、总结
Thymeleaf 在 Spring Boot 中使用非常广泛主要分析 thymeleaf 的优点以及如何在 Spring Boot 中集成并使用 thymeleaf 模板包括依赖、配置相关数据的获取、以及一些注意事项等。最后列举了一些 thymeleaf 中常用的标签在实际项目中多使用多查阅就能熟练掌握thymeleaf 中的一些标签或者方法不用死记硬背用到什么去查阅什么关键是要会在 Spring Boot 中集成用的多了就熟能生巧。
