在上一篇中,我们已经讲了,SpringBoot 如何构建项目,和SpringBoot的HelloWorld,

那这一节我们继续讲 Thymeleaf

Thymeleaf



官网: Thymeleaf

Thymeleaf是跟Velocity、FreeMarker类似的模板引擎,它可以完全替代JSP,相较与其他的模板引擎,它主要有以下几个优势:

  1. Thymeleaf在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以thymeleaf的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

  2. Thymeleaf开箱即用的特性。它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、OGNL表达式效果,避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

  3. Thymeleaf提供spring标准方言和一个与SpringMVC完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

    简单点说: 就是为我们要渲染的界面

自动配置

自动给我们默认分配了模版的前缀和后缀,我们只需要按部就班的将模版丢进去即可,

SpringBoot天生就带自动配置,这也是为什么,我们直接丢进去就可以了,

相比于SpringMVC,他会自动拼接到templates页面

Thymeleaf整合SpringBoot

  1. 在pom.xml文件引入thymeleaf1
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
</dependency>
</dependencies>
  1. 在application.properties(application.yml)文件中配置thymeleaf
spring.thymeleaf.
prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.cache=false
  1. 新建编辑控制层代码HelloController,在request添加了name属性,返回到前端hello.html再使用thymeleaf取值显示。
@Controller
public class HelloController { @RequestMapping("/hello")
public String hello(HttpServletRequest request, @RequestParam(value = "name", defaultValue = "springboot-thymeleaf") String name) {
request.setAttribute("name", name);
return "hello";
}
}
  1. 新建编辑模板文件,在resources文件夹下的templates目录,用于存放HTML等模板文件,在这新增hello.html,添加如下代码。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>springboot-thymeleaf demo</title>
</head> <body>
<p th:text="'hello, ' + ${name} + '!'" />
</body>
</html>

以后,我们所有的 代码 都是上面 这三板斧 ,这也是SpringBoot的优势

  • 写 pom
  • 写配置
  • 业务类

切记:使用Thymeleaf模板引擎时,必须在html文件上方添加该行代码使用支持Thymeleaf。

<html lang="en" xmlns:th="http://www.thymeleaf.org">
  1. 启动项目,访问http://localhost:8080/hello,看到如下显示证明SpringBoot整合Thymeleaf成功。

Thyemeleaf 的常用语法

Thymeleaf的主要作用是把model中的数据渲染到html中,因此其语法主要是如何解析model中的数据。从以下方面来学习:

  • 变量、方法、条件判断、循环、运算 [ 逻辑运算、布尔运算、比较运算、条件运算 ]
  • 其他 大家可以去官网: Thymeleaf详解

变量_变量案列

我们先新建一个实体类:User

public class User {
String name;
int age;
User friend;// 对象类型属性
}

然后在Controller中添加数据

@GetMapping("test2")
public String test2(Model model){
User user = new User();
user.setAge(21);
user.setName("Jackson");
user.setFriend(new User("李小龙", 30));

model.addAttribute("user", user);
return "hello2";
}

·语法解释·

Thymeleaf通过${}来获取model中的变量,注意这不是el表达式,而是ognl表达式,但是语法非常像。

我们在页面获取user数据:

<h1>
你好:<span th:text="${user.name}">请跟我来</span>
</h1>

感觉跟el表达式差不多的。区别在于,我们的表达式写在一个名为:th:text的标签属性中,这个叫做指令

向下兼容

但是要注意,如果浏览器不支持Html5怎么办?

如果不支持这种th:的命名空间写法,那么可以把th:text换成 data-th-text,Thymeleaf也可以兼容。

如果想要不进行格式化输出,而是要输出原始内容,则使用th:utext来代替.

变量_ognl表达式的语法

刚才获取变量值,我们使用的是经典的对象.属性名方式。但有些情况下,我们的属性名可能本身也是变量,怎么办?

ognl提供了类似js的语法方式:

例如:${user.name} 可以写作${user['name']}

看下面案例
<h2>
<p>Name: <span th:text="${user.name}">Jack</span>.</p>
<p>Age: <span th:text="${user.age}">21</span>.</p>
<p>friend: <span th:text="${user.friend.name}">Rose</span>.</p>
</h2>

我们获取用户的所有信息,分别展示。

当数据量比较多的时候,频繁的写user.就会非常麻烦。

因此,Thymeleaf提供了自定义变量来解决:

示例

<h2 th:object="${user}">
<p>Name: <span th:text="*{name}">Jack</span>.</p>
<p>Age: <span th:text="*{age}">21</span>.</p>
<p>friend: <span th:text="*{friend.name}">Rose</span>.</p>
</h2>
  • 首先在 h2上 用 th:object="${user}"获取user的值,并且保存
  • 然后,在h2内部的任意元素上,可以通过 *{属性名}的方式,来获取user中的属性,这样就省去了大量的user.前缀了

循环遍历

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>欢迎访问thymeleaf页面</h1> <h4>
<span th:each="user:${user}"> [[${user}]] </span>
</h4>
</body>
</html>

欧克 ,好了,就总结到这里 ,喜欢的话,记得点个关注哦!

SpringBoot从入门到精通教程(三)的更多相关文章

  1. SpringBoot从入门到精通教程(二)

    SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...

  2. SpringBoot从入门到精通教程(一)

    写在前面的话: 在很早之前,记笔记时候,我就一直在思考一个问题,我记笔记是为了什么,我一直想不明白 ,后面发现技术跟新迭代的速度实在太快了,笔记刚纪完,技术又跟新了,于是我想了想干脆边写博客,边记笔记 ...

  3. SpringBoot从入门到精通教程(八)

    本主要介绍ElasticSearch 和 SpringBoot 的整合 ,对您有帮助的话,点个关注哦 ElastSearch 介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供 ...

  4. SpringBoot从入门到精通教程(五)

    上节,我们讲了 SpringBoot 如何使用MyBatis 今天我们讲讲 Springboot Logo自定义的问题, 我们在启动 SpringBoot 时,控制台会打印 SpringBoot Lo ...

  5. springboot从入门到精通(三)

    再开始第三节之前,先补充一下第二节里出现的小问题,就是springboot的application.properties,我在文件中添加了server.port=9090这个参数,但是启动项目后并未生 ...

  6. SpringBoot从入门到精通教程(七)

    今天,我们继续讲SpringBoot整合Redis ,也就缓存,它将与我们的Springboot整合 Redis 简介 Redis 是当前比较热门的NOSQL系统之一,它是一个开源的使用ANSI c语 ...

  7. SpringBoot从入门到精通教程(六)

    之前学了,这么多东西 thyemeaf .MyBatis 还有 配置文件等等,今天我们就来做一个小案例 CRUD,程序员的必备 项目结构 pom.xml <!-- mybatis 相关依赖 -- ...

  8. SpringBoot从入门到精通教程(四)

    前端时间整合SSM ,发现了一个现象,在整合的时候 配置文件过于复杂. 1.建工程,建目录,导入jar包. 2.配置 数据源 映射信息 等等 ... 3. 还有 各种 拦截器,控制器 ,头都大了... ...

  9. 深入浅出!springboot从入门到精通,实战开发全套教程!

    前言 之前一直有粉丝想让我出一套springboot实战开发的教程,我这边总结了很久资料和经验,在最近总算把这套教程的大纲和内容初步总结完毕了,这份教程从springboot的入门到精通全部涵盖在内, ...

随机推荐

  1. mybatis中的一些标签使用

    主要有两个配置文件,一个是主配置文件SqlConfig.xml, 还有一个是dao接口实现类相对应的mapper的配置文件 .比如userDao的userDao.xml配置文件. 1.resultTy ...

  2. leetcode 33和 leetcode81 II

    //接上上一篇博客,继续这个题目,现在数组中会有重复元素,情况将会变得十分复杂,比如说1,1,1,1,1   或者1,1,3,1再来 3,3,3,1,1,1,3,这些都是可以的,都是符合题目要求的,如 ...

  3. 这份SpringMVC执行原理笔记,建议做java开发的好好看看,总结的很详细!

    什么是SpringMVC? Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供的web模块,包含了开发Web 应用程 ...

  4. java抽象类,多态1

    1 package pet_2; 2 3 public abstract class Pet { 4 private String name; 5 6 public String getName() ...

  5. 深度学习论文翻译解析(十五):Densely Connected Convolutional Networks

    论文标题:Densely Connected Convolutional Networks 论文作者:Gao Huang Zhuang Liu Laurens van der Maaten  Kili ...

  6. VisualStudio C++使用汇编函数

    Visual Studio编写C++代码使用汇编函数 新建空项目 新建如下源文件 ;test.asm ;测试函数 三个数相加 ;.386 .model flat, c ;public test_ .c ...

  7. 6.2 Binding基础

    WPF最为核心的思想是数据驱动UI,实现这一技术的基石就是绑定技术(binding).如果把Binding比作数据的桥梁,那么它的两端分别是源(Source)和目标(Target),Binging是架 ...

  8. 我与PHP,ULM和Vue.js不得不说的故事(我与PHP白月光的那些事儿之第三年的见异思迁番外篇)

    关于PHP的认知 -----恍惚间眸眼像极了一位故人 第一年遇见,那时的它还稚嫩懵懂.像白纸一样的脸,极容易读懂.于是放荡不羁,不放真心.稍微用心,它便能高兴好久.初识它时它叫C语言,浅尝却不觉其难过 ...

  9. 《高并发下的.NET》第2季 - 故障公告:高并发下全线崩溃

    大家好,非常抱歉,在昨天下午(12月3日)的访问高峰,园子迎来更高的并发,在这样的高并发下,突发的数据库连接故障造成博客站点全线崩溃,由此给您带来很大的麻烦,请您谅解. 最近,我们一边在忙于AWS合作 ...

  10. 对象不支持“assign”属性或方法

    1. 报错信息 vue项目打包部署后,ie11报错内容如下: 看到报错信息肯定是语法兼容问题了,经测试 Edge 无此情况,部分ie9也有此类问题. 2. 尝试方法 安装 create-react-a ...