简介

Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。,可以完全替代jsp,也是spring boot官方推荐的模版引擎

Thymeleaf优势

1.可以独立运行 前后端分离的时候 前端可以直接运行模版进行样式调整

2.不破坏html整体结构,更贴向html

3.可以使用模版实现JSTL、 OGNL表达式效果

Thymeleaf简单使用

1.引入pom依赖

  1. <!--thymeleaf模版-->
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter-thymeleaf</artifactId>
  5. </dependency>

properties配置 根据实际需要配置

  1. # THYMELEAF (ThymeleafAutoConfiguration)
  2. #开启模板缓存(默认值:true)
  3. spring.thymeleaf.cache=false
  4. #Check that the template exists before rendering it.
  5. spring.thymeleaf.check-template=true
  6. #检查模板位置是否正确(默认值:true)
  7. spring.thymeleaf.check-template-location=true
  8.  
  9. #开启MVC Thymeleaf视图解析(默认值:true)
  10. spring.thymeleaf.enabled=true
  11. #模板编码
  12. spring.thymeleaf.encoding=UTF-8
  13. #要被排除在解析之外的视图名称列表,用逗号分隔
  14. #spring.thymeleaf.excluded-view-names=
  15. #要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值:HTML5)
  16. spring.thymeleaf.mode=HTML5
  17. #在构建URL时添加到视图名称前的前缀(默认值:classpath:/templates/)
  18. spring.thymeleaf.prefix=classpath:/templates/
  19. #在构建URL时添加到视图名称后的后缀(默认值:.html)
  20. spring.thymeleaf.suffix=.html
  21. #Thymeleaf模板解析器在解析器链中的顺序。默认情况下,它排第一位。顺序从1开始,只有在定义了额外的TemplateResolver Bean时才需要设置这个属性。
  22. #spring.thymeleaf.template-resolver-order=
  23. #可解析的视图名称列表,用逗号分隔
  24. #spring.thymeleaf.view-names=

2.新建一个Contorller

  1. @Controller
  2. public class HelloWordContorller {
  3. @RequestMapping("/helloword")
  4. public String helloWord(Model model){
  5. List<StudentConfig> studentConfigList=new ArrayList<StudentConfig>();
  6. for(int i=0;i<10;i++){
  7. studentConfigList.add(new StudentConfig("小明"+i,i));
  8. }
  9. model.addAttribute("list",studentConfigList);
  10. return "index";
  11. }
  12. }

3.再resource/template下面新建一个html页面

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. table td{
  8. text-align: center;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <table style="width:100%">
  14. <thead>
  15. <tr>
  16. <th>学生姓名</th>
  17. <th>学生年龄</th>
  18. </tr>
  19. </thead>
  20. <tbody>
  21. <tr th:each="item : ${list}">
  22. <td th:text="${item.name}">小明</td>
  23. <td th:text="${item.age}">20</td>
  24. </tr>
  25. </tbody>
  26. </table>
  27. </body>
  28. </html>
  1. xmlns:th="http://www.thymeleaf.org" 将静态页面转换为动态的视图,需要进行动态处理的元素将使用“th:”前缀。
    访问输出

thymeleaf模版引擎跟jsp比起来是否更易读。如果写jsp的话 里面有很多自定义标签 前端人员根本也无法阅读

还有就是模版是html是可以直接运行的

4.找到模版地址

打开

所以前端是可以直接根据模版进行样式调整

常用标签

遍历

  1. <tr th:each="item : ${list}">
  2. <td th:text="${item.name}">小明</td>
  3. <td th:text="${item.age}">20</td>
  4. </tr>

赋值

text赋值

  1. <td th:text="${item.name}">小明</td>
  2. <td th:text="${item.age}">20</td>

html赋值

  1. <p th:utext="${htmlcontent}">conten</p>

value赋值

  1. <input type="text" th:value="${user.name}" />

三元运算符

  1. <td th:text="${item.sex==0?'男':'女'}"></td>

if else

  1. <div th:if="${islogin}">已登录</div>
  2. <div th:unless="${islogin}"><a th:href="login.html">请登陆</a></div>

th:if是条件成立才渲染 ht:unless则是条件不成立才渲染

Switch

  1. <div th:if="${islogin}">
  2. <div th:switch="${role}">
  3. <p th:case="'admin'">管理员</p>
  4. <p th:case="teacher">老师</p>
  5. <p th:case="*">普通用户</p>
  6. </div>
  7.  
  8. </div>
  9. <div th:unless="${islogin}"><a th:href="login.html">请登陆</a></div>

如果登陆判断 当前用户角色 *表示default

Url

th:src

  1. <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

th:href

restful风格

  1. <tr th:each="item : ${list}">
  2. <td th:text="${item.name}">小明</td>
  3. <td th:text="${item.age}">20</td>
  4. <td th:text="${item.sex==0?'男':'女'}"></td>
  5. <td><a th:href="@{'/edit/'+${item.id}}">编辑</a></td>
  6. </tr>

?参数传递

  1. <tr th:each="item : ${list}">
  2. <td th:text="${item.name}">小明</td>
  3. <td th:text="${item.age}">20</td>
  4. <td th:text="${item.sex==0?'男':'女'}"></td>
  5. <td><a th:href="@{/edit/info(id=${item.id})}">编辑1</a></td>
  6.  
  7. </tr>

?多参数传递

  1. <a th:href="@{/edit/info(id=${item.id},age=${item.age})}">编辑1</a>

th:style

设置背景图片

  1. <td><div th:style="'background:url('+@{${item.headPath}}+')'"></div></td>

内嵌变量

  • dates : java.util.Date的功能方法类。
  • calendars : 类似#dates,面向java.util.Calendar
  • numbers : 格式化数字的功能方法类
  • strings : 字符串对象的功能类,contains,startWiths,prepending/appending等等。
  • objects: 对objects的功能类操作。
  • bools: 对布尔值求值的功能方法。
  • arrays:对数组的功能类方法。
  • lists: 对lists功能类方法
  • sets
  • maps
  • ...

比如格式化日期

  1. <div>系统时间:<label th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}"></label></div>

根据需求查api吧 太多了

内联js

  1. <script th:inline="javascript">
  2.  
  3. var username = /*[[${islogin}]]*/ 'Sebastian';
  4. var size = /*[[${islogin}]]*/ 0;
  5.  
  6. </script>

注释表示通过模版引擎渲染 将注释后面的代码将取消渲染  渲染注释里面的模版代码。便于原型显示(直接打开html页面)

模版引擎渲染结果

直接html打开效果

使用th:inline="javascript"开启 [[....]]表示内联文本

 js附加代码:

  1. <script th:inline="javascript">
  2.  
  3. /*[+
  4. var username = /*[[${islogin}]]*/ 'Sebastian';
  5. var size = /*[[${islogin}]]*/ 0;
  6. +]*/
  7.  
  8. </script>
  1. /*[++]*/ 使用模版引擎渲染将正常渲染
    模版引擎渲染结果

模版html直接打开结果

js移除代码

  1. <script th:inline="javascript">
  2. /*[- */
  3. var username = /*[[${islogin}]]*/ 'Sebastian';
  4. var size = /*[[${islogin}]]*/ 0;
  5. /* -]*/
  6. </script>

跟js添加代码一样 只是是相反 添加模版引擎渲染则渲染 普通html打开则渲染

使用thymeleaf布局

layout布局

引入pom依赖

  1. <dependency>
  2. <groupId>nz.net.ultraq.thymeleaf</groupId>
  3. <artifactId>thymeleaf-layout-dialect</artifactId>
  4. </dependency>

后台管理系统为例子 头部 底部 菜单栏都是固定的。

1.新建一个页面都把架构复制过去 然后改中间那一块内容

缺点:

会导致我们要修改整体风格每个页面都要改,比如随着时间的迭代页面会越来越多。

2.定义好骨架 然后每个部分引用对应的页面

头部引用头部的html  菜单引用菜单的html 底部引用底部的html

缺点:

页面排版要改动的时候 比如 菜单要放到右边 也会导致每个页面都要改动

3.使用模版页面

使用模版页定义好 整体框架,然后每个页面都来引用这个模版 将内容替换到指定位置

模版页定义公共的样式引入 还有整体风格

1。首先创建一个模版页面

layout.html

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. #header {
  8. background-color: black;
  9. color: white;
  10. text-align: center;
  11. padding: 5px;
  12. }
  13.  
  14. #nav {
  15. line-height: 30px;
  16. background-color: #eeeeee;
  17. height: 300px;
  18. width: 100px;
  19. float: left;
  20. padding: 5px;
  21. }
  22.  
  23. #section {
  24. width: 350px;
  25. float: left;
  26. padding: 10px;
  27. }
  28.  
  29. #footer {
  30. background-color: black;
  31. color: white;
  32. clear: both;
  33. text-align: center;
  34. padding: 5px;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div id="header">
  40. 头部
  41. </div>
  42.  
  43. <div id="nav">
  44. 菜单
  45. </div>
  46.  
  47. <div layout:fragment="content" id="section">
  48. 内容
  49. </div>
  50.  
  51. <div id="footer">
  52. 底部
  53. </div>
  54. </body>
  55. </html>

定义命名空间:xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"

要填充的区域:layout:fragment="content"

2.创建一个用户列表页面

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
  4. layout:decorator="layout">
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>用户列表</title>
  8. <link href="userlist.css" rel="stylesheet" type="text/css">
  9. <!--私有样式-->
  10. <style type="text/css">
  11. table td{
  12. text-align: center;
  13. }
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <div layout:fragment="content">用户列表</div>
  19.  
  20. </body>
  21. </html>
  22. <script type="text/javascript" src="userlist.js"></script>
  23. <script type="text/javascript">
  24. $(function(){
  25. alert('dd');
  26. })
  27.  
  28. </script>

要填充模版页的位置:layout:fragment="content"

定义命名空间 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"   layout:decorator="layout"

  layout:decorator="layout"为模版页路径

效果

渲染后的html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>用户列表</title>
  5. <meta charset="UTF-8">
  6. <style type="text/css">
  7. #header {
  8. background-color: black;
  9. color: white;
  10. text-align: center;
  11. padding: 5px;
  12. }
  13.  
  14. #nav {
  15. line-height: 30px;
  16. background-color: #eeeeee;
  17. height: 300px;
  18. width: 100px;
  19. float: left;
  20. padding: 5px;
  21. }
  22.  
  23. #section {
  24. width: 350px;
  25. float: left;
  26. padding: 10px;
  27. }
  28.  
  29. #footer {
  30. background-color: black;
  31. color: white;
  32. clear: both;
  33. text-align: center;
  34. padding: 5px;
  35. }
  36. </style>
  37. <meta charset="UTF-8">
  38. <link href="userlist.css" rel="stylesheet" type="text/css">
  39. <!--私有样式-->
  40. <style type="text/css">
  41. table td{
  42. text-align: center;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div id="header">
  48. 头部
  49. </div>
  50.  
  51. <div id="nav">
  52. 菜单
  53. </div>
  54.  
  55. <div id="section">用户列表</div>
  56.  
  57. <div id="footer">
  58. 底部
  59. </div>
  60. </body>
  61. </html>
  62. <script type="text/javascript" src="userlist.js"></script>
  63. <script type="text/javascript">
  64. $(function(){
  65. alert('dd');
  66. })
  67.  
  68. </script>

可以发现 页面使用的css 和 script 都自动替换到模版页的 head 和底部

这个时候就算我们有上万个页面 页面风格要改变也就只需要改变模版页就行了

th:include 和 th:replace

创建一个广告页advertising.html

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>广告</title>
  6.  
  7. </head>
  8. <body>
  9. <div id="advertisingContent" th:fragment="advertisingContent">
  10.  
  11. 我是广告
  12. </div>
  13. </body>
  14. </html>
  1. th:fragment="advertisingContent" 引用的时候会用到

页面引用advertisingContent内容

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>主页</title>
  6. </head>
  7.  
  8. <body>
  9. <div >
  10. <div>主页</div>
  11. <div th:replace="advertising :: advertisingContent"></div>
  12. </div>
  13.  
  14. </body>
  15. </html>
  1. th:replace="advertising :: advertisingContent" 为把advertising(页面路径)advertisingContent为哪一块内容(省略则是整个页面)

传递参数

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <style type="text/css">
  5. <!--自定义样式-->
  6. </style>
  7. </head>
  8. <body>
  9. <div id="advertisingContent" th:fragment="advertisingContent(name)">
  10.  
  11. 我是广告<label th:text="${name}"></label>
  12. </div>
  13. </body>
  14. </html>
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>主页</title>
  6.  
  7. </head>
  8.  
  9. <body>
  10. <div >
  11. <div>主页</div>
  12. <div th:replace="advertising(name='测试传递参数')"></div>
  13. </div>
  14.  
  15. </body>
  16. </html>

  1. th:replacehe th:include用法一样
    区别
    th:include只引用chilren
  1. th:replacehe 引用包含自身
  1.  
  1.  

String Boot-thymeleaf使用(四)的更多相关文章

  1. spring boot / cloud (十四) 微服务间远程服务调用的认证和鉴权的思考和设计,以及restFul风格的url匹配拦截方法

    spring boot / cloud (十四) 微服务间远程服务调用的认证和鉴权的思考和设计,以及restFul风格的url匹配拦截方法 前言 本篇接着<spring boot / cloud ...

  2. spring boot + thymeleaf 3 国际化

    在给spring boot 1.5.6 + thymeleaf 3进行国际化时,踩了一个坑(其实不止一个). 现象: 看到了吧, 就是取值的key, 后面被加了_en_US 或 _zh_CN, 以及前 ...

  3. spring boot + Thymeleaf开发web项目

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

  4. Spring Boot 启动(四) EnvironmentPostProcessor

    Spring Boot 启动(四) EnvironmentPostProcessor Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698. ...

  5. spring boot: thymeleaf模板引擎使用

    spring boot: thymeleaf模板引擎使用 在pom.xml加入thymeleaf模板依赖 <!-- 添加thymeleaf的依赖 --> <dependency> ...

  6. Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档

    0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...

  7. Spring Boot Thymeleaf 实现国际化

    开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了.SpringBoot支持如下页面模板语言 Thymeleaf FreeMarker Vel ...

  8. Spring Boot 2.X(四):Spring Boot 自定义 Web MVC 配置

    0.准备 Spring Boot 不仅提供了相当简单使用的自动配置功能,而且开放了非常自由灵活的配置类.Spring MVC 为我们提供了 WebMvcConfigurationSupport 类和一 ...

  9. spring boot + thymeleaf 乱码问题

    spring boot + thymeleaf 乱码问题 hellotrms 发布于 2017/01/17 15:27 阅读 1K+ 收藏 0 答案 1 开发四年只会写业务代码,分布式高并发都不会还做 ...

  10. C# byte[]数组和string的互相转化 (四种方法)

    C# byte[]数组和string的互相转化 (四种方法) 第一种 [csharp] view plain copy string str = System.Text.Encoding.UTF8.G ...

随机推荐

  1. UI设计---&gt;全心全意为人民服务的宗旨----&gt;注重客户体验---&gt;软件持久的生命力

    UI即User Interface(用户界面)的简称. UI设计是指对软件的人机交互.操作逻辑.界面美观的总体设计. 好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适简单.自由.充分 ...

  2. bzoj4397【Usaco2015 Dec】Breed Counting

    4397: [Usaco2015 dec]Breed Counting Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 29  Solved: 25 ...

  3. POJ2559 Largest Rectangle in a Histogram 单调栈

    题目大意 有一个直方图,其所有矩形的底均是1(以后简称小矩形).给出这些矩形的高度,求这些矩形的并集中存在的面积最大的矩形(简称大矩形)的面积. 题解 大矩形的高必然一边等于一个小矩形的高,另一边小于 ...

  4. Git Stash方法

    命令:git stash1.使用git stash 保存当前的工作现场, 那么就可以切换到其他分支进行工作,或者在当前分支上完成其他紧急的工作,比如修订一个bug测试提交. 2.如果一个使用了一个gi ...

  5. Codeforces 2018-2019 ICPC, NEERC, Southern Subregional Contest

    2018-2019 ICPC, NEERC, Southern Subregional Contest 闲谈: 被操哥和男神带飞的一场ACM,第一把做了这么多题,荣幸成为7题队,虽然比赛的时候频频出锅 ...

  6. Codeforces--630J--Divisibility(公倍数)

     J - Divisibility Crawling in process... Crawling failed Time Limit:500MS     Memory Limit:65536KB ...

  7. hihocoder 1671 反转子串

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含括号和小写字母的字符串S,例如S="a(bc(de)fg)hijk". 其中括号表示将里 ...

  8. 【BZOJ 1230】 开关灯

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1230 [算法] 线段树 [代码] #include<bits/stdc++.h ...

  9. 【转】UINavigationController 直接返回到第一级目录

    原文网址:http://blog.csdn.net/justinjing0612/article/details/7360852 [self.navigationController popViewC ...

  10. Webpack 2.0 的文档

    Webpack 2.0 的文档 https://webpack.js.org/get-started/