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

繼續(xù)更新。

一、功能簡(jiǎn)介

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

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

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

先放出初版完成的頁(yè)面，簡(jiǎn)述一下頁(yè)面功能。

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

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

是一個(gè)模塊樹(shù)。

• 一個(gè)項(xiàng)目對(duì)多個(gè)模塊
• 一個(gè)模塊下可以有多個(gè)子模塊
• 一個(gè)模塊對(duì)多個(gè) API、CASE
• 一個(gè) API 下有多個(gè) CASE

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

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

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

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

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

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

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

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

二、拼頁(yè)面思路

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

1. 布局容器

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

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

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

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

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

2. Tree 樹(shù)形控件

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

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

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

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

橫向滾動(dòng)條

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

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

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

后面還給左側(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>

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

3. div與span

拼右側(cè)也很簡(jiǎn)單了，分別對(duì)應(yīng)著 2 個(gè)標(biāo)簽：<el-header>和<el-main>，把對(duì)應(yīng)的組件放到對(duì)應(yīng)的標(biāo)簽里即可。

但是在給<el-header>添加一個(gè)查詢輸入框的時(shí)候，發(fā)現(xiàn)頁(yè)面確看不出來(lái)。

不顯示輸入框。

后來(lái)發(fā)現(xiàn)不應(yīng)該再包一個(gè)div，改成span就好，或者放到2個(gè)按鈕的 span 標(biāo)簽里也可以。

<div>元素是塊級(jí)元素，它是可用于組合其他 HTML 元素的容器。用標(biāo)簽把多個(gè)元素包起來(lái)，就相當(dāng)于他們是一伙兒的了，改樣式啥的直接對(duì)標(biāo)簽修改，全部受用。

<span>元素是內(nèi)聯(lián)元素，可用作文本的容器。

這2個(gè)標(biāo)簽通常可以理解為沒(méi)有什么區(qū)別，但注意的是div占用一行，span不會(huì)占用一行，內(nèi)容占多大寬度，span就有多寬。

以上就是springboot vue接口測(cè)試前端模塊樹(shù)和接口列表的詳細(xì)內(nèi)容，接下來(lái)就是對(duì)應(yīng)各種功能的后端實(shí)現(xiàn)，更多關(guān)于springboot vue前端模塊樹(shù)接口列表的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！