参照商品分类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;
    }