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)來(lái)標(biāo)記 url，然后在其中使用${}`引用變量。
接收請(qǐng)求body：直接使用 data 來(lái)接收即可。

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

在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)目列表頁(yè)看下前后端是否調(diào)通。

前后已通。

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

我在請(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ù)

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

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

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

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

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

(1)列表的屬性

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

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

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

(2)修改表字段

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

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

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

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

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

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

1.使用組件

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

把這段拷過(guò)來(lái)，修改代碼，最終是這樣：

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

介紹下分頁(yè)組件：

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