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

繼續(xù)更新。

一、查詢功能

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

1. input 輸入框

到組件庫里找個輸入框：

復制代碼，修改代碼：

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

style="width:20%": 調整輸入框寬度。

size="small": 調整輸入框整體大小，參考elementUI組件庫對應的文檔說明。

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

clearable: 輸入框清空功能。

2. 查詢按鈕

到組件庫里找個輸入框：

修改代碼：

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

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

@click="fetchData"綁定一個點擊事件，點擊按鈕的時候調用fetchData方法。

測試一下根據(jù)項目名稱模糊查詢，輸入：0915，點擊查詢。

查詢功能完成。

二、新增功能

1. 新增按鈕

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

使用這個嵌套了表單的對話框。

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

效果是這樣的：

2. 對話框

新增頁面這里只需要輸入項目名稱和描述即可，所以就是 2 個簡單的輸入框。

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

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

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

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

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

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

(1)添加接口

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

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

(2)綁定點擊事件

在對話框【保存】按鈕上綁定一個點擊事件。

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

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

(3)add 方法調用接口

在 methods 里增加上面按鈕點擊事件的方法 add，方法的作用是調用 js 文件里的添加接口。在使用方法之前要先導入進來：

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

編寫 add 方法：

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

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

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

關閉對話框，就是修改下 dialogFormVisible 的屬性為 fasle：

this.dialogFormVisible = false

刷新列表，我可以再調一次查詢方法即可：

this.fetchData()

最后，完整的 add 方法：

測試一下效果，可以正常保存，對話框關閉，提示成功。

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

再次點擊新增的時候，對話框里還顯示上一次的內容。

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

解決 問題1

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

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

解決 問題2

調整列表接口，增加排序 order by，按照 id 倒序。

最后，重新測試一下新增。

輸入內容，保存。

功能完成。

以上就是springboot+vue測試平臺前端項目實現(xiàn)查詢新增功能的詳細內容，更多關于springboot+vue前端查詢新增的資料請關注腳本之家其它相關文章！

最新評論