VUE（5）后端分页

最新推荐文章于 2023-06-27 23:06:58 发布

worldbank021419

最新推荐文章于 2023-06-27 23:06:58 发布

阅读量1.3k

点赞数

分类专栏：随笔文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/worldbank021419/article/details/127575423

版权

随笔专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前言：只包含基本逻辑代码

1、后端代码：

1.1、新建实体类 PageInfo.java


public class PageInfo {
    private Integer pageSize;
    private Integer pageIndex;

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getPageIndex() {
        return pageIndex;
    }

    public void setPageIndex(Integer pageIndex) {
        this.pageIndex = pageIndex;
    }

    @Override
    public String toString() {
        return "TablePage{" +
                "pageSize=" + pageSize +
                ", pageIndex=" + pageIndex +
                '}';
    }

    public PageInfo(Integer pageSize, Integer pageIndex) {
        this.pageSize = pageSize;
        this.pageIndex = pageIndex;
    }

    public PageInfo() {
    }
}

1.2、新建Controller层方法

1.2.1、查询得到所有对象，返回对象数量，也就是页面表格中的总行数

    @GetMapping("/getRowAmount")
    public Result getRowAmount() {
        List<DiskFile> fileList = diskFileService.getFileList();

        boolean flag = ( fileList != null );
        if(flag)
            return new Result(Code.QUERY_OK , (Integer)fileList.size() , "查询成功");
        else
            return new Result(Code.QUERY_ERRO , null , "查询失败");
    }

1.2.2、查询得到所有对象，分页处理，返回指定页码的页面数据

   @PostMapping("/getTablePage")
    public Result getTablePage(@RequestBody PageInfo pageInfo){
        System.out.println(pageInfo.toString());

        List<DiskFile> fileList = diskFileService.getFileList();
        if(fileList != null ){
            //当前页面第一条数据的编号:   startIndex = pageIndex * pageSize
            int startIndex = (pageInfo.getPageIndex() - 1) * pageInfo.getPageSize();
            //当前页面最后一条数据的理论编号:    tempIndex = startIndex + pageSize
            int tempIndex = startIndex + pageInfo.getPageSize();
            //当前页面最后一条数据的实际编号（防止编号下表越界）
            int endIndex  = tempIndex < fileList.size() ? tempIndex : fileList.size();
            //截取当前页面数据
            fileList = fileList.subList(startIndex,endIndex);
            return new Result(Code.QUERY_OK , fileList , String.valueOf(fileList.size()));
        }
        else{
            return new Result(Code.QUERY_ERRO , null , "查询失败");
        }
    }

2、前端代码：

2.1、新建页面表格

			<!-- 信息管理表格		：el-table height="600" 默认固定表头，并且设置表格窗口高度-->
			<el-table
				border
				height="600"
			    style="width: 100%"
			    :data="pageData"
			    >
				<!-- <el-table-column type="index" width="50"> </el-table-column> -->
				<!-- el-table-column fixed	允许固定列 -->
			    <el-table-column label="文件编号" prop="fileId" width="200" fixed> </el-table-column>
			    <el-table-column label="文件名称" prop="fileName" width="200"></el-table-column>
			    <el-table-column label="文件路径" prop="fileParent" width="200"> </el-table-column>
			    <el-table-column label="文件类型" prop="fileType" width="200"></el-table-column>
				<!-- <el-table-column label="是否被删除" prop="statusDeleted" width="200"></el-table-column> -->
				<el-table-column label="用户编号" prop="userId" width="200"></el-table-column>
            </el-table>

2.2、新建页码框

<!-- 分页功能页码框 -->
			
			<!-- background 页码框背景样式 -->
			<!-- layout 页码框布局样式 -->
			<!-- page-size 表格每页包含的行数 -->
			<!-- @current-change 页码切换事件 -->
			<!-- current-page	当前页码 -->
			<!-- total	总行数 -->
			<el-pagination
			  background
			  layout="prev, pager, next"	
			  :page-size="pageSize"  
			  @current-change="currentChangeHandle"  
			  :current-page="currentPageIndex"  
			  :total="rowAmount">
			</el-pagination>

2.3、定义data()模块：

		data(){
			return{
				//分页功能数据
				pageSize: 5,			//每页行数	
				pageData: [],			//当前页的数据
				pageAmount: 0,			//总页数
				rowAmount: 0,			//总行数
				currentPageIndex: 1,	//当前页码
			}
		},

2.4、定义method模块：

2.4.1、获取页面表格的总行数和总页数

			initPageInfo(){
				//定义that浅拷贝this，防止axios异步操作异常
				let that = this;	
				//回调函数访问后端
				this.$axios({
			        method: 'GET',
			        url:'http://localhost:8080/file/getRowAmount',
			    }).then(function (response) {
					//	获取页面表格的总行数
					that.rowAmount = response.data.object;
					//	总页数 = 总行数 / 每页行数
					that.pageAmount = Math.ceil(that.rowAmount / that.pageSize) || 1 ;
			    }).catch(function (error) {
			        console.log(error);
			    });
			},

2.5、发生页码切换事件时，获取当前页码，调用页面加载方法


			currentChangeHandle (currentPageIndex) {
			        this.currentPageIndex = currentPageIndex;
					this.getPageByIndex(currentPageIndex);
			},

2.6、页面加载方法，渲染页面数据，分页到此完成

			//根据当前页码，加载分页数据
			getPageByIndex(currentPageIndex){

                //定义that，浅拷贝this
				let that = this;  

                //回调函数访问后端      
				this.$axios({

                    //信息头，设置发送和接受数据的编码格式
					headers: {            
						'Accept': 'application/json',
						'Content-Type': 'application/json'
					},
					dataType: "json",      
				    method: 'POST',      
				    url:'http://localhost:8080/file/getTablePage',

                    //带参访问，页码和页面容量
					data:{
						pageIndex: currentPageIndex ,
						pageSize: this.pageSize,
					},
				}).then(function (response) {
                    //接受页面数据
					that.pageData = response.data.object;
				}).catch(function (error) {
				    console.log(error);
				});
			},