四 部门管理
1 数据库表
CREATE TABLE `department` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`sn` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;
2 实体类
@Data
public class Department {
private Long id;
private String name;
private String sn;
}
3 部门新增
① 前端页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>部门管理</title>
</head>
<body class="hold-transition skin-black sidebar-mini">
<!--引用外部代码片段 common目录的fragment文件中的link-->
<div th:replace="common/fragment :: link"></div>
<div class="wrapper">
<!--navbar 导航-->
<div th:replace="common/fragment :: navbar"></div>
<!--menu 菜单-->
<div th:replace="common/fragment :: menu"></div>
<div class="content-wrapper">
<section class="content-header">
<h1>部门管理</h1>
</section>
<section class="content">
<div class="box">
<!--高级查询--->
<form class="form-inline" id="searchForm" action="/department/list" method="post">
<input type="hidden" name="currentPage" id="currentPage" value="1">
<a href="#" class="btn btn-success btn-input" style="margin: 10px">
<span class="glyphicon glyphicon-plus"></span> 添加
</a>
</form>
<!--编写内容-->
<div class="box-body table-responsive ">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>编号</th>
<th>部门名称</th>
<th>部门编号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="department,start:${pageInfo.list}">
<td th:text="${start.count}">1</td>
<td th:text="${department.name}">保安部</td>
<td th:text="${department.sn}">BA</td>
<td>
<a href="#" class="btn btn-info btn-xs btn-input">
<span class="glyphicon glyphicon-pencil"></span> 编辑
</a>
<a class="btn btn-danger btn-xs btn-delete">
<span class="glyphicon glyphicon-trash"></span> 删除
</a>
</td>
</tr>
</tbody>
</table>
<div th:replace="common/fragment :: page"></div>
</div>
</div>
</section>
</div>
<div th:replace="common/fragment :: footer"></div>
</div>
<div class="modal fade" id="departmentModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">部门编辑</h4>
</div>
<!--单击保存时提交表单-->
<form action="/department/saveOrUpdate" method="post">
<input type="hidden" name="id">
<div class="modal-body">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" name="name" id="name" placeholder="名称">
</div>
<div class="form-group">
<label for="sn">缩写</label>
<input type="text" class="form-control" name="sn" id="sn" placeholder="缩写">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</form>
</div>
</div>
</div>
<!--单击添加时打开模态框-->
<script>
$('.btn-input').click(function () {
// 测试配置是否成功
// alert(1)
// 打开模态框
$('#departmentModal').modal('show');
// 修改模态框名字（头部）
$('.modal-title').html("部门新增")
})
</script>
</body>
</html>
② controller
@Controller
@RequestMapping("/department")
public class DepartmentController {
@Autowired
private IDepartmentService departmentService;
// 处理部门查询所有方法
@RequestMapping("/list")
public String list(Model model, QueryObject qo){
PageInfo<Department> pageInfo = departmentService.query(qo);
model.addAttribute("pageInfo",pageInfo);
return "department/list";
}
// 处理部门删除方法
@RequestMapping("/delete")
public String delete(Long id){
if (id != null) {
departmentService.delete(id);
}
return "redirect:/department/list"; // 再次发起请求 到我们上面的查询所有的控制器方法。
}
// 进入部门新增/编辑页面方法
@RequestMapping("/input")
public String input(Long id,Model model){
if (id != null) {
// 修改
Department department = departmentService.get(id);
model.addAttribute("department",department);
}
return "department/input"; // WEB-INF/views/ department/input .jsp
}
// 部门新增方法
@RequestMapping("/saveOrUpdate")
public String saveOrUpdate(Department department){
if(department.getId() == null){
departmentService.save(department);
} else {
departmentService.update(department);
}
return "redirect:/department/list"; // 再次发起请求 到我们上面的查询所有的控制器方法。
}
}
③ service接口
public interface IDepartmentService {
void save(Department department);
void delete(Long id);
void update(Department department);
Department get(Long id);
List<Department> listAll();
// 查询分页方法
PageInfo<Department> query(QueryObject qo);
}
④ service实现类
@Service
// @Slf4j
public class DepartmentServiceImpl implements IDepartmentService {
@Autowired
private DepartmentMapper departmentMapper;
public void setDepartmentMapper(DepartmentMapper departmentMapper) {
this.departmentMapper = departmentMapper;
}
@Override
public void save(Department department) {
/* if(department.getName() == null){
throw new RuntimeException("非法参数");
}*/
departmentMapper.insert(department);
}
@Override
public void delete(Long id) {
departmentMapper.deleteByPrimaryKey(id);
}
@Override
public void update(Department department) {
departmentMapper.updateByPrimaryKey(department);
}
@Override
public Department get(Long id) {
return departmentMapper.selectByPrimaryKey(id);
}
@Override
public List<Department> listAll() {
return departmentMapper.selectAll();
}
@Override
public PageInfo<Department> query(QueryObject qo) {
// 用的技术是线程变量（数据共享 controller service mapper都可以用（一条线程））
// 告诉PageHelper当前页 每页显示条数后 PageHelper就会将这两个数据存入线程局部变量中
// 传当前页 每页显示条数
PageHelper.startPage(qo.getCurrentPage(),qo.getPageSize());
return new PageInfo<>(departmentMapper.selectForList(qo));
}
}
⑤ mapper接口
public interface DepartmentMapper {
int deleteByPrimaryKey(Long id);
int insert(Department record);
Department selectByPrimaryKey(Long id);
List<Department> selectAll();
int updateByPrimaryKey(Department record);
List<Department> selectForList(QueryObject qo);
}
⑥ mapper xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.tj.mapper.DepartmentMapper" >
<resultMap id="BaseResultMap" type="cn.tj.domain.Department" >
<id column="id" property="id" />
<result column="name" property="name" />
<result column="sn" property="sn" />
</resultMap>
<delete id="deleteByPrimaryKey" >
delete from department
where id = #{id}
</delete>
<insert id="insert" useGeneratedKeys="true" keyProperty="id" >
insert into department (name, sn)
values (#{name}, #{sn})
</insert>
<update id="updateByPrimaryKey" >
update department
set name = #{name},
sn = #{sn}
where id = #{id}
</update>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" >
select id, name, sn
from department
where id = #{id}
</select>
<select id="selectAll" resultMap="BaseResultMap" >
select id, name, sn
from department
</select>
<select id="selectForList" resultMap="BaseResultMap">
select id, name, sn
from department
</select>
</mapper>
4 部门修改
为完成数据回显而不查询数据库（查询数据库会造成性能消耗），我们需要在数据库添加新的字段，将每个对象的所有属性封装到一个字段中，通过get方法获取该字段就能拿到对应对象的所有属性。
后端通过map对象将属性以kv键值对的形式存在字段中，用ObjectMapper().writeValueAsString()方法转为json格式传递给前端，前端将数据存入编辑按钮中的自定义属性data-json中，将遍历的每一个对象属性存入对应的自定义对象中，点击编辑时提出自定义对象中的数据，通过点击按钮时有无属性值可判断出是新增还是编辑
由于共用同一个模态框，单击编辑后，再点新增会发现回显的数据仍在，因此在每次点击新增或编辑时应清空之前的数据。
① 修改实体类
@Data
public class Department {
private Long id;
private String name;
private String sn;
// 方法名与前端调用属性的名称要一致 且首字母要大写（属性规范）
// 对应<td th:text="${department.xxx}">test</td>
public String getJson() throws JsonProcessingException {
// Json特点为kv键值对，对应Java中的map
Map<String,Object> param=new HashMap<>();
// 将遍历取到的值存入map中
param.put("id",id);
param.put("name",name);
param.put("sn",sn);
// map是java的，此处需转json传递给前端（通过ObjectMapper的方法）,异常抛出
return new ObjectMapper().writeValueAsString(param);
}
}
② 修改前端页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>部门管理</title>
</head>
<body class="hold-transition skin-black sidebar-mini">
<!--引用外部代码片段 common目录的fragment文件中的link-->
<div th:replace="common/fragment :: link"></div>
<div class="wrapper">
<!--navbar 导航-->
<div th:replace="common/fragment :: navbar"></div>
<!--menu 菜单-->
<div th:replace="common/fragment :: menu"></div>
<div class="content-wrapper">
<section class="content-header">
<h1>部门管理</h1>
</section>
<section class="content">
<div class="box">
<!--高级查询--->
<form class="form-inline" id="searchForm" action="/department/list" method="post">
<input type="hidden" name="currentPage" id="currentPage" value="1">
<a href="#" class="btn btn-success btn-input" style="margin: 10px">
<span class="glyphicon glyphicon-plus"></span> 添加
</a>
</form>
<!--编写内容-->
<div class="box-body table-responsive ">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>编号</th>
<th>部门名称</th>
<th>部门编号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="department,start:${pageInfo.list}">
<td th:text="${start.count}">1</td>
<td th:text="${department.name}">保安部</td>
<td th:text="${department.sn}">BA</td>
<td>
<!--添加字段存储对象属性-->
<a href="#" class="btn btn-info btn-xs btn-input" th:data-json="${department.json}">
<span class="glyphicon glyphicon-pencil"></span> 编辑
</a>
<a class="btn btn-danger btn-xs btn-delete">
<span class="glyphicon glyphicon-trash"></span> 删除
</a>
</td>
</tr>
</tbody>
</table>
<div th:replace="common/fragment :: page"></div>
</div>
</div>
</section>
</div>
<div th:replace="common/fragment :: footer"></div>
</div>
<div class="modal fade" id="departmentModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">部门编辑</h4>
</div>
<!--单击保存时提交表单-->
<form action="/department/saveOrUpdate" method="post" id="departmentForm">
<input type="hidden" name="id" id="id">
<div class="modal-body">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" name="name" id="name" placeholder="名称">
</div>
<div class="form-group">
<label for="sn">缩写</label>
<input type="text" class="form-control" name="sn" id="sn" placeholder="缩写">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</form>
</div>
</div>
</div>
<!--单击添加时打开模态框-->
<script>
$('.btn-input').click(function () {
// 每次点击新增或编辑时应清空之前的数据
$('#departmentForm input').val('');
// 获取编辑按钮上的 data-json 的属性值（this表示事件源（可区分是新增还是编辑））
var data = $(this).data('json');
if(data){
// 有值 编辑
$('.modal-title').html("部门编辑")
// 通过id将值回显到对应位置上
$('#id').val(data.id);
$('#name').val(data.name);
$('#sn').val(data.sn);
}else{
// 无值 新增
$('.modal-title').html("部门新增")
}
// 打开模态框
$('#departmentModal').modal('show');
})
</script>
</body>
</html>
5 部门删除
删除分为硬删除（sql语句为delete，直接将数据从数据库中删除）与软删除（sql语句为update，表中含status字段，通过字段的值控制数据的展示，如默认值为1表示有效，改为0表示无效，查询时where条件增加status为1即可），用户确认删除前，应给与一定的提示，防止用户错误删除，这里可以使用SweetAlert2进行美化。由于很多页面都会用到删除功能，所以建议抽取出来。（分页也是）
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>部门管理</title>
</head>
<body class="hold-transition skin-black sidebar-mini">
<!--引用外部代码片段 common目录的fragment文件中的link-->
<div th:replace="common/fragment :: link"></div>
<div class="wrapper">
<!--navbar 导航-->
<div th:replace="common/fragment :: navbar"></div>
<!--menu 菜单-->
<div th:replace="common/fragment :: menu"></div>
<div class="content-wrapper">
<section class="content-header">
<h1>部门管理</h1>
</section>
<section class="content">
<div class="box">
<!--高级查询--->
<form class="form-inline" id="searchForm" action="/department/list" method="post">
<input type="hidden" name="currentPage" id="currentPage" value="1">
<a href="#" class="btn btn-success btn-input" style="margin: 10px">
<span class="glyphicon glyphicon-plus"></span> 添加
</a>
</form>
<!--编写内容-->
<div class="box-body table-responsive ">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>编号</th>
<th>部门名称</th>
<th>部门编号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="department,start:${pageInfo.list}">
<td th:text="${start.count}">1</td>
<td th:text="${department.name}">保安部</td>
<td th:text="${department.sn}">BA</td>
<td>
<!--添加字段存储对象属性-->
<a href="#" class="btn btn-info btn-xs btn-input" th:data-json="${department.json}">
<span class="glyphicon glyphicon-pencil"></span> 编辑
</a>
<!--有字符串拼接所以使用||-->
<a class="btn btn-danger btn-xs btn-delete" th:data-url="|/department/delete?id=${department.id}|">
<span class="glyphicon glyphicon-trash"></span> 删除
</a>
</td>
</tr>
</tbody>
</table>
<div th:replace="common/fragment :: page"></div>
</div>
</div>
</section>
</div>
<div th:replace="common/fragment :: footer"></div>
</div>
<div class="modal fade" id="departmentModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">部门编辑</h4>
</div>
<!--单击保存时提交表单-->
<form action="/department/saveOrUpdate" method="post" id="departmentForm">
<input type="hidden" name="id" id="id">
<div class="modal-body">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" name="name" id="name" placeholder="名称">
</div>
<div class="form-group">
<label for="sn">缩写</label>
<input type="text" class="form-control" name="sn" id="sn" placeholder="缩写">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</form>
</div>
</div>
</div>
<!--单击添加时打开模态框-->
<script>
//删除
$('.btn-delete').click(function (){
// 获取传递的url
let url=$(this).data('url')
Swal.fire({
title: '确认删除吗?',
text: "此操作不可逆!",
icon: 'warning',
// 是否开启第二个按钮
showCancelButton: true,
// 确认按钮颜色
confirmButtonColor: '#3085d6',
// 取消按钮颜色
cancelButtonColor: '#d33',
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then((result) => {
//result是点击操作所传递的值true或false
if(result.value) {
// 删除操作/department/delete?id=id
location.href=url
}
});
})
// 新增或编辑
$('.btn-input').click(function () {
// 每次点击新增或编辑时应清空之前的数据
$('#departmentForm input').val('');
// 获取编辑按钮上的 data-json 的属性值（this表示事件源（可区分是新增还是编辑））
var data = $(this).data('json');
if(data){
// 有值 编辑
$('.modal-title').html("部门编辑")
// 通过id将值回显到对应位置上
$('#id').val(data.id);
$('#name').val(data.name);
$('#sn').val(data.sn);
}else{
// 无值 新增
$('.modal-title').html("部门新增")
}
// 打开模态框
$('#departmentModal').modal('show');
})
</script>
</body>
</html>
1467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
