springboot+mybatisplus整合vue实现分页查询
发布时间：2023年12月18日
效果图如下，实现多条件模糊分页查询:
1.后台接口：
// 分页查询
@GetMapping("/page")
public ResultUtil queryGoodsList(@RequestParam Integer page, @RequestParam Integer limit, @RequestParam String goodsName,@RequestParam String goodsType){
// 传入分页属性
Page<Goods> objectPage = new Page<>(page, limit);
QueryWrapper<Goods> wrapper = new QueryWrapper<>();
// 条件查询：不为空和空白字符
wrapper.like(StringUtils.isNotBlank(goodsName),"name",goodsName)
.like(StringUtils.isNotBlank(goodsType),"goodstype",goodsType);
// 分页查询
IPage<Goods> goodsIPage = goodsService.page(objectPage, wrapper);
// 数据总数
long total = goodsIPage.getTotal();
// 分页的数据
List<Goods> goodsList = goodsIPage.getRecords();
// 回写数据
Map<String, Object> res = new HashMap<>();
res.put("data",goodsList);
res.put("total",total);
// return res;
return new ResultUtil(0,total,goodsList);
}2.mybatisplus配置：
@Configuration
@MapperScan("com.jk.mapper")
public class MybatisPlusConfig {
/**
* 分页插件
*/
@Bean
public PaginationInterceptor paginationInterceptor() {
return new PaginationInterceptor();
}
}
3.后台解决跨域问题：
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedHeaders(CorsConfiguration.ALL)
.allowedMethods(CorsConfiguration.ALL)
.allowCredentials(true)
.maxAge(24*60*60);
}
}4.vue前端页面：
<template>
<el-container style="min-height: 100vh; ">
<el-aside width="220px" style="background-color: rgb(238, 241, 246)" >
<el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden;"
background-color="rgb(48,65,86)"
text-color="#fff"
active-text-color="#ffd84b">
<div style="height: 60px; line-height: 60px; text-align: center;">
<img src="../assets/logo.png" alt="" style="width: 20px;position: relative; top: 5px;margin-right: 5px;">
<b style="color: white;">后台管理系统</b>
</div>
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px;border-bottom: 1px solid #ccc; line-height: 60px;" >
<el-dropdown style="width: 70px; cursor: pointer;">
<span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px;"></i>
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i> -->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<div style="margin-bottom: 10px;">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div style="padding: 10px 0;">
<el-input style="width: 200px" placeholder="请输入名称" v-model="goodsName"></el-input>
<el-input class="ml-10" style="width: 200px" placeholder="请输入类别" v-model="goodsType" ></el-input>
<el-button class="ml-5" type="primary" icon="el-icon-search" @click="load()">搜索</el-button>
</div>
<div style="padding: 10px 0;">
<el-button class="ml-5" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
<el-button class="ml-5" type="danger" icon="el-icon-remove-outline">批量删除</el-button>
<el-button class="ml-5" type="primary" icon="el-icon-upload2">导入</el-button>
<el-button class="ml-5" type="primary" icon="el-icon-download">导出</el-button>
</div>
<el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
<el-table-column prop="id" label="ID" width="140">
</el-table-column>
<el-table-column prop="name" label="商品名称" width="320">
</el-table-column>
<el-table-column prop="price" label="单价" width="120">
</el-table-column>
<el-table-column prop="amount" label="数量" width="120">
</el-table-column>
<el-table-column prop="goodstype" label="商品类别" width="120">
</el-table-column>
<el-table-column prop="picurl" label="商品图片" width="120">
<template slot-scope="scope">
<!-- scope.row获取当前行所有数据 作用域插槽获取当前行的数据（可以是图片连接如下：:src="scope.row.iconImgLarge"） -->
<el-image style="width: 50px; height: 50px" :src="scope.row.picurl" fit=""></el-image>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="success" icon="el-icon-edit">编辑</el-button>
<el-button type="danger" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="padding: 10px 0;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5,10, 15, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
import axios from 'axios'
export default {
name: 'HomeView',
components: {
},
data() {
return {
tableData: [],
pageNum:1,
pageSize:5,
headerBg:'headerBg',
total:0,
goodsName:'',
goodsType:''
}
},
created() {
this.load()
},
methods:{
load(){
axios.get("http://localhost:8889/goods/page?page="+this.pageNum+"&limit="+this.pageSize+"&goodsName="+this.goodsName+"&goodsType="+this.goodsType)
.then(res =>{
console.log(res);
this.tableData=res.data.data
this.total=res.data.count
this.goodsName=""
this.goodsType=""
})
},
handleSizeChange(pageSize){
console.log(pageSize)
this.pageSize=pageSize
this.load()
},
handleCurrentChange(pageNum){
console.log(pageNum)
this.pageNum=pageNum
this.load()
}
}
}
</script>
<style >
.headerBg{
background: #ccc!important;
}
</style>
文章来源:https://blog.csdn.net/adingyb/article/details/135067648
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- 增强设备维修效率：易点易动设备管理系统的维修功能解析
- [槲寄生小记]常见报错(1)Id returned 1 exit status
- 汽车电子EMC辐射骚扰
- 【计算机毕业设计】SSM在线化妆品网站
- HarmonyOS 多态样式
- 线性回归（Linear Regression）
- intel SGX学习笔记（8）：SGX在安全区Enclave中调用ecall函数实现Hello world 输出
- 2024.1.3 Spark架构角色和提交任务流程
- es6中 ?? 与 || 区别
- 基于JetCache整合实现一级、二级缓存方案（前置基础知识与原理）