SpringBoot 中增删查改功能与以往的SpringMVC或者SSM框架相比,查询和添加功能没有变化,主要是修改和删除功能的 提交方式变了 ,但 总体思路不变。
一、查询功能
将所有数据查询到列表上,需要用到getAll()方法将所有数据查询出来。
查询的相关代码:
//查询所有员工返回列表页面,查询是去获取数据,所以用的是GetMapping
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
//放在请求域中
model.addAttribute("emps",employees);
// thymeleaf默认就会拼串
// classpath:/templates/xxxx.html
return "list";//list是列表页面
}
查询页面:
(注意这里的日期格式要按照自己自定义的格式进行指定,不然会出现数据格式不对错误提示。)
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h2><button class="btn btn-sm btn-success" >员工添加</button></h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>员工编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>性别</th>
<th>部门</th>
<th>出生日期</th>
<td>操作</td>
</tr>
</thead>
<tbody>
<!-- 遍历所有数据用thymeleaf中的 th:each 去显示,emp 是接收从请求域 emps 中取出来的数据-->
<tr th:each="emp:${emps}">
<td th:text="${emp.id}"></td>
<td th:text="${emp.lastName}"></td>
<td >[[${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>
<button class="btn btn-sm btn-primary" >编辑</button>
<button class="btn btn-sm btn-danger " >删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
二、添加功能
进入到添加页面,添加一条数据,然后将所有数据回显在列表上。
添加的相关代码:
//来到员工添加页面
@GetMapping("/emp")
public String toAddPage(Model model){
//来到添加页面,查出所有的部门,在页面显示
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
return "add";
}
//员工添加
//SpringMVC自动将请求参数和入参对象的属性进行一一绑定;要求请求参数的名字和javaBean入参的对象里面的属性名是一样的
@PostMapping("/emp")
public String addEmp(Employee employee){
//来到员工列表页面
System.out.println("保存的员工信息:"+employee);
//保存员工
employeeDao.save(employee);
// redirect: 表示重定向到一个地址 /代表当前项目路径
// forward: 表示转发到一个地址
return "redirect:/emps";
}
添加页面:
<form th:action="@{/emp}" method="post">
<div class="form-group">
<label for="inputAddress">姓名</label>
<input name="lastName" type="text" class="form-control" id="inputAddress1" placeholder="" >
</div>
<div class="form-group">
<label for="inputAddress">邮箱</label>
<input name="email" type="text" class="form-control" id="inputAddress2" placeholder="" >
</div>
<div class="form-group">
<label for="inputAddress">出生日期</label>
<input name="birth" type="text" class="form-control" id="inputAddress" placeholder="" >
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">性别</label>
<select id="inputCity" class="form-control" >
<option selected name="gender" value="1" >男</option>
<option selected name="gender" value="0" >女</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">部门</label>
<select id="inputState" class="form-control" name="department.id">
<option th:value="${dep.id}" selected th:each="dep:${deps}" th:text="${dep.departmentName}" ></option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">添加 </button>
</form>
三、修改功能
针对指定的某一条数据进行修改,然后也要将数据回显到列表上。(修改页面与添加页面是同一个页面,所以我们需要判断我们的 _method 是什么请求方式,如果是 put 方式还需要将该条数据显示在页面上才能进行修改,因此需要对请求域 emp 进行判断是否为空,若为空则是添加请求,若不为空则为修改请求)
修改的相关代码:
//来到员工修改页面,查出当前员工,在页面回显
@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id") Integer id,Model model){
Employee employee = employeeDao.get(id);
model.addAttribute("emp",employee);
//页面要显示所有的部门列表
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
//回到修改页面(add是一个修改添加二合一的页面);
return "add";
}
//员工修改;需要提交员工id;
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println("修改的员工数据:"+employee);
employeeDao.save(employee);
return "redirect:/emps";
}
修改页面:
<form th:action="@{/emp}" method="post">
<!--用hidden隐藏input,当请求域emp不为空时才会显示在页面上,才会起作用 th:if="${emp!=null}" 则表示在判断-->
<input th:type="hidden" name="_method" value="put" th:if="${emp!=null}">
<input th:type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">
<div class="form-group">
<label for="inputAddress">姓名</label>
<!--th:value="${emp!=null}?${emp.lastName}" 不为空显示,为空不显示,每一个属性都需要经过判断 -->
<input name="lastName" type="text" class="form-control" id="inputAddress1" placeholder="" th:value="${emp!=null}?${emp.lastName}">
</div>
<div class="form-group">
<label for="inputAddress">邮箱</label>
<input name="email" type="text" class="form-control" id="inputAddress2" placeholder="" th:value="${emp!=null}?${emp.email}">
</div>
<div class="form-group">
<label for="inputAddress">出生日期</label>
<input name="birth" type="text" class="form-control" id="inputAddress" placeholder="" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-MM-dd hh:mm:ss')}"><!-- 出生日期需要格式化-->
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">性别</label>
<select id="inputCity" class="form-control" >
<!-- 在选项卡使用th:checked来显示当前已选的数据-->
<option selected name="gender" value="1" th:checked="${emp!=null}?${emp.gender==0}">男</option>
<option selected name="gender" value="0" th:checked="${emp!=null}?${emp.gender==1}">女</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">部门</label>
<select id="inputState" class="form-control" name="department.id">
<!--th:selected 表示显示已被选择的数据 -->
<option th:value="${dep.id}" selected th:each="dep:${deps}" th:text="${dep.departmentName}" th:selected="${emp!=null}?${dep.id == emp.department.id}"></option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>
四、删除功能
删除指定的一条数据,页面回显。
删除的相关代码:
//员工删除
@DeleteMapping("/emp/{id}")
public String deleteEmployee(@PathVariable("id") Integer id){
employeeDao.delete(id);
return "redirect:/emps";
}
删除页面:
<body>
<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" href="emp" th:href="@{/emp}">员工添加</a></h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>员工编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>性别</th>
<th>部门</th>
<th>出生日期</th>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr th:each="emp:${emps}">
<td th:text="${emp.id}"></td>
<td th:text="${emp.lastName}"></td>
<td >[[${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 class="btn btn-sm btn-danger deleteBtn" th:attr="deleteUri=@{/emp/}+${emp.id}">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
<!--删除表单,单独提取出来,就不会每一条数据都附有一个表单,就不会重复表单提交 -->
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" value="delete"/>
</form>
<script>
$(".deleteBtn").click(function(){
//删除当前员工的
$("#deleteEmpForm").attr("action",$(this).attr("deleteUri")).submit();
return false;
});
</script>
</body>
体会:
增删查改是每一个系统都必不可少的模块,如何用最简便的方法和最简洁的代码去实现这些功能,就显得尤其重要,不管是SpringBoot还是SSM框架,其实实现思路都是一样的,只是SpringBoot可能会更优势一点,因为有MVC的自动配置功能,我们可以直接使用,就方便了许多。
页面效果:
查询

添加


修改


删除


本文介绍了在SpringBoot中如何实现增删改查功能,虽然没有直接连接数据库,但通过模拟展示了查询、添加、修改和删除操作的处理逻辑。重点在于修改和删除功能的提交方式变化,整体思路保持一致。
1216

被折叠的 条评论
为什么被折叠?



