Spring3整合MyBatis实现分页查询和搜索功能_Java

在实际项目开发中，数据库数据量往往较大，直接查询全量数据会导致性能下降、页面加载缓慢；同时，用户需要快速定位目标数据，搜索功能必不可少。本文基于 mybatis 框架，结合前端 vue+element ui 与后端 springboot 技术栈，详细讲解分页查询与搜索功能的完整实现流程，涵盖后端插件配置、动态 sql 编写、前端请求封装与页面展示，帮助开发者高效落地核心业务功能。

一、技术栈说明与环境准备

1.1 核心技术栈

后端：springboot（基础框架）、mybatis（持久层框架）、pagehelper（mybatis 分页插件）、mysql（数据库）

前端：vue3（前端框架）、axios（http 请求工具）、element ui（ui 组件库，含 el-table 表格、el-pagination 分页、el-input 搜索框等组件）

1.2 环境准备

后端：确保已完成 springboot 与 mybatis 的基础整合（可参考前文 springboot3 整合 mybatis 步骤），引入 pagehelper 依赖；

前端：搭建 vue3+element ui 项目，安装 axios 依赖，配置基础请求拦截器。

二、安装依赖

npm i axios -s

三、简单测试axios

在home.vue当中配置

import axios from "axios";
axios.get("http://localhost:8080/user/findall").then(res => {
  console.log(res.data);
});

四、springboot设置跨域配置

前后端分离项目中，前端请求后端接口会存在跨域问题（浏览器同源策略限制），需在 springboot 中添加跨域配置，允许前端域名的请求访问。

package com.qcby.schoolshop.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() {
        // 1. 创建cors配置对象
        corsconfiguration config = new corsconfiguration();
        // 允许的源（前端地址，*表示允许所有源，生产环境建议指定具体地址）
        config.addallowedorigin("http://localhost:5173");
        // 允许的请求头（*表示允许所有）
        config.addallowedheader("*");
        // 允许的请求方法（*表示允许所有，也可以指定get、post、put等）
        config.addallowedmethod("*");
        // 允许携带cookie（如果需要跨域传递cookie，需要开启这个，且前端请求也要配置withcredentials: true）
        config.setallowcredentials(true);
        // 预检请求的缓存时间（单位：秒，减少预检请求的次数）
        config.setmaxage(3600l);
        // 2. 配置路径映射（/**表示所有路径）
        urlbasedcorsconfigurationsource source = new urlbasedcorsconfigurationsource();
        source.registercorsconfiguration("/**", config);
        // 3. 返回cors过滤器
        return new corsfilter(source);
    }
}

原因：前后端分离项目中，前端和后端通常运行在不同域名 / 端口（如前端 8081、后端 8080），浏览器的 “同源策略” 会禁止这种跨源请求，设置跨域是为了允许前端合法访问后端接口，避免请求被拦截，确保数据正常交互。

重启测试

五、封装统一的请求工具：request.js

为了简化重复代码（不用每次请求都写基础配置）、统一管理请求规则（如基础 url、超时时间、请求头），还能集中处理请求 / 响应拦截（如 token 添加、错误提示），提升代码复用性和可维护性，以后方便使用，我们新建一个request.js的文件来处理后台发来的数据

 import axios from "axios";
 axios.get('http://localhost:8080/user/findall').then(res=>{
     console.log(res)
 })

import axios from "axios";
import {elmessage} from "element-plus";
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';
  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
    }
    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 request

六、设置查询分页

6.1 mapper.xml文件

<!--注意最后别写;-->
<select id="findall" resulttype="com.qcby.vuespringbootdemo.entity.user">
    select * from user order by id desc 
</select>

6.2 导入分页的jar包 pom.xml

<!-- 分页插件pagehelper -->
<dependency>
    <groupid>com.github.pagehelper</groupid>
    <artifactid>pagehelper-spring-boot-starter</artifactid>
    <version>1.4.6</version>
    <!--排除和我们引入的mybatis的影响-->
    <exclusions>
        <exclusion>
            <groupid>org.mybatis</groupid>
            <artifactid>mybatis</artifactid>
        </exclusion>
    </exclusions>
</dependency>

6.3 service层开启分页查询

public pageinfo<user> selectpage(integer pagenum,integer pagesize){
    //开启分页查询
    pagehelper.startpage(pagenum,pagesize);
    list<user> users = userdao.findall();
    return pageinfo.of(users);
}

6.4 controller层

@getmapping("/selectpage")
@responsebody
public result selectpage(@requestparam(defaultvalue = "1") integer pagenum,
                         @requestparam(defaultvalue = "5")integer pagesize){
    pageinfo<user> userpageinfo = userservice.selectpage(pagenum, pagesize);
    return result.success(userpageinfo);
}

6.5 接口测试

http://localhost:8081/user/selectpage?pagenum=1&pagesize=5

6.6 前端展示

<div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tabledata" style="width: 100%" :header-cell-style="{ color: '#333', backgroundcolor: '#eaf4ff' }">
        <!-- type="selection"：这指定该列将包含用于行选择的复选框。它允许用户在表格中选择一行或多行。 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="birthday" label="生日" width="180" />
        <el-table-column prop="sex" label="性别" width="80" />
        <el-table-column prop="address" label="地址" width="180" />
      </el-table>
    </div>

6.7 前端请求数据

import { reactive } from "vue";
import {search} from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import {elmessage} from "element-plus";
const data = reactive({
  name: null,
  pagenum: 1,
  pagesize: 5,
  total:0,
  tabledata: []
})
const load = () => {
  request.get('/user/selectpage', {
    params: {
      pagenum: data.pagenum,
      pagesize: data.pagesize
    }
  }).then(res => {
    if (res.code === '200') {
      data.tabledata = res.data.list
      data.total = res.data.total
    } else {
      elmessage.error(res.msg)
    }
  })
}
load()

接下来处理一下时间的显示问题

// 添加日期格式化函数
const dateformat = (row, column, cellvalue) => {
  if (!cellvalue) return ''
  const date = new date(cellvalue)
  const year = date.getfullyear()
  const month = string(date.getmonth() + 1).padstart(2, '0')
  const day = string(date.getdate()).padstart(2, '0')
  return `${year}-${month}-${day}`
}

最后别忘了

<div class="card">
      <el-pagination
          v-model:current-page="data.pagenum"
          :page-size="data.pagesize"
          layout="total, prev, pager, next"
          :total="data.total"
          @current-change="load"
          @size-change="load"
      />
    </div>

七、搜索设置

7.1 前端设置搜索框

<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.address" placeholder="请输入地址查询" :prefix-icon="search"></el-input>
      <el-button type="primary" @click="load">查 询</el-button>
      <el-button @click="reset">重 置</el-button>
</div>

7.2 前端设置入参

 params: {
      pagenum: data.pagenum,
      pagesize: data.pagesize,
      username: data.username,
      address: data.address
    }

7.3 设置重置

//搜索重置
const reset = () => {
  data.username = null
  data.address = null
  load()
}

7.4 mapper.xml设置查询

<select id="findall" resulttype="com.qcby.springboot.entity.user"
        parametertype="com.qcby.springboot.entity.user">
    select * from user
        <where>
           <if test="username!=null">
               username like concat('%', #{username}, '%')
           </if>
            <if test="address!=null">
                and address  like concat('%', #{address}, '%')
            </if>
        </where>
    order by id
</select>

7.5 service层

@override
public pageinfo<user> selectpage(integer pagenum, integer pagesize,user user) {
    //开启分页查询
    pagehelper.startpage(pagenum,pagesize);
    list<user> users = userdao.findall(user);
    return pageinfo.of(users);
}

7.6 controller层

@getmapping("/selectpage")
@responsebody
public result selectpage(@requestparam(defaultvalue = "1") integer pagenum,
                         @requestparam(defaultvalue = "5")integer pagesize,
                         user user){
    system.out.println(user.tostring());
    pageinfo<user> userpageinfo = userservice.selectpage(pagenum, pagesize,user);
    return result.success(userpageinfo);
}

到此这篇关于spring3整合mybatis实现分页查询和搜索功能的文章就介绍到这了,更多相关spring3 mybatis分页查询和搜索内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！