版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_40132006/article/details/81504649
1.build.gradle
dependencies{
//添加Thymeleaf
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
}
spring-boot-starter-thymeleaf库默认使用的是最新版本的,主要依赖以下三个库:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>
</dependencies>
自定义版本
buildscript {
ext['thymeleaf.version'] = '3.0.3.RELEASE'
ext['thymeleaf-layout-dialect.version'] = '2.2.0'
}
2.修改application.properties
application.properties 文件在Spring Boot项目中是用于配置项目的配置文件,需在添加以下几项
# Thymeleaf编码
spring.thymeleaf.encoding=UTF-8
# 热部署静态文件,指不对Thymeleaf模板进行缓存,
# 这样在开发阶段修改模板后,就能在浏览器中及时看到修改后页面效果
spring.thymeleaf.cache=false
# 使用HTML5标准
spring.thymeleaf.mode=HTML5
3.在项目的domain包下创建User.java
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class User {
@Id//主键
@GeneratedValue(strategy=GenerationType.IDENTITY)// 自增长
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;
}
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", email=" + email + "]";
}
}
4.创建资源库
在Repository包下创建UserRepository接口
import java.util.List;
public interface UserRepository {
/**
* 新增或修改用户
* @param user
* @return
*/
User saveOrUpdateUser(User user);
/**
* 废除用户
* @param id
*/
void deleteUser(Long id);
/**
* 根据用户id获取用户
* @param id
* @return
*/
User getUserById(Long id);
/**
* 获取所有用户的列表
* @return
*/
List<User> listUser();
}
并创建UserRepositoryImpl类作为实现类
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 org.w3c.dom.css.Counter;
//标识一个可注入的bean
@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());
}
}
5.修改控制器
在项目下创建controller包并建立UserController用于处理界面的请求.
import org.h2.util.New;
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;
@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 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");
}
/**
* 废除用户
* @param id
* @return
*/
@GetMapping(value = "delete/{id}")
public ModelAndView delete(@PathVariable("id") Long id) {
userRepository.deleteUser(id);
return new ModelAndView("redirect:/users");
}
/**
* 获取修改用户的界面
* @param id
* @param model
* @return
*/
@GetMapping(value = "modify/{id}")
public ModelAndView modifyForm(@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);
}
}
6.在项目的templates目录下新建一个fragments页面,来归档页面共用的部分
包括:list.html 展现用户列表,form.html 用于新增或修改用户的资料,view.html 用于查看某个用户的资料,
新建一个fragments页面,来归档页面公用部分
包括:header.html 为共用的头部页面;footer.html 为共用的底部页面.以下是完整代码:
a.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">
<title>Thymeleaf in action</title>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<h3 th:text="${userModel.title}">waylau</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>
b.form.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<h3 th:text="${userModel.title}">waylau</h3>
<form action="/users" th:action="@{/users}" method="POST" th:object="${userModel.user}">
<input type="hidden" name="id" th:value="*{id}"> 名称:
<br>
<input type="text" name="name" th:value="*{name}">
<br> 邮箱:
<br>
<input type="text" name="email" th:value="*{email}">
<input type="submit" value="提交">
</form>
<div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>
c.view.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<h3 th:text="${userModel.title}">waylau</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>
d.header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div th:fragment="header">
<h1>Thymeleaf in action</h1>
<a href="/users" th:href="@{~/users}">首页</a>
</div>
</body>
</html>
e.footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Thymeleaf in action</title>
</head>
<body>
<div th:fragment="footer">
<a href="https://waylau.com">Welcome to waylau.com</a>
</div>
</body>
</html>