基于 springboot+vue 的測(cè)試平臺(tái)開發(fā)

繼續(xù)更新

打開項(xiàng)目管理，就需要看到列表里展示項(xiàng)目數(shù)據(jù)，比如這樣(截圖是這個(gè)前端框架的demo，僅作示意)：

那么對(duì)應(yīng)到我們平臺(tái)的項(xiàng)目管理功能，就需要有：

• 列表展示添加的項(xiàng)目數(shù)據(jù)
• 可以通過(guò)項(xiàng)目名稱查詢指定的項(xiàng)目
• 新增項(xiàng)目
• 編輯項(xiàng)目
• 其他功能...

新增項(xiàng)目的接口已經(jīng)實(shí)現(xiàn)，接下來(lái)實(shí)現(xiàn)項(xiàng)目列表接口。

這個(gè)列表接口，我需要它可以同時(shí)滿足分頁(yè)以及條件查詢，路徑大概為/list/{currentPage}/{pageSize}。

其中 currentPage 表示當(dāng)前是第幾頁(yè)，pageSize 表示每頁(yè)大小。
比如/list/1/5}，就說(shuō)明我要查第 1 頁(yè)，每頁(yè)展示 5 條數(shù)據(jù)。

一、分頁(yè)插件

mybatis-plus 提供了一些很實(shí)用的插件，其中就包括分頁(yè)插件。

新建一個(gè)配置類 MybatisPlusConfig 用于存放 mybatis-plus 相關(guān)插件配置，并且注冊(cè)分頁(yè)插件：

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 {
    // 分頁(yè)插件
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }
}

二、實(shí)現(xiàn)接口

實(shí)現(xiàn)的套路還是之前的那樣，說(shuō)到這，其實(shí) mybatis-plus 還提供了代碼生成器 AutoGenerator。

通過(guò)它可以快速生成 Entity、Mapper、Mapper XML、Service、Controller 等各個(gè)模塊的代碼，提升開發(fā)效率。

但是這里我并不要使用，因?yàn)楸緛?lái)就是學(xué)習(xí)的過(guò)程，多寫寫加深印象。另外本工程量實(shí)在也不大，就沒必要用了。

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) {
        // 創(chuàng)建分頁(yè)對(duì)象，current為當(dāng)前頁(yè)數(shù)，size為每頁(yè)最大記錄數(shù)
        Page<Project> pageProject = new Page<>(currentPage, pageSize);
        QueryWrapper<Project> wrapperProject = new QueryWrapper<>();
        // 第一個(gè)參數(shù)為是否執(zhí)行條件，為true則執(zhí)行該條件
        wrapperProject.like(StringUtils.isNoneBlank(project.getProjectName()), "projectName", project.getProjectName());
        // 調(diào)用分頁(yè)查詢方法，傳入分頁(yè)對(duì)象-pageProject，wrapperProject是構(gòu)造條件對(duì)象
        return projectDAO.selectPage(pageProject, wrapperProject);
    }

• 創(chuàng)建分頁(yè)對(duì)象 Page，它有 2 個(gè)參數(shù)，其中 current 為當(dāng)前頁(yè)數(shù)，size 則為每頁(yè)最大記錄數(shù)。
• 因?yàn)?getProjectList 方法也要實(shí)現(xiàn)條件查詢，所以創(chuàng)建條件查詢對(duì)象。
• wrapperProject.like 使用模糊查詢，like 方法可以有 3 個(gè)參數(shù)，第一個(gè)參數(shù)為是否執(zhí)行條件，當(dāng)
• projectName 為空就不執(zhí)行。
• 最后調(diào)用 selectPage 方法，傳入分頁(yè)對(duì)象-pageProject 和 構(gòu)造條件對(duì)象 wrapperProject。

返回的對(duì)象類型是 IPage，包名也貼出來(lái)了。

2. 編寫 Controller 層

在之前的 ProjectController 類下新增控制方法 getProjectList 來(lái)處理請(qǐng)求：

@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注解用來(lái)獲取路徑上的參數(shù)，@RequestBody用來(lái)獲取請(qǐng)求體。

最后把返回結(jié)果 IPageProject 放到統(tǒng)一結(jié)果里返回return Result.success(IPageProject)。

三、測(cè)試接口

自測(cè)一下查詢接口。目前 Project 表里有 14 條數(shù)據(jù)。

1. 測(cè)試分頁(yè)

localhost:8080/bloomtest/project/list/2/5，14條數(shù)據(jù)按理會(huì)分為 3 頁(yè)，第二頁(yè)從 id=6 的數(shù)據(jù)開始，每頁(yè)展示 5 條。

繼續(xù)往下，到 id=10 截止，共 5 條，結(jié)果正確。

另外，還可以看到返回內(nèi)容里還有幾個(gè)字段，都是分頁(yè)相關(guān)：

• "total": 14 表示共 14 條記錄。
• "size": 5 表示每頁(yè)最大 5 條記錄。
• "current": 2 表示當(dāng)前是第 2 頁(yè)。
• "pages": 3 表示共 3 頁(yè)。

這些字段在前端使用分頁(yè)控件的時(shí)候需要用到。

2. 測(cè)試條件查詢

傳入查詢參數(shù)：

{ "projectName": "測(cè)試項(xiàng)目5"}

測(cè)試模糊查詢：

{ "projectName": "6"}

結(jié)果正確。

以上就是springboot vue項(xiàng)目后端列表接口分頁(yè)模糊查詢的詳細(xì)內(nèi)容，更多關(guān)于springboot vue列表分頁(yè)模糊查詢的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論