很好的thymeleaf模板入门例子

Thymealeaf模板引擎入门

一、Thymeleaf简述

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

1、Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2、Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3、Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

二、Spring Boot项目Thymeleaf模板页面存放位置

Spring Boot的Thymeleaf支持：

通过Thymeleaf类对集成所需的Bean进行自动配置，包括templateResolver、templateEngine和thymeleafViewResolver的配置。

1、创建Spring Boot项目boot_thymeleaf_demo

pom.xml文件：

[html]view plain copy
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">  
   <modelVersion>4.0.0</modelVersion>  
  
   <groupId>net.hw</groupId>  
   <artifactId>boot_thymeleaf_demo</artifactId>  
   <version>0.0.1-SNAPSHOT</version>  
   <packaging>jar</packaging>  
  
   <name>boot_thymeleaf_demo</name>  
   <description>Demo project for Spring Boot</description>  
  
   <parent>  
      <groupId>org.springframework.boot</groupId>  
      <artifactId>spring-boot-starter-parent</artifactId>  
      <version>1.5.3.RELEASE</version>  
      <relativePath/> <!-- lookup parent from repository -->  
   </parent>  
  
   <properties>  
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  
      <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>  
      <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-test</artifactId>  
         <scope>test</scope>  
      </dependency>  
   </dependencies>  
  
   <build>  
      <plugins>  
         <plugin>  
            <groupId>org.springframework.boot</groupId>  
            <artifactId>spring-boot-maven-plugin</artifactId>  
         </plugin>  
      </plugins>  
   </build>  
  
</project>  

2、在templates目录创建index.html

默认的thymeleaf模板页面应该放在resources/templates目录里。

[html]view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8"/>  
    <title>index</title>  
</head>  
<body>  
<h1>Thymeleaf Page: Welcome to Spring Boot World!</h1>  
<h1>File Location: resources/templates/index.html</h1>  
</body>  
</html>  

3、创建控制器HomeController，定义请求映射方法

4、启动程序，访问http://localhost:8080/index

5、在main里创建目录结构webapp/WEB-INF/page，在里面创建index.html

[html]view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8"/>  
    <title>index</title>  
</head>  
<body>  
<h1>Thymeleaf Page: Welcome to Spring Boot World!</h1>  
<h1>File Location: webapp/WEB-INF/page/index.html</h1>  
</body>  
</html>  

6、在application.properties里设置thymeleaf的前缀

7、启动程序，访问http://localhost:8080/index

由此可见，Spring Boot的自动配置确实很好用，只要设置一下属性就可以轻易搞定。

引入bootstrap到上述项目：

三、Thymeleaf模板基本语法

（一）简单表达式   

　　1、变量的表达式：${...}

　　2、选择变量表达式：*{...}

　　3、信息表达式：#{...}

　　4、链接URL表达式：@{...}

（二）字面值

　　1、文本文字：'one text', 'Another one!',…

　　2、文字数量：0, 34, 3.0, 12.3,…

　　3、布尔型常量：true, false

　　4、空的文字：null

　　5、文字标记：one, sometext, main,…

（四）文本处理

　　1、字符串并置：+

　　2、文字替换：|The name is ${name}|

（五）表达式基本对象

　　1、#ctx：上下文对象

　　2、#vars：上下文变量

　　3、#locale：上下文语言环境

　　4、#httpServletRequest：（只有在Web上下文）HttpServletRequest对象

　　5、#httpSession:（只有在Web上下文）HttpSession对象。

用法：<span th:text="${#locale.country}">US</span>.

（六）实用工具对象　

#dates： java.util的实用方法。对象:日期格式、组件提取等.

#calendars：类似于#日期,但对于java.util。日历对象

#numbers：格式化数字对象的实用方法。

#strings：字符串对象的实用方法:包含startsWith,将/附加等。

#objects：实用方法的对象。

#bools：布尔评价的实用方法。

#arrays：数组的实用方法。

#lists：list集合。

#sets：set集合。

#maps：map集合。

#aggregates：实用程序方法用于创建聚集在数组或集合.

#messages：实用程序方法获取外部信息内部变量表达式,以同样的方式,因为它们将获得使用# {…}语法

#ids：实用程序方法来处理可能重复的id属性(例如,由于迭代)。

四、案例演示

1、在application.properties文件定义属性 

2、在templates里创建showStudent.html

利用thymeleaf消息表达式#{...}访问属性文件的数据，主要用于国际化。

利用thymeleaf超链接表达式@{...}访问静态资源或动态资源。（th:src='@{...}'、th:href='@{...}'、th:action='@{...}'）

[html]view plain copy
<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title>显示学生信息</title>  
    <meta charset="UTF-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1"/>  
    <link th:href="@{/bootstrap/css/bootstrap.css}" href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>  
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" href="../static/bootstrap/css/bootstrap-theme.css"  
          rel="stylesheet"/>  
    <script th:src="@{/scripts/jquery-3.1.1.min.js}" src="../static/scripts/jquery-3.1.1.min.js"></script>  
    <script th:src="@{/bootstrap/js/bootstrap.js}" src="../static/bootstrap/js/bootstrap.js"></script>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <div class="col-md-4">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">学生信息</span>  
                </div>  
                <div class="panel-body">  
                    编号：<span th:text="#{student.id}">2</span><br/>  
                    姓名：<span th:text="#{student.name}">萌萌哒</span><br/>  
                    性别：<span th:text="#{student.gender}">男</span><br/>  
                    年龄：<span th:text="#{student.age}">20</span><br/>  
                    电话：<span th:text="#{student.telephone}">15890905678</span><br/>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>  

在客户端显示页面：

只是显示静态数据，必须要通过服务端才能获取动态数据，替换静态数据，显示在模板页面。

4、在HomeController里添加请求映射方法

此时，启动程序，访问http://localhost:8080/showStudent

没有正确读取application.properties文件里定义的学生信息。

5、创建国际化配置类I18NConfig，定义资源包消息源Bean

[java]view plain copy
package net.hw.config;  
  
import org.springframework.context.annotation.Bean;  
import org.springframework.context.annotation.Configuration;  
import org.springframework.context.support.ResourceBundleMessageSource;  
  
import java.io.File;  
  
/** 
 * Created by howard on 2017/4/25. 
 */  
@Configuration  
public class I18NConfig {  
    @Bean  
    public ResourceBundleMessageSource messageSource() {  
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();  
        messageSource.setUseCodeAsDefaultMessage(true);  
        messageSource.setFallbackToSystemLocale(false);  
        messageSource.setBasename("application");  
        messageSource.setDefaultEncoding("UTF-8");  
        messageSource.setCacheSeconds(2);  
        return messageSource;  
    }  
}  

说明：

setBaseName设置消息源的文件名，messageSource.setBasename("application");，表明消息源是以applicition打头的属性文件，如果要设置多个属性文件作为消息源，那么就要用setBaseNames方法来设置，比如：messageSource.setBasenames("student", "application"); 这样就有两个消息源：student.properties和application.properties。

此时启动程序，访问http://localhost:8080/showStudent

替换了静态数据，说明成功读取了application.properties里的数据。

5、在resources里创建application_zh_CN.properties

[html]view plain copy
student.id=1  
student.name=郭文玲  
student.gender=女  
student.age=18  
student.telephone=15890904568  

学生信息的中文版，到时会根据系统语言环境读取响应版本的属性文件。

此时启动程序，访问http://localhost:8080/showStudent

大家可以看到，显示的学生信息中文版，说明读取的是application_zh_CN.properties属性文件里的数据。

6、创建用户实体类User

[java]view plain copy
package net.hw.bean;  
  
import java.util.Date;  
  
/** 
 * Created by howard on 2017/4/23. 
 */  
public class User {  
    /** 
     * 用户标识符 
     */  
    private int id;  
    /** 
     * 用户名 
     */  
    private String username;  
    /** 
     * 密码 
     */  
    private String password;  
    /** 
     * 电话号码 
     */  
    private String telephone;  
    /** 
     * 注册时间 
     */  
    private Date registerTime;  
    /** 
     * 权限（0：管理员；1：普通用户） 
     */  
    private int popedom;  
  
    public int getId() {  
        return id;  
    }  
  
    public void setId(int id) {  
        this.id = id;  
    }  
  
    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;  
    }  
  
    public String getTelephone() {  
        return telephone;  
    }  
  
    public void setTelephone(String telephone) {  
        this.telephone = telephone;  
    }  
  
    public Date getRegisterTime() {  
        return registerTime;  
    }  
  
    public void setRegisterTime(Date registerTime) {  
        this.registerTime = registerTime;  
    }  
  
    public int getPopedom() {  
        return popedom;  
    }  
  
    public void setPopedom(int popedom) {  
        this.popedom = popedom;  
    }  
  
    @Override  
    public String toString() {  
        return "User{" +  
                "id=" + id +  
                ", username='" + username + '\'' +  
                ", password='" + password + '\'' +  
                ", telephone='" + telephone + '\'' +  
                ", registerTime=" + registerTime +  
                ", popedom=" + popedom +  
                '}';  
    }  
}  

7、创建UserService类

[java]view plain copy
package net.hw.service;  
  
import net.hw.bean.User;  
import org.springframework.stereotype.Service;  
  
import java.util.ArrayList;  
import java.util.Date;  
import java.util.List;  
  
/** 
 * Created by howard on 2017/4/25. 
 */  
@Service  
public class UserService {  
    public User findOneUser() {  
        User user = new User();  
        user.setId(1);  
        user.setUsername("李文强");  
        user.setPassword("12345");  
        user.setTelephone("15890904567");  
        user.setRegisterTime(new Date());  
        user.setPopedom(0);  
        return user;  
    }  
  
    public List<User> findAllUsers() {  
        List<User> users = new ArrayList<User>();  
  
        User user = new User();  
        user.setId(1);  
        user.setUsername("李文强");  
        user.setPassword("12345");  
        user.setTelephone("15890904567");  
        user.setRegisterTime(new Date());  
        user.setPopedom(0);  
        users.add(user);  
  
        user = new User();  
        user.setId(2);  
        user.setUsername("张海洋");  
        user.setPassword("11111");  
        user.setTelephone("13990904567");  
        user.setRegisterTime(new Date());  
        user.setPopedom(1);  
        users.add(user);  
  
        user = new User();  
        user.setId(3);  
        user.setUsername("吴文燕");  
        user.setPassword("22222");  
        user.setTelephone("15890978905");  
        user.setRegisterTime(new Date());  
        user.setPopedom(1);  
        users.add(user);  
  
        user = new User();  
        user.setId(4);  
        user.setUsername("郑智化");  
        user.setPassword("33333");  
        user.setTelephone("15990956905");  
        user.setRegisterTime(new Date());  
        user.setPopedom(1);  
        users.add(user);  
  
        return users;  
    }  
}  

9、在templates里创建showOneUser.html

[html]view plain copy
<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8"/>  
    <title>显示用户信息</title>  
    <meta charset="UTF-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1"/>  
    <link th:href="@{/bootstrap/css/bootstrap.css}" href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>  
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" href="../static/bootstrap/css/bootstrap-theme.css"  
          rel="stylesheet"/>  
    <script th:src="@{/scripts/jquery-3.1.1.min.js}" src="../static/scripts/jquery-3.1.1.min.js"></script>  
    <script th:src="@{/bootstrap/js/bootstrap.js}" src="../static/bootstrap/js/bootstrap.js"></script>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <div class="col-md-5">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">用户信息</span>  
                </div>  
                <div class="panel-body">  
                    编号：<span th:text="${user.id}"></span><br/>  
                    用户名：<span th:text="${user.username}"></span><br/>  
                    密码：<span th:text="${user.password}"></span><br/>  
                    电话：<span th:text="${user.telephone}"></span><br/>  
                    注册时间：<span th:text="${#dates.format(user.registerTime, 'yyyy-MM-dd hh:mm:ss')}"></span><br/>  
                    权限：<span th:text="${user.popedom==0?'管理员':'普通用户'}"></span><br/>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="row">  
        <div class="col-md-5">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">用户信息</span>  
                </div>  
                <div class="panel-body">  
                    <div th:object="${user}">  
                        编号：<span th:text="*{id}"></span><br/>  
                        用户名：<span th:text="*{username}"></span><br/>  
                        密码：<span th:text="*{password}"></span><br/>  
                        电话：<span th:text="*{telephone}"></span><br/>  
                        注册时间：<span th:text="*{#dates.format(registerTime, 'yyyy-MM-dd hh:mm:ss')}"></span><br/>  
                        权限：<span th:text="*{popedom==0?'管理员':'普通用户'}"></span><br/>  
                    </div>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>  

说明：此页面采用变量表达式${...}、选择变量表达式*{...}。

为了格式化注册时间，采用#dates对象的format方法。

为了将权限的数字0和1转换成“管理员”和“普通用户”，采用了三元运算符 (逻辑表达式)?(表达式1):(表达式2)。

启动程序，访问http://localhost:8080/showOneUser

10、创建showAllUsers.html

[html]view plain copy
<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8"/>  
    <title>显示全部用户</title>  
    <meta charset="UTF-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1"/>  
    <link th:href="@{/bootstrap/css/bootstrap.css}" href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>  
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" href="../static/bootstrap/css/bootstrap-theme.css"  
          rel="stylesheet"/>  
    <script th:src="@{/scripts/jquery-3.1.1.min.js}" src="../static/scripts/jquery-3.1.1.min.js"></script>  
    <script th:src="@{/bootstrap/js/bootstrap.js}" src="../static/bootstrap/js/bootstrap.js"></script>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <div class="col-md-5">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">全部用户信息</span>  
                </div>  
                <div class="panel-body">  
                    <ul class="list-group">  
                        <li class="list-group-item" th:each="user:${users}">  
                            编号：<span th:text="${user.id}"></span><br/>  
                            用户名：<span th:text="${user.username}"></span><br/>  
                            密码：<span th:text="${user.password}"></span><br/>  
                            电话：<span th:text="${user.telephone}"></span><br/>  
                            注册时间：<span th:text="${#dates.format(user.registerTime, 'yyyy-MM-dd hh:mm:ss')}"></span><br/>  
                            权限：<span th:text="${user.popedom==0?'管理员':'普通用户'}"></span><br/>  
                        </li>  
                    </ul>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
        <div class="col-md-7">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">全部用户信息</span>  
                </div>  
                <div class="panel-body">  
                    <table class="table-bordered" style="width: 100%">  
                        <tr style="height: 40px; background-color: #f7ecb5">  
                            <th class="text-center">编号</th>  
                            <th class="text-center">用户名</th>  
                            <th class="text-center">密码</th>  
                            <th class="text-center">电话</th>  
                            <th class="text-center">注册时间</th>  
                            <th class="text-center">权限</th>  
                        </tr>  
                        <tr th:each="user:${users}" class="text-center" style="height: 40px">  
                            <td><span th:text="${user.id}"></span></td>  
                            <td><span th:text="${user.username}"></span></td>  
                            <td><span th:text="${user.password}"></span></td>  
                            <td><span th:text="${user.telephone}"></span></td>  
                            <td><span th:text="${#dates.format(user.registerTime, 'yyyy-MM-dd hh:mm:ss')}"></span></td>  
                            <td><span th:text="${user.popedom==0?'管理员':'普通用户'}"></span></td>  
                        </tr>  
                    </table>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>  

启动程序，访问http://localhost:8080/showAllUsers

说明：左边面板里是卡片格式显示用户信息，右边面板是表格形式显示用户信息。

课堂练习：修改showAllUser.html代码，实现如下显示效果。

[html]view plain copy
<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8"/>  
    <title>显示全部用户</title>  
    <meta charset="UTF-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1"/>  
    <link th:href="@{/bootstrap/css/bootstrap.css}" href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>  
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" href="../static/bootstrap/css/bootstrap-theme.css"  
          rel="stylesheet"/>  
    <script th:src="@{/scripts/jquery-3.1.1.min.js}" src="../static/scripts/jquery-3.1.1.min.js"></script>  
    <script th:src="@{/bootstrap/js/bootstrap.js}" src="../static/bootstrap/js/bootstrap.js"></script>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <div class="col-md-5">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">全部用户信息</span>  
                </div>  
                <div class="panel-body">  
                    <ul class="list-group">  
                        <li class="list-group-item" th:each="user:${users}">  
                            <table class="table-bordered" style="width: 100%">  
                                <tr>  
                                    <th>编号</th>  
                                    <td><span th:text="${user.id}"></span></td>  
                                </tr>  
                                <tr>  
                                    <th>用户名</th>  
                                    <td><span th:text="${user.username}"></span></td>  
                                </tr>  
                                <tr>  
                                    <th>密码</th>  
                                    <td><span th:text="${user.password}"></span></td>  
                                </tr>  
                                <tr>  
                                    <th>电话</th>  
                                    <td><span th:text="${user.telephone}"></span></td>  
                                </tr>  
                                <tr>  
                                    <th>注册时间</th>  
                                    <td><span th:text="${#dates.format(user.registerTime, 'yyyy-MM-dd hh:mm:ss')}"></span></td>  
                                </tr>  
                                <tr>  
                                    <th>权限</th>  
                                    <td><span th:text="${user.popedom==0?'管理员':'普通用户'}"></span></td>  
                                </tr>  
                            </table>  
                        </li>  
                    </ul>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>  

11、在application.properties里添加属性

12、创建welcome.html（访问带参数的消息）

[html]view plain copy
<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title>欢迎</title>  
    <meta charset="UTF-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1"/>  
    <link th:href="@{/bootstrap/css/bootstrap.css}" href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>  
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" href="../static/bootstrap/css/bootstrap-theme.css"  
          rel="stylesheet"/>  
    <script th:src="@{/scripts/jquery-3.1.1.min.js}" src="../static/scripts/jquery-3.1.1.min.js"></script>  
    <script th:src="@{/bootstrap/js/bootstrap.js}" src="../static/bootstrap/js/bootstrap.js"></script>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <div class="col-md-5">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">泸州职业技术学院</span>  
                </div>  
                <div class="panel-body">  
                    <span th:text="#{lzy.welcome(${name})}"></span>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>  

12、在HomeController里添加请求映射方法

启动程序，访问http://localhost:8080/welcome

13、创建testThymeleafObjects.html

[html]view plain copy
<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title>测试thymeleaf对象</title>  
    <meta charset="UTF-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1"/>  
    <link th:href="@{/bootstrap/css/bootstrap.css}" href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>  
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" href="../static/bootstrap/css/bootstrap-theme.css"  
          rel="stylesheet"/>  
    <script th:src="@{/scripts/jquery-3.1.1.min.js}" src="../static/scripts/jquery-3.1.1.min.js"></script>  
    <script th:src="@{/bootstrap/js/bootstrap.js}" src="../static/bootstrap/js/bootstrap.js"></script>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <div class="col-md-10">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">测试Thymeleaf对象</span>  
                </div>  
                <div class="panel-body">  
                    #ctx.#vars：<br/>  
                    <textarea th:text="${#ctx.#vars}" rows="10" cols="150"></textarea><br/>  
                    喜欢看的书：<span th:text="${#vars.book}"></span><br/>  
                    喜欢的城市：<span th:text="${#httpSession.getAttribute('city')}"></span><br/>  
                    你的国家：<span th:text="${#locale.country}+'-'+${#locale.getDisplayCountry()}"></span><br/>  
                    你的母语：<span th:text="${#locale.language}+'-'+${#locale.getDisplayLanguage()}"></span><br/>  
                    <hr/>  
                    时间：<span th:text="${#dates.format(#dates.createNow())}"></span><br/>  
                    收入：<span th:text="'￥'+${#numbers.formatDecimal(2345.5645345, 3, 2)}"></span><br/>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>  

14、在HomeController里添加请求映射方法

启动程序，访问http://localhost:8080/test

15、在pom.xml文件添加yaml的依赖

[html]view plain copy
<dependency>  
   <groupId>org.yaml</groupId>  
   <artifactId>snakeyaml</artifactId>  
   <version>1.18</version>  
</dependency>  

16、在resources里创建application.yaml

[html]view plain copy
server:  
  port: 8080  
  
serverHost:  
  inetAddressA:  
    ip: 127.0.0.1  
    length: 160  
    port: 2000      
  inetAddressB:  
    ip: 192.168.0.15  
    length: 180  
    port: 2000    
  inetAddressB:  
      ip: 192.168.0.16  
      length: 288  
      port: 2000  
        
udp:  
  server:  
    host: 192.168.60.34  
    port: 8001  

17、创建ServerHostProperties类

[java]view plain copy
package net.hw.properties;  
  
import org.springframework.boot.context.properties.ConfigurationProperties;  
import org.springframework.stereotype.Component;  
  
/** 
 * Created by howard on 2017/4/27. 
 */  
@Component  
@ConfigurationProperties("serverHost")  
public class ServerHostProperties {  
    private InetAddress inetAddressA;  
    private InetAddress inetAddressB;  
    private InetAddress inetAddressC;  
  
    public static class InetAddress {  
        private String ip;  
        private int length;  
        private int port;  
  
        public String getIp() {  
            return ip;  
        }  
  
        public void setIp(String ip) {  
            this.ip = ip;  
        }  
  
        public int getLength() {  
            return length;  
        }  
  
        public void setLength(int length) {  
            this.length = length;  
        }  
  
        public int getPort() {  
            return port;  
        }  
  
        public void setPort(int port) {  
            this.port = port;  
        }  
    }  
  
    public InetAddress getInetAddressA() {  
        return inetAddressA;  
    }  
  
    public void setInetAddressA(InetAddress inetAddressA) {  
        this.inetAddressA = inetAddressA;  
    }  
  
    public InetAddress getInetAddressB() {  
        return inetAddressB;  
    }  
  
    public void setInetAddressB(InetAddress inetAddressB) {  
        this.inetAddressB = inetAddressB;  
    }  
  
    public InetAddress getInetAddressC() {  
        return inetAddressC;  
    }  
  
    public void setInetAddressC(InetAddress inetAddressC) {  
        this.inetAddressC = inetAddressC;  
    }  
}  

18、在webmvc子包里创建ServerHostController

[java]view plain copy
package net.hw.webmvc;  
  
import net.hw.properties.ServerHostProperties;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.stereotype.Controller;  
import org.springframework.ui.Model;  
import org.springframework.web.bind.annotation.RequestMapping;  
  
import java.util.ArrayList;  
import java.util.List;  
  
/** 
 * Created by howard on 2017/4/27. 
 */  
@Controller  
public class ServerHostController {  
    @Autowired  
    private ServerHostProperties serverHostProperties;  
  
    @RequestMapping("/showServerHost")  
    public String serverHost(Model model) {  
        List<ServerHostProperties.InetAddress> inetAddresses = new ArrayList<ServerHostProperties.InetAddress>();  
        inetAddresses.add(serverHostProperties.getInetAddressA());  
        inetAddresses.add(serverHostProperties.getInetAddressB());  
        inetAddresses.add(serverHostProperties.getInetAddressC());  
        model.addAttribute("inetAddresses", inetAddresses);  
        return "showServerHost";  
    }  
}  

19、在templates里创建showServerHost.html

[html]view plain copy
<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title>显示服务器主机信息</title>  
    <meta charset="UTF-8"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1"/>  
    <link th:href="@{/bootstrap/css/bootstrap.css}" href="../static/bootstrap/css/bootstrap.css" rel="stylesheet"/>  
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" href="../static/bootstrap/css/bootstrap-theme.css"  
          rel="stylesheet"/>  
    <script th:src="@{/scripts/jquery-3.1.1.min.js}" src="../static/scripts/jquery-3.1.1.min.js"></script>  
    <script th:src="@{/bootstrap/js/bootstrap.js}" src="../static/bootstrap/js/bootstrap.js"></script>  
</head>  
<body>  
<div class="container">  
    <div class="row">  
        <div class="col-md-5">  
            <div class="panel panel-primary">  
                <div class="panel-heading text-center">  
                    <span class="panel-title">服务器主机信息</span>  
                </div>  
                <div class="panel-body">  
                    <ul class="list-group">  
                        <li class="list-group-item" th:each="inetAddress:${inetAddresses}">  
                            <div th:if="${inetAddressStat.count==1}">  
                                <p style="font-weight: bold">inetAddressA</p>  
                            </div>  
                            <div th:if="${inetAddressStat.count==2}">  
                                <p style="font-weight: bold">inetAddressB</p>  
                            </div>  
                            <div th:if="${inetAddressStat.count==3}">  
                                <p style="font-weight: bold">inetAddressC</p>  
                            </div>  
                            ip：<span th:text="${inetAddress.ip}"></span><br/>  
                            length：<span th:text="${inetAddress.length}"></span><br/>  
                            port：<span th:text="${inetAddress.port}"></span><br/>  
                        </li>  
                    </ul>  
                </div>  
                <div class="panel-footer text-right">  
                    <span class="panel-title">酒城工作室@2107</span>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
</body>  
</html>  

20、启动程序，访问http://localhost:8080/showServerHost

五、小结

采用Thymeleaf模板引擎，关键要注意动态数据与静态数据，一个用于服务器端数据的获取，一个用于客户端数据的显示，前端与后端很好地分离来处理，即使没有启动程序，也能在客户端看到页面的样式效果。通过案例学会正确使用Thymeleaf的各种表达式得到预期的动态数据，呈现在模板页面上。

很好的thymeleaf模板入门例子

Seata實戰-分佈式事務簡介及demo上手

Tomcat配置JNDI連接池 getConnection()獲取不到連接

springboot 配置動態切換數據源（兩個oracle數據庫）

springboot 定時任務使用

解決unicode轉碼

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

很好的thymeleaf模板 入门例子

很好的thymeleaf模板入门例子