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

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

输出变量

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

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

修改 Controller

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

@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 文件，修改如下:

<!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 类。这里，我们模仿一个用户登录的案例。

新建 DTO

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

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, 修改如下:

@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 模板

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

<!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

<!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 中的条件判断

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

修改 Controller

@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

<!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 中的循环

修改 IndexConroller, 加入输出用户列表的方法

@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 文件，内容如下:

<!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>