参照商品分类id=6的标签,添加一个商品分类2,在新的标签中完成分页操作
复制一个itemcat.vue页面,命名为itemcat2.vue
在index.js添加新页面的路由导向
为itemcat2.vue添加搜索框与分页标签
<!-- 2.1定义一行 使用栅格-->
<el-row :gutter="20">
<el-col :span="9">
<!-- 3.定义搜索框 -->
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="findItemCatList">
<el-button slot="append" icon="el-icon-search" @click="findItemCatList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="showAddItemCatDialog">新增分类</el-button>
</el-col>
</el-row>
<!-- 定义分页组件 关于分页插件的属性说明
1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件
2.@current-change 当页数发生改变时,触发该函数
3.current-page 当前选中的页
4.page-sizes 页面数据展现的选项
5.page-size 默认选中的页数
6.layout 分页中展现的数据种类
7.total 记录总数
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNum"
:page-sizes="[5, 10, 20, 40]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
修改配置区的数据,
- 完善查询操作所需的数据,方法配置
- 及区分itemcat.vue和itemcat2.vue的查询方法。
return {
//分页数据
queryInfo: {
query: '',
pageNum: 1,
pageSize: 5
},
total:0,
methods: {
//修改查询方法名称,以供区分
async findItemCatList2() {
const { data: result } = await this.$http.get(
"/itemCat/findItemCatList2/3",{params: this.queryInfo,
//增加传输对象:传输页数,展现数量,查询属性
})
if (result.status !== 200) return this.$message.error("获取商品分类列表失败!!")
this.itemCatList = result.data.rows
this.total = result.data.total
console.log("总记录数:"+this.total)
},
handleSizeChange(pageSize){
//alert("每页展现的条数"+pageSize)
this.queryInfo.pageSize = pageSize
this.findItemCatList()
},
handleCurrentChange(pageNum){
//alert("页数:"+pageNum)
this.queryInfo.pageNum = pageNum
this.findItemCatList()
},
根据新编写的文件itemcat2.vue,编写项目业务接口文档:
商品列表展现
请求路径: /itemCat/findItemCatList2
请求类型: GET
请求参数: 后台使用PageResult对象接收
请求案例: 请求案例: /itemCat/findItemCatList2?query=查询关键字&pageNum=1&pageSize=10
参数名称 | 参数说明 | 备注信息 | |
---|---|---|---|
query | String | 用户查询的数据 | 可以为null |
pageNum | 分页查询的页数 | 必须赋值不能为null | |
pageSize | 分页查询的条数 | 必须赋值不能为null |
响应参数: SysResult对象 需要携带分页对象 PageResult
参数名称 | 参数说明 | 备注信息 |
---|---|---|
status | 状态信息 | 200表示服务器请求成功 201表示服务器异常 |
msg | 服务器返回的提示信息 | 可以为null |
data | 服务器返回的业务数据 | 返回值PageResult对象 |
PageResult 对象介绍
参数名称 | 参数类型 | 参数说明 | 备注信息 |
---|---|---|---|
query | String | 用户查询的数据 | 可以为null |
pageNum | Integer | 查询页数 | 不能为null |
pageSize | Integer | 查询条数 | 不能为null |
total | Long | 查询总记录数 | 不能为null |
rows | Object | 分页查询的结果 | 不能为null |
后端Controller层
@GetMapping("findItemCatList2")
public SysResult findItemCatList2( PageResult pageResult ){
System.out.println(pageResult);
System.out.println("查询商品分类信息");
itemCatService.findItemCatList2(pageResult);
System.out.println(pageResult);
if( pageResult.getRows() == null){
return SysResult.fail();
}
return SysResult.success(pageResult);
}
service层
@Override
public PageResult findItemCatList2( PageResult pageResult) {
//以map形式获取所有的标签
Map<Integer,List<ItemCat>> allmap = gatMap(3);
QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>();
queryWrapper.like("name", pageResult.getQuery()).eq("level", 1);
//创建Page对象,并像其中填充对象
IPage<ItemCat> page = new Page<>(pageResult.getPageNum()
, pageResult.getPageSize());
//查找对应条件的以及标签
page = itemCatMapper.selectPage(page,queryWrapper);
List<ItemCat> queryList =(List<ItemCat>)page.getRecords();
//为查出来的以及标签添加子类的二级三级标签
for(ItemCat itemCat : queryList){
//根据一级标签的id,获取对应二级标签的parentId
Integer parentId = itemCat.getId();
//从map中获取对应key值的二级标签list集合
List<ItemCat> twoList = allmap.get(parentId);
//将二级标签注入一级标签的Children属性中
itemCat.setChildren(twoList);
//判断二级集合是否存在存在才进行遍历补全三级标签,不存在则直接跳过
if(twoList == null || twoList.size() ==0 ){
continue;
}
for(ItemCat twoItemCat : twoList){
//从map中获取对应key值的三级标签list集合
List<ItemCat> threeList = allmap.get(twoItemCat.getId());
twoItemCat.setChildren(threeList);
}
}
//整理输出的数据
pageResult.setRows(page.getRecords()).setTotal(page.getTotal());
return pageResult;
}