SpringBoot 整合 Thymeleaf 模板，java 技术核心卷二
[3、条件判断](about:blank#3%E3%80%81%E6%9D
%A1%E4%BB%B6%E5%88%A4%E6%96%AD)
搭建项目
1、项目结构
2、搭建 SpringBoot 项目
选择相关的依赖，相关依赖有：spring-web 和 Thymeleaf
3、相关依赖
完整的 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 https://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.2.1.RELEASE</version>
</parent>
<groupId>com.mcy</groupId>
<artifactId>spring-thy</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>spring-thy</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-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>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
如果新建项目时没有勾选 Thymeleaf 依赖，则需要手动添加 Thymeleaf 依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
编写代码
1、登录页面
先在 templates 文件夹下新建一个 index.html 登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#main{
width: 400px;
margin: 100px auto;
padding: 30px;
border-radius: 20px;
border: 10px solid lightsteelblue;
text-align: center;
}
p{
font-size: 25px;
padding: 10px;
}
input{
width: 250px;
border-radius: 3px;
height: 20px;
font-size: 25px;
padding: 3px;
}
button{
width: 100px;
padding: 10px;
border-radius: 5px;
border: none;
background: blue;
color: white;
}
</style>
</head>
<body>
<div id="main">
<form action="login" method="post">
<p>账号：<input type="text" name="username" placeholder="账号"></p>
<p>密码：<input type="password" name="password" placeholder="密码"></p>
<p><button type="submit">登录</button></p>
</form>
</div>
</body>
</html>
**【注意】**input 中 name 属性值对应后台 Controller 中接收的变量。
2、测试控制器
在【com.mcy.demo】包下新建一个【controller】包，【com.mcy.demo.controller】包下新建一个【Indexcontroller.java】类：
@Controller
public class IndexController {
//映射“/”请求
@RequestMapping("/")
public String index(){
System.out.println("index 方法被调用。。。。");
//根据 Thymeleaf 默认模板，将返回 resources/templates/index.html
return "index";
}
//登录请求
//username, password 对应前台 input 中 name 属性值
@PostMapping("login")
public String login(String username, String password){
System.out.println("login 方法被调用。。。。");
System.out.println("login 登录名："+username+", 密码："+password);
//重定向到 main 请求
return "redirect:/main";
}
//跳转登录成功后页面请求
@RequestMapping(value="/main")
public String main(){
System.out.println("main 方法被调用。。。。");
//返回 main 页面
return "main";
}
}
**【注意】**login 方法中参数 username, password 对应前台 input 中 name 属性值
@Controller 注解用于指示该类是一个控制器。@RequestMapping 注解用于映射请求的 URL，@PostMapping 注解对应 post 映射请求。
返回字符串"index"，由于 Thymeleaf 默认的前缀是“classpath:/templates/”，后缀是“html”，所以该请求返回“classpath:/templates/index.html”。
登录成功返回 main.html 页面，代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
登录成功，欢迎页面。
</body>
</html>
测试应用
1、参数传递
运行项目，直接浏览器 localhost:8080 访问，请求会提交到 IndexController 类的 index 方法进行处理，该方法返回字符串“index”，即跳转到 templates/index.html 页面。
输入任意登录名，密码单击登录按钮。请求将会提交到 IndexController 类的 login 方法，该方法接收请求参数 username 和 password，并重定向到 main 请求。main 请求的处理方法是 IndexController 类中的 main 方法，该方法返回字符串"main"，即跳转到 templates/main.html 页面，如图所示。
查看 idea 控制台输出结果
控制台输出的为接收到前台传递的参数以及方法被调用信息。
在 main.html 页面上添加三个测试超连接，分别用来测试 Thymeleaf 的表达式，条件判断和循环。
<body>
<p>登录成功，欢迎页面。</p>
<p>a 标签中的 href 属性可以用 href 也可以用 th:href</p>
<p><a th:href="@{regexptest?username=jack&password=123456}">测试表达式访问数据</a></p>
<p><a th:href="@{iftest}">测试条件判断</a></p>
<p><a href="eachtest">测试循环</a></p>
</body>
2、表达式访问数据
第一个测试表达式访问数据，对应 IndexController 中的 regexptest 方法代码如下
//将表达式保存到作用域，用于测试 Thymeleaf 表达式访问数据
@RequestMapping(value = "/regexptest")
public String regexptest(HttpServletRequest request, HttpSession session){
//将数据保存到 request 作用域中
request.setAttribute("book", "springboot 整合 Thymeleaf");
//将数据保存到 session 作用域中
session.setAttribute("belong", "spring");
//将数据保存到 servletContext(application)作用域当中
request.getServletContext().setAttribute("name", "Thymeleay 模板");
return "success";
}
regexptest 方法用来响应第一个请求<a th:href="@{regexptest?loginName=jack↦ password=123456}">测试表达式访问数据</a>，regexptest 方法中设置了一个 book 变量到 request 作用域；设置了一个 belong 变量到 session 作用域；设置了一个 name 变量到 servletContext 全局作用域，然后返回 success.html 页面。
success.html 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>Thymeleaf 表达式访问数据</h3>
<p style="color: red;">${param.x}将返回一个名为 x 的请求参数</p>
<p>
访问页面传递的参数：<span th:text="${param.username[0]}">登录名</span>，
<span th:text="${param.password[0]}">密码</span>
</p>
<p style="color: red;">${x}将返回存储在 Thymeleaf 上下文中的变量 X 或作为请求 Request 作用范围域中的属性。</p>
<p>访问 request 作用范围域中的变量：<span th:text="${book}">图书信息</span></p>
<p style="color: red;">${sessin.x}将返回一个名为 x 的会话 HTTPSession 作用范围域中的属性。</p>
<p>访问 session 作用范围域中的变量：<span th:text="${session.belong}">属于</span></p>
<p style="color: red;">${application.x}将返回一个名为 x 的全局 ServletContext 上下文作用范围域中的属性。</p>
<p>访问 application 作用范围域中的变量：<span th:text="${application.name}">动态页面模板</span></p>
</body>
</html>
success.html 中通过使用 Thymeleaf 表达式，接收了请求传递的参数 username 和 password，并分别访问了控制器中保存在 request、session 和 application 中的三个变量。
有一些专门的表达式，用来从模板中的 WebContext 获取请求参数、请求、会话和应用程序中的属性，这些操作和 JSP 的 EL 表达式非常相似。
${X}将返回存储在 Thymeleaf 上下文中的变量 X 或作为请求 Request 作用域中的属性。
${param.x}将返回一个名为 x 的请求参数（可能是多值的）。
${session.x}将返回一个名为 x 的会话 HTTPSession 作用域中的属性。
${application.x}将返回一个名为 x 的全局 ServletContext 上下文作用域中的属性。
项目运行后，直接浏览器 localhost:8080/main 访问。之后点击测试表达式访问数据可以看到，请求参数和保存在 request，session 和 application 作用域中的数据都访问到了，如图
可以看到，请求参数和保存在 request，session 和 application 作用域中的数据都访问到了。
3、条件判断
第二个测试 Thymeleaf 添加判断，对应 IndexController 中的 iftest 方法
//将数据保存到作用域，用于测试 Thymeleaf 的条件判断
@RequestMapping(value = "/iftest")
public String iftest(WebRequest webRequest, ModelMap map){
//将数据保存到 request 作用域，SpringMVC 推荐使用 WebRequest 或者 ModelMap
webRequest.setAttribute("username", "fkit", webRequest.SCOPE_REQUEST);
webRequest.setAttribute("age", 21, webRequest.SCOPE_REQUEST);
//ModelMap 传递
map.put("role", "admin");
return "success2";
}
iftest 方法用来响应第二个请求<a th:href="@{iftest}">测试条件判断</a>，iftest 方法中分别设置了 username，age 和 role 三个变量到 request 作用域，然后返回 success2.html。
success2.html 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>Thymeleaf 条件判断</h3>
<p style="color: red;">th:if 中条件成立时才显示结果</p>
<p><span th:if="${username != null}">username 不为空</span></p>
<p><span th:if="${age != null}">age 不为空</span></p>
<p style="color: red;">th:unless 与 th:if 恰好相反，只有表达式中的条件不成立，才会显示结果</p>
<p th:unless="${address != null}">address 为空</p>
<p style="color: red;">支持多路选择 Switch 结构，默认属性 default 可以用*表示</p>
<div th:switch="${role}">
<p th:case="'admin'">管理员</p>
<p th:case="'guest'">来宾</p>
<p th:case="'*'">其他</p>
</div>
</body>
</html>
项目运行后，直接浏览器 localhost:8080/main 访问。之后点击测试条件判断，请求进入了控制器 iftest 方法，返回 success2.html 页面，如图：
4、循环获取数据
第三个测试 Thymeleaf 循环取数据。
先创建一个 Book 类，设计了 id，title，author 和 price 属性，用来保存图片信息，便于之后存取数据。
public class Book {
private Integer id;
private String title; //书名
private String author; //作者
private String price; //价格
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
还未添加个人签名 2021.11.08 加入
还未添加个人简介
评论