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

本是古典何须时尚 2023-10-03 20:09 0阅读 0赞

### 前言 ###

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

### 1. Plan ###

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

### 2. Do ###

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

第三步：浏览器打开项目，但登录时发现报异常：  
`嵌套异常: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请求时的分页 ][-_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);
    	}

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

@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;
    	}

效果如下：  
![在这里插入图片描述][1c5e5784c2914cdda68a013f1976f05f.png]

### 3.Check ###

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

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

![在这里插入图片描述][c797680cc3314e4bafec421115f9a0f6.png]  
![在这里插入图片描述][681f931463b3494b9f14b1649580964b.png]

### 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);
          });
        },

[028f03911be24ed6b83d1e57611213e3.png]: https://img-blog.csdnimg.cn/028f03911be24ed6b83d1e57611213e3.png
[a3a4b3c752024e65a4e8d0e18b51726c.png]: https://img-blog.csdnimg.cn/a3a4b3c752024e65a4e8d0e18b51726c.png
[-_post_]: https://www.cnblogs.com/badaoliumangqizhi/p/13507493.html
[1c5e5784c2914cdda68a013f1976f05f.png]: https://img-blog.csdnimg.cn/1c5e5784c2914cdda68a013f1976f05f.png
[c797680cc3314e4bafec421115f9a0f6.png]: https://img-blog.csdnimg.cn/c797680cc3314e4bafec421115f9a0f6.png
[681f931463b3494b9f14b1649580964b.png]: https://img-blog.csdnimg.cn/681f931463b3494b9f14b1649580964b.png