Springboot3+vue3来实现分页查询

最新推荐文章于 2025-06-01 17:05:40 发布

M.S3.

最新推荐文章于 2025-06-01 17:05:40 发布

阅读量685

点赞数 12

CC 4.0 BY-SA版权

分类专栏：项目模块文章标签： java 开发语言

本文链接：https://blog.csdn.net/ms_____/article/details/147536881

项目模块专栏收录该内容

6 篇文章

订阅专栏

安装axios 封装前后端

npm i axios -S

跨域处理

（浏览器不能处理来自不同的两个地址）

在springboot里面统一处理跨域处理

package com.mmm.common;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 跨域配置
 */
@Configuration// 配置类
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

前端封装类

（这个超级好用，封装之后的res里面就只有里后端设定的result的格式 code,data,msg）

import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const request = axios.create({
  baseURL: 'http://localhost:9999',
  timeout: 30000  // 后台接口超时时间
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
request.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json;charset=utf-8';
  let user = JSON.parse(localStorage.getItem('code_user') || '{}')
  config.headers['token'] = user.token
  return config
}, error => {
  return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
  response => {
    let res = response.data;
    // 兼容服务端返回的字符串数据
    if (typeof res === 'string') {
      res = res ? JSON.parse(res) : res
    }
    if (res.code === '401') {
      ElMessage.error(res.msg)
      router.push('/login')
    } else {
      return res
    }
  },
  error => {
    if (error.response.status === 404) {
      ElMessage.error('未找到请求接口')
    } else if (error.response.status === 500) {
      ElMessage.error('系统异常，请查看后端控制台报错')
    } else {
      console.error(error.message)
    }
    return Promise.reject(error)
  }
)

export default reques

发起一次请求

request.get('admin/selectAll').then(res=>{
  if(res.code ==="200"){
    console.log(res)
    ElMessage.success(res.msg)
  }else{
    ElMessage.error(res.msg)
  }
})

分页查询

在pom.xml里面添加PageHelper依赖引用的是·import com.github.pagehelper.PageInfo;

        <!-- 分页插件pagehelper -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.4.6</version>
            <exclusions>
                <exclusion>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

<exclusion>其中这个标签是防止与本地的mybatis版本冲突注解了

后端

所以呢从后端写起

首先写controller层来接收前端的参数，传给service来使用方法和调用sql的接口方法，到mapper层创建方法接口和mapper.xml来执行sql大概就是这个流程；

AdminController

@GetMapping("/selectPage")//全局唯一的
public Result selectPage(@RequestParam(defaultValue = "1") Integer pageNum,
                         @RequestParam(defaultValue = "10")Integer pageSize,
                         Admin admin)  {
    PageInfo<Admin> PageInfo = adminService.selectPage(pageNum, pageSize, admin);
    return Result.success(PageInfo);

}

@RequestParam将数据json化， Admin admin接受admin类里面的属性， adminService在前面创建了private AdminService adminservice的对象，调用里面的selectPage方法

AdminService

public PageInfo<Admin> selectPage(Integer pageNum, Integer pageSize, Admin admin) {
        // 开启分页功能
        PageHelper.startPage(pageNum, pageSize);
        List<Admin> list = adminMapper.selectAll(admin);
        return PageInfo.of(list);
    }

将admin的属性传入selectAll的方法里

AdminMapper

public interface AdminMapper {
    List<Admin> selectAll(Admin admin);
}

AdminMapper.xml

   <select id="selectAll" resultType="com.mmm.entity.Admin">
        select * from `admin`
      <where>
          <if test="username!=null">username like concat('%',#{username},'%')</if>
          <if test="name!=null">and name like concat('%',#{name},'%')</if>
      </where>
        order by id desc
    </select>

使用where标签来实现动态查询，对于一个方法里面selectAll()里面可能没有值来传递，就在where标签添加判断如果为否就不实现

后端就over了；

前端

首先一些基本的查询框，表结构，分页器，

<div class="card" style="margin-bottom: 5px;">
  <el-input clearable @clear="load" style="width: 260px ;margin-right: 5px" v-model="data.username" placeholder="请输入账号查询" :prefix-icon="Search"></el-input>
  <el-input clearable @clear="load" style="width: 260px ;margin-right: 5px" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
  <el-button type="primary" icon="Search" @click="load">查询</el-button>
  <el-button type="warning" icon="RefreshRight" @click="reset">重置</el-button>
</div>

clearable 超级好用

来快速清除对话框的内容

对于两个绑定事件来

@click="load"@click="reset

const load =()=>{
  request.get('/admin/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      username:data.username,
      name:data.name,
    }
  }).then(res=>{
    if(res.code === '200'){
      data.tableData = res.data.list
      data.total = res.data.total

    }else {
      ElMessage.error(res.msg)
    }

  })
}
load()


const reset =()=>{
  data.name = null
  data.username = null
  load()
}

第一个加载load方法用requet来请求后端并传入参数格式 request.get( 'url', {params:{ }}).then(res=>{

})

第二个重置reset方法点击后对话框里面的name,username的是赋值为空，重新全部加载

 <div class="card" style="margin-bottom: 5px;">
    <el-table :data="data.tableData" style=" width: 100%" :header-cell-style="{  color: '#333' ,backgroundColor: '#eaf4ff'}">
      <el-table-column type="select" width="55"/>
      <el-table-column prop="username" label="账号"/>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="email" label="邮箱"/>
    </el-table>
    </div>

表结构绑定表数据

const load =()=>{
  request.get('/admin/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      username:data.username,
      name:data.name,
    }
  }).then(res=>{
    if(res.code === '200'){
      data.tableData = res.data.list
      data.total = res.data.total

    }else {
      ElMessage.error(res.msg)
    }

  })
}
load()

data.tableData = res.data.list 在前端是数组表示，后端是list集合

分页器

<div class="card">
  <el-pagination
    v-model:current-page="data.pageNum"
    v-model:page-size="data.pageSize"
    layout="total,sizes, prev, pager, next,jumper"
    :page-sizes="[5,10,15]"
    :total="data.total"
    @current-change="load"
    @size-change="load"
    />
</div>

绑定的数据都在这里面，来显示在前端


const data = reactive({
  username: null,
  name: null,
  pageNum:1,
  pageSize:5,
  total:0,
  tableData: []

})