基於 springboot+vue 的測試平臺開發繼續更新（人在魔都 T_T）。
這期其實並不是一個詳細的開發過程記錄，主要還是針對本次前端重構來聊聊幾個關注點。
目前重構的總進度在80%，重構完的頁面沒什麼變化，再回顧一下。
一、爲什麼重構
目前項目的功能開發重點還是在接口管理這一大塊，內容多，任務重，可當我着手準備繼續開發新功能的時候發現了個重大的問題。
我之前接口相關的功能都寫在一個vue文件裏，看了下代碼行數已然近800，現在查看之前代碼和改動就已經非常的不方便的，這後面功能還多了，繼續寫下去估計自己都要扔了。
所以重構前端代碼優先提上了日程。
怎麼重構，那當然還是利用vue的組件化特性來進行拆分。已當前的完成度來看，從當初的 1 個文件（紅色框的），拆分了現在的 10 文件（其他的）。
二、如何拆分
這部分主要有 2 個部分。
1. 補充對應知識
這不是廢話麼？因爲之前對相關知識儲備比較少，所以一開始也不知道如何下手，於是找起來。網上有很多博客、視頻等免費學習資源，大家很容易就可以搜到。
我起初也是想針對性的補充下vue組件相關性高的知識點，後來看着看着，不知不覺幾乎把 vue 系統化的肝了一遍，雖然花費了不少時間，但是收穫也很多，之前許多一知半解的問題都知道爲啥了。
這裏羅列一些重要的知識點，僅供參考：
- vue 生命週期
- vue 組件基礎知識
- 組件間通信技術
- vuex
其中比較花費精力的就是後面2個了。因爲組件拆分勢必就會有多個組件協作，那麼父子、兄弟、任意組件之間的數據傳遞和操作就需要這些技術來解決。
2. 合理拆分
合理拆分其實並沒有一個嚴格意義的要求，對我來說重點是2個：代碼結構更清晰、複用代碼。
舉例說明一下，看圖。
圖中是接口定義的編輯頁面，本來都是在一個文件裏的一大坨，經過拆分之後：
- 紅色框作爲一個最外層組件，裏面包含了其他組件。
- 3個綠色框又對應着3個子組件。
- 而在請求參數部分，我又進一步的拆分了子組件（黃色框）。
後續如果有新增或者其他改動，代碼結構一目瞭然，很容易進行維護。
而在實戰中遵循了這麼一個組件化編碼的流程：
- 先拆分出靜態組件，按不同功能拆分，命名合理，如果你的拆分覺得不好取名字，大概率拆的不合理。
- 再實現動態組件，看下這個組件是一個在用還是會重複使用，決定好數據要存放的位置。
- 最後實現交互，可以從綁定事件開始。
一步步來，中間也踩了不少坑，畢竟將知識的簡單demo應用到項目實戰中，還是要花點精力去琢磨的。
三、關於項目
這個項目後續還是會繼續更新下去，只是時間並不固定。作爲練手項目，前後端的開發都可以得到一定的鍛鍊。
不過近期因爲工作上用到 react，所以現在優先在肝這方面的知識，有興趣的小夥伴也可以去了解下 react、antd pro 等。
源碼已經更新到了github，有興趣的童鞋可以公衆號後臺回覆【測試平臺】獲取地址以及文章系列合集，也可以後臺回覆添加我，互相交流。