Spring使用Thymeleaf实现HTML界面

简介

本文主要介绍SpringMVC使用Thymeleaf进行简单的HTML界面设计，如Table，表单，下拉框等。

利用Thymeleaf可以非常方便的在HTML中使用Java中class和方法，如字符串，List，Map等。

Thymeleaf

Thymeleaf是一个服务器端的Java模板引擎用于Web和独立环境，能够处理HTML，XML，JavaScript，CSS和纯文本，目标是提供一种优雅且易于维护的创建模板的方法。

更多细节见：Thymeleaf文档

为使用Thymeleaf需要有以下几个步骤：

加载Jar依赖
构建Controller
构建HTML文件

Jar依赖

我们使用gradle编译，build.gradle中加入依赖

dependencies {
	//其他依赖
	...
  	compile("org.springframework.boot:spring-boot-starter-thymeleaf:1.4.0.RELEASE")
}

Controller

为Web服务构建Controller，这里有几点需要注意：

注解是@Controller不是@RestController
方法greeting返回是固定字符串"greeting"，这里的返回值对应我们将要构建的HTML文件
为展示Thymeleaf可以访问Java中的类，我们构建一个Person类。
Model.addAttribute添加属性之后，在HTML文件中可以根据属性名获取其值。

package hello.controller;

import hello.domain.Person;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.HashMap;
import java.util.Map;

/**
 * Created on 2018/9/28.
 *
 * @author Marvin Yang
 */
@Controller
public class PageController {

    @GetMapping("/greeting")
    public String greeting(
            @RequestParam(name="name", required=false, defaultValue="World") String name,
            @RequestParam(name="gender", required=false, defaultValue="male") String gender, 
            Model model) {
        model.addAttribute("name", name);
      	// new person
        Person person = new Person();
        person.setName(name);
        person.setGender(gender);
        model.addAttribute("person", person);
      
        // map
        Map<Integer, String> ages = new HashMap<>();
        ages.put(0, "0-20");
        ages.put(1, "20-40");
        ages.put(2, "40-60");
        ages.put(3, "60-");
        model.addAttribute("ages", ages);
        return "greeting";
    }

}

Person类定义如下：

package hello.domain;

/**
 * Created on 2018/12/26.
 *
 * @author Marvin Yang
 */
public class Person {
    private String name;
    private String gender;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

}

HTML文件

文件位置

为配合Controller我们需要新建HTML文件greeting.html, 文件放置在src/main/resouces/templates/下，文件结构如下图：

src
	|__ main
		|__ java
		|__ resources
			|__ templates
				|__ greeting.html
	|__ test

文件内容

首先做有一个仅包含标题的HTML，并载入xmlns:th="http://www.thymeleaf.org"，下面我们利用Controller中为Model设置的属性实现实现Table，提交表单，下拉框等。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  	<!--待加入-->
  	<!--string-->
  	<!--table-->
  	<!--map-->
  	<!--form-->
  	<!--select-->
</body>
</html>

字符串

通过${attributeName}获取Model中的属性值，th:text标示文本，将该段代码放置在HTML对应位置。

<!--string-->
<h2>String</h2>
<p th:text="'Hello, ' + ${name} + '!'" />

table

通过${person.name}获取类的成员变量，前提成员变量是public或者有public的get方法。

<!--table-->
<H2>Table</H2>
<h3 th:text="${person.name} + '\'s INFO'"></h3>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Gender</td>
    </tr>
    <tr>
        <td th:text="${person.name}"></td>
        <td th:text="${person.gender}"></td>
    </tr>
</table>

map

在HTML遍历Map，展示Map的key和value

<!--map-->
<h2>Map</h2>
<table border="1">
    <tr>
        <td>Index</td>
        <td>Range</td>
    </tr>
    <tr th:each="item: ${ages}">
        <td th:text="${item.key}"></td>
        <td th:text="${item.value}"></td>
    </tr>
</table>

提交表单

通过添加name和gender两个参数值，提交给controller的greeting方法。

<!--form-->
<h2>Form</h2>
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
    <table>
        <tr>
            <td>Name</td>
            <td>
                <input name="name" type="text" value=""/>
            </td>
            <td>Gender</td>
            <td>
                <input name="gender" type="text" value=""/>
            </td>
            <td>
                <input type="submit" value="提交"/>
            </td>
        </tr>
    </table>
</form>

下拉框

提交表单中gender参数支持下拉框选择。

<!--select-->
<h2>Select</h2>
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
    <table>
        <tr>
            <td>Name</td>
            <td>
                <input name="name" type="text" value=""/>
            </td>
            <td>Gender</td>
            <td>
                <select id="gender" name="gender">
                    <option th:value="male">male</option>
                    <option th:value="female">female</option>
                </select>
            </td>
            <td>
                <input type="submit" value="提交"/>
            </td>
        </tr>
    </table>
</form>

总结

文本主要介绍了使用Thymeleaf进行简单的HTML界面设计，实现了表格，表单，下拉框，并在HTML中访问Java类。本文只是给出一个简单的使用示例，Thymeleaf更强大的功能还需要读者来体验，如HTML中使用if-else, switch, for等。

参考文献

https://spring.io/guides/gs/serving-web-content/

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html