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

最新推荐文章于 2022-11-02 17:58:27 发布

pshdhx_albert

最新推荐文章于 2022-11-02 17:58:27 发布

阅读量5.6k

点赞数

分类专栏： # SpringBoot单体应用学习文章标签： spring boot

本文链接：https://blog.csdn.net/pshdhx/article/details/110350499

版权

SpringBoot单体应用学习专栏收录该内容

39 篇文章 2 订阅

订阅专栏

区别：

	普通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

pshdhx_albert

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
springboot+thymeleaf实现增删改查全部操作-restful接口-案例（全）

区别：普通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...
复制链接

扫一扫