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

繼續(xù)更新。

一、查詢功能

在之前的項(xiàng)目列表接口里，支持使用項(xiàng)目名稱模糊查詢，現(xiàn)在來實(shí)現(xiàn)前端。

1. input 輸入框

到組件庫(kù)里找個(gè)輸入框：

復(fù)制代碼，修改代碼：

v-model: 綁定了下面 data 中的projectQuery.projectName。

style="width:20%": 調(diào)整輸入框?qū)挾取?/p>

size="small": 調(diào)整輸入框整體大小，參考elementUI組件庫(kù)對(duì)應(yīng)的文檔說明。

placeholder: 占位符顯示，輸入框里的提示信息。

clearable: 輸入框清空功能。

2. 查詢按鈕

到組件庫(kù)里找個(gè)輸入框：

修改代碼：

這里用了一個(gè) 標(biāo)簽把輸入框和查詢按鈕包了起來，方便后續(xù)如果有需要整體調(diào)整下樣式啥的。

style="margin-left: 10px"調(diào)整了下按鈕的左邊距，讓按鈕和輸入框之間留出點(diǎn)間隔。

@click="fetchData"綁定一個(gè)點(diǎn)擊事件，點(diǎn)擊按鈕的時(shí)候調(diào)用fetchData方法。

測(cè)試一下根據(jù)項(xiàng)目名稱模糊查詢，輸入：0915，點(diǎn)擊查詢。

查詢功能完成。

二、新增功能

1. 新增按鈕

新增接口之前已經(jīng)實(shí)現(xiàn)好了，現(xiàn)在實(shí)現(xiàn)前端。

使用這個(gè)嵌套了表單的對(duì)話框。

這個(gè)觸發(fā)按鈕，就改成【新增】按鈕，放到【查詢】按鈕的后面。

效果是這樣的：

2. 對(duì)話框

新增頁面這里只需要輸入項(xiàng)目名稱和描述即可，所以就是 2 個(gè)簡(jiǎn)單的輸入框。

另外，復(fù)制代碼的時(shí)候也需要把組件里需要用到的 data 也拷貝過來，替換成我們自己需要用的。

• dialogFormVisible，visible屬性綁定的值，它接收Boolean，當(dāng)為true時(shí)顯示 Dialog 對(duì)話框。
• form 就是保存新增頁面里填寫的字段值。
• formLabelWidth 這個(gè)控制了這個(gè)表單的整體的寬度。

現(xiàn)在修改對(duì)話框表單的頁面內(nèi)容：

可以更加自己的要求來調(diào)整樣式，我的大概如此：

3. 新增數(shù)據(jù)

點(diǎn)擊【保存】按鈕，要保存數(shù)據(jù)到表里，然后關(guān)閉彈窗，刷新列表頁，展示新增的數(shù)據(jù)。

(1)添加接口

后端接口已實(shí)現(xiàn)，現(xiàn)在添加到 js 文件src/api/projectManagement.js里。

export function addProject(data) {
  return request({
    url: '/bloomtest/project/add',
    method: 'post',
    data: data
  })
}

(2)綁定點(diǎn)擊事件

在對(duì)話框【保存】按鈕上綁定一個(gè)點(diǎn)擊事件。

<el-button type="primary" @click="add">保 存</el-button>

這里要去掉復(fù)制出來的@click="dialogFormVisible = false"，只能綁定一個(gè)事件，如果要綁定多個(gè)，需要使用addEventListener()，后續(xù)再說。

(3)add 方法調(diào)用接口

在 methods 里增加上面按鈕點(diǎn)擊事件的方法 add，方法的作用是調(diào)用 js 文件里的添加接口。在使用方法之前要先導(dǎo)入進(jìn)來：

import { getList, addProject } from '@/api/projectManagement'

編寫 add 方法：

addProject(this.form)，需要傳入表單的參數(shù)。then()，就是當(dāng) .then() 前的方法執(zhí)行完后再執(zhí)行 then()內(nèi)部 的程序，這里就是用來處理請(qǐng)求之后的事情。

保存成功提示信息，依然到組件庫(kù)里尋找，這里就用它：

另外，在這里可以加個(gè)判斷，當(dāng)接口返回狀態(tài)碼是20000時(shí)，提供保存成功，其他提示保存失敗。

關(guān)閉對(duì)話框，就是修改下 dialogFormVisible 的屬性為 fasle：

this.dialogFormVisible = false

刷新列表，我可以再調(diào)一次查詢方法即可：

this.fetchData()

最后，完整的 add 方法：

測(cè)試一下效果，可以正常保存，對(duì)話框關(guān)閉，提示成功。

但是發(fā)現(xiàn) 2 個(gè)問題：

再次點(diǎn)擊新增的時(shí)候，對(duì)話框里還顯示上一次的內(nèi)容。

列表沒排序，新增的數(shù)據(jù)在后面的頁，展示不直觀。

解決 問題1

在新增方法里，把表單里的字段值設(shè)為空字符串即可：

// 清空表單
    this.form.projectName = ''
    this.form.description = ''

解決 問題2

調(diào)整列表接口，增加排序 order by，按照 id 倒序。

最后，重新測(cè)試一下新增。

輸入內(nèi)容，保存。

功能完成。

以上就是springboot+vue測(cè)試平臺(tái)前端項(xiàng)目實(shí)現(xiàn)查詢新增功能的詳細(xì)內(nèi)容，更多關(guān)于springboot+vue前端查詢新增的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論