springboot?vue測(cè)試前端項(xiàng)目管理列表分頁功能實(shí)現(xiàn)

更新時(shí)間：2022年05月27日 10:04:39 作者：把蘋果咬哭的測(cè)試筆記

這篇文章主要為大家介紹了springboot?vue測(cè)試前端項(xiàng)目列表分頁功能實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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

繼續(xù)更新

今天來完成項(xiàng)目列表的前端部分。

一、前后端調(diào)通

開發(fā)前端頁面，框架里有 2 個(gè)地方需要改動(dòng)：

src/views: 這里是開發(fā)頁面的地方，也就是 vue 文件，可以按功能模塊新建子目錄來進(jìn)行分類。
src/api: vue 頁面里請(qǐng)求的后端接口的js文件統(tǒng)一都寫在這里。

接下來，針對(duì)項(xiàng)目列表接口localhost:8080/bloomtest/project/list/1/5，來改動(dòng)這兩處的代碼。

1. 請(qǐng)求后端接口

在src/api下，我新增一個(gè)js文件projectManagement.js，存放項(xiàng)目管理頁面中需要交互的后端請(qǐng)求。

import request from '@/utils/request'
 
export function getList(current, size, data) {
  return request({
    url: `/bloomtest/project/list/${current}/${size}`,
    method: 'post',
    data: data
  })
}

這里需要注意的是，我這個(gè)接口請(qǐng)求既有路徑上的參數(shù)，也有請(qǐng)求body的參數(shù)：

接收路徑參數(shù)：使用****符號(hào)來標(biāo)記 url，然后在其中使用${}`引用變量。
接收請(qǐng)求body：直接使用 data 來接收即可。

2. 項(xiàng)目列表頁面

在src/views新建一個(gè)目錄projectManagement，在目錄下直接 copy 框架原有 table 目錄下的index.vue文件，重命名為table.vue。

接著在src/views/projectManagement/table.vue中修改代碼，調(diào)通接口。

這里先修改導(dǎo)入的方法：import { getList } from '@/api/projectManagement'。

然后修改 methods 里的fetchData()方法，導(dǎo)入的 getList 方法就在這里被調(diào)用。

這里又有 2 個(gè)改動(dòng)點(diǎn)：

方法傳參。

在上述定義的方法里，需要有 3 個(gè)傳參getList(current, size, data)。這里用到的參數(shù)，都定義在return里：

這里都給了默認(rèn)值：projectName 為空，current=1，size=10。

獲取返回結(jié)果里的 list 。

原代碼里response.data.items，這里的items就是mock數(shù)據(jù)返回的 list。而我們實(shí)際接口返回list的字段叫records。

所以最終的代碼改為：

methods: {
    fetchData() {
      this.listLoading = true;
      getList(this.currentPage, this.size, this.projectQuery).then(response => {
        this.list = response.data.records;
        this.listLoading = false
      })
    }
  }

打開 F12 ，刷新項(xiàng)目列表頁看下前后端是否調(diào)通。

前后已通。

3. 調(diào)整接口返回的時(shí)間格式問題

我在請(qǐng)求列表接口后，看到返回的時(shí)間格式不對(duì)勁。

這里需要轉(zhuǎn)化一下格式，在對(duì)應(yīng)的實(shí)體類的時(shí)間字段上添加：

@JsonFormat(timezone = "GMT+8",pattern="yyyy-MM-dd HH:mm:ss")

重新請(qǐng)求下：

格式正常了。

二、實(shí)現(xiàn)列表數(shù)據(jù)顯示

1. 使用element UI組件庫(kù)

原有的頁面代碼不能滿足我的項(xiàng)目列表需求，所以要換掉這里的代碼。

打開element UI組件庫(kù)，在table下尋找要用的組件。

點(diǎn)擊下方的【顯示代碼】，復(fù)制標(biāo)簽<template></template>，替換src/views/projectManagement/table.vue中的 template 代碼。

頁面已經(jīng)可以看到新效果了。

2. 修改復(fù)制來的代碼

(1)列表的屬性

首先修改:data="list"，這是數(shù)據(jù)綁定，列表里就是要list里的數(shù)據(jù)，因?yàn)閺暮蠖私涌诶锬玫降臄?shù)據(jù)存放在了list里。

另外還可以添加一些屬性，比如加載loading效果、當(dāng)前選中行高亮的等等。

這些屬性在對(duì)應(yīng)組件頁面的最下面都可以看到，可以根據(jù)自己的需要，添加對(duì)應(yīng)的屬性。

(2)修改表字段

在<el-table-column>標(biāo)簽里的屬性是作用于列的，比如：

prop：填寫后端返回字段的名稱
label：顯示的名字
width：寬度
align：居中顯示

這里的屬性就不一一列舉了，搜索就可以查到。

還有這個(gè)表是可以固定列的，直接拷貝的代碼進(jìn)行了列的固定，通過fixed屬性，這里我們不需要使用，先去掉。

按照這個(gè)改完之后，列表的顯示就有了。

三、實(shí)現(xiàn)分頁

1.使用組件

同樣是去 element UI尋找組件，然后 copy 代碼修改，就使用這個(gè)吧。

把這段拷過來，修改代碼，最終是這樣：

<el-pagination
      layout="total, prev, pager, next"
      :page-size="size"
      :current-page.sync="currentPage"
      :total="total"
      @current-change="fetchData"
    />

介紹下分頁組件：

layout：表示需要顯示的內(nèi)容，用逗號(hào)分隔，布局元素會(huì)依次顯示。prev 表示上一頁，next 為下一頁，
pager 表示頁碼列表，除此以外還提供了jumper跳頁和 total 總數(shù)。
page-size: 每頁顯示條目個(gè)數(shù)，支持.sync修飾符。
current-page: 當(dāng)前頁數(shù)，支持.sync修飾符。
total: 總條目數(shù)。
current-change: 事件，currentPage改變時(shí)會(huì)觸發(fā)。這里就是點(diǎn)擊當(dāng)前頁的時(shí)候，會(huì)調(diào)用fetchData方法查詢列表。