溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么用springboot vue接口測試前端模塊樹和接口列表”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
今天的目標是畫一個接口管理列表的前端頁面。本來我也想去弄個簡單的原型圖先，但是搜了個網頁工具一時半會也不會用，作罷。
最終決定直接用 elementUI 的組件拼一個出來。直到最后完成用了大半天時間，很顯然這個頁面對我來說還是有點復雜的。
比起項目管理的一個table頁，這里的內容多了很多。自然也就遇到了不少之前不太會的前端知識，通過查看 elementUI 官方文檔、搜索引擎等方式，逐個去解決，也算有些收獲。
先放出初版完成的頁面，簡述一下頁面功能。
整個頁面分為 2 個區域：
是一個模塊樹。
一個項目對多個模塊
一個模塊下可以有多個子模塊
一個模塊對多個 API、CASE
一個 API 下有多個 CASE
另外還可以快速搜索模塊結點，搜索框右側還有一個按鈕，用來創建接口，新增頁面我還沒畫，這個后續再說。
這里主要就是列表的展現了。
可以在【項目管理】列表里直接點擊一個項目跳轉過來。如果直接進入到接口列表頁，會自動選擇一個默認的項目。右上角也有個查詢框，支持多種條件的查詢。
至于那 2 個按鈕：API 和 CASE，我是想點擊之后可以切換展示對應的列表，因為對應的模塊樹是一樣的，所以覺得沒必要再整一個新頁面。
最后在列表記錄的最右固定住了操作欄，里面共有 5 個按鈕，其中每樣都對應不同的功能：
【執行】：可以用來調試接口，類似于使用 postman 。
【編輯】：可以修改接口內容。
【用例】：點擊跳轉到此接口的 CASE 列表頁。
【刪除】：用來刪除接口，連帶刪除此接口下的 CASE，屆時估計后端是做邏輯刪除。
【復制】：復制當前記錄的接口內容，方便快速創建。
這里的每個功能都不簡單，后續充滿了挑戰，對應的收獲肯定也會滿滿。
主要思路還是到 elementUI 找組件，然后，修改代碼。但是這個期間遇到的注意點值得記錄一下，僅供參考。
最開始就是要如何實現左右的這種布局了，打開組件網址最上面第二個就是 Container 布局容器。
用于布局的容器組件，方便快速搭建頁面的基本結構。往下翻可以看到好幾種布局示例圖，說實話最開始沒怎么看懂。
不過繼續往下翻，有唯一的一個頁面代碼示例，剛好符合我左右布局的需求，先拷過來。
大概要修改的內容就有眉目了，接下來就是找對應的組件，復制粘貼改代碼了。
流水賬就不記了，有問題需要交流的可以私信我。下面是使用各組件時關注到的知識點。
使用的是右邊的控件，的時候注意要復制對應的。
show-checkbox 屬性，就是結點前的勾選框，不需要就去掉。default-expand-all ，默認展開全部:expand-on-click-node="false"，默認是 true，當新增一個節點后不自動展開。我這需要自動展開，改成 false。
另外我把按鈕換成了圖標，用法超簡單：
class 里具體用哪個圖標到組件里找即可：
橫向滾動條
當節點名稱過長，超過側邊區域的寬度，需要可以橫向滾動。之前網上搜了不少辦法，都不行。
最后發現在 style 里加上display: flex就可以了。
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
后面還給左側加了點樣式，比如分割線、陰影：
<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>其實這種也不太美觀，但是目前不考慮這些，先完成功能，后期再迭代優化。
拼右側也很簡單了，分別對應著 2 個標簽：<el-header>和<el-main>，把對應的組件放到對應的標簽里即可。
但是在給<el-header>添加一個查詢輸入框的時候，發現頁面確看不出來。
不顯示輸入框。
后來發現不應該再包一個div，改成span就好，或者放到2個按鈕的 span 標簽里也可以。
<div>元素是塊級元素，它是可用于組合其他 HTML 元素的容器。用標簽把多個元素包起來，就相當于他們是一伙兒的了，改樣式啥的直接對標簽修改，全部受用。
<span>元素是內聯元素，可用作文本的容器。
這2個標簽通常可以理解為沒有什么區別，但注意的是div占用一行，span不會占用一行，內容占多大寬度，span就有多寬。
“怎么用springboot vue接口測試前端模塊樹和接口列表”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
