4. 检查项分页
本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据格式。
请求参数包括页码、每页显示记录数、查询条件。
请求参数的json格式为：{currentPage:1,pageSize:10,queryString:''itcast''}
后台响应数据包括总记录数、当前页需要展示的数据集合。
响应数据的json格式为：{total:1000,rows:[]}
4.1 完善页面
4.1.1 定义分页相关模型数据
pagination : { / / 分页相关模型数据
currentPage : 1 , / / 当前页码
pageSize : 10 , / / 每页显示的记录数
total : 0 , / / 总记录数
queryString : null / / 查询条件
} ,
dataList : [] , / / 当前页要展示的分页列表数据
4.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询，为了能够在checkitem.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法
/ / 钩子函数，VUE对象初始化完成后自动执行
created ( ) {
this.findPage ( ) ;
} / / 分页查询
findPage ( ) {
/ / 分页参数
var param = {
currentPage : this.pagination.currentPage , / / 页码
pageSize : this.pagination.pageSize , / / 每页显示的记录数
queryString : this.pagination.queryString / / 查询条件
} ;
/ / 请求后台
axios.post ( "/checkitem/findPage.do" , param ) . then ( ( response ) = > {
/ / 为模型数据赋值，基于VUE的双向绑定展示到页面
this.dataList = response. data .rows;
this.pagination.total = response. data .total;
} ) ;
}
4.1.3 完善分页方法执行时机
除了在created钩子函数中调用findPage方法查询分页数据之外，当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
为查询按钮绑定单击事件，调用findPage方法
< el‐ button @click = "findPage()" class = "dalfBut" > 查询 < / el‐ button >
为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange
< el‐pagination
class = "pagiantion"
@current‐change = "handleCurrentChange"
: current‐page = "pagination.currentPage"
: page‐size = "pagination.pageSize"
layout = "total, prev, pager, next, jumper"
: total = "pagination.total" >
< / el‐pagination >
定义handleCurrentChange方法
/ / 切换页码
handleCurrentChange ( currentPage ) {
/ / currentPage为切换后的页码
this.pagination.currentPage = currentPage;
this.findPage ( ) ;
}
4.2 后台代码
4.2.1 Controller
在CheckItemController中增加分页查询方法
/ / 分页查询
@RequestMapping ( "/findPage" )
public PageResult findPage ( @RequestBody QueryPageBean queryPageBean ) {
PageResult pageResult = checkItemService.pageQuery (
queryPageBean.getCurrentPage ( ) ,
queryPageBean.getPageSize ( ) ,
queryPageBean.getQueryString ( ) ) ;
return pageResult;
}
4.2.2
服务接口
在 CheckItemService
服务接口中扩展分页查询方法
public PageResult pageQuery ( Integer currentPage , Integer pageSize , String
queryString ) ;
4.2.3
服务实现类
在 CheckItemServiceImpl
服务实现类中实现分页查询方法，基于 Mybatis 分页助手插件 实现分页
public PageResult pageQuery ( Integer currentPage , Integer pageSize , String
queryString ) {
PageHelper.startPage ( currentPage , pageSize ) ;
Page < CheckItem > page = checkItemDao.selectByCondition ( queryString ) ;
return new PageResult ( page.getTotal ( ) , page.getResult ( ) ) ;
}4.2.4 Dao
接口
在 CheckItemDao
接口中扩展分页查询方法
public Page < CheckItem > selectByCondition ( String queryString ) ;
4.2.5 Mapper
映射文件
在 CheckItemDao.xml
文件中增加 SQL 定义
< select id = "selectByCondition" parameterType = "string"
resultType = "com.itheima.pojo.CheckItem" >
select * from t_checkitem
< if test = "value != null and value.length > 0" >
where code = #{value} or name = #{value}
< / if >
< / select >
5. 删除检查项
5.1 完善页面
为了防止用户误操作，点击删除按钮时需要弹出确认删除的提示，用户点击取消则不做任何操作，用户点击确定按钮再提交删除请求。
5.1.1 绑定单击事件
需要为删除按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数
< el‐ button size = "mini" type = "danger" @click = "handleDelete(scope.row)" > 删
除 < / el‐ button > / / 删除
handleDelete ( row ) {
alert ( row. id ) ;
}5.1.2
弹出确认操作提示
用户点击删除按钮会执行 handleDelete
方法，此处需要完善 handleDelete 方法，弹出确 认提示信息。 ElementUI 提供了 $confirm 方法来实现确认提示信息弹框效果
/ / 删除
handleDelete ( row ) {
/ / alert ( row. id ) ;
this.$confirm ( "确认删除当前选中记录吗？" , "提示" ,
{ type : 'warning' } ) . then ( ( ) = > {
/ / 点击确定按钮时只需此处代码
alert ( '用户点击的是确定按钮' ) ;
} ) ;
}5.1.3
发送请求
如果用户点击确定按钮就需要发送 ajax
请求，并且将当前检查项的 id 作为参数提交到后台 进行删除操作
/ / 删除
handleDelete ( row ) {
/ / alert ( row. id ) ;
this.$confirm ( "确认删除吗？" , "提示" , { type : 'warning' } ) . then ( ( ) = > {
/ / 点击确定按钮时只需此处代码
/ / alert ( '用户点击的是确定按钮' ) ;
axios. get ( "/checkitem/delete.do?id=" + row. id ) . then ( ( res ) = > {
if ( !res. data .flag ) {
/ / 删除失败
this.$ message . error ( res. data . message ) ;
} else {
/ / 删除成功
this.$ message ( {
message : res. data . message ,
type : 'success'
} ) ;
/ / 调用分页，获取最新分页数据
this.findPage ( ) ;
}
} ) ;
} ) ;
}5.2
后台代码
5.2.1 Controller
在 CheckItemController
中增加删除方法
/ / 删除
@RequestMapping ( "/delete" )
public Result delete ( Integer id ) {
try {
checkItemService. delete ( id ) ;
} catch ( RuntimeException e ) {
return new Result ( false , e.getMessage ( ) ) ;
} catch ( Exception e ) {
return new Result ( false , MessageConstant.DELETE_CHECKITEM_FAIL ) ;
}
return new Result ( true , MessageConstant.DELETE_CHECKITEM_SUCCESS ) ;
}
5.2.2
服务接口
在 CheckItemService
服务接口中扩展删除方法
public void delete ( Integer id ) ;
5.2.3
服务实现类
注意：不能直接删除，需要判断当前检查项是否和检查组关联，如果已经和检查组进行 了关联则不允许删除
/ / 删除
public void delete ( Integer id ) throws RuntimeException {
/ / 查询当前检查项是否和检查组关联
long count = checkItemDao.findCountByCheckItemId ( id ) ;
if ( count > 0 ) {
/ / 当前检查项被引用，不能删除
throw new RuntimeException ( "当前检查项被引用，不能删除" ) ;
}
checkItemDao.deleteById ( id ) ;
}5.2.4 Dao
接口
在 CheckItemDao
接口中扩展方法 findCountByCheckItemId 和 deleteById
public void deleteById ( Integer id ) ;
public long findCountByCheckItemId ( Integer checkItemId ) ;5.2.5 Mapper
映射文件
在 CheckItemDao.xml
中扩展 SQL 语句
< !‐‐删除‐‐ >
< delete id = "deleteById" parameterType = "int" >
delete from t_checkitem where id = #{id}
< / delete >
< !‐‐根据检查项 id 查询中间关系表‐‐ >
< select id = "findCountByCheckItemId" resultType = "long"
parameterType = "int" >
select count ( * ) from t_checkgroup_checkitem where checkitem_id = #
{ checkitem_id }
< / select >
6. 编辑检查项
6.1 完善页面
用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。
6.1.1 绑定单击事件
需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数
< el‐ button type = "primary" size = "mini" @click = "handleUpdate(scope.row)" > 编
辑 < / el‐ button >
handleUpdate ( row ) {
alert ( row ) ;
}6.1.2
弹出编辑窗口回显数据
当前页面中的编辑窗口已经提供好了，默认处于隐藏状态。在
handleUpdate
方法中需要
将编辑窗口展示出来，并且需要发送 ajax
请求查询当前检查项数据用于回显
/ / 弹出编辑窗口
handleUpdate ( row ) {
/ / 发送请求获取检查项信息
axios. get ( "/checkitem/findById.do?id=" + row. id ) . then ( ( res ) = > {
if ( res. data .flag ) {
/ / 设置编辑窗口属性，dialogFormVisible 4 Edit为 true 表示显示
this.dialogFormVisible 4 Edit = true ;
/ / 为模型数据设置值，基于VUE双向数据绑定回显到页面
this.formData = res. data . data ;
} else {
this.$ message . error ( "获取数据失败，请刷新当前页面" ) ;
}
} ) ;
}
6.1.3
发送请求
在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件 并提供处理函数
< el‐ button type = "primary" @click = "handleEdit()" > 确定 < / el‐ button > / / 编辑
handleEdit ( ) {
/ / 表单校验
this.$refs['dataEditForm'].validate ( ( valid ) = > {
if ( valid ) {
/ / 表单校验通过，发送请求
axios.post ( "/checkitem/edit.do" , this.formData ) . then ( ( response ) = > {
/ / 隐藏编辑窗口
this.dialogFormVisible 4 Edit = false ;
if ( response. data .flag ) {
/ / 编辑成功，弹出成功提示信息
this.$ message ( {
message : response. data . message ,
type : 'success'
} ) ;
} else {
/ / 编辑失败，弹出错误提示信息
this.$ message . error ( response. data . message ) ;
}
} ) .finally ( ( ) = > {
/ / 重新发送请求查询分页数据
this.findPage ( ) ;
} ) ;
} else {
/ / 表单校验失败
this.$ message . error ( "表单数据校验失败" ) ;
return false ;
}
} ) ;
}handleEdit
6.2
后台代码
6.2.1 Controller
在 CheckItemController
中增加编辑方法
/ / 编辑
@RequestMapping ( "/edit" )
public Result edit ( @RequestBody CheckItem checkItem ) {
try {
checkItemService.edit ( checkItem ) ;
} catch ( Exception e ) {
return new Result ( false , MessageConstant.EDIT_CHECKITEM_FAIL ) ;
}
return new Result ( true , MessageConstant.EDIT_CHECKITEM_SUCCESS ) ;
}
@RequestMapping ( "/findById" )
public Result findById ( Integer id ) {
try {
CheckItem checkItem = checkItemService.findById ( id ) ;
return new Result ( true ,
MessageConstant.QUERY_CHECKITEM_SUCCESS , checkItem ) ;
} catch ( Exception e ) {
e.printStackTrace ( ) ;
/ / 服务调用失败
return new Result ( false , MessageConstant.QUERY_CHECKITEM_FAIL ) ;
}
}
6.2.2
服务接口
在 CheckItemService
服务接口中扩展编辑方法
public void edit ( CheckItem checkItem ) ;
public CheckItem findById ( Integer id ) ;
6.2.3
服务实现类
在 CheckItemServiceImpl
实现类中实现编辑方法
/ / 编辑
public void edit ( CheckItem checkItem ) {
checkItemDao.edit ( checkItem ) ;
}
public CheckItem findById ( Integer id ) {
return checkItemDao.findById ( id ) ;
}
6.2.4 Dao
接口
在 CheckItemDao
接口中扩展 edit 方法
public void edit ( CheckItem checkItem ) ;
public CheckItem findById ( Integer id ) ;
6.2.5 Mapper
映射文件
在 CheckItemDao.xml
中扩展 SQL 语句
< !‐‐编辑‐‐ >
< update id = "edit" parameterType = "com.itheima.pojo.CheckItem" >
update t_checkitem
< set >
< if test = "name != null" >
name = #{name},
< / if >
< if test = "sex != null" >
sex = #{sex},
< / if >
< if test = "code != null" >
code = #{code},
< / if >
< if test = "age != null" >
age = #{age},
< / if >
< if test = "price != null" >
price = #{price},
< / if >
< if test = "type != null" >
type = #{type},
< / if >
< if test = "attention != null" >
attention = #{attention},
< / if >
< if test = "remark != null" >
20天企业开发实战品优购电商系统开发下（11-20天+配置资料源码）
视频链接：https://pan.baidu.com/s/1RJK9jumxt9MARAWohy1E3Q
提取码：5b74
