4月24日

zoukankan html css js c++ java

4月24日

11、SpringBoot：Thymeleaf 模板引擎

11.1、模板引擎

前端交给我们的页面，是 html 页面。如果是我们以前开发，我们需要把他们转成 jsp 页面，jsp 好处就是当我们查出一些数据转发到 JSP 页面以后，我们可以用 jsp 轻松实现数据的显示，及交互等。

jsp 支持非常强大的功能，包括能写 Java 代码，但是呢，我们现在的这种情况，SpringBoot 这个项目首先是以 jar 的方式，不是 war，像第二，我们用的还是嵌入式的 Tomcat，所以呢，他现在默认是不支持 jsp 的。

那不支持 jsp，如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦，那怎么办呢？

SpringBoot 推荐你可以来使用模板引擎：

模板引擎，我们其实大家听到很多，其实 jsp 就是一个模板引擎，还有用的比较多的 freemarker，包括 SpringBoot 给我们推荐的 Thymeleaf，模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的，什么样一个思想呢我们来看一下这张图：

模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是 jsp 还是其他模板引擎，都是这个思想。只不过呢，就是说不同模板引擎之间，他们可能这个语法有点不一样。其他的我就不介绍了，我主要来介绍一下 SpringBoot 给我们推荐的 Thymeleaf 模板引擎，这模板引擎呢，是一个高级语言的模板引擎，他的这个语法更简单。而且呢，功能更强大。

我们呢，就来看一下这个模板引擎，那既然要看这个模板引擎。首先，我们来看 SpringBoot 里边怎么用。

11.2、引入 Thymeleaf

怎么引入呢，对于 springboot 来说，什么事情不都是一个 start 的事情嘛，我们去在项目中引入一下。给大家三个网址：

Thymeleaf 官网：https://www.thymeleaf.org/

Thymeleaf 在 Github 的主页：https://github.com/thymeleaf/thymeleaf

Spring 官方文档：找到我们对应的版本

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

找到对应的 pom 依赖：可以适当点进源码看下本来的包！

 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>

Maven 会自动下载 jar 包，我们可以去看下下载的东西；

11.3、Thymeleaf 分析

前面呢，我们已经引入了 Thymeleaf，那这个要怎么使用呢？

我们首先得按照 SpringBoot 的自动配置原理看一下我们这个 Thymeleaf 的自动配置规则，在按照那个规则，我们进行使用。

我们去找一下 Thymeleaf 的自动配置类：ThymeleafPropert

@ConfigurationProperties( prefix = "spring.thymeleaf" ) public class ThymeleafProperties { private static final Charset DEFAULT_ENCODING; public static final String DEFAULT_PREFIX = "classpath:/templates/"; public static final String DEFAULT_SUFFIX = ".html"; private boolean checkTemplate = true; private boolean checkTemplateLocation = true; private String prefix = "classpath:/templates/"; private String suffix = ".html"; private String mode = "HTML"; private Charset encoding; }

我们可以在其中看到默认的前缀和后缀！

我们只需要把我们的 html 页面放在类路径下的 templates 下，thymeleaf 就可以帮我们自动渲染了。

使用 thymeleaf 什么都不需要配置，只需要将他放在指定的文件夹下即可！

测试

1、编写一个 TestController

@Controller public class TestController { @RequestMapping("/t1") public String test1(){ //classpath:/templates/test.html return "test"; } }

2、编写一个测试页面 test.html 放在 templates 目录下

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>测试页面</h1> </body> </html>

3、启动项目请求测试

11.4、Thymeleaf 语法学习

要学习语法，还是参考官网文档最为准确，我们找到对应的版本看一下；

Thymeleaf 官网：https://www.thymeleaf.org/ ，简单看一下官网！我们去下载 Thymeleaf 的官方文档！

我们做个最简单的练习：我们需要查出一些数据，在页面中展示

1、修改测试请求，增加数据传输；

@RequestMapping("/t1") public String test1(Model model){ //存入数据 model.addAttribute("msg","Hello,Thymeleaf"); //classpath:/templates/test.html return "test"; }

2、我们要使用 thymeleaf，需要在 html 文件中导入命名空间的约束，方便提示。

我们可以去官方文档的 #3 中看一下命名空间拿来过来：

xmlns:th="http://www.thymeleaf.org"

3、我们去编写下前端页面

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>狂神说</title> </head> <body> <h1>测试页面</h1>  <div th:text="${msg}"></div> </body> </html>

4、启动测试！

OK，入门搞定，我们来认真研习一下 Thymeleaf 的使用语法！

1、我们可以使用任意的 th:attr 来替换 Html 中原生属性的值！

2、我们能写哪些表达式呢？

Simple expressions:（表达式语法） Variable Expressions: ${...}：获取变量值；OGNL； 1）、获取对象的属性、调用方法 2）、使用内置的基本对象：#18 #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. 3）、内置的一些工具对象：　　　　　　#execInfo : information about the template being processed. 　　　　　　#uris : methods for escaping parts of URLs/URIs 　　　　　　#conversions : methods for executing the configured conversion service (if any). 　　　　　　#dates : methods for java.util.Date objects: formatting, component extraction, etc. 　　　　　　#calendars : analogous to #dates , but for java.util.Calendar objects. 　　　　　　#numbers : methods for formatting numeric objects. 　　　　　　#strings : methods for String objects: contains, startsWith, prepending/appending, etc. 　　　　　　#objects : methods for objects in general. 　　　　　　#bools : methods for boolean evaluation. 　　　　　　#arrays : methods for arrays. 　　　　　　#lists : methods for lists. 　　　　　　#sets : methods for sets. 　　　　　　#maps : methods for maps. 　　　　　　#aggregates : methods for creating aggregates on arrays or collections. ================================================================================== Selection Variable Expressions: *{...}：选择表达式：和${}在功能上是一样； Message Expressions: #{...}：获取国际化内容 Link URL Expressions: @{...}：定义URL； Fragment Expressions: ~{...}：片段引用表达式 Literals（字面量） Text literals: 'one text' , 'Another one!' ,… Number literals: 0 , 34 , 3.0 , 12.3 ,… Boolean literals: true , false Null literal: null Literal tokens: one , sometext , main ,… Text operations:（文本操作） String concatenation: + Literal substitutions: |The name is ${name}| Arithmetic operations:（数学运算） Binary operators: + , - , * , / , % Minus sign (unary operator): - Boolean operations:（布尔运算） Binary operators: and , or Boolean negation (unary operator): ! , not Comparisons and equality:（比较运算） Comparators: > , < , >= , <= ( gt , lt , ge , le ) Equality operators: == , != ( eq , ne ) Conditional operators:条件运算（三元运算符） If-then: (if) ? (then) If-then-else: (if) ? (then) : (else) Default: (value) ?: (defaultvalue) Special tokens: No-Operation: _

练习测试：

1、我们编写一个 Controller，放一些数据

@RequestMapping("/t2") public String test2(Map<String,Object> map){ //存入数据 map.put("msg","<h1>Hello</h1>"); map.put("users", Arrays.asList("qinjiang","kuangshen")); //classpath:/templates/test.html return "test"; }

2、测试页面取出数据

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>狂神说</title> </head> <body> <h1>测试页面</h1> <div th:text="${msg}"></div>  <div th:utext="${msg}"></div>   <h4 th:each="user :${users}" th:text="${user}"></h4> <h4>  <span th:each="user:${users}">[[${user}]]</span> </h4> </body> </html>

3、启动项目测试！

我们看完语法，很多样式，我们即使现在学习了，也会忘记，所以我们在学习过程中，需要使用什么，根据官方文档来查询，才是最重要的，要熟练使用官方文档！

查看全文

相关阅读:
nginx：配置详细说明
 linux：/etc/rc.local 不能自动启动问题
 nginx：403 forbidden 二种原因
 nginx:虚拟主机配置
 linux：lnmp环境搭建
 php：mysqli扩展
 linux：磁盘的分割、检验、格式化与挂载
 webpack
js的window.onscroll事件兼容各大浏览器
 js window事件解析（转载）

原文地址：https://www.cnblogs.com/ldy2396/p/14909515.html

11、SpringBoot：Thymeleaf 模板引擎

11.1、模板引擎

11.2、引入 Thymeleaf

11.3、Thymeleaf 分析

11.4、Thymeleaf 语法学习