Vue3+springboot+mybatis-pius实现分页功能

前端部分

首先创建前端工程项目，我这里使用的是Webstorm

安装各种依赖，我用的是element-plus，组件可以查看官方网站[element-plus](https://element-plus.gitee.io/zh-CN)
**main.js引入依赖包**

App.vue没啥好说的，加载一个路由

Home.vue为详细页面**el-table**为表格数据，从后端加载过来的，script脚本部分代码

<script>
import {Search} from "@element-plus/icons";export default {name: "HomeName",component: {Search},data() {return {tableData: [],total: 0,Search,query: {pageNo: 1,pageSize: 10,name: ''},}},mounted() {this.getList()},methods: {getList() {this.axios({url: 'http://localhost:8080/area/list',method: 'get',params: this.query}).then(res => {if (res.status === 200) {this.total = res.data.totalthis.tableData = res.data.records}}).catch(error => {this.$message({type: 'error',message: error})})},handleSizeChange(newSize) {this.query.pageSize = newSizethis.getList()},handleCurrentChange(newPage) {this.query.pageNo = newPagethis.getList()},search() {this.getList()}}
}
</script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/e7cbcbd4dc7e41a3991f9c3741c6fa10.png)

route为路由配置

后端部分

后端主要是使用了mybatis分页插件，官方文档也有说明

所有项目启动完毕，预览效果，查询所有行政区

代码放到了gitee，感兴趣的朋友可以下载下来试一下

前端代码：area_web
后端代码：area

Vue3+springboot+mybatis-pius实现分页功能相关推荐

springboot+mybatis实现数据分页(三种方式)
项目准备 1.创建用户表 2.使用spring初始化向导快速创建项目,勾选mybatis,web,jdbc,driver 添加lombok插件 <?xml version="1.0&q ...
毕设（一）Vue3 + SpringBoot + MyBatis搭建一个简单前后端分离项目
一.Vue项目搭建 1.打开IDEA,创建Vue.js项目demo-vue 项目结构 2.在components目录下创建vue组件UserMan.vue <template><di ...
mysql carnation_14 springboot+mybatis集成pageHelper分页
1.pom依赖 com.github.pagehelper pagehelper-spring-boot-starter 1.2.3 2.分页配置application.properties page ...
spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能
文章目录前言正文业务场景后端 pom.xml application.yml 实体类video.java和User.java----映射VideoMapper.xml----VideoMapp ...
mybatis驼峰命名属性功能与配置
1.本例环境: springboot + mybatis + IntelliJ IDEA 2.功能: 数据库字段,一般都用下划线分隔例如employee表的姓名字段last_ ...
SpringBoot + Mybatis + Druid + PageHelper 实现多数据源并分页
点击关注公众号,Java干货及时送达本篇文章主要讲述的是SpringBoot整合Mybatis.Druid和PageHelper 并实现多数据源和分页.其中SpringBoot整合Mybatis这块 ...
SpringBoot+Mybatis+ Druid+PageHelper 实现多数据源并分页
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者: 虚无境 cnblogs.com/xuwujing/p/89 ...
SpringBoot mybatis Interceptor分页实现
环境准备什么是拦截器为什么要这样写具体实现什么是拦截器 SpringBoot mybatis interceptor拦截器是你在执行SQL语句之前对执行的SQL语句进行修改分页的原理是通过拦 ...
SpringBoot + Mybatis + Druid + PageHelper 实现多数据源分页
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 虚无境的博客来源 | http://8rr. ...
【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
[Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法目录 1.搭建环境 1.1直接从网上下载SpringB ...

Vue3+springboot+mybatis-pius实现分页功能

前端部分

后端部分

Vue3+springboot+mybatis-pius实现分页功能相关推荐

最新文章

热门文章