spring boot：实现jpa+thymeleaf 用户管理

比眉伴天荒 2023-10-02 11:09 8阅读 0赞

#### 文章目录 ####

*  今天布置的spring boot小作业:
 *  一、实现原理
 *  二、代码
 *   *  1.基本类(po/dao层)
     *  2.服务层
     *  3.控制层
     *  4.thymeleaf 前端代码
     *  5.演示效果
 *  总结

--------------------

## 今天布置的spring boot小作业: ##

> 实现controller 和 模板  
> /users 查看用户列表  
> /users/del 删除 用户  
> /users/add 新增用户  
> /users/edit 修改用户

--------------------

## 一、实现原理 ##

前端采用semantic ui框架，ajax实现数据发送，  
后端采用ssm三层架构，实现jpa+thymeleaf 用户管理

## 二、代码 ##

### 1.基本类(po/dao层) ###

user.java：

package com.example.po;
    
    import lombok.Data;
    
    import javax.persistence.*;
    
    /**
     * @ClassName user
     * @Description TODO
     * @Author 加辣椒了吗?
     * @Date 2021/9/21 20:42
     * @Version 1.0
     **/
    @Data
    @Entity
    @Table(name = "t_user")
    public class user {
        
        @Id
        @GeneratedValue
        private Integer id;
        private String name;
        private String email;
    }

### 2.服务层 ###

继承顺序jpa接口：  
jparespository.java：

package com.example.respository;
    
    import com.example.po.user;
    import org.springframework.data.jpa.repository.JpaRepository;
    
    /**
     * @ClassName jparespository
     * @Description TODO
     * @Author 加辣椒了吗?
     * @Date 2021/9/21 20:41
     * @Version 1.0
     **/
    public interface jparespository extends JpaRepository<user,Integer> {
        
        public user save(user user);
        public void deleteById(Integer id);
    }

### 3.控制层 ###

package com.example.controller;
    
    import com.example.po.user;
    import com.example.respository.jparespository;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.List;
    import java.util.Optional;
    
    /**
     * @ClassName usercontroller
     * @Description TODO
     * @Date 2021/9/21 21:00
     * @Version 1.0
     **/
    @Controller
    public class usercontroller {
        
    
        @Autowired
        private jparespository jparespository;
        // 查看全部
        @GetMapping("/users")
        public String findAll(Model model) {
        
            List<user> all = jparespository.findAll();
            System.out.println(all);
            model.addAttribute("userlist",all);
            return "user";
        }
        // 修改用户
        @PostMapping("/users/edit")
        public String edit(@RequestBody user user , Model model) {
        
            jparespository.save(user);
            List<user> all = jparespository.findAll();
            model.addAttribute("userlist",all);
            return "user";
        }
        // 添加用户
    
        @PostMapping("/users/add")
        public String add(@RequestBody user user , Model model) {
        
            System.out.println(user);
            jparespository.save(user);
            List<user> all = jparespository.findAll();
            model.addAttribute("userlist",all);
            return "user";
        }
        // 删除用户
        @PostMapping("/users/del")
        public String delete(@RequestBody user user, Model model) {
        
            System.out.println("11111");
            jparespository.deleteById(user.getId());
            List<user> all = jparespository.findAll();
            model.addAttribute("userlist",all);
            return "user";
        }
    }

### 4.thymeleaf 前端代码 ###

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
      <title>Getting Started: Serving Web Content</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link rel="stylesheet" type="text/css" href="../css/semantic.min.css">
    </head>
    <body>
    
    </br>
    <div style="text-align: center">
      <button class="ui button" id="adduser">add</button>
      <button class="ui button" id="edituser">edit</button>
      <button class="ui button" id="deleteuser">delete</button>
    </div>
    </br>
    <div style="padding-left: 400px">
      <table class="ui celled table" style="width: 500px;">
        <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>email</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user:${userlist}">
          <td data-label="id" th:text="${user.id}"></td>
          <td data-label="name" th:text="${user.name}"></td>
          <td data-label="email" th:text="${user.email}"></td>
        </tr>
        </tbody>
      </table>
    </div>
    
    <div class="ui modal add">
      <div class="header">添加用户</div>
      <div class="content">
        <form class="ui form addform">
          <div class="field">
            <label>name</label>
            <input class="name" name="name" type="text">
            <label>email</label>
            <input class="email" name="email" type="text">
          </div>
          <div class="ui submit button">Submit</div>
          <div class="ui error message"></div>
        </form>
      </div>
    </div>
    
    <div class="ui modal edit">
      <div class="header">修改用户</div>
      <div class="content">
        <form class="ui form editform">
          <div class="field">
            <label>id</label>
            <input class="id2" name="id2" type="text">
            <label>name</label>
            <input class="name2" name="name2" type="text">
            <label>email</label>
            <input class="email2" name="email2" type="text">
          </div>
          <div class="ui submit button">Submit</div>
          <div class="ui error message"></div>
        </form>
      </div>
    </div>
    
    <div class="ui modal delete">
      <div class="header">请输入你要删除的用户id</div>
      <div class="content">
        <form class="ui form deleteform">
          <div class="field">
            <label>id</label>
            <input class="id3" name="id3" type="text">
          </div>
          <div class="ui submit button">Submit</div>
          <div class="ui error message"></div>
        </form>
      </div>
    </div>
    
    <script src="../js/jquery-1.11.3.min.js"> </script>
    <script src="../js/semantic.min.js"></script>
    <script>
      $(document).ready(function(){
        
        var data = {
        
          id:0,
          name:"ct",
          email:"qq"
        }
        // 添加事件
        $("#adduser").on("click",function(){
        
          $('.add').modal('show');
        });
        // 编辑事件
        $("#edituser").on("click",function(){
        
          $('.edit').modal('show');
        });
        // 删除事件
        $("#deleteuser").on("click",function(){
        
          $('.delete').modal('show');
        });
        // 验证规则
        $(function () {
        
          $(".ui.form").form({
        
            fields:{
        
              name:{
        
                indentfier:'name',
                rules:[{
        
                  type   : 'empty',
                  prompt : 'Please enter the value of name'
                }]
              },
              email:{
        
                indentfier:'email',
                rules:[{
        
                  type   : 'empty',
                  prompt : 'Please enter the value of email'
                }]
              },
              id2:{
        
                indentfier:'id2',
                rules:[{
        
                  type   : 'empty',
                  prompt : 'Please enter the value of id'
                }]
              },
              name2:{
        
                indentfier:'name2',
                rules:[{
        
                  type   : 'empty',
                  prompt : 'Please enter the value of name'
                }]
              },
              email2:{
        
                indentfier:'email2',
                rules:[{
        
                  type   : 'empty',
                  prompt : 'Please enter the value of email'
                }]
              },
              id3:{
        
                indentfier:'id3',
                rules:[{
        
                  type   : 'empty',
                  prompt : 'Please enter the value of id'
                }]
              },
            }
          })
        })
        // 添加提交事件
        $(".addform").submit(function(){
        
          // console.log($(".id").val())
          // console.log($(".name").val())
          // console.log($(".email").val())
    
          data.name = $(".name").val()
          data.email = $(".email").val()
          console.log(data)
          $.ajax({
        
            url: "/users/add",
            type: "POST",
            dataType:'json',
            contentType:'application/json;charset=UTF-8',
            data:JSON.stringify(data)
          });
          alert("添加成功！");
        });
        // 修改提交事件
        $(".editform").submit(function(){
        
          // console.log($(".id2").val())
          // console.log($(".name2").val())
          // console.log($(".email2").val())
          data.id = $(".id2").val()
          data.name = $(".name2").val()
          data.email = $(".email2").val()
          console.log(data)
          $.ajax({
        
            url: "/users/edit",
            type: "POST",
            dataType:'json',
            contentType:'application/json;charset=UTF-8',
            data:JSON.stringify(data)
          });
          alert("修改成功！");
        });
        // 删除提交事件
        $(".deleteform").submit(function(){
        
          data.id = $(".id3").val()
          $.ajax({
        
            url: "/users/del",
            type: "POST",
            dataType:'json',
            contentType:'application/json;charset=UTF-8',
            data:JSON.stringify(data)
          });
          alert("删除成功！");
        });
      });
    
    
    </script>
    </body>
    </html>

### 5.演示效果 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw_size_20_color_FFFFFF_t_70_g_se_x_16 3]

## 总结 ##

> @作者：加辣椒了吗？  
> 简介：憨批大学生一枚，喜欢在博客上记录自己的学习心得，也希望能够帮助到你们！  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b41616de11474dac977e0a170dc5dcc6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/44b4344f73a14a2f9d7d74f0bb763bba.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/b6e3465cd3584b67ae15636b605eefb1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/585f6f69f8104e628efd3172df989a4a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yqg6L6j5qSS5LqG5ZCXPw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021060109523638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ==,size_16,color_FFFFFF,t_70