在本系列的 上一篇文章, 我们搭建了 Spring MVC 与 Thymeleaf 整合的项目。本次实验,我们来学习一些 Thymeleaf 的基本使用。
输出变量
在 上一篇文章 的末尾,我们构建了 index.html 视图(thymeleaf模板), 输出了固定的字符串 “Hello Thymeleaf !”。 如果我们希望输出的内容是变化的,比如输出当前系统的名称。
在 Spring MVC 与 Thymeleaf 的整合中,这个功能很容易实现,只需要在 Controller 中存入变量,然后在模板中引用该变量即可。具体如下:
- 修改 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"; } }
|
- 修改 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 ' + #123;sys} + '!'"></title> <link th:href="@{/static/css/main.css}" rel="stylesheet"/> </head> <body> <h2 class="hello-title" th:text="'Welcome ' + #123;sys} + '!'"></h2> <script th:src="@{/static/js/main.js}"></script> </body> </html>
|
获取用户输入
为获取用户使用 HTML Form 提交的内容,我们通常使用一个 DTO 类。 这里,我们模仿一个用户登录的案例。
- 新建 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(); } }
|
- 然后修改 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"; } }
|
- 添加 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="#123;msg} ne null"> <span th:text="#123;msg}"></span> </div> <form th:action="@{/login}" th:object="#123;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 ' + #123;username} + '!'"></title> <link th:href="@{/static/css/main.css}" rel="stylesheet"/> </head> <body> <h2 class="hello-title" th:text="'Hello ' + #123;username} + '!'"></h2> </body> </html>
|
为了让页面有的色彩,我们也添加一个 CSS 文件,**注意,该文件放置在 webapp/static/css 文件夹中。
1 2 3
| .hello-title{ color: darkgreen; }
|
使用 Thymeleaf 中的条件判断
模拟登录不成功时输出提升信息的场景。
- 修改 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; }
|
- 修改 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="#123;msg} ne null"> <span th:text="#123;msg}"></span> </div> <form th:action="@{/login}" th:object="#123;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 中的循环
- 修改 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"; }
|
- 新增 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 : #123;accounts}"> <th th:text="#123;userStat.index}">No</th> <td th:text="#123;user.firstName}">Onions</td> <td th:text="#123;user.email}">test@test.com.cn</td> </tr> </table>
</body> </html>
|