springboot+thymeleaf实现增删改查全部操作-restful接口-案例（全）

清疚 2022-12-25 00:51 145阅读 0赞

区别：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td>普通CRUD（uri来区分操作）</td> 
   <td>&nbsp;HTTP请求方式区分对资源CRUD操作</td> 
  </tr> 
  <tr> 
   <td>查询</td> 
   <td>getEmp</td> 
   <td>emp---GET&nbsp;</td> 
  </tr> 
  <tr> 
   <td>添加</td> 
   <td>addEmp?xxx &nbsp; &nbsp;</td> 
   <td>emp---POST &nbsp; &nbsp;</td> 
  </tr> 
  <tr> 
   <td>修改</td> 
   <td>updateEmp?id=xxx&amp;xxx=xx&nbsp;</td> 
   <td>emp/{id}---PUT &nbsp;</td> 
  </tr> 
  <tr> 
   <td>删除</td> 
   <td>&nbsp;deleteEmp?id=1 &nbsp;</td> 
   <td>emp/{id}---DELETE&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

实验功能：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>实验功能&nbsp;</td> 
   <td>请求URI</td> 
   <td>请求方式</td> 
  </tr> 
  <tr> 
   <td>查询所有员工&nbsp;</td> 
   <td>emps&nbsp;</td> 
   <td>GET</td> 
  </tr> 
  <tr> 
   <td>查询某个员工(来到修改页面)&nbsp;</td> 
   <td>emp/1</td> 
   <td>GET</td> 
  </tr> 
  <tr> 
   <td>来到添加页面 &nbsp; &nbsp;&nbsp;</td> 
   <td>emp</td> 
   <td>GET</td> 
  </tr> 
  <tr> 
   <td>添加员工&nbsp;</td> 
   <td>emp</td> 
   <td>POST</td> 
  </tr> 
  <tr> 
   <td>来到修改页面（查出员工进行信息回显）</td> 
   <td>emp/1&nbsp;</td> 
   <td>GET</td> 
  </tr> 
  <tr> 
   <td>修改员工 &nbsp; &nbsp;&nbsp;</td> 
   <td>emp</td> 
   <td>PUT</td> 
  </tr> 
  <tr> 
   <td>删除员工</td> 
   <td>emp/1</td> 
   <td>DELETE</td> 
  </tr> 
 </tbody> 
</table>

员工列表：EmployeeController.java

import java.util.Collection;
    
    /**
     * @Authtor pshdhx
     * @Date 2020/11/2914:35
     * @Version 1.0
     */
    @Controller
    public class EmployeeController {
        @Autowired
        EmployeeDao dao;
        @Autowired
        DepartmentDao dao2;
    
        @GetMapping("/emps")
        public String emps(Model model){
            model.addAttribute("emps",dao.getAll());
    
            //前缀：ThymeleafProperities 	public static final String DEFAULT_PREFIX = "classpath:/templates/";
            //后缀：private String mode = "HTML";
    
            return "emp/list";
        }
    
        /**
         * 跳转到添加页面
         * @param model
         * @return
         */
        @GetMapping("/emp")
        public String toAddPage(Model model){
            model.addAttribute("dept",dao2.getDepartments());
            return "emp/add";
        }
        /**
         * 添加方法
         */
        @PostMapping("/emp")
        public String addEmp(Employee employee){
            //redirect 表示重定向到一个地址  /代表当前项目路径
            //forward：表示转发到一个地址
            dao.save(employee);
            return "redirect:/emps";  //这里的emps不是页面，而是方法
        }
        /**
         * 来到修改页面，查出当前员工，在页面回显
         */
        @GetMapping("/emp/{id}")
        public String toEditPage(@PathVariable("id") Integer id,Model model){
            Employee employee = dao.get(id);
            model.addAttribute("emp",employee);
            Collection<Department> departments = dao2.getDepartments();
            model.addAttribute("dept",departments);
            //回到修改页面 add2是添加和修改二合一的页面
            return "emp/add";
        }
    
        /**
         * 员工修改
         */
        @PutMapping("/emp")
        public String updateEmployee(Employee employee){
            dao.save(employee);
            //System.out.println(employee);
            return "redirect:/emps";
        }
    
        /**
         * 员工删除
         */
        @DeleteMapping("/emp/{id}")
        public String deleteEmployee(@PathVariable("id") Integer id){
            dao.delete(id);
            return "redirect:/emps";
        }
    }

列表页面list.html

<tbody>
    								<tr th:each="emp : ${emps}">
    									<td th:text="${emp.id}"></td>
    									<td>[[${emp.lastName}]]</td>
    									<td th:text="${emp.email}"></td>
    									<td th:text="${emp.gender}=='0'?'女':'男'"></td>
    									<td th:text="${emp.department.departmentName}"></td>
    									<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm:ss')}"></td>
    									
    									<td>
    										<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
    										<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
    									</td>
    								</tr>
    							</tbody>

添加按钮：跳转到添加页面->add.html

<h2><a class="btn btn-sm btn-success" th:href="@{/emp}">员工添加</a></h2>
    
    
     /**
         * 跳转到添加页面
         * @param model
         * @return
         */
        @GetMapping("/emp")
        public String toAddPage(Model model){
            model.addAttribute("dept",dao2.getDepartments());
            return "emp/add";
        }

添加页面，进行元素的添加add.html

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
        <h2><a class="btn btn-sm btn-success" th:href="@{/emp}">员工添加</a></h2>
        <div class="table-responsive">
            
            <form th:action="@{/emp}" method="post">
                
                
                <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
                <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
                <div class="form-group">
                    <label>LastName</label>
                    <input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${emp!=null}?${emp.email}">
                </div>
                <div class="form-group">
                    <label>Gender</label><br/>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}">
                        <label class="form-check-label">男</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
                        <label class="form-check-label">女</label>
                    </div>
                </div>
                <div class="form-group">
                    <label>department</label>
                    
                    <select class="form-control" name="department.id">
                        <option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${dept}" th:text="${dept.departmentName}">1</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Birth</label>
                    <input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">
                </div>
                <button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
            </form>
        </div>
    </main>

添加方法：

<form th:action="@{/emp}" method="post">
    
       /**
         * 添加方法
         */
        @PostMapping("/emp")
        public String addEmp(Employee employee){
            //redirect 表示重定向到一个地址  /代表当前项目路径
            //forward：表示转发到一个地址
            dao.save(employee);
            return "redirect:/emps";  //这里的emps不是页面，而是方法
        }

修改页面：=添加页面，跳转到修改页面

<td>
    										<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
    										<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
    									</td>
    
    
    /**
         * 来到修改页面，查出当前员工，在页面回显
         */
        @GetMapping("/emp/{id}")
        public String toEditPage(@PathVariable("id") Integer id,Model model){
            Employee employee = dao.get(id);
            model.addAttribute("emp",employee);
            Collection<Department> departments = dao2.getDepartments();
            model.addAttribute("dept",departments);
            //回到修改页面 add2是添加和修改二合一的页面
            return "emp/add";
        }

进行页面元素的修改

<form th:action="@{/emp}" method="post">
                
                
                <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
                <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
    
    //注意此时put方法不起作用，需要在application.properities中配置
    #打开putmapping，否则不起作用，直接跳到postmapping中
    spring.mvc.hiddenmethod.filter.enabled=true
    
      /**
         * 员工修改
         */
        @PutMapping("/emp")
        public String updateEmployee(Employee employee){
            dao.save(employee);
            //System.out.println(employee);
            return "redirect:/emps";
        }

删除元素：List.html

<td>
    										<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
    										<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
    									</td>
    
    
    
    
    <form id="deleteEmpForm"  method="post">
    					<input type="hidden" name="_method" value="delete">
    				</form>
    
    
    <script>
    			$(".deleteBtn").click(function(){
    				//删除当前员工的
    				$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
    				return false;
    			});
    		</script>
    
    
    
        /**
         * 员工删除
         */
        @DeleteMapping("/emp/{id}")
        public String deleteEmployee(@PathVariable("id") Integer id){
            dao.delete(id);
            return "redirect:/emps";
        }

github:[https://github.com/pshdhx/springbootcurd][https_github.com_pshdhx_springbootcurd]

## 遇到的难点： ##

修改和删除时前端页面：list.html

删除：
    <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
    
    	<form id="deleteEmpForm"  method="post">
    					<input type="hidden" name="_method" value="delete">
    				</form>
    
    js
    	$(".deleteBtn").click(function(){
    				//删除当前员工的
    				$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
    				return false;
    			});

修改时add.html

putmapping不生效时，需要配置application.properities，还要校验前端的日期或时间格式的参数

#前端传递时间日期格式定义
    spring.mvc.date-format=yyyy-MM-dd
    #打开putmapping，否则不起作用，直接跳到postmapping中
    spring.mvc.hiddenmethod.filter.enabled=true

[https_github.com_pshdhx_springbootcurd]: https://github.com/pshdhx/springbootcurd