- 包 含
- JavaScript、WinForm开发
- 特指用于
- Web开发的模板引擎
- 中文名
- 模板引擎
- 目 的
- 生成一个标准的HTML文档
-
模板引擎
2020-03-06 20:04:37模板引擎 安装 哪个?如何? 633展开全文 -
Thymeleaf 模板引擎简介 与 Spring Boot 整合入门
2018-07-15 16:48:13Thymeleaf 模板引擎 官方文档下载 Hello World 新建应用 后台控制器 前端页面 浏览器访问测试 Thymeleaf 模板引擎 1、Thymeleaf 是 Web 和独立环境的现代服务器端 Java 模板引擎,能够处理HTML,XML,...目录
Thymeleaf 模板引擎
1、Thymeleaf 是 Web 和独立环境的现代服务器端 Java 模板引擎,能够处理HTML,XML,JavaScript,CSS 甚至纯文本。
2、Thymeleaf 的主要目标是提供一种优雅和高度可维护的创建模板的方式。为了实现这一点,它建立在自然模板的概念上,将其逻辑注入到模板文件中,不会影响模板被用作设计原型。这改善了设计的沟通,弥补了设计和开发团队之间的差距。
3、Thymeleaf 也从一开始就设计了Web标准 - 特别是 HTML5 - 允许您创建完全验证的模板,Spring Boot 官方推荐使用 thymeleaf 而不是 JSP。
4、Thymeleaf 官网:https://www.thymeleaf.org/
5、Thymeleaf 在 Github 的主页:https://github.com/thymeleaf/thymeleaf
6、Spring Boot 中使用 Thymeleaf 模板引擎时非常简单,因为 Spring Boot 已经提供了默认的配置,比如解析的文件前缀,文件后缀,文件编码,缓存等等,程序员需要的只是写 html 中的内容即可,可以参考《Spring Boot 引入 Thymeleaf 及入门》
模板引擎
1)市面上主流的 Java 模板引擎有:JSP、Velocity、Freemarker、Thymeleaf
2)JSP本质也是模板引擎,Spring Boot 官方支持:Thymeleaf Templates、FreeMarker Templates、Groovy Templates 等模板引擎。
3)模板引擎原理图如下,模板引擎的作用都是将模板(页面)和数据进行整合然后输出显示,区别在于不同的模板使用不同的语法,如 JSP 的 JSTL 表达式,以及 JSP 自己的表达式和语法,同理 Thymeleaf 也有自己的语法
官方文档下载
https://www.thymeleaf.org/documentation.html
Hello World 快速启动
1、新建 Spring Boot 项目,导入 thymeleaf 依赖:
<!-- 导入Spring Boot的thymeleaf依赖--> <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf --> <!-- <version>2.2.7.RELEASE</version> --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
2、提供一个后台控制器如下,用于向前台传递参数(注:后台往前台传参和平时一样即可,Thymeleaf 没有严格要求):
import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import java.util.Map; /** * Created by Administrator on 2018/7/17 0017. * 用户控制器 */ @Controller public class UserController { /** * 全部基于 Spring Boot给 Thymeleaf的默认配置 * 所以下面会跳转到 classpath:/templates/home.html 页面 * * @param paramMap * @return */ @RequestMapping("home") public String goHome(Map<String, Object> paramMap) { /** 默认Map的内容会放大请求域中,页面可以直接使用Thymeleaf取值*/ paramMap.put("name", "张三"); paramMap.put("age", 35); return "home"; } }
3、前端页面使用 Thymeleaf 处理参数:
前端 .html 页面中的 <html> 标签可以加上 xmlns:th="http://www.thymeleaf.org" 属性,IDEA 编辑器就会有 Thymeleaf 语法提示,不写也不影响运行。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head lang="en"> <meta charset="UTF-8"> <title>主页</title> </head> <body> <h3>欢迎来到主页</h3> <!--Thymeleaf 语法取值--> 姓名:<span th:text="${name}">未知</span> 年龄:<span th:text="${age}">未知</span> </body> </html>
4、浏览器访问测试
1、对于Spring Boot关于 Thymeleaf 的渲染规则不清楚的,可以参考《Spring Boot 引入 Thymeleaf 及入门》
2、关于 Thmeleaf 的更多使用语法,以及深入内容可以参考《Thymeleaf》
-
【SpringBoot】三、SpringBoot中整合Thymeleaf模板引擎
2020-04-16 21:41:09Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发,模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎。除了thymeleaf之外还有Velocity、Fr....SpringBoot 为我们提供了 Thymeleaf 自动化配置解决方案,所以我们在 SpringBoot 中使用 Thymeleaf 非常方便
一、简介
Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发,模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎。除了thymeleaf之外还有Velocity、FreeMarker等模板引擎,功能类似。
Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开(展示静态数据),这有利于前后端分离。需要注意的是thymeleaf不是spring旗下的。二、整合
- 1、引入 thymeleaf,在 pom.xml 文件中加入:
<!-- thymeleaf 模板引擎 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- web 开发 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
由于 SpringBoot 为 thymeleaf 提供了一整套的自动化配置方案,使得我们几乎不需要做任何更改就可以直接使用了
- 2、SpringBoot 中 thymeleaf 默认配置
@ConfigurationProperties(prefix = "spring.thymeleaf") public class ThymeleafProperties { private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8; public static final String DEFAULT_PREFIX = "classpath:/templates/"; public static final String DEFAULT_SUFFIX = ".html"; /** * Whether to check that the template exists before rendering it. */ private boolean checkTemplate = true; /** * Whether to check that the templates location exists. */ private boolean checkTemplateLocation = true; /** * Prefix that gets prepended to view names when building a URL. */ private String prefix = DEFAULT_PREFIX; /** * Suffix that gets appended to view names when building a URL. */ private String suffix = DEFAULT_SUFFIX; /** * Template mode to be applied to templates. See also Thymeleaf's TemplateMode enum. */ private String mode = "HTML"; ... }
通过 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 找到 SpringBoot 中 thymeleaf 的默认配置,我们不难看出
默认编码格式:UTF-8
默认路径:classpath:/templates/,都放在根目录下的 templates 目录下
默认后缀:.html,thymeleaf 都是 html 文件
检查模板:默认开启
检查模板位置:默认开启
…从上述源码可以看出,我们的 thymeleaf 模板文件默认放在 resources/templates 目录下,默认的后缀是 .html
当然,我们不想使用默认配置,我们也可以在 application.tml 文件中以 spring.thymeleaf 开始个性配置例如:
spring: # thymeleaf模板引擎配置 thymeleaf: # 缓存 cache: false # 编码格式 encoding: UTF-8
我们在开发中,可能被缓存坑过很多次,我们可以将 thymeleaf 中的缓存给关闭,保持实时更新
三、开发
- 1、创建控制层 IndexController.java
@Controller public class IndexController { /** * 请求 index 页面 * @return */ @GetMapping("index") public ModelAndView index() { ModelAndView mav = new ModelAndView("index"); mav.addObject("title", "首页"); List<UserInfo> list = new ArrayList<>(); UserInfo user = null; for (int i = 0; i < 10; i++) { user = new UserInfo(); user.setId(i + 1); user.setNickName("user" + i); user.setSignature("SpringBoot真香,+" + (i + 1)); list.add(user); } mav.addObject("users", list); return mav; } }
我们创建了 IndexController,请求 index 返回 index.html 页面,
- 2、创建 thymeleaf 模板 index.html
下面我们在 resources/templates 目录下创建 index.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title th:text="${title}"></title> </head> <body> <table border="1"> <tr> <td>用户编号</td> <td>用户昵称</td> <td>个性签名</td> </tr> <tr th:each="item : ${list}"> <td th:text="${item.id}"></td> <td th:text="${item.nickName}"></td> <td th:text="${item.signature}"></td> </tr> </table> </body> </html>
注意:
xmlns=“http://www.w3.org/1999/xhtml” xmlns:th=“http://www.thymeleaf.org”,是必须要在 html 标签中写入的
xmlns 是xml namespace的缩写,也就是 XML 命名空间
xmlns 属性可以在文档中定义一个或多个可供选择的命名空间
该属性可以放置在文档内任何元素的开始标签中
该属性的值类似于URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有内容我们在 ModelAndView 中传入了 title 参数,使用 th:text="${title}" 给 title 标签赋值,与 JSTL 使用方式类似,效果如图:
我们还通过 th:each=“item : ${list}” 渲染了一个用户表格,如图:
- 3、拼接 URL
<a th:href="@{/user/info(id=${user.id})}">参数拼接</a> <a th:href="@{/user/info(id=${user.id},phone=${user.phone})}">多参数拼接</a> <a th:href="@{/user/info/{uid}(uid=${user.id})}">RESTful风格</a> <a th:href="@{/user/info/{uid}/abc(uid=${user.id})}">RESTful风格</a>
四、使用技巧
thymeleaf 在 JavaScript 中的使用技巧
- 1、开发前戏
<script type="text/javascript" th:inline="javascript"> ... </script>
我们需要在 script 标签中写入 th:inline=“javascript”,注明使用 thymeleaf 的内联方法
- 2、Ajax 路径问题
url: /*[[@{/user/saveUser}]]*/, data: { 'user': user } type: 'post', dataType: 'json',
我们使用 /[[@{/**}]]/ 来获取项目的上下文路径,访问项目
- 3、获取 model 中的数据
<script type="text/javascript" th:inline="javascript"> var userName = [[${user.name}]]; </script>
- 4、使用前端框架的 iframe 弹窗,例如 layui
function showUserInfo() { layer.open({ type: 2, title: '用户信息', shade: 0.2, area: ['600px', '450px'], offset: '100px', shadeClose: false, content: /*[[@{/user/getUserInfo}]]*/ }); }
需要传参:
layer.open({ type: 2, title: '用户信息', shade: 0.2, area: ['600px', '450px'], offset: '100px', shadeClose: false, content: [[@{/user/getUserInfo}]]+'?id='+id });
我们在路径中传入了用户的 id
- 5、时间格式化
<span th:text="${#dates.format(data.createTime, 'yyyy年MM月dd日')}"></span>
<span th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
- 6、解析 HTML 内容
<div th:utext="${data.content}"></div>
- 7、动态设置背景图片
<body th:style="'background: url('+@{/pages/login/backgroud.jpg}+') no-repeat center'"></body>
五、手动渲染
我们在发送邮件的时候,会需要使用到邮件模板,我们选择手动渲染即可
- 1、新建一个邮件模板 email.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>欢迎加入我们</title> </head> <body> <h1 style="text-align: center">入职欢迎</h1> <p><span th:text="${user.name}"></span>:你好!!!欢迎加我们XXX公司,你的入职信息如下:</p> <p>岗位:<span th:text="${user.job}"></span></p> <p>月薪:<span th:text="${user.wages}"></span></p> </body> </html>
- 2、发送邮件测试
@Autowired TemplateEngine templateEngine; @Test public void test1() throws MessagingException { Context context = new Context(); context.setVariable("name", "张三"); context.setVariable("job", "Java开发工程师"); context.setVariable("wages", 7800); String mail = templateEngine.process("email", context); emailUtils.sendHtmlMail("xxxxxxxxx@qq.com", "入职通知", mail); }
SpringBoot 中发送邮件的教程请看:SpringBoot中发送邮件
- 3、效果展示
最终,我们收到如下邮件:
总结
Spring Boot 针对 Thymeleaf 提供了一整套的自动化配置方案,这对我们在 SpringBoot 中使用 Thymeleaf 更加方便,SpringBoot 为我们提供了默认配置,我们也可以对其进行个性化配置
以上就是我们在学习 SpringBoot 整合 Thymeleaf 时的一些知识点,更多内容请访问:Thymeleaf 官方文档
Thymeleaf 的官方文档:https://www.thymeleaf.org
如您在阅读中发现不足,欢迎留言!!!
-
为什么会用到模板引擎?模板引擎template的使用简析
2019-01-31 20:10:26比如一个简单的轮播图的数据: 传统的方法是拼接字符串方式,如下: ...由于这种结构简单还好,拼接的时候要注意引号问题,一旦需求发生...2、说一下轻量化的template.js模板引擎使用,简单举一个小例子如下: ...1、根据后端返回的json数据,然后来生成html,再渲染页面。
比如一个简单的轮播图的数据:
传统的方法是拼接字符串方式,如下:
由于这种结构简单还好,拼接的时候要注意引号问题,一旦需求发生变化,这里修改起来也是很麻烦
结构复杂的就需要模板引擎来改善这种情况。
2、轻量化的template.js模板引擎使用,简单举一个小例子如下:
引用template — — ajax请求数据后 赋值给data — — 然后绑定数据
绑定数据格式 <%= title %> 循环获取数据 1、<%for(var i in items){%> <%}%> 2、<%items.forEach(function(item){%> <%})%>
完整代码在这里:
-
模板引擎简介和art-template模板引擎基本使用
2020-02-01 19:43:15模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。 模板引擎不属于特定技术领域,它是跨领域... -
【模板引擎】什么会用到模板引擎?页面渲染选择thymeleaf模板引擎还是Vue?
2020-03-14 11:09:12什么是模板引擎:https://blog.csdn.net/weixin_43924228/article/details/86724134 thymeleaf相当于过去的jsp,当然比jsp先进不少,是后端渲染,后端直接推送的是整个html文档 在前后端不分离的情况下,... -
jade模板引擎修改为ejs模板引擎
2018-08-14 17:52:31如果我们使用jade模板引擎,里面的页面应该是这样的: 后缀名都是jade 如果想使用ejs 模板引擎要怎么做呢? (1)安装 ejs npm install ejs --save (2)在项目的app.js 文件内新增 var ejs = require('... -
Node.js(二)——pug模板引擎,nunjucks模板引擎,在koa中使用pug和nunjucks模板引擎
2020-04-21 09:02:242.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.3练习工具 hade 4.nunjucks模板引擎在koa中的应用 4.1安装koa-nunjucks-2 4.2使用nunjucks 4.3nunjucks的语法使用——变量 4.4nunjucks的语法... -
模板引擎概念
2019-01-16 11:25:58模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。 概念 模板引擎不属于特定技术领域,它是... -
前端模板引擎 —— 带你学习Jade / Pug 模板引擎
2018-08-21 13:48:13模板引擎是什么 模板引擎是将静态部分糅合的一种实现机制或者技术。 目前使用较广的模板引擎有以下几种:Jade / Pug、EJS、Handlebars。 本文详述Jade / Pug模板引擎在项目开发中的使用 注意: Jade现在已经... -
超快javascript模板引擎,useTpl模板引擎
2018-04-27 22:57:44近日本人做交互性频繁的页面开发,前端人员技术不是很好,所以我一手开发后台,一手开发前端交互,用过很多模板引擎,感觉效果不佳,无奈自写了一个,献丑献丑,下面是测试时间,第一次测试可能不准,多测试几次项目... -
MyTpl高性能模板引擎
2020-09-29 14:05:03很多模板引擎应用了缓存,我也看过有时候看着很搞笑,缓存并没有写入到 localStorage等可以离线缓存地方,而是定义变量保存起来,这样的模板引擎基本就是忽悠人呢,来骗过模板引擎压力测试,页面刷新那些所谓的缓存... -
前端模板引擎
2018-07-06 19:26:07为什么要使用模板引擎关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照我老师的一句话表达:不用重复制造轮子. 对于... -
模板引擎 Smarty
2016-07-03 15:36:58模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。 模板引擎不属于特定技术领域,它是跨... -
JSP与常用模板引擎比较(freemarker thymeleaf beentl及模板引擎概念
2019-03-27 11:14:191 什么是模板引擎 概念 :模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的文档 就是将模板文件和数据通过模板引擎生成一个HTML代码 ... -
由浅入深:自己动手开发模板引擎——解释型模板引擎
2016-07-29 16:51:49受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术。本系列文章将会带您由浅入深的全面认识模板引擎的概念、设计、分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎。关于模板... -
Jade模板引擎
2016-10-16 22:52:36Jade 模板引擎 -
各种JS模板引擎对比数据(高性能JavaScript模板引擎)
2017-03-06 08:23:43最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据;通过测试artTemplate、juicer与doT引擎模板整体性能要有绝对优势; -
认识pug模板引擎
2020-04-07 00:56:24我们知道ES6后,javascript提供了一个模板字符串,可以实现模板引擎的功能,很方便好用,但是它需要写在js文件中,然而对一下大型而又复杂的项目而言,再这样写就不太好了,此时我们就需要借助外界的引擎模板来实现... -
Groovy模板引擎
2017-03-07 21:06:35模板引擎介绍Groovy语言包含了一个模板引擎功能,可以生成各种类型的格式化文件,非常方便。模板引擎有下面几个,它们都实现了Template接口。 SimpleTemplateEngine - 基本的模板 StreamingTemplateEngine - 功能和 ...