4. 检查项分页
本项目所有分页功能都是基于ajax的异步请求来完成的,请求参数和后台响应数据格式都使用json数据格式。
请求参数包括页码、每页显示记录数、查询条件。
请求参数的json格式为:{currentPage:1,pageSize:10,queryString:''itcast''}
后台响应数据包括总记录数、当前页需要展示的数据集合。
响应数据的json格式为:{total:1000,rows:[]}
4.1 完善页面
4.1.1 定义分页相关模型数据
1
2
3
4
5
6
7
|
pagination
:
{
/
/
分页相关模型数据
currentPage
:
1
,
/
/
当前页码
pageSize
:
10
,
/
/
每页显示的记录数
total
:
0
,
/
/
总记录数
queryString
:
null
/
/
查询条件
}
,
dataList
:
[]
,
/
/
当前页要展示的分页列表数据
|
4.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询,为了能够在checkitem.html页面加载后直接可以展示分页数据,可以在VUE提供的钩子函数created中调用findPage方法
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
/
/
钩子函数,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方法
1
|
<
el‐
button
@click
=
"findPage()"
class
=
"dalfBut"
>
查询
<
/
el‐
button
>
|
为分页条组件绑定current-change事件,此事件是分页条组件自己定义的事件,当页码改变时触发,对应的处理函数为handleCurrentChange
1
2
3
4
5
6
7
8
|
<
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方法
1
2
3
4
5
6
|
/
/
切换页码
handleCurrentChange
(
currentPage
)
{
/
/
currentPage为切换后的页码
this.pagination.currentPage
=
currentPage;
this.findPage
(
)
;
}
|
4.2 后台代码
4.2.1 Controller
在CheckItemController中增加分页查询方法
1
2
3
4
5
6
7
8
9
|
/
/
分页查询
@RequestMapping
(
"/findPage"
)
public PageResult findPage
(
@RequestBody QueryPageBean queryPageBean
)
{
PageResult pageResult
=
checkItemService.pageQuery
(
queryPageBean.getCurrentPage
(
)
,
queryPageBean.getPageSize
(
)
,
queryPageBean.getQueryString
(
)
)
;
return
pageResult;
}
|
在 CheckItemService 服务接口中扩展分页查询方法
1
2
|
public PageResult pageQuery
(
Integer currentPage
,
Integer pageSize
,
String
queryString
)
;
|
在 CheckItemServiceImpl 服务实现类中实现分页查询方法,基于 Mybatis 分页助手插件 实现分页
1
2
3
4
5
6
|
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
(
)
)
;
}
|
在 CheckItemDao 接口中扩展分页查询方法
1
|
public Page
<
CheckItem
>
selectByCondition
(
String queryString
)
;
|
4.2.5 Mapper 映射文件
在 CheckItemDao.xml 文件中增加 SQL 定义
1
2
3
4
5
6
7
|
<
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 绑定单击事件
需要为删除按钮绑定单击事件,并且将当前行数据作为参数传递给处理函数
1
2
3
4
5
|
<
el‐
button
size
=
"mini"
type
=
"danger"
@click
=
"handleDelete(scope.row)"
>
删
除
<
/
el‐
button
>
/
/
删除
handleDelete
(
row
)
{
alert
(
row.
id
)
;
}
|
用户点击删除按钮会执行 handleDelete 方法,此处需要完善 handleDelete 方法,弹出确 认提示信息。 ElementUI 提供了 $confirm 方法来实现确认提示信息弹框效果
1
2
3
4
5
6
7
8
9
|
/
/
删除
handleDelete
(
row
)
{
/
/
alert
(
row.
id
)
;
this.$confirm
(
"确认删除当前选中记录吗?"
,
"提示"
,
{
type
:
'warning'
}
)
.
then
(
(
)
=
>
{
/
/
点击确定按钮时只需此处代码
alert
(
'用户点击的是确定按钮'
)
;
}
)
;
}
|
如果用户点击确定按钮就需要发送 ajax 请求,并且将当前检查项的 id 作为参数提交到后台 进行删除操作
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/
/
删除
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.1 Controller
在 CheckItemController 中增加删除方法
01
02
03
04
05
06
07
08
09
10
11
12
|
/
/
删除
@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
)
;
}
|
在 CheckItemService 服务接口中扩展删除方法
1
|
public void
delete
(
Integer
id
)
;
|
注意:不能直接删除,需要判断当前检查项是否和检查组关联,如果已经和检查组进行 了关联则不允许删除
01
02
03
04
05
06
07
08
09
10
|
/
/
删除
public void
delete
(
Integer
id
)
throws RuntimeException
{
/
/
查询当前检查项是否和检查组关联
long count
=
checkItemDao.findCountByCheckItemId
(
id
)
;
if
(
count
>
0
)
{
/
/
当前检查项被引用,不能删除
throw
new
RuntimeException
(
"当前检查项被引用,不能删除"
)
;
}
checkItemDao.deleteById
(
id
)
;
}
|
在 CheckItemDao 接口中扩展方法 findCountByCheckItemId 和 deleteById
1
2
|
public void deleteById
(
Integer
id
)
;
public long findCountByCheckItemId
(
Integer checkItemId
)
;
|
在 CheckItemDao.xml 中扩展 SQL 语句
01
02
03
04
05
06
07
08
09
10
|
<
!‐‐删除‐‐
>
<
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 绑定单击事件
需要为编辑按钮绑定单击事件,并且将当前行数据作为参数传递给处理函数
1
2
|
<
el‐
button
type
=
"primary"
size
=
"mini"
@click
=
"handleUpdate(scope.row)"
>
编
辑
<
/
el‐
button
>
|
1
2
3
|
handleUpdate
(
row
)
{
alert
(
row
)
;
}
|
将编辑窗口展示出来,并且需要发送 ajax 请求查询当前检查项数据用于回显
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
/
/
弹出编辑窗口
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
(
"获取数据失败,请刷新当前页面"
)
;
}
}
)
;
}
|
在编辑窗口中修改完成后,点击确定按钮需要提交请求,所以需要为确定按钮绑定事件 并提供处理函数 handleEdit
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<
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
;
}
}
)
;
}
|
6.2.1 Controller
在 CheckItemController 中增加编辑方法
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/
/
编辑
@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
)
;
}
}
|
在 CheckItemService 服务接口中扩展编辑方法
1
2
|
public void edit
(
CheckItem checkItem
)
;
public CheckItem findById
(
Integer
id
)
;
|
在 CheckItemServiceImpl 实现类中实现编辑方法
1
2
3
4
5
6
7
|
/
/
编辑
public void edit
(
CheckItem checkItem
)
{
checkItemDao.edit
(
checkItem
)
;
}
public CheckItem findById
(
Integer
id
)
{
return
checkItemDao.findById
(
id
)
;
}
|
在 CheckItemDao 接口中扩展 edit 方法
1
2
|
public void edit
(
CheckItem checkItem
)
;
public CheckItem findById
(
Integer
id
)
;
|
在 CheckItemDao.xml 中扩展 SQL 语句
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<
!‐‐编辑‐‐
>
<
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"
>
|
视频链接:http://yun.itheima.com/course/295.html?stt
提取码:epxm
20天企业开发实战品优购电商系统开发下(11-20天+配置资料源码)
视频链接:https://pan.baidu.com/s/1RJK9jumxt9MARAWohy1E3Q
提取码:5b74