Spring Boot集成Thymeleaf实战笔记，系统学习Thymeleaf

Thymeleaf
1.理解：
（1）Thymeleaf是一款Java模板引擎，类似于JSP,Freemarker,能够处理html,xml,javaScript,Css甚至纯文本；
（2）自然模板，原型即页面
（3）语法优雅易懂，OGNL,SpringEL
（4）使用web标准，支持HTML5
2.Thymeleaf标准方言
（1）识别：

（2）方言内容：

（3）语法：
变量表达式：${........},用于存储变量,例name

消息表达式：#{.......},也被称之为文本外部化，国际化后i18n,例city相当于key

选择表达式：*{........},与变量表达式的区别：他们是在当前选择的对象而不是整个上下文变量映射上执行

链接表达式：@{........}，链接表达式可以是相对的，在这种情况下，应用程序上下文将不会作为URL的前缀，

也可以是服务器相对（同样，没有应用程序上下文前缀），

和协议相对（就像绝对URL,但浏览器使用在显示的页面中使用的相同的HTTP和Https协议），

当然，Link表达式可以是绝对的，

分段表达式：th:insert或th:replace
（4）字面量（文字）：
文本：

数字（可以执行计算等）：

布尔：

Null：

算术操作：+,-,*,/,%（加减乘除取余）

比较：<,>,<=,>=(lt,gt,le,ge)

等价：==，！=（eq,ne）

条件运算符：

无操作：_

（5）设置属性值：
设置任意属性值：th:attr

设置值到指定的属性：

固定值布尔属性：

（6）迭代器：
基本迭代器：th:each

状态变量：index,count,size,current,even/odd,first/last

（7）条件语句：
th:if,th:unless

Switch:

3.Thymeleaf与Spring boot集成
（1）模板布局（我们在开发中可以看到页面中有许多的公用片段）
方式一：定义和引用片段：th:insert

方式二：不使用th:fragment

th:insert,th:replace,th:include三者的区别
●th:insert它将简单的插入指定的片段作为正文的主标签
●th:replace用指定实际片段来替换其他主标签
●th:include类似于insert,不常用，了解即可

（2）属性优先级
（3）注释：
解析器级别注释（解析快中内容执行时会被删除）

（4）内联表达式：
[[.....]]或[(.....)]分别对应于th；text和th:utext


禁用内联：
有时需要禁用这种机制，比如，想输出[[.......]]或[(...)]文本内容

javaScript内联与Css均可以进行内联
（5）表达式的基本对象
基本对象：
#ctx:上下文对象
#locale:直接访问java.util.Locale相关联的当前的请求
Request/session等属性
Param:用于检索请求参数
Session:用于检索Session属性
Application:用于检索Application/servlet上下文属性
Web上下文对象：#Request,#Session,#ServletContext
（6）Thymeleaf与Spring boot集成
我们建立第一个Spring boot+Thymeleaf+mevan项目，测试项目是否正常运行：

项目创建成功后，我们导入IDE中，打开项目，我们编写一个helloController，项目结构如下：

测试项目是否能正常运行，我们添加Controller，让它输出一个字符串，代码如下：

package com.dhtt.spring.boot.blog.thymeleaf.action.web;

import javax.servlet.http.HttpServletRequest;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class helloController {

    @GetMapping("/hello")
    public String sayHello(HttpServletRequest request) {
        String say="START TEST THYMELEAF,SAY HELLO WORD!!";
        System.out.println("say: "+say);
        return say;
    }

}

接下来启动的项目，项目正常启动后，我们在浏览器，访问页面地址，观察结果，：

由此可以看出我们的项目正常运行，可以进入下一步的开发
4.实战Spring boot+thymeleaf，我们来实现一个简单的用户管理
（1）修改application.properties配置文件

spring.thymeleaf.encoding=UTF-8
#热部署静态文件,不需要缓存，实时观察文件修改效果
spring.thymeleaf.cache=false
#使用html5标准
spring.thymeleaf.mode=HTML5

（2）API设计：
·GET /users:返回用于展示用户列表的list.html页面
·GET /users/{id}:返回用于展示用户的view.html页面，根据id获取的
·GET /users/form:返回用于新增或者修改用户的form.html页面
·POST /users:新增或者修改用户，成功后重定向到list.html页面
·GET /users/delete/{id}:根据id删除相应的用户，成功后重定向到list.html页面
·GET /users/modify/{id}:根据id获取相应的用户数据，并返回form页面来进行修改
（3）后台编码：
首先展示项目后台结构：

User实体（主要代码）：

package com.dhtt.spring.boot.blog.thymeleaf.action.entity;

/**
 * user实体
 * 
 * @author QT
 */
public class User {
    private Long id; // 用户的唯一标识
    private String name; // 用户名
    private String email; // 用户邮箱

    public User() {
        super();
    }

    public User(Long id, String name, String email) {
        super();
        this.id = id;
        this.name = name;
        this.email = email;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

}

定义资源库（interface UserRepository）包含方法如下：

package com.dhtt.spring.boot.blog.thymeleaf.action.repository;
/**
 * User Repository接口
 * @author  QT
 *
 */

import java.util.List;

import com.dhtt.spring.boot.blog.thymeleaf.action.entity.User;

public interface UserRepository {
    /**
     * 修改或增加用户
     * 
     * @param user
     * @return
     */
    public User saveOrUpdateUser(User user);

    /**
     * 根据Id删除用户
     * 
     * @param id
     */
    public void deleteUser(Long id);

    /**
     * 根据Id查询用户
     * 
     * @param id
     * @return
     */
    public User getUserById(Long id);

    /**
     * 获取用户列表
     * 
     * @return
     */
    public List<User> listUser();

}

实现资源库，即实现增删改查的操作

package com.dhtt.spring.boot.blog.thymeleaf.action.repository.impl;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;
import java.util.concurrent.atomic.AtomicLong;

import org.springframework.stereotype.Repository;

import com.dhtt.spring.boot.blog.thymeleaf.action.entity.User;
import com.dhtt.spring.boot.blog.thymeleaf.action.repository.UserRepository;
@Repository
public class UserRepositoryImpl implements UserRepository {
    // 用于计数的计数器，为了设置唯一Id
    private static AtomicLong counter = new AtomicLong();
    private final ConcurrentMap<Long, User> userMap = new ConcurrentHashMap<Long, User>();

    @Override
    public User saveOrUpdateUser(User user) {
        Long id = user.getId();
        if (id == null) { // 新增用户
            id = counter.incrementAndGet();
            user.setId(id);
        }
        this.userMap.put(id, user);
        return user;
    }

    @Override
    public void deleteUser(Long id) {
        this.userMap.remove(id);
    }

    @Override
    public User getUserById(Long id) {
        return this.userMap.get(id);
    }

    @Override
    public List<User> listUser() {
        return new ArrayList<User>( this.userMap.values());
    }

}

接下来编写Controller层，实现与前台的数据交互

package com.dhtt.spring.boot.blog.thymeleaf.action.web;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import com.dhtt.spring.boot.blog.thymeleaf.action.entity.User;
import com.dhtt.spring.boot.blog.thymeleaf.action.repository.UserRepository;

@RestController
@RequestMapping("/users")
public class userController {
    @Autowired
    private UserRepository userRepository;

    /**
     * 查询所有用户
     * 
     * @param model
     * @return
     */
    @GetMapping
    public ModelAndView list(Model model) {
        model.addAttribute("userList", userRepository.listUser());
        model.addAttribute("title", "用户管理");
        return new ModelAndView("users/list", "userModel", model);

    }

    /**
     * 根据Id查询用户
     * 
     * @param id
     * @param model
     * @return
     */
    @GetMapping("{id}")
    public ModelAndView view(@PathVariable("id") Long id, Model model) {
        User user = userRepository.getUserById(id);
        model.addAttribute("user", user);
        model.addAttribute("title", "用户查询");
        return new ModelAndView("users/view", "userModel", model);

    }

    /**
     * 创建用户
     * 
     * @param id
     * @param model
     * @return
     */
    @GetMapping("/form")
    public ModelAndView createForm(Model model) {
        model.addAttribute("user", new User());
        model.addAttribute("title", "创建用户");
        return new ModelAndView("users/form", "userModel", model);

    }

    /**
     * 新增或修改用户
     * 
     * @param user
     * @return
     */
    @PostMapping
    public ModelAndView saveOrUpdateUser(User user) {
        user = userRepository.saveOrUpdateUser(user);
        return new ModelAndView("redirect:/users", "userModel", user);

    }

    /**
     * 获取删除用户
     * 
     * @param id
     * @return
     */
    @GetMapping("/delete/{id}")
    public ModelAndView deleteUser(@PathVariable("id") Long id) {
        userRepository.deleteUser(id);
        return new ModelAndView("redirect:/users"); // 重定向到list页面

    }

    /**
     * 获取修改用户界面
     * 
     * @param id
     * @param model
     * @return
     */
    @GetMapping("/modify/{id}")
    public ModelAndView modify(@PathVariable("id") Long id, Model model) {
        User user = userRepository.getUserById(id);
        model.addAttribute("user", user);
        model.addAttribute("title", "修改用户");
        return new ModelAndView("users/form", "userModel", model);

    }
}

后台写完以后，我们对前台进行编写：
（4）前台编码：
首先编写页面的头和尾，即为公共的html
展示前台项目结构：

公共代码片段—header.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:fragment="header">
        <h1>Thymeleaf in action</h1>
        <a href="/users" th:href="@{~/users}">首页</a>
    </div>
</body>
</html>

公共代码片段—footer.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:fragment="footer">
        <a href="http://blog.51cto.com/13501268">Welcome to http://blog.51cto.com/13501268</a>
    </div>
</body>
</html>

公共页面编写完毕，进行功能页面编写：
功能页面—list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:replace="~{fragments/header :: header}"></div>
    <h3 th:text="${userModel.title}"></h3>
    <div>
        <a href="/users/form.html"  th:href="@{/users/form}">创建用户</a>
    </div>
    <table border="1">
        <thead>
            <tr>
                <td>ID</td>
                <td>Email</td>
                <td>Name</td>
            </tr>
        </thead>
        <tbody>
            <tr th:if="${userModel.userList.size()} eq 0">
                <td colspan="3">没有用户信息!!</td>
            </tr>
            <tr th:each="user : ${userModel.userList}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.email}"></td>
                <td><a th:href="@{'/users/'+${user.id}}" th:text="${user.name}"></a></td>
            </tr>
        </tbody>
    </table>
    <div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>

功能页面—form.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:replace="~{fragments/header :: header}"></div>
    <h3 th:text="${userModel.title}"></h3>
    <form action="/users" th:action="@{/users}" method="post" th:object="${userModel.user}">
        <input type="hidden" name="id" th:value="${userModel.user.id}">
        名称：<br>
        <input type="text" name="name" th:value="*{name}"><br>
        邮箱：<br>
        <input type="text" name="email" th:value="*{email}"><br>
        <input type="submit" value="提交">
    </form>
    <div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>

功能页面—view.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 用户管理</title>
</head>
<body>
    <div th:replace="~{fragments/header :: header}"></div>
    <h3 th:text="${userModel.title}"></h3>
    <div>
        <p><strong>ID:</strong><span th:text="${userModel.user.id}"></span></p>
        <p><strong>NAME:</strong><span th:text="${userModel.user.name}"></span></p>
        <p><strong>EMAIL:</strong><span th:text="${userModel.user.email}"></span></p>
    </div>
    <div>
        <a th:href="@{'/users/delete/'+${userModel.user.id}}">删除</a>
        <a th:href="@{'/users/modify/'+${userModel.user.id}}">修改</a>
    </div>
    <div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>

我们启动项目进行功能测试，截图展示：

点击创建用户：

点击提交，添加成功重定向到list.html页面：

点击名称，展示详细信息：

点击修改，跳转到form.html页面，并填写修改信息：

点击提交重定向到list.html，页面，可以发现信息已经修改成功：

接下来查看详细信息

点击删除，重定向到list.html页面：

观察结果，我们发现数据信息删除成功，项目展示完毕，thymeleaf+spring+mevan学习完毕