Spring MVC 整合 Thymeleaf 实验手册(二)

在本系列的 上一篇文章, 我们搭建了 Spring MVC 与 Thymeleaf 整合的项目。本次实验,我们来学习一些 Thymeleaf 的基本使用。

输出变量

上一篇文章 的末尾,我们构建了 index.html 视图(thymeleaf模板), 输出了固定的字符串 “Hello Thymeleaf !”。 如果我们希望输出的内容是变化的,比如输出当前系统的名称。

在 Spring MVC 与 Thymeleaf 的整合中,这个功能很容易实现,只需要在 Controller 中存入变量,然后在模板中引用该变量即可。具体如下:

  1. 修改 Controller

打开 IndexController.java 文件,修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Controller
public class AccountController {

private static final String SYS = "我的商城";

private static final Logger LOG = LoggerFactory.getLogger(AccountController.class);

@Autowired
private IAccountService accountService;

@GetMapping("/")
public String home(Model model) {
model.addAttribute("sys", SYS);
return "index";
}
}
  1. 修改 Thymeleaf 模板

打开 index.html 文件,修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title th:text="'Welcome to ' + ${sys} + '!'"></title>
<link th:href="@{/static/css/main.css}" rel="stylesheet"/>
</head>
<body>
<h2 class="hello-title" th:text="'Welcome ' + ${sys} + '!'"></h2>
<script th:src="@{/static/js/main.js}"></script>
</body>
</html>

获取用户输入

为获取用户使用 HTML Form 提交的内容,我们通常使用一个 DTO 类。 这里,我们模仿一个用户登录的案例。

  1. 新建 DTO

在项目中新建名为: cn.com.hohistar.training.petstore.dto 的包,在其中新建名为 LoginFormDto 的类, 内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class LoginForm {

private String username;

private String password;

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

@Override
public String toString() {
final StringBuffer sb = new StringBuffer("LoginForm{");
sb.append("username='").append(username).append('\'');
sb.append(", password='").append(password).append('\'');
sb.append('}');
return sb.toString();
}
}
  1. 然后修改 Controller

打开 IndexController.java, 修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@Controller
public class AccountController {

private static final String SYS = "我的商城";

private static final Logger LOG = LoggerFactory.getLogger(AccountController.class);

@GetMapping("/")
public String home(Model model) {
model.addAttribute("sys", SYS);
return "index";
}

@GetMapping("/login")
public String login(Model model) {
LoginForm loginForm = new LoginForm();
model.addAttribute("loginForm", loginForm);
return "login";
}

@PostMapping("/login")
public String loginSubmit(Model model, LoginForm loginForm) {

LOG.debug("loginForm = {}", loginForm);

return "home";
}
}
  1. 添加 Thymeleaf 模板

这次,我们需要添加两个模板文件:

login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title th:text="'login to petstore'"></title>
<link th:href="@{/static/css/main.css}" rel="stylesheet"/>
</head>
<body>
<h2 class="hello-title" th:text="'Login '"></h2>
<div>
<div th:if="${msg} ne null">
<span th:text="${msg}"></span>
</div>
<form th:action="@{/login}" th:object="${loginForm}" method="POST">
<label for="username">用户名:</label>
<input type="text" id="username" th:field="*{username}" value="" /><br/>

<label for="password">密码:</label>
<input type="password" id="password" th:field="*{password}" value="" /> <br/>

<input type="submit" value="提交"/>
</form>
</div>

</body>
</html>

home.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title th:text="'Home ' + ${username} + '!'"></title>
<link th:href="@{/static/css/main.css}" rel="stylesheet"/>
</head>
<body>
<h2 class="hello-title" th:text="'Hello ' + ${username} + '!'"></h2>
</body>
</html>

为了让页面有的色彩,我们也添加一个 CSS 文件,**注意,该文件放置在 webapp/static/css 文件夹中。

1
2
3
.hello-title{
color: darkgreen;
}

使用 Thymeleaf 中的条件判断

模拟登录不成功时输出提升信息的场景。

  1. 修改 Controller
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@PostMapping("/login")
public String loginSubmit(Model model, LoginForm loginForm) {

LOG.debug("loginForm = {}", loginForm);
String toPage = "home";

if ("tom".eqauls(loginForm.getUsername()) && "123".eqalus(loginForm.getPassword())) {

model.addAttribute("username", loginForm.getUsername());

} else {

model.addAttribute("msg", "用户名或密码错!");
toPage = "login";
}


return toPage;
}
  1. 修改 Thymeleaf 模板

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title th:text="'login to petstore'"></title>
<link th:href="@{/static/css/main.css}" rel="stylesheet"/>
</head>
<body>
<h2 class="hello-title" th:text="'Login '"></h2>
<div>
<div th:if="${msg} ne null">
<span th:text="${msg}"></span>
</div>
<form th:action="@{/login}" th:object="${loginForm}" method="POST">
<label for="username">用户名:</label>
<input type="text" id="username" th:field="*{username}" value="" /><br/>

<label for="password">密码:</label>
<input type="password" id="password" th:field="*{password}" value="" /> <br/>

<input type="submit" value="提交"/>
</form>
</div>

</body>
</html>

使用 Thymeleaf 中的循环

  1. 修改 IndexConroller, 加入输出用户列表的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@GetMapping("/acc/list")
public String loginSubmit(Model model) {

List<Account> accounts = new ArrayList<>();

Account account = new Account();
account.setFirstName("tom");
account.setEmail("tom@qq.com");
accounts.add(account);

Account account2 = new Account();
account2.setFirstName("jack");
account2.setEmail("jack@qq.com");
accounts.add(account2);

model.addAttribute("accounts", accounts);

return "acc/list";
}
  1. 新增 acc/list.html 文件, 内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>Account List</title>
<link th:href="@{/static/css/main.css}" rel="stylesheet"/>
</head>
<body>
<h2 class="hello-title">Account List</h2>
<table border="1">
<tr>
<th>用户名</th>
<th>邮箱</th>
</tr>
<tr th:each="user,userStat : ${accounts}">
<th th:text="${userStat.index}">No</th>
<td th:text="${user.firstName}">Onions</td>
<td th:text="${user.email}">test@test.com.cn</td>
</tr>
</table>

</body>
</html>

本文标题:Spring MVC 整合 Thymeleaf 实验手册(二)

文章作者:晨星

发布时间:2020年09月13日 - 15:09

最后更新:2020年09月18日 - 08:09

原始链接:https://www.mls-tech.info/java/springmvc-thymeleaf-mannual-02/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。