Spring Boot + Jpa + Thymeleaf 增刪改查示例-魔扣目錄

這篇文章介紹如何使用 Jpa 和 Thymeleaf 做一個(gè)增刪改查的示例。

先和大家聊聊我為什么喜歡寫這種腳手架的項(xiàng)目，在我學(xué)習(xí)一門新技術(shù)的時(shí)候，總是想快速的搭建起一個(gè) Demo 來試試它的效果，越簡(jiǎn)單越容易上手最好。在網(wǎng)上找相關(guān)資料的時(shí)候總是很麻煩，有的文章寫的挺不錯(cuò)的但是沒有源代碼，有的有源代碼但是文章介紹又不是很清楚，所在找資料的時(shí)候稍微有點(diǎn)費(fèi)勁。因此在我學(xué)習(xí) Spring Boot 的時(shí)候，會(huì)寫一些最簡(jiǎn)單基本的示例項(xiàng)目，一方面方便其它朋友以最快的方式去了解，一方面如果我的項(xiàng)目需要用到相關(guān)技術(shù)的時(shí)候，直接在這個(gè)示例版本去改造或者集成就可以。

現(xiàn)在的技術(shù)博客有很多的流派，有的喜歡分析源碼，有的傾向于底層原理，我最喜歡寫這種小而美的示例，方便自己方便他人。

其實(shí)以前寫過 Thymeleaf 和 Jpa 的相關(guān)文章： Spring Boot (四)： Thymeleaf 使用詳解和Spring Boot(五)：Spring Data Jpa 的使用里面的代碼示例都給的云收藏的內(nèi)容Favorites-web，云收藏的內(nèi)容比較多，查找起來不是很方便，因此想重新整理一篇快速上手、簡(jiǎn)單的內(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ā)過程中修改頁面不會(huì)立刻生效需要重啟，生產(chǎn)可配置為 true。

在項(xiàng)目 resources 目錄下會(huì)有兩個(gè)文件夾：static目錄用于放置網(wǎng)站的靜態(tài)內(nèi)容如 css、js、圖片；templates 目錄用于放置項(xiàng)目使用的頁面模板。

啟動(dòng)類

啟動(dòng)類需要添加 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í)體類映射數(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 類會(huì)自動(dòng)實(shí)現(xiàn)很多內(nèi)置的方法，包括增刪改查。也可以根據(jù)方法名來自動(dòng)生成相關(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 實(shí)現(xiàn)相關(guān)的增刪改查，實(shí)際項(xiàng)目中 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é)接收請(qǐng)求，處理完后將頁面內(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"; 代表會(huì)直接去 resources 目錄下找相關(guān)的文件。
return "redirect:/list"; 代表轉(zhuǎn)發(fā)到對(duì)應(yīng)的 Controller，這個(gè)示例就相當(dāng)于刪除內(nèi)容之后自動(dòng)調(diào)整到 list 請(qǐng)求，然后再輸出到頁面。

頁面內(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}"> 這里會(huì)從 Controler 層 model set 的對(duì)象去獲取相關(guān)的內(nèi)容，th:each表示會(huì)循環(huán)遍歷對(duì)象內(nèi)容。

其實(shí)還有其它的寫法，具體的語法內(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>

添加頁面和修改類似就不在貼代碼了。

效果圖：