1.创建springboot项目

和之前的spring boot入门案例的创建过程只有下面一点点的不同，不会的请参考我的第一篇spring boot文章！

2.添加Maven依赖


<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

3. 改造html代码

原来的login.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form action="/login" method="post">
        <h2 >请 登 录</h2>
        <input type="text"  placeholder="账号" name="username"/>
        <input type="password"  placeholder="密码" name="password"/>
        <button type="submit">登录</button>
    </form>
</div>

</body>
</html>

现在的login.html

<!DOCTYPE html>

  <html lang="en" xmlns:th="http://www.thymeleaf.org">

  <head>

    <meta charset="UTF-8">

    <title>Title</title>

  </head>

  <body>

  <div>

    <form th:action="@{/login}" method="post">

        <h2 >请 登 录</h2>

        <input type="text"  placeholder="账号" name="username"/>

        <input type="password"  placeholder="密码" name="password"/>

        <button type="submit">登录</button>

    </form>

  </div>

  

  </body>

  </html>

1.2.1 xmlns:th命名空间

使用Thymeleaf引擎需要在html标签添加Thymeleaf模板引擎的命名空间：xmlns:th=”http://www.thymeleaf.org”，这样的话才可以在其他标签里面使用th:*这样的语法.这是下面语法的前提。

1.2.2 th:href=”@{…}”的使用

引用的绝对路径也可以用模板改造，“@{}”为引用静态资源文件，如：

<link rel="stylesheet" href="/SpringBootBase/css/bootstrap.min.css"/>

<link rel="stylesheet" href="/SpringBootBase/css/customer/login.css"/>

可以用thymeleaf模板改写为@{}的形式表示

<link rel="stylesheet" th:href="@{css/bootstrap.min.css}"/>

<link rel="stylesheet" th:href="@{css/customer/login.css}"/>

会引入/static目录下的/css/下的文件；

1.2.3 th:action=”@{…}”的使用

表单POST的action url也可以用@{}表示：如

<form class="form-signin" action="./login" method="post">

    ...

</form>

现在

<form class="form-signin" th:action="@{/login}" method="post">

    ...

</form>

测试一下

创建controller

package com.liuyongqi.springbootthymeleaf.conrtoller;

  

  import org.springframework.stereotype.Controller;

  import org.springframework.web.bind.annotation.RequestMapping;

  import org.springframework.web.bind.annotation.RequestMethod;

  

  /**

 * @ClassName: LoginController

 * @Description: TODO

 * @Author: Administrator

 * @CreateDate: 2018/11/7 21:02

 * @UpdateUser: Administrator

 * @UpdateDate: 2018/11/7 21:02

 * @UpdateRemark: 修改内容

 * @Version: 1.0

 */

  @Controller

  public class LoginController {

    @RequestMapping(value = "/",method = RequestMethod.GET)

    public String home(){

        System.out.println("home");

        return "login";

    }

}

运行一下，结果正常

1.2.4 th:object=”${…}”与th:field=”*{…}”的使用

...用于获取变量值，对于javaBean的话使用变量名.属性名，如...用于获取变量值，对于javaBean的话使用变量名.属性名，如{user.name}

举个例子，如若需要将后台的值回显到前台，那应该怎么做，此时th:object=”${…}”与th:field=”*{…}”就派上用场了。

<form th:action="@{/login}" method="post" th:object="${users}" >

    <h2 >请 登 录</h2>

    <input type="text"  placeholder="账号" name="username" th:field="*{username}"/>

    <input type="password"  placeholder="密码" name="password" th:field="*{password}"/>

    <button type="submit">登录</button>

  </form>

在表单代码中增加th:object属性，将name属性换成th:field属性，其中th:object定义表单数据提交对象user,用th:field定义表单数据属性,用*{}锁定上级定义的对象，{}内填写对象属性，提交表单时自动将属性值注入到对象中。

@RequestMapping(value = "/setValue",method = RequestMethod.GET)

  public String setValue(Model model, Users users){

    model.addAttribute("users",users);

    return "login";

}

  @RequestMapping(value = "/login",method = RequestMethod.POST)

  public String login(Model model, Users users){

    System.out.println("login");

    System.out.println("POJO: " + users.getClass().getName() +

            ", hash code: " + users.hashCode() + ", " + users.toString());

    model.addAttribute("users",users);

    return "success";

}

我们来运行一下，输入http://localhost:8080/springbootthymeleaf/setValue?username=admin&password=888888得到如下界面：

输入用户名admins及密码123456，点击登录，得到如下结果

最后建议在application.properties配置关闭thymeleaf缓存，因为Spring Boot使用thymeleaf时默认是有缓存的，即你把一个页面代码改了不会刷新页面的效果，你必须重新运行spring-boot的main()方法才能看到页面更改的效果。

spring.thymeleaf.cache: false

今天就写到这里了，谢谢大家支持！

如果大家想浏览我的下一篇文章，请留言

Spring Boot 集成 Thymeleaf (二)