基于 springboot+vue 的測試平臺開發(fā)

繼續(xù)更新

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

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

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

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

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

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

一、分頁插件

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

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

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();
    }
}

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

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

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

但是這里我并不要使用，因?yàn)楸緛砭褪菍W(xué)習(xí)的過程，多寫寫加深印象。另外本工程量實(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)建分頁對象，current為當(dāng)前頁數(shù)，size為每頁最大記錄數(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)用分頁查詢方法，傳入分頁對象-pageProject，wrapperProject是構(gòu)造條件對象
        return projectDAO.selectPage(pageProject, wrapperProject);
    }

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

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

三、測試接口

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

1. 測試分頁

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

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

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

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

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

2. 測試條件查詢

傳入查詢參數(shù)：

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

測試模糊查詢：

{ "projectName": "6"}

結(jié)果正確。

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

最新評論