【项目】给资产分类页面添加分页功能

前言

在产线实习期间我们都是用PDCA高效思维法来进行任务书编写，受益颇多，因此开始尝试用此方法来记笔记。

1. Plan

在复现完资产分类功能的基础上，给列表添加一个分页功能。

2. Do

因为之前的操作都没有改过后端代码，因此这一次要先把后端和前端在本地先连接起来，之后在写代码部分。
第一步：前端vue.config.js里面吧target改为本地。
在这里插入图片描述
第二步：创建一个本地分支，并运行后端程序。

第三步：浏览器打开项目，但登录时发现报异常：
嵌套异常:nested exception is java.lang.NoClassDefFoundError：javax/xml/bind/DatatypeConverter
原因在于java版本问题：我装的是Java11，而项目用的java8,因为Java8功能太多导致冗杂，所以从 jdk9 之后就采用模块化，按需加载，因此会缺少了jaxb的jar包

解决：

        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.3.0</version>
        </dependency>

第四步：编写前端代码：参考若依管理系统源码分析-分页的实现以及post请求时的分页

添加分页组件，传入分页变量：

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

在data（）中设置好参数

     // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
    };

在methods修改好getList()方法：

    /** 查询资产分类列表 */
    getList() {
    
    
      this.loading = true;
      listCategory(this.queryParams).then((response) => {
    
    
        // this.categoryList = this.handleTree(response.data, "id", "pid");
        this.categoryList = this.handleTree(response.rows, "id", "pid");
        this.total = response.total;
        this.loading = false;
        
      });
    },

第五步：编写后端代码
因为之前的功能是只需要列表展示，所以control层代码如下

	/**
	 * 查询资产分类列表
	 */
	@GetMapping("/list")`在这里插入代码片`
	public AjaxResult list(AssetCategory assetCategory) {
    
    
		List<AssetCategory> list = assetCategoryService.selectAssetCategoryList(assetCategory);
		return AjaxResult.success(list);
	}

现在参考资产登记页面的分页功能，改进如下：

扫描二维码关注公众号，回复： 16964585 查看本文章

	@GetMapping("/list")
	public TableDataInfo list(AssetCategory assetCategory) {
    
    
		startPage(); // 此方法配合前端完成自动分页
		List<AssetCategory> list = assetCategoryService.selectAssetCategoryList(assetCategory);
		TableDataInfo tableDataInfo=new TableDataInfo();
		tableDataInfo.setRows(list);
		tableDataInfo.setTotal(list.size());
//		return AjaxResult.success(list);
		return tableDataInfo;
	}

效果如下：
在这里插入图片描述

3.Check

导师检查后发现两个问题：

因为分页功能在项目中很多地方都有，所以是会抽离出来写一个方法，来避免冗余代码，因此，并不需要我自己再写一次。
没有发现下拉树功能失效了

在这里插入图片描述

4. Action

第一个问题：
第一步：后端通过搜索startPage()找到公共分页方法。

	/**
	 * 响应请求分页数据
	 */
	@SuppressWarnings({
    
     "rawtypes", "unchecked" })
	protected TableDataInfo getDataTable(List<?> list) {
    
    
		TableDataInfo rspData = new TableDataInfo();
		rspData.setCode(HttpStatus.SUCCESS);
		rspData.setMsg("查询成功");
		rspData.setRows(list);
		rspData.setTotal(new PageInfo(list).getTotal());
		return rspData;
	}

第二步：把查询代码简化

	@GetMapping("/list")
	public TableDataInfo list(AssetCategory assetCategory) {
    
    
		startPage();
		List<AssetCategory> list = assetCategoryService.selectAssetCategoryList(assetCategory);
//		TableDataInfo tableDataInfo=new TableDataInfo();
//		tableDataInfo.setRows(list);
//		tableDataInfo.setTotal(list.size());
//		return AjaxResult.success(list);
		return getDataTable(list);
//		return tableDataInfo;
	}

第二个问题：
通过前端排查把下拉树查询代码更改如下：

	/** 查询部门下拉树结构 */
    getTreeselect() {
    
    
      listCategory().then(response => {
    
    
        this.categoryOptions = [];
        const data = {
    
     id: 0, title: '顶级节点', children: [] };
        // data.children = this.handleTree(response.data, "id", "pid");
        data.children = this.handleTree(response.rows, "id", "pid");
        this.categoryOptions.push(data);
      });
    },