导入ThymeLeaf
可以从Spring Boot的官方文档中导入ThymeLeaf:
在第13章中的starters中
地址为:https://docs.spring.io/spring-boot/docs/2.1.3.RELEASE/reference/htmlsingle/#using-boot-starter
pom.xml文件中导入的代码:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
整个pom.xml的文件代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.demo</groupId>
<artifactId>learning03</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>learning03</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<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>
<scope>test</scope>
</dependency>
<!-- 引入jquery-webjar-->
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
ThymeLeaf的使用
thymeleaf默认会渲染classpath:/template下的html文件。
首先在如下路径编写一个thymeleaf.html文件:
该html文件的代码为:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>thymeleaf_test</h1>
<div th:text="${key}"></div>
</body>
</html>
注意这里在<html>块内添加了thymeleaf的名称空间:
<html lang="en" xmlns:th="http://www.thymeleaf.org">
然后建立如下的文件结构:
编写HelloController.java的代码如下:
package com.demo.learning03.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.Map;
@Controller
public class HelloController {
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "Hello World";
}
@RequestMapping("/page1")
public String success(Map<String,Object> map){
map.put("key","value");
return "thymeleaf_demo";
}
}
上面这个controller对两种页面进行了控制:
当浏览器的访问页面是localhost:8080/hello时:
- 直接通过@ResponseBody返回字符串"Hello World"
当浏览器访问的页面是localhost:8080/page1时:
- 首先会创建一个map;
- 然后在map中放入键值对{“key”,“value”}
- 最后会返回一个"thymeleaf_demo"对象。如果这个方法上方有@ResponseBody注解则会直接返回字符串"thymeleaf_demo"。但是不加@ResponseBody注解时,会去resources/templates下查找thymeleaf_demo.html文件。
现在运行整个项目,在浏览器中输入:http://localhost:8080/page1, 可以看到:
ThymeLeaf的语法规则:
表达式语法:
- ${…} 获取变量值
- *{…} 选择表达式
- #{…} 获取国际化内容
- @{…} 定义url链接
- ~{…} 片段引入表达式
现在继续对HelloController.java进行修改:
package com.demo.learning03.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.lang.reflect.Array;
import java.util.Arrays;
import java.util.Map;
@Controller
public class HelloController {
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "Hello World";
}
@RequestMapping("/page1")
public String success(Map<String,Object> map){
map.put("key1","<h1>this is a text to key1</h1>");
map.put("users", Arrays.asList("Tom","Mary","Jack"));
return "thymeleaf_demo";
}
}
然后修改一下上面的html文件:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>thymeleaf_test</h1>
转义后的字符串:<div th:text="${key1}"></div>
不转义的字符串<div th:utext="${key1}"></div>
<hr/>
<h4 th:text="${user}" th:each="user:${users}"></h4>
<span th:each="user:${users}">[[${user}]]</span>
</body>
</html>
在浏览器中输入:http://localhost:8080/page1, 显示内容为: