基于SpringBoot开发一套完整的项目（三）准备工作
1. springboot集成Thymeleaf模版
对于动态HTML 内容的展示，模板引擎必不可少，为什么选择Thymeleaf，由于Thymeleaf “原型即页面”的特点，非常适用于快速开发，符合Spr ing Boot 开箱即用的原则。所谓“原型即页面，简单一句话：
界面的设计与实现相分离，这就是Thymeleaf 广为流行的原因
2.Thymeleaf 标准表达式语法
以th 属性开头，例如 < span th : text= ”…”>
变量表达式： $｛……｝
选择表达式：＊｛……｝
消息表达式：＃｛……｝
链接表达到： ＠｛……｝
分段表达式： ～｛……｝
等等，详细的可以自行了解
3. springboot 集成 thymeleaf
首先添加依赖，点进去可以看到版本的。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
可以看到spring-boot-starter-thymeleaf主要依赖了以下三个，默认是 3.0.9.RELEASE，也就是最新版本，如果要修改版本的话，再添加依赖的时候再指定一个Version属性就行，这里不再赘述
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> <version>2.0.2.RELEASE</version> <scope>compile</scope> </dependency> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> <version>3.0.9.RELEASE</version> <scope>compile</scope> </dependency> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-java8time</artifactId> <version>3.0.1.RELEASE</version> <scope>compile</scope> </dependency>
4 .Thymeleaf 实战
首先在application.properties中添加
创建接口UserRepository和实现类UserRepositoryImpl
public interface UserRepository { User saveOrUpdateUser(User user); //新增或者修改用户 void deleteUsere(Long id); //删除用户 User getUserById(Long id); //根据用户id获取用户 List<User> userList (); //获取所有用户的列表 }
@Repository//用于标识UserRepositoryimpl 类是一个可注入的bean 。 public class UserRepositoryImpl implements UserRepository { //用来生成一个递增的id ，作为用户的唯一编号。 private static AtomicLong counterId = new AtomicLong(); //模拟数据的存储， private final ConcurrentMap<Long ,User> userConcurrentMap =new ConcurrentHashMap<Long,User>(); @Override public User saveOrUpdateUser(User user) { Long id =user.getId(); if (id==null){ id=counterId.incrementAndGet(); user.setId(id); } this.userConcurrentMap.put(id,user); return user; } @Override public void deleteUsere(Long id) { this.userConcurrentMap.remove(id); } @Override public User getUserById(Long id) { return this.userConcurrentMap.get(id); } @Override public List<User> userList() { return new ArrayList<User>(this.userConcurrentMap.values()); } }
修改UserController
@RestController @RequestMapping("/user") public class UserController { @Autowired private UserRepository userRepository; //查词所有用户 @GetMapping("/userlist") public ModelAndView userList(Model model){ model.addAttribute("userList",userRepository.userList()); model.addAttribute("title","用户管理"); return new ModelAndView("user/list","userModel",model); } //根据id 查询用户 @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("user/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 saveOrUpdateUser(User user){ user =userRepository.saveOrUpdateUser(user); return new ModelAndView("redirect"); } //根据id删除用户 @GetMapping(value = "delete/{id}") public ModelAndView delete(@PathVariable("id") Long id){ userRepository.deleteUsere(id); return new ModelAndView("redirect:/user"); } //修改用户界面 @GetMapping(value = "edit/{id}") public ModelAndView editForm(@PathVariable("id") Long id,Model model){ User user =userRepository.getUserById(id); model.addAttribute("user",user); model.addAttribute("title","编辑用户"); return new ModelAndView("user/form" ,"userModel",model); } }整体的API 设计如下。
( 1 ) GET/user/userlist : 查用户列表
( 2 ) GET/user/{id} :根据id查看用户详情
( 3 ) GET/user/form ： 新增或者修改用户的页面。
( 4 ) POST/user ：新增或者修改用户请求处理
( 5) GET/user/delete/{id}：根据id 删除相应的用户数据
( 6 )GET/user/edit/{id}：根据id获取相应的用户，然后执行修改。
5 .编写前台页面
在templates下新建一个user文件夹，用来放list.html ; form.html ; view.html 展示页面
以及common文件夹，用来放页面的公共部分，header.html ;和 footer.html
list.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>用户列表</title> </head> <body> <div th:replace="~{common/header::header}"></div> <h4 th:text="${userModel.title}"> 渡西湖 </h4> <div> <a href="/user/form" th:href="@{/user/form}"> 新建用户 </a> </div> <table border="2"> <thead> <tr> <td>id</td> <td>名字</td> <td>年龄</td> <td>管理</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><a th:href="@{'/user/'+${user.id}}" th:text="${user.name}"></a></td> <td th:text="${user.age}"></td> <td><a th:href="@{'/user/delete/'+${user.id}}">删除</a></td> </tr> </tbody> </table> <div th:replace="~{common/footer::footer}"></div> </body> </html>
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>DemoThymeleaf</title> </head> <body> <div th:replace="~{common/header::header}"></div> <h4 th:text="${userModel.title}">渡西湖</h4> <form action="/user" th:action="@{/user}" 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="number" name="age" th:value="*{age}"> <br/> <input type="submit" value="提交"> </form> <div th:replace="~{common/footer::footer}"></div> </body> </html>
view.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>用户详情</title> </head> <body> <div th:replace="~{common/header::header}"></div> <h4 th:text="${userModel.title}"></h4> <div> <p><strong>ID:</strong><span th:text="${userModel.user.id}"></span></p> <p><strong>名字:</strong><span th:text="${userModel.user.name}"></span></p> <p><strong>年龄:</strong><span th:text="${userModel.user.age}"></span></p> </div> <div> <a th:href="@{'/user/delete/'+${userModel.user.id}}">删除</a> <a th:href="@{'/user/edit/'+${userModel.user.id}}">修改</a> </div> <div th:replace="~{common/footer::footer}"></div> </body> </html>
header.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>页头</title> </head> <body> <div th:fragment="header"> <h1>DemoThymeleaf</h1> <a href="/user" th:href="@{~/user/userlist}">首页</a> </div> </body> </html>
footer.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>页脚</title> </head> <body> <div th:fragment="footer"> <a href="www.duxihu.com">欢迎光临</a> </div> </body> </html>
运行：
在浏览器中输入 localhost:8080/user/userlist可以看到
依次点击：
运行成功！