环境安装
- 在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的语法之前，我在学习中遇到了几个坑先分享一下：
- <head>标签中需要加上
<meta charset="UTF-8"></meta>，否则页面上的中文将会出现乱码。 - 由于thymeleaf的检查比较严格，所有的开始标签和结束标签都必须一一对应，否则将会报错，比如我刚开始写
<meta charset="UTF-8">启动应用后，页面报错如下：
image.png
后台日志打印：
org.xml.sax.SAXParseException: 元素类型 "meta" 必须由匹配的结束标记 "</meta>" 终止。
所以正确的格式必须有结束标签。
- 刚开始看到网上的教学视频中引入其他页面的写法如下：
<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年继续努力。
