【SpringBoot】11 Web开发 Part2 模板引擎

开发回顾:

JavaWeb开发使用JSP技术,所有的页面文件必须是JSP,才能接受数据处理

JSP的好处是,数据交互方便,有JSTL补充

SpringBoot的区别:

我们最终的项目是一个jar包

内嵌了Tomcat,这是不支持JSP的

纯静态页面的数据交互成技术难点了

解决方案:

模板引擎 TemplateEngine


常见的模板引擎:

- 初代目:JSP、JSTL、

- Thymeleaf

- Freemarker

- Velocity


模板引擎的核心思想:

1、在页面中写入模板【表达式】

2、由服务器传输数据,交给模板引擎

3、模板引擎处理数据注入到页面的模板中

4、最后在页面上生成我们想要的效果

要注意,模板引擎的本质是对文档的Dom对象进行操作


SpringBoot 推荐Thymeleaf

1、引入Thymeleaf

maven坐标

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

【SpringBoot】11 Web开发 Part2 模板引擎

2、默认的模板位置

【SpringBoot】11 Web开发 Part2 模板引擎

也就是resources.templates目录下

Thymeleaf会自动渲染这个目录内的所有页面

开始测试:

编写控制器

【SpringBoot】11 Web开发 Part2 模板引擎

页面访问

【SpringBoot】11 Web开发 Part2 模板引擎

传输数据

首先,被渲染的模板页面需要导入Thymeleaf的TL约束

这个约束可以不打,就是会没有提示信息

<html lang="en" xml:th="http://www.thymeleaf.org">

但是在IDEA的编写过程中是提示这个约束

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

【SpringBoot】11 Web开发 Part2 模板引擎

改变当前元素的文本内容

<p th:text="${hello}"></p>

凡是元素具有的属性,只要在前面加 th:

这个属性的值就可以被模板引擎进行交互

th的值会替换当前元素原有的文本内容

【可以替换原生元素的属性值】

【SpringBoot】11 Web开发 Part2 模板引擎

简单的表达式

【SpringBoot】11 Web开发 Part2 模板引擎

字面值

【SpringBoot】11 Web开发 Part2 模板引擎

文本运算符

【SpringBoot】11 Web开发 Part2 模板引擎

算术运算符

【SpringBoot】11 Web开发 Part2 模板引擎

布尔运算符

【SpringBoot】11 Web开发 Part2 模板引擎

比较运算符

【SpringBoot】11 Web开发 Part2 模板引擎

条件运算与三元运算

【SpringBoot】11 Web开发 Part2 模板引擎

特殊的Token?

【SpringBoot】11 Web开发 Part2 模板引擎

 字面意思是【不操作】,用于三元运算的操作取消?

上述的这些特性可以被组合与嵌套

【SpringBoot】11 Web开发 Part2 模板引擎


 OGNL (Object-Graph Navigation Language)

对象图形导航语言

关于OGNL官网的详细介绍

http://commons.apache.org/proper/commons-ognl/

这种表达式用于获取变量【即对象、属性、值】

${Value}

可以使用对象引用属性的方式获取值

/** 
Access to properties using the point (.). Equivalent to calling property getters.
*/
${person.father.name}

或者按对象的属性标识符来获取

/** 
Access to properties can also be made by using brackets ([]) and writing 
the name of the property as a variable or between single quotes.
*/ ${person['father']['name']}

如果对象是一个Map,则点和括号语法将等效于对其get(…)方法执行调用

/** 
If the object is a map, both dot and bracket syntax will be equivalent to 
executing a call on its get(...) method.
*/ ${countriesByCode.ES} ${personsByName['Stephen Zucchini'].age}

数组和List集合的引用

/** 
Indexed access to arrays or collections is also performed with brackets,
writing the index without quotes. 
*/ 
${personsArray[0].name}

你甚至可以写方法,和参数!?

/** 
Methods can be called, even with arguments. 
*/ 
${person.createCompleteName()} 
${person.createCompleteNameWithSeparator(
'-')}

表达式内置的基本对象

在对上下文变量求值OGNL表达式时,某些对象可用于表达式以获得更高的灵活性。

这些对象将被引用(根据OGNL标准),从【#】符号开始

【SpringBoot】11 Web开发 Part2 模板引擎

内置的工具对象

除了这些基本对象之外,Thymeleaf还将提供一组实用程序对象,

帮助我们执行表达式中的常见任务。

【SpringBoot】11 Web开发 Part2 模板引擎


表达式的总结:

变量表达式

${Value}

- 表达对象、属性、值

- 表达对象的属性、

- 配合内置基本对象

- 配合内置工具对象

选择变量表达式

*{SelectionValue}

用于配合th:object表达式使用

官方的实例说明:

父类元素的th属性获取了这个表达式的对象

然后,里面子元素,可以使用*{}表达式直接调用父元素的这个object属性

【SpringBoot】11 Web开发 Part2 模板引擎

消息表达式:

Message Expressions: #{...}

用于I18N的国际化

连接表达式:

Link URL Expressions: @{...}

用于定义链接,使用模板引擎声明URL的好处就是

- 动态注入连接参数

- 不需要写完整协议,从工程名后面开始即可

片段表达式:

Fragment Expressions: ~{...}

用于抽取封装HTML片段,提高可重用性


th:text & th:utext 的区别?

th:text 是不转义的表达式,我们写入<h1>text</h1> 会识别为文档标签

th:utext 是转义的表达式,我们写入<h1>text</h1> 会转义当成文本处理

遍历的属性表达式,prod表示遍历的变量,就是当成对象一样获取数学

【SpringBoot】11 Web开发 Part2 模板引擎

这两种属性的行内写法:

th:text  == [[ ${Value} ]]
th:utext  == [( ${Value} )]

不推荐使用这种写法,如果没有获取到,页面将会解析这个表达式出来,

影响美观,泄露数据安全