当前位置: 首页 > news >正文

Vue3+Element plus+pageHelper实现分页

安装element plus

npm install element-plus --save

引入

修改main.js:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

后端

pom.xml:

<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId>
</dependency>

controller:

package com.xwj.page_helper.controller;import com.github.pagehelper.PageInfo;
import com.xwj.page_helper.entity.Category;
import com.xwj.page_helper.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import java.util.List;/*** @Description 欢迎页* @Author yuki* @Date 2023/8/8 17:08* @Version 1.0**/
@RestController
@RequestMapping("category")
public class CategoryController {@AutowiredCategoryService categoryService;@GetMapping("/getPage")public PageInfo<Category> getPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){return categoryService.getPage(pageNum, pageSize);}
}

service:

package com.xwj.page_helper.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xwj.page_helper.entity.Category;
import com.xwj.page_helper.mapper.CategoryMapper;
import com.xwj.page_helper.service.CategoryService;
import org.springframework.stereotype.Service;import java.util.List;/*** @Description TODO* @Author yuki* @Date 2023/8/10 14:30* @Version 1.0**/
@Service
public class CategoryServiceImpl extends ServiceImpl<CategoryMapper, Category> implements CategoryService {@Overridepublic PageInfo<Category> getPage(int pageNum, int pageSize) {PageHelper.startPage(pageNum, pageSize);List<Category> categories = baseMapper.selectAll();PageInfo<Category> pageInfo = new PageInfo<>(categories);return pageInfo;}
}

前端

vue:

<template><el-table :data="tableData.list" style="width: 100%"><el-table-column prop="id" label="id" width="180" /><el-table-column prop="name" label="name" width="180" /><el-table-column prop="parentId" label="parentId" /><el-table-column prop="isParent" label="isParent" /><el-table-column prop="sort" label="sort" /></el-table><div class="example-pagination-block"><el-pagination layout="prev, pager, next" :total="parseInt(pageInfo.total)"  @size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><script setup>
import axios from 'axios'
import { onMounted,reactive } from 'vue';// 注意reactive可能遇到响应失效的情况,可使用ref([]) https://blog.csdn.net/m0_57033755/article/details/129043116
const tableData = reactive({list: []
})
const pageInfo = reactive({currentPage: 1,pageSize: 5,total: undefined
})function handleSizeChange(val){getData(val, pageInfo.pageSize)
}
function handleCurrentChange(val){getData(val, pageInfo.pageSize)
}
function getData(currentPage, pageSize){axios({method: 'GET',url: '/local/page-helper/category/getPage',params: {'pageNum': currentPage, 'pageSize': pageSize}}).then(function(res){pageInfo.total = res.data.totaltableData.list = res.data.list})
}onMounted(() => {getData(1,5)
})
</script>
http://www.lryc.cn/news/118311.html

相关文章:

  • 外贸路上那些哭笑不得的事情
  • 双端列表 —— Deque 接口概述,使用ArrayDeque实现队列和双端队列数据结构
  • 构建可观测架构,从这5个方面着手
  • 前端面试的性能优化部分(7)每天10个小知识点
  • 【云原生】kubernetes中容器的资源限制
  • java Long型数据返回到前端失进度问题解决
  • 【设计模式】-策略模式:优雅处理条件逻辑
  • SpringBoot整合多数据源
  • CLIP论文精度
  • LouvainMethod分布式运行的升级之路
  • 【Node.js】低代码平台源码
  • docker 部署 xxl-job-admin
  • c++(空间配置器)[32]
  • Linux系列之解压文件
  • 为什么重写equals方法时必须重写hashcode方法
  • java导入excel图片处理
  • 【Rust】Rust学习 第四章认识所有权
  • 学习C语言第三天 :关系操作符、逻辑操作符
  • Jenkins自动化打包脚本
  • 一百五十、Kettle——Kettle官网下载地址
  • 使用 Visual Studio Code 调试 CMake 脚本
  • 【云原生】Docker 详解(二):Docker 架构及工作原理
  • 微服务 云原生:基于 Gogs + Drone 实现 CI/CD 自动化
  • ADO.NET之SQL Server
  • Nginx负载均衡(重点)
  • 第一章 SpringBoot入门
  • JavaScript Es6_2笔记 (深入对象 + 内置构造函数 + 包装类型)+包含实例方法
  • 尼科彻斯定理
  • 主数据管理案例-中国外运
  • 改进DevSecOps框架的 5 大关键技术