Spring Boot整合Thymeleaf

环境安装

  1. 在http://start.spring.io/官网上下载spring boot项目，选择web和thymeleaf依赖后下载。解压工程后，pom.xml文件如下：
<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>   
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

我在开发过程中发现，即使是刚下载的源工程，pom.xml文件也会报错，经过挣扎后在网上找到解决方法，即在thymeleaf依赖中加上版本号，STS自动下载成功依赖后错误就会消失。改过的pom.xml文件如下：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>1.5.10.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

代码设计

控制器实现

我们首先定义了一个保存用户信息的User类:

package com.yun.hello.domain;
public class User {
    private Long id;
    private String name;
    private String email;
    public User() {
    }
    public User(Long id,String name,String email) {
        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;
    }
}

这个User类中保存了id,name和email三个属性，接下来又定义操作用户数据的接口和实现类：

public interface UserRepository {
    /**
     * 保存或者更新用户
     * @param user
     * @return
     */
    User saveOrUpdateUser(User user);
    
    /**
     * 
     * @param 删除用户
     */
    void deleteUser(long id);
    
    /**
     * 根据id查询用户
     * @param id
     * @return
     */
    User getUserById(long id);
    
    /**
     * 获取用户列表
     * @return
     */
    List<User> listUser();
}

@Repository
public class UserRepositoryImpl implements UserRepository{
    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());
    }
}

通过这个UserRepositoryImpl 实现类，我们在控制器中进行相关用户数据的增删改查操作。控制器代码如下：

package com.yun.hello.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
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.yun.hello.domain.User;
import com.yun.hello.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 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 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 model
     * @return
     */
    @PostMapping
    public ModelAndView saveOrUpdateUser(User user,Model model) {
        user = userRepository.saveOrUpdateUser(user);
        model.addAttribute("user",user);
        model.addAttribute("title","创建用户");
        return new ModelAndView("users/form","userModel",model);
    }
}

接下来需要相应地实现HTML页面，项目结构如下：


image.png

其中thymeleaf默认放置HTML页面的目录就是在templates目录下，此处的fragments目录下存放了被其他页面引用的头和尾的HTML片段，users目录下存放了显示数据相关的页面。
list.html页面实现如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8"></meta>
    <title th:text="${userModel.title}">welcome</title>
</head>
<body>
<div th:replace="fragments/header :: header">...</div>
<h3 th:text="${userModel.title}">Welcome to waylau.com</h3>
<div>
    <a href="/users/form.html">创建用户</a>
</div>
<table border="1">
    <thead>
    <tr>
        <td>ID</td>
        <td>Age</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}">1</td>
        <td th:text="${user.age}">11</td>
        <td><a href="view.html" th:href="@{'/users/' + ${user.id}}"
               th:text="${user.name}">yby</a></td>
    </tr>
    </tbody>
</table>
<div th:replace="fragments/footer :: footer">...</div>
</body>
</html>

在说thymeleaf的语法之前，我在学习中遇到了几个坑先分享一下：

  1. <head>标签中需要加上<meta charset="UTF-8"></meta>，否则页面上的中文将会出现乱码。
  2. 由于thymeleaf的检查比较严格，所有的开始标签和结束标签都必须一一对应，否则将会报错，比如我刚开始写<meta charset="UTF-8">启动应用后，页面报错如下：
    image.png

    后台日志打印：
org.xml.sax.SAXParseException: 元素类型 "meta" 必须由匹配的结束标记 "</meta>" 终止。

所以正确的格式必须有结束标签。

  1. 刚开始看到网上的教学视频中引入其他页面的写法如下：
<div th:replace="~{fragments/header :: header}">...</div>

结果页面一直报错：


image.png

找了半天发现是写法不对，正确的写法是：

<div th:replace="fragments/header :: header">...</div>

把这几个问题都改完后，启动应用访问http://localhost:8080/users，能正常打开thymeleaf模板页list.html。代码已经上传到 https://github.com/yun00/webblog.git，可以自行到github上下载。

今天是2018年农历初五，把问题解决后的心情是愉悦的，每天收获一点点，收拾心情18年继续努力。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容