這篇文章介紹如何使用 Jpa 和 Thymeleaf 做一個增刪改查的示例。
先和大家聊聊我為什么喜歡寫這種腳手架的項目,在我學(xué)習(xí)一門新技術(shù)的時候,總是想快速的搭建起一個 Demo 來試試它的效果,越簡單越容易上手最好。在網(wǎng)上找相關(guān)資料的時候總是很麻煩,有的文章寫的挺不錯的但是沒有源代碼,有的有源代碼但是文章介紹又不是很清楚,所在找資料的時候稍微有點費勁。因此在我學(xué)習(xí) Spring Boot 的時候,會寫一些最簡單基本的示例項目,一方面方便其它朋友以最快的方式去了解,一方面如果我的項目需要用到相關(guān)技術(shù)的時候,直接在這個示例版本去改造或者集成就可以。
現(xiàn)在的技術(shù)博客有很多的流派,有的喜歡分析源碼,有的傾向于底層原理,我最喜歡寫這種小而美的示例,方便自己方便他人。
其實以前寫過 Thymeleaf 和 Jpa 的相關(guān)文章: Spring Boot (四): Thymeleaf 使用詳解和Spring Boot(五):Spring Data Jpa 的使用 里面的代碼示例都給的云收藏的內(nèi)容Favorites-web,云收藏的內(nèi)容比較多,查找起來不是很方便,因此想重新整理一篇快速上手、簡單的內(nèi)容,來介紹 Jpa 和 Thymeleaf 的使用,也就是本文的內(nèi)容。
這篇文章就不在介紹什么是 Jpa 、 Thymeleaf ,如果還不了解這些基本的概念,可以先移步前兩篇相關(guān)文章。
快速上手
配置文件
pom 包配置
pom 包里面添加 Jpa 和 Thymeleaf 的相關(guān)包引用
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency> <groupId>MySQL</groupId> <artifactId>mysql-connector-JAVA</artifactId></dependency>
在Application.properties中添加配置
spring.datasource.url=jdbc:mysql://127.0.0.1/test?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC&useSSL=truespring.datasource.username=rootspring.datasource.password=rootspring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.jpa.properties.hibernate.hbm2ddl.auto=createspring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialectspring.jpa.show-sql= truespring.thymeleaf.cache=false
其中propertiesspring.thymeleaf.cache=false是關(guān)閉 Thymeleaf 的緩存,不然在開發(fā)過程中修改頁面不會立刻生效需要重啟,生產(chǎn)可配置為 true。
在項目 resources 目錄下會有兩個文件夾:static目錄用于放置網(wǎng)站的靜態(tài)內(nèi)容如 css、js、圖片;templates 目錄用于放置項目使用的頁面模板。
啟動類
啟動類需要添加 Servlet 的支持
@SpringBootApplicationpublic class JpaThymeleafApplication extends SpringBootServletInitializer { @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(JpaThymeleafApplication.class); } public static void main(String[] args) throws Exception { SpringApplication.run(JpaThymeleafApplication.class, args); }}
數(shù)據(jù)庫層代碼
實體類映射數(shù)據(jù)庫表
@Entitypublic class User { @Id @GeneratedValue private long id; @Column(nullable = false, unique = true) private String userName; @Column(nullable = false) private String password; @Column(nullable = false) private int age; ...}
繼承 JpaRepository 類會自動實現(xiàn)很多內(nèi)置的方法,包括增刪改查。也可以根據(jù)方法名來自動生成相關(guān) Sql,具體可以參考: Spring Boot (五):Spring Data Jpa 的使用
public interface UserRepository extends JpaRepository<User, Long> { User findById(long id); Long deleteById(Long id);}
業(yè)務(wù)層處理
Service 調(diào)用 Jpa 實現(xiàn)相關(guān)的增刪改查,實際項目中 Service 層處理具體的業(yè)務(wù)代碼。
@Servicepublic class UserServiceImpl implements UserService{ @Autowired private UserRepository userRepository; @Override public List<User> getUserList() { return userRepository.findAll(); } @Override public User findUserById(long id) { return userRepository.findById(id); } @Override public void save(User user) { userRepository.save(user); } @Override public void edit(User user) { userRepository.save(user); } @Override public void delete(long id) { userRepository.delete(id); }}
Controller 負(fù)責(zé)接收請求,處理完后將頁面內(nèi)容返回給前端。
@Controllerpublic class UserController { @Resource UserService userService; @RequestMapping("/") public String index() { return "redirect:/list"; } @RequestMapping("/list") public String list(Model model) { List<User> users=userService.getUserList(); model.addAttribute("users", users); return "user/list"; } @RequestMapping("/toAdd") public String toAdd() { return "user/userAdd"; } @RequestMapping("/add") public String add(User user) { userService.save(user); return "redirect:/list"; } @RequestMapping("/toEdit") public String toEdit(Model model,Long id) { User user=userService.findUserById(id); model.addAttribute("user", user); return "user/userEdit"; } @RequestMapping("/edit") public String edit(User user) { userService.edit(user); return "redirect:/list"; } @RequestMapping("/delete") public String delete(Long id) { userService.delete(id); return "redirect:/list"; }}
- return "user/userEdit"; 代表會直接去 resources 目錄下找相關(guān)的文件。
- return "redirect:/list"; 代表轉(zhuǎn)發(fā)到對應(yīng)的 Controller,這個示例就相當(dāng)于刪除內(nèi)容之后自動調(diào)整到 list 請求,然后再輸出到頁面。
頁面內(nèi)容
list 列表
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"/> <title>userList</title> <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link></head><body class="container"><br/><h1>用戶列表</h1><br/><br/><div class="with:80%"> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>User Name</th> <th>Password</th> <th>Age</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr th:each="user : ${users}"> <th scope="row" th:text="${user.id}">1</th> <td th:text="${user.userName}">neo</td> <td th:text="${user.password}">Otto</td> <td th:text="${user.age}">6</td> <td><a th:href="@{/toEdit(id=${user.id})}">edit</a></td> <td><a th:href="@{/delete(id=${user.id})}">delete</a></td> </tr> </tbody> </table></div><div class="form-group"> <div class="col-sm-2 control-label"> <a href="/toAdd" th:href="@{/toAdd}" class="btn btn-info">add</a> </div></div></body></html>
效果圖:
<tr th:each="user : ${users}"> 這里會從 Controler 層 model set 的對象去獲取相關(guān)的內(nèi)容,th:each表示會循環(huán)遍歷對象內(nèi)容。
其實還有其它的寫法,具體的語法內(nèi)容可以參考這篇文章: Spring Boot (四): Thymeleaf 使用詳解
修改頁面:
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"/> <title>user</title> <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link></head><body class="container"><br/><h1>修改用戶</h1><br/><br/><div class="with:80%"> <form class="form-horizontal" th:action="@{/edit}" th:object="${user}" method="post"> <input type="hidden" name="id" th:value="*{id}" /> <div class="form-group"> <label for="userName" class="col-sm-2 control-label">userName</label> <div class="col-sm-10"> <input type="text" class="form-control" name="userName" id="userName" th:value="*{userName}" placeholder="userName"/> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label" >Password</label> <div class="col-sm-10"> <input type="password" class="form-control" name="password" id="password" th:value="*{password}" placeholder="Password"/> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">age</label> <div class="col-sm-10"> <input type="text" class="form-control" name="age" id="age" th:value="*{age}" placeholder="age"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" value="Submit" class="btn btn-info" /> <a href="/toAdd" th:href="@{/list}" class="btn btn-info">Back</a> </div> </div> </form></div></body></html>
添加頁面和修改類似就不在貼代碼了。
效果圖:
這樣一個使用 Jpa 和 Thymeleaf 的增刪改查示例就完成了。