springboot?vue接口測試前端模塊樹和接口列表

更新時間：2022年05月27日 09:15:21 作者：把蘋果咬哭的測試筆記

這篇文章主要為大家介紹了springboot?vue接口測試前端模塊樹和接口列表，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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

繼續(xù)更新。

一、功能簡介

今天的目標(biāo)是畫一個接口管理列表的前端頁面。本來我也想去弄個簡單的原型圖先，但是搜了個網(wǎng)頁工具一時半會也不會用，作罷。

最終決定直接用 elementUI 的組件拼一個出來。直到最后完成用了大半天時間，很顯然這個頁面對我來說還是有點(diǎn)復(fù)雜的。

比起項目管理的一個table頁，這里的內(nèi)容多了很多。自然也就遇到了不少之前不太會的前端知識，通過查看 elementUI 官方文檔、搜索引擎等方式，逐個去解決，也算有些收獲。

先放出初版完成的頁面，簡述一下頁面功能。

整個頁面分為 2 個區(qū)域：

左側(cè)區(qū)域

是一個模塊樹。

一個項目對多個模塊
一個模塊下可以有多個子模塊
一個模塊對多個 API、CASE
一個 API 下有多個 CASE

另外還可以快速搜索模塊結(jié)點(diǎn)，搜索框右側(cè)還有一個按鈕，用來創(chuàng)建接口，新增頁面我還沒畫，這個后續(xù)再說。

右側(cè)區(qū)域

這里主要就是列表的展現(xiàn)了。

可以在【項目管理】列表里直接點(diǎn)擊一個項目跳轉(zhuǎn)過來。如果直接進(jìn)入到接口列表頁，會自動選擇一個默認(rèn)的項目。右上角也有個查詢框，支持多種條件的查詢。

至于那 2 個按鈕：API 和 CASE，我是想點(diǎn)擊之后可以切換展示對應(yīng)的列表，因為對應(yīng)的模塊樹是一樣的，所以覺得沒必要再整一個新頁面。

最后在列表記錄的最右固定住了操作欄，里面共有 5 個按鈕，其中每樣都對應(yīng)不同的功能：

【執(zhí)行】：可以用來調(diào)試接口，類似于使用 postman 。
【編輯】：可以修改接口內(nèi)容。
【用例】：點(diǎn)擊跳轉(zhuǎn)到此接口的 CASE 列表頁。
【刪除】：用來刪除接口，連帶刪除此接口下的 CASE，屆時估計后端是做邏輯刪除。
【復(fù)制】：復(fù)制當(dāng)前記錄的接口內(nèi)容，方便快速創(chuàng)建。

這里的每個功能都不簡單，后續(xù)充滿了挑戰(zhàn)，對應(yīng)的收獲肯定也會滿滿。

二、拼頁面思路

主要思路還是到 elementUI 找組件，然后復(fù)制代碼，修改代碼。但是這個期間遇到的注意點(diǎn)值得記錄一下，僅供參考。

1. 布局容器

最開始就是要如何實現(xiàn)左右的這種布局了，打開組件網(wǎng)址最上面第二個就是 Container 布局容器。

用于布局的容器組件，方便快速搭建頁面的基本結(jié)構(gòu)。往下翻可以看到好幾種布局示例圖，說實話最開始沒怎么看懂。

不過繼續(xù)往下翻，有唯一的一個頁面代碼示例，剛好符合我左右布局的需求，先拷過來。

大概要修改的內(nèi)容就有眉目了，接下來就是找對應(yīng)的組件，復(fù)制粘貼改代碼了。

流水賬就不記了，有問題需要交流的可以私信我。下面是使用各組件時關(guān)注到的知識點(diǎn)。

2. Tree 樹形控件

使用的是右邊的控件，復(fù)制代碼的時候注意要復(fù)制對應(yīng)的。

show-checkbox 屬性，就是結(jié)點(diǎn)前的勾選框，不需要就去掉。
default-expand-all ，默認(rèn)展開全部
:expand-on-click-node="false"，默認(rèn)是 true，當(dāng)新增一個節(jié)點(diǎn)后不自動展開。我這需要自動展開，改成 false。

另外我把按鈕換成了圖標(biāo)，用法超簡單：

class 里具體用哪個圖標(biāo)到組件里找即可：

橫向滾動條

當(dāng)節(jié)點(diǎn)名稱過長，超過側(cè)邊區(qū)域的寬度，需要可以橫向滾動。之前網(wǎng)上搜了不少辦法，都不行。

最后發(fā)現(xiàn)在 style 里加上display: flex就可以了。

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

后面還給左側(cè)加了點(diǎn)樣式，比如分割線、陰影：

<style>
  .el-aside {
    color: #333;
    border-right-style: solid;
    border-color: #f4f4f5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
</style>

其實這種也不太美觀，但是目前不考慮這些，先完成功能，后期再迭代優(yōu)化。