springboot vue项目后端列表接口分页模糊查询

目录
  • 基于 springboot+vue 的测试平台开发
    • 一、分页插件
    • 二、实现接口
      • 1. 编写 Service 层
      • 2. 编写 Controller 层
    • 三、测试接口
      • 1. 测试分页
      • 2. 测试条件查询

基于 springboot+vue 的测试平台开发

继续更新

打开项目管理,就需要看到列表里展示项目数据,比如这样(截图是这个前端框架的demo,仅作示意):

那么对应到我们平台的项目管理功能,就需要有:

  • 列表展示添加的项目数据
  • 可以通过项目名称查询指定的项目
  • 新增项目
  • 编辑项目
  • 其他功能...

新增项目的接口已经实现,接下来实现项目列表接口。

这个列表接口,我需要它可以同时满足分页以及条件查询,路径大概为/list/{currentPage}/{pageSize}。

其中 currentPage 表示当前是第几页,pageSize 表示每页大小。
比如/list/1/5},就说明我要查第 1 页,每页展示 5 条数据。

一、分页插件

mybatis-plus 提供了一些很实用的插件,其中就包括分页插件。

新建一个配置类 MybatisPlusConfig 用于存放 mybatis-plus 相关插件配置,并且注册分页插件:

package com.pingguo.bloomtest.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class MybatisPlusConfig {
    // 分页插件
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }
}

二、实现接口

实现的套路还是之前的那样,说到这,其实 mybatis-plus 还提供了代码生成器 AutoGenerator。

通过它可以快速生成 Entity、Mapper、Mapper XML、Service、Controller 等各个模块的代码,提升开发效率。

但是这里我并不要使用,因为本来就是学习的过程,多写写加深印象。另外本工程量实在也不大,就没必要用了。

1. 编写 Service 层

在之前的 ProjectService 下,新增查询方法 getProjectList 。

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    public IPage<Project> getProjectList(int currentPage, int pageSize, Project project) {
        // 创建分页对象,current为当前页数,size为每页最大记录数
        Page<Project> pageProject = new Page<>(currentPage, pageSize);
        QueryWrapper<Project> wrapperProject = new QueryWrapper<>();
        // 第一个参数为是否执行条件,为true则执行该条件
        wrapperProject.like(StringUtils.isNoneBlank(project.getProjectName()), "projectName", project.getProjectName());
        // 调用分页查询方法,传入分页对象-pageProject,wrapperProject是构造条件对象
        return projectDAO.selectPage(pageProject, wrapperProject);
    }
  • 创建分页对象 Page,它有 2 个参数,其中 current 为当前页数,size 则为每页最大记录数。
  • 因为 getProjectList 方法也要实现条件查询,所以创建条件查询对象。
  • wrapperProject.like 使用模糊查询,like 方法可以有 3 个参数,第一个参数为是否执行条件,当
  • projectName 为空就不执行。
  • 最后调用 selectPage 方法,传入分页对象-pageProject 和 构造条件对象 wrapperProject。

返回的对象类型是 IPage,包名也贴出来了。

2. 编写 Controller 层

在之前的 ProjectController 类下新增控制方法 getProjectList 来处理请求:

@PostMapping("/list/{currentPage}/{pageSize}")
    public Result getProjectList(@PathVariable int currentPage,
                                 @PathVariable int pageSize,
                                 @RequestBody Project project) {
        IPage<Project> IPageProject = projectService.getProjectList(currentPage, pageSize, project);
        return Result.success(IPageProject);
    }

@PathVariable注解用来获取路径上的参数,@RequestBody用来获取请求体。

最后把返回结果 IPageProject 放到统一结果里返回return Result.success(IPageProject)。

三、测试接口

自测一下查询接口。目前 Project 表里有 14 条数据。

1. 测试分页

localhost:8080/bloomtest/project/list/2/5,14条数据按理会分为 3 页,第二页从 id=6 的数据开始,每页展示 5 条。

继续往下,到 id=10 截止,共 5 条,结果正确。

另外,还可以看到返回内容里还有几个字段,都是分页相关:

  • "total": 14 表示共 14 条记录。
  • "size": 5 表示每页最大 5 条记录。
  • "current": 2 表示当前是第 2 页。
  • "pages": 3 表示共 3 页。

这些字段在前端使用分页控件的时候需要用到。

2. 测试条件查询

传入查询参数:

{ "projectName": "测试项目5"}

测试模糊查询:

{ "projectName": "6"}

结果正确。

以上就是springboot vue项目后端列表接口分页模糊查询的详细内容,更多关于springboot vue列表分页模糊查询的资料请关注我们其它相关文章!

(0)

相关推荐

  • springboot vue测试平台前端项目查询新增功能

    目录 基于 springboot+vue 的测试平台开发 一.查询功能 1. input 输入框 2. 查询按钮 二.新增功能 1. 新增按钮 2. 对话框 3. 新增数据 基于 springboot+vue 的测试平台开发 继续更新. 一.查询功能 在之前的项目列表接口里,支持使用项目名称模糊查询,现在来实现前端. 1. input 输入框 到组件库里找个输入框: 复制代码,修改代码: v-model: 绑定了下面 data 中的projectQuery.projectName. style=

  • springboot vue项目管理后端实现接口新增

    目录 基于 springboot+vue 的测试平台开发继续更新. 一.编写实体类 Project 二.创建数据表 修改 application.properties 中的配置 三.编写 ProjectDAO 接口 四.编写 ProjectService 类 自定义异常类 五.编写 ProjectController 类 六.测试新增接口 /project/add 基于 springboot+vue 的测试平台开发继续更新. 接下来开发项目管理,是一个很常规的功能:有列表页.查询.新增.编辑,删

  • springboot vue测试前端项目管理列表分页功能实现

    目录 基于 springboot+vue 的测试平台开发 一.前后端调通 1. 请求后端接口 2. 项目列表页面 3. 调整接口返回的时间格式问题 二.实现列表数据显示 1. 使用element UI组件库 2. 修改复制来的代码 三.实现分页 1.使用 组件 2. 给分页相关字段赋值 3. 关于 .sync 修饰符 基于 springboot+vue 的测试平台开发 继续更新 今天来完成项目列表的前端部分. 一.前后端调通 开发前端页面,框架里有 2 个地方需要改动: src/views: 这

  • springboot vue项目管理前后端实现编辑功能

    目录 基于springboot+vue 的测试平台开发 一.打开编辑页面显示数据 1. 编辑按钮 2. 编写 handleUpdate 方法处理数据外显 二.保存编辑页面的内容 1. 后端增加 update 接口 2. 前端页面修改 基于springboot+vue 的测试平台开发 继续更新 今天实现项目列表的编辑功能: 点击[编辑]按钮,打开对话框,显示此条记录的信息修改对话框表单内容,点击对话框[保存]按钮,更新此条记录 一.打开编辑页面显示数据 1. 编辑按钮 之前复制的 table 组件

  • springboot vue测试平台开发调通前后端环境实现登录

    目录 基于 springboot+vue的测试平台开发 一.前端环境搭建 快速安装 二.后端环境搭建 创建应用 配置 application.properties 三.实现登录 1. mysql 建表 2. 后端-实现 /login 接口 3. 前端-修改代码实现登录 4. 解决跨域 5. 后端-实现 /useInfo 接口 6. 后端-实现 /logout 接口 四.小结 基于 springboot+vue的测试平台开发 一.前端环境搭建 在前端框架vue-element-admin这个项目中

  • springboot vue项目后端列表接口分页模糊查询

    目录 基于 springboot+vue 的测试平台开发 一.分页插件 二.实现接口 1. 编写 Service 层 2. 编写 Controller 层 三.测试接口 1. 测试分页 2. 测试条件查询 基于 springboot+vue 的测试平台开发 继续更新 打开项目管理,就需要看到列表里展示项目数据,比如这样(截图是这个前端框架的demo,仅作示意): 那么对应到我们平台的项目管理功能,就需要有: 列表展示添加的项目数据 可以通过项目名称查询指定的项目 新增项目 编辑项目 其他功能..

  • SpringBoot+Vue前后端分离实现请求api跨域问题

    前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy

  • springboot vue前后端接口测试树结点添加功能

    目录 基于springboot+vue的测试平台开发 一.前端Tree树形控件的append方法 二.后端实现节点新增接口 1. controller 层 2. service 层 三.前后端联调 四.编辑节点名称 1. 打开对话框 2. 新增节点 3. 测试 基于springboot+vue的测试平台开发 继续更新. 一.前端Tree树形控件的append方法 在elementUI 树控件下有个append方法,可以用来为 Tree 中的一个节点追加一个子节点. 目前我们已经完成了树列表的接口

  • SpringBoot+Vue项目新手快速入门指南

    目录 1. 项目技术选型 2.数据库设计 3. 后台搭建 3.1 引入依赖 3.2 swagger配置 3.3实体类 3.4 自动填充配置 3.5 Mapper 3.6 service 3.7 controller 4. 前端搭建 4.1 环境搭建 4.1.1 Node环境 4.1.2 项目构建 4.1.3 安装插件 4.1.4 引入插件 4,2.搭建路由 4.3. echarts使用 4.4 element-ui使用 总结 前言:本人目前从事java开发,但同时也在学习各种前端技术,下面是我做

  • SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开

  • Vue调用后端java接口的实例代码

    前段时间 做了个学校的春萌项目,其中用到vue连接后端java接口. 先上后端接口代码: package controller; import net.sf.json.JSONObject; import util.DBUtil; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax

  • SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

    前言 给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会轻松很多.不过前面的系统的后端是使用 node 完成的,对于我们 Java 开发者来说,用不到.我学习的是 ElementUI 的使用,就足够了,然后后端服务就全部可以自己使用 SpringBoot 来完成 最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看 提示:以下是本篇

  • SpringBoot+Vue 前后端合并部署的配置方法

    前后端分离开发项目 前端vue项目 服务端springboot项目 如何将vue的静态资源整合到springboot项目里,通过启动jar包的方式部署服务. 前端项目执行npm run build命令进行打包,会自动生成打包后的dist目录文件所有东西放置在Resources/static文件下,如下图 此处index.html文件的资源路径(需要在前端打包配置中进行配置)应该如下图: 对应的springboot:application.yml需添加: server: port: 8080 to

  • springboot+VUE前后端分离实现疫情防疫平台JAVA

    目录 主要模块: 系统主要实现如下: 登录之后进入系统首页:目前系统主要功能如下 用户管理模块:用户添加.修改.删除.查询等基本操作 角色管理模块.通过用户绑定角色.角色控制菜单显示.灵活控制菜单. 前端VUE代码添加菜单 菜单添加修改列表层操作 历史行程数据管理:添加修改删除等操作 用户每日健康打卡列表数据展示以及添加打卡信息 员工出行外出报备管理申请 员工复工申请 管理员审核 通知公告模块: 一些设计报告和文档描述参考 数据库连接: 主要模块: 管理员用户登录:用户登录. 用户信息: 用户信

随机推荐