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

原创

wx637f0ba1ddc42 2022-11-24 15:41:55 博主文章分类：springboot ©著作权

文章标签 spring boot spring html mvc 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者wx637f0ba1ddc42的原创作品，请联系作者获取转载授权，否则将追究法律责任

区别：

	普通CRUD（uri来区分操作）	HTTP请求方式区分对资源CRUD操作
查询	getEmp	emp---GET
添加	addEmp?xxx	emp---POST
修改	updateEmp?id=xxx&xxx=xx	emp/{id}---PUT
删除	deleteEmp?id=1	emp/{id}---DELETE

实验功能：

实验功能	请求URI	请求方式
查询所有员工	emps	GET
查询某个员工(来到修改页面)	emp/1	GET
来到添加页面	emp	GET
添加员工	emp	POST
来到修改页面（查出员工进行信息回显）	emp/1	GET
修改员工	emp	PUT
删除员工	emp/1	DELETE

员工列表：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>
                    <a class="btn btn-sm btn-danger">删除</a>
                  </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">
            <!--发送put请求修改员工数据-->
            <!--
        1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
        2、页面创建一个post表单
        3、创建一个input项，name="_method";值就是我们指定的请求方式
        -->
            <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>
                <!--提交的是部门的id-->
                <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">
            <!--发送put请求修改员工数据-->
            <!--
        1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
        2、页面创建一个post表单
        3、创建一个input项，name="_method";值就是我们指定的请求方式
        -->
            <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

遇到的难点：

修改和删除时前端页面：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

<form th:action="@{/emp}" method="post">
            <!--发送put请求修改员工数据-->
            <!--
        1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
        2、页面创建一个post表单
        3、创建一个input项，name="_method";值就是我们指定的请求方式
        -->
            <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
            <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">

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

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

上一篇：罗马数字转为整数-leetcode

下一篇：thymeleaf实现公共元素的抽取，点击菜单栏高亮显示（全）

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯