第五章: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差不多就会使用了,一些细微差别记住就行。