Spring Boot带前后端 渐进式开发企业级博客系统（第5章）

                             第五章：Thyemleaf模版引擎的搭建

由于前期是使用gradle搭建环境，始终没能成功，改成maven搭建了工程环境，仓库的用法都是一样，由于gradle用的人较少，所以对一些错误，不知道什么原因。前四章就是springboot的入门，所以从第五章开始。
引入Thymeladf的依赖：

<!-- 模板引擎 Thymeleaf 依赖 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

实体类：

public class User {
	private Long id;
	private String name;
	private String email;

dao层

public interface UserMapper {
	// 添加或者修改用户
	User saveOrUpdate(User user);

	// 删除用户信息
	void delete(Long id);

	// 通过id询用户
	User getUserFindById(Long id);

	// 查询所有用户
	List<User> getUserLists();

}

dao层实现类：

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.unistrong.bean.User;
@Repository
public class UserMapperImpl implements UserMapper {
	private static AtomicLong counter = new AtomicLong();
	// ConcurrentMap是线程安全的mapp
	private final ConcurrentMap<Long, User> userMap = new ConcurrentHashMap<>();

	
	
	/* (non-Javadoc)
	 * @see com.waylau.spring.boot.thymeleaf.repository.UserRepository#saveUser(com.waylau.spring.boot.thymeleaf.vo.UserVO)
	 */
	@Override
	public User saveOrUpdate(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 delete(Long id) {
		this.userMap.remove(id);
	}

	@Override
	public User getUserFindById(Long id) {

		return userMap.get(id);
	}

	@Override
	public List<User> getUserLists() {

		return new ArrayList<User>(this.userMap.values());
	}

}

controller层：

@RestController
@RequestMapping("/users")
public class UserController {
	@Autowired
	private UserMapper userMapper;

	@GetMapping
	public ModelAndView list(Model model) {
		model.addAttribute("userList", userMapper.getUserLists());
		model.addAttribute("title", "用户管理");
		return new ModelAndView("users/list", "userModel", model);
	}


	@GetMapping("{id}")
	public ModelAndView view(@PathVariable("id") Long id, Model model) {
		User user = userMapper.getUserFindById(id);
		model.addAttribute("user", user);
		model.addAttribute("title", "查看用户");
		return new ModelAndView("users/view", "userModel", model);
	}
	
	@GetMapping("/form")
	public ModelAndView createForm(Model model) {
		model.addAttribute("user", new User());
		model.addAttribute("title", "创建用户");
		return new ModelAndView("users/form", "userModel", model);
	}
	@PostMapping
	public ModelAndView saveOrUpdate(User user,Model model) {
		 user=userMapper.saveOrUpdate(user);
		return new ModelAndView("redirect:/users", "userModel", model);
	}
	/**
	 * 删除用户
	 * @param id
	 * @return
	 */
	@GetMapping(value = "delete/{id}")
	public ModelAndView delete(@PathVariable("id") Long id, Model model) {
		userMapper.delete(id);
		model.addAttribute("title", "删除用户");
		return new ModelAndView("redirect:/users", "userModel", model);
	}

	/**
	 * 修改用户
	 * @param user
	 * @return
	 */
	@GetMapping(value = "modify/{id}")
	public ModelAndView modifyForm(@PathVariable("id") Long id, Model model) {
		User user = userMapper.getUserFindById(id);
		model.addAttribute("user", user);
		model.addAttribute("title", "修改用户");
		return new ModelAndView("users/form", "userModel", model);
	}
}
	@GetMapping("{id}")
	public ModelAndView view(@PathVariable("id") Long id, Model model) {
		User user = userMapper.getUserFindById(id);
		model.addAttribute("user", user);
		model.addAttribute("title", "查看用户");
		return new ModelAndView("users/view", "userModel", model);
	}
	
	@GetMapping("/form")
	public ModelAndView createForm(Model model) {
		model.addAttribute("user", new User());
		model.addAttribute("title", "创建用户");
		return new ModelAndView("users/form", "userModel", model);
	}
	@PostMapping
	public ModelAndView saveOrUpdate(User user,Model model) {
		 user=userMapper.saveOrUpdate(user);
		return new ModelAndView("redirect:/users", "userModel", model);
	}
	/**
	 * 删除用户
	 * @param id
	 * @return
	 */
	@GetMapping(value = "delete/{id}")
	public ModelAndView delete(@PathVariable("id") Long id, Model model) {
		userMapper.delete(id);
		model.addAttribute("title", "删除用户");
		return new ModelAndView("redirect:/users", "userModel", model);
	}

	/**
	 * 修改用户
	 * @param user
	 * @return
	 */
	@GetMapping(value = "modify/{id}")
	public ModelAndView modifyForm(@PathVariable("id") Long id, Model model) {
		User user = userMapper.getUserFindById(id);
		model.addAttribute("user", user);
		model.addAttribute("title", "修改用户");
		return new ModelAndView("users/form", "userModel", model);
	}
}

application.properties的配置：

#thymeleadf的编码
spring.thymeleaf.encoding=UT8
#thymeleaf的缓存不用
spring.thymeleaf.cache=false
#thymeleaf的模版是html5
spring.thymeleaf.mode=HTML5

html中的头部和尾部：

<body>
	<div th:fragment="header">
		<h1>thymeleaf in action</h1>
		<a href="/users" th:href="@{~/users}">首页</a>
	</div>
</body>

<body>
<div th:fragment="footer">
<a href="https://blog.csdn.net/qq_39380737">Welcome To You</a>
</div>
</body>

list.html

<body>
<div th:replace="~{fragments/header :: header}"></div>
<div>
<a href="/users/form.html" th:href="@{/users/form}">添加用户</a>
</div>
<table border="1px" align="center" width="318px" height="167px">
<caption align="center" th:text="${userModel.title}">用户列表</caption>
<thead>
<tr width="100%"  align="center">
<td width="25%">ID</td>
<td width="25%">Name</td>
<td width="25%">Email</td>
<td width="25%">操作</td>
</tr>
</thead>
<tbody>
<tr th:if="${userModel.userList.size()} eq 0" align="center" width="100%" height="50px">
<td colspan="4">没有用户信息</td>
</tr>
<tr width="100%" th:each="user : ${userModel.userList}" align="center">
<td th:text="${user.id}" width="25%"></td>
<td th:text="${user.name}" width="25%"></td>
<td th:text="${user.email}" width="25%"></td>
<td width="25%"><a th:href="@{'/users/'+${user.id}}">查询详细信息</a></td>

</tr>
</tbody>
</table>
<div th:replace="~{fragments/footer :: footer}"></div>
</body>

view.html

<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>

form.html

<body>
<div th:replace="~{fragments/header :: header}"></div>
<h3 th:text="${userModel.title}"></h3>
<form 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/>
邮箱：<input type="email" name="email" th:value="*{email}"/><br/>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>
<div th:replace="~{fragments/footer :: footer}"></div>
</body>

总结：thymeleaf标签的使用和jsp中的标签使用方法基本差不多，掌握了jsp，thymeleaf差不多就会使用了，一些细微差别记住就行。