spring boot+thymeleaf+jpa实现增删改案例

小鱼儿 2022-12-30 13:42 131阅读 0赞

**首先第一步是要配置我们的pom.xml文件**

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-jpa</artifactId>
            </dependency>
    
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>

引入上面的依赖后，idea会在右下角自动的提示我们要是否要导包，这时点击确认即可。

**第二步，我们需要对application.properties文件进行配置。**

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/mysqldb?useUnicode=true&characterEncoding=utf8&useSSL=true&serverTimezone=UTC
    spring.datasource.username=root
    spring.datasource.password=17366758919NBV
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    
    spring.jpa.properties.hibernate.hbm2ddl.auto=update
    spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect
    spring.jpa.show-sql= true
    
    spring.thymeleaf.cache=false

这里要注意以下，文件中mysqldb是本人在MySQL中已经创建好的库，我们的项目会根据在该库下建表，所以这里的mysqldb要根据自己的需求来修改。  
![在这里插入图片描述][2020122519011524.PNG_pic_center]  
其中propertiesspring.thymeleaf.cache=false是关闭thymeleaf的缓存，不然在开发过程中修改页面不会立刻生效需要重启，生产（即为用户端）可配置为true。

**第三步是导入我们的的样式资源bookstrap.css，这个是用来对我们制作的网页进行修饰的。**  
![在这里插入图片描述][20201225190711483.PNG_pic_center]  
没有上面样式资源的同学可以到[https://www.bootcss.com/][https_www.bootcss.com]下载资源。  
随便说一下在项目resources目录下会有两个文件夹：static目录用于放置网站的静态内容如css、js、图片；templates目录用于放置项目使用的页面模板。有些同学可以不知道这两个文件的作用，我在这里就补充一下。

**第四步编辑ThymeleafTestApplication启动类需要添加Servlet的支持。**

package com.example.thymeleaf_test;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.boot.builder.SpringApplicationBuilder;
    import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
    
    @SpringBootApplication
    public class ThymeleafTestApplication extends SpringBootServletInitializer {
        
    
        @Override
        protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        
           return application.sources(ThymeleafTestApplication.class);
        }
    
        public static void main(String[] args) throws Exception {
        
            SpringApplication.run(ThymeleafTestApplication.class, args);
        }
    
    }

**第五步要在model目录下创建User.java帮助将实体类映射到数据库mysqldb。**

package com.example.thymeleaf_test.model;
    
    import javax.persistence.Entity;
    import javax.persistence.Id;
    
    @Entity
    public class User {
        
    
        @Id
        private long id;
        private String userName;
        private String password;
        private int age;
    
        public User(){
        
    
        }
    
        public long getId() {
        
            return id;
        }
    
        public User setId(long id){
        
            this.id  = id;
            return this;
        }
    
        public String getUserName(){
        
            return userName;
        }
    
        public User setUserName(String userName){
        
            this.userName = userName;
            return this;
        }
    
        public String getPassword(){
        
            return password;
        }
    
        public User setPassword(String password){
        
            this.password = password;
            return this;
        }
    
        public int getAge(){
        
            return age;
        }
    
        public User setAge(int age){
        
            this.age = age;
            return this;
        }
    }

**第六步在repository目录下创建接口UserRepository继承JpaRepository类，JpaRepository类有很多自动实现内置的方法，包括增删改查。**

package com.example.thymeleaf_test.repository;
    
    import com.example.thymeleaf_test.model.User;
    import org.springframework.data.jpa.repository.JpaRepository;
    
    public interface UserRepository extends JpaRepository<User,Long> {
        
    
        User findById(long id);
        void deleteById(Long id);
    
    }

**第七步在service目录下创建Userservice接口和UserServiceImpl类，service调用jpa实现相关的增删改查，实际项目中service层处理具体的业务代码。**

package com.example.thymeleaf_test.service;
    
    import com.example.thymeleaf_test.model.User;
    
    import java.util.List;
    
    public interface UserService {
        
    
        public List<User> getUserList();
    
        public User findUserById(long id);
    
        public User save(User user);
    
        public User edit(User user);
    
        public void delete(long id);
    
    }

package com.example.thymeleaf_test.service;
    
    import com.example.thymeleaf_test.model.User;
    import com.example.thymeleaf_test.repository.UserRepository;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class UserServiceImpl implements UserService {
        
    
        @Autowired
        private UserRepository userRepository;
    
        //查找每个user的数据，相当于遍历的功能
        @Override
        public List<User> getUserList() {
        
            return userRepository.findAll();
        }
    
        //根据id对user进行查找，相当于查询的作用
        @Override
        public User findUserById(long id){
        
            return userRepository.findById(id);
        }
    
        //对user数据的保存
        @Override
        public User save(User user){
        
            return userRepository.save(user);
        }
    
        //对user数据进行编辑
        @Override
        public User edit(User user){
        
            return userRepository.save(user);
        }
        
        //根据id对user的数据进行删除
        @Override
        public void delete(long id){
        
            userRepository.deleteById(id);
        }
    
    }

**第八步在Controller目录下创建UserController类，该类负责接收请求，处理完后将页面内容返回给前端。**

package com.example.thymeleaf_test.controller;
    
    import com.example.thymeleaf_test.model.User;
    import com.example.thymeleaf_test.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    
    import javax.annotation.Resource;
    import java.util.List;
    
    @Controller
    public class UserController {
        
    
        @Autowired
        UserService userService;
    
        @RequestMapping("/")
        public String index(){
        
            return "redirect:/list";
        }
    
        //  当页面收到/list请求时会跳转到user/list.html页面
        @RequestMapping("/list")
        public String list(Model model){
        
            List<User> users = userService.getUserList();
            model.addAttribute("users",users);
            return "user/list";
        }
        //  当页面收到/toAdd请求时会跳转到user/userAdd.html页面
        @GetMapping ("/toAdd")
        public String toAdd(){
        
            return "user/userAdd";
        }
        //  当页面收到/add请求时会跳转到/list请求的页面即为user/list.html页面
        @PostMapping("/add")
        public String add(User user){
        
            userService.save(user);
            return "redirect:/list";
        }
        //  当页面收到/toEdit请求时会跳转到user/userEdit.html页面
        @GetMapping("/toEdit")
        public String toEdit(Model model,long id){
        
            User user = userService.findUserById(id);
            model.addAttribute("user",user);
            return "user/userEdit";
        }
        //  当页面收到/edit请求时会跳转到/list请求的页面即为user/list.html页面
        @PostMapping("/edit")
        public String edit(User user){
        
            userService.edit(user);
            return "redirect:/list";
        }
        //  当页面收到/delete请求时会跳转到/list请求的页面即为user/list.html页面
        @GetMapping("/delete")
        public String delete(long id){
        
            userService.delete(id);
            return "redirect:/list";
        }
    }

**第九步是前端的设计部分。**  
list.html

<!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}"/>
    </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 class="btn btn-primary btn-small" href="userEdit.html" th:href="@{/toEdit(id=${user.id})}">edit</a></td>
                <td><a class="btn btn-danger btn-small" href="list.html" 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="userAdd.html" th:href="@{/toAdd}" class="btn btn-info">add</a>
        </div>
    </div>
    
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MTIxMQ_size_16_color_FFFFFF_t_70_pic_center]  
userAdd.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>userAdd</title>
        <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
        <style>
            .container h1 {
         
                text-align: center;
            }
            .formbox {
         
                margin: 0 auto;
                text-align: center;
            }
        </style>
    </head>
    <body class="container">
    <br/>
    <h1>添加用户</h1>
    <br/><br/>
    <div class="formbox">
        <form th:action="@{/add}" method="post">
            <div class="form-group">
                <label for="userName" class=" control-label">id</label>
                <div>
                    <input type="text" class="form-control" name="id"  id="id" placeholder="id"/>
                </div>
            </div>
            <div class="form-group">
                <label for="userName" class="c control-label">userName</label>
                <div>
                    <input type="text" class="form-control" name="userName"  id="userName" placeholder="userName"/>
                </div>
            </div>
            <div class="form-group">
                <label for="password" class=" control-label" >Password</label>
                <div>
                    <input type="password" class="form-control" name="password" id="password"  placeholder="Password"/>
                </div>
            </div>
            <div class="form-group">
                <label for="age" class=" control-label">age</label>
                <div>
                    <input type="text" class="form-control" name="age"  id="age" placeholder="age"/>
                </div>
            </div>
            <div class="form-group">
                <div>
                    <input type="submit" value="Submit" class="btn btn-info" />
                         
                    <a href="list.html" th:href="@{/list}" class="btn btn-info">Back</a>
                </div>
    
            </div>
        </form>
    </div>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>userEdit</title>
        <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
        <style>
            .container h1 {
         
                text-align: center;
            }
            .formbox {
         
                margin: 0 auto;
                text-align: center;
            }
        </style>
    </head>
    <body class="container">
    <br/>
    <h1>修改用户</h1>
    <br/><br/>
    <div class="formbox">
        <form th:action="@{/edit}" th:object="${user}"  method="post">
            <input type="hidden" name="id" th:value="*{id}" />
            <div class="form-group"  >
                <label for="userName" class="control-label">userName</label>
                <div>
                    <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="control-label" >Password</label>
                <div>
                    <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="control-label">age</label>
                <div>
                    <input type="text" class="form-control" name="age"  id="age" th:value="*{age}" placeholder="age"/>
                </div>
            </div>
            <div class="form-group">
                <div>
                    <input type="submit" value="Submit" class="btn btn-info" />
                         
                    <a href="user/list.html" th:href="@{/list}" class="btn btn-info">Back</a>
                </div>
    
            </div>
        </form>
    </div>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MTIxMQ_size_16_color_FFFFFF_t_70_pic_center 2]  
最后附上我项目的目录排版。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MTIxMQ_size_16_color_FFFFFF_t_70_pic_center 3]  
希望大家也能够跟我一样实现案例项目，路过的朋友别忘了点赞哟~

[2020122519011524.PNG_pic_center]: /images/20221120/15615be3434941edb786d8569255b59b.png
[20201225190711483.PNG_pic_center]: /images/20221120/8cc48458aeb946e69900dd65dd6a294a.png
[https_www.bootcss.com]: https://www.bootcss.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MTIxMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/50ea07d7c1b3415bbaac51d835dd1505.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MTIxMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/c03f410a8e47446e9aa25792b726ea34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MTIxMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/fb71fc11d5374fed87e8e71483da4dc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM5MTIxMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/e49f95c8ffed42c3b482a58ed7b5992e.png