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

繼續(xù)更新（人在魔都 T_T）。

這期其實并不是一個詳細的開發(fā)過程記錄，主要還是針對本次前端重構來聊聊幾個關注點。

目前重構的總進度在80%，重構完的頁面沒什么變化，再回顧一下。

一、為什么重構

目前項目的功能開發(fā)重點還是在接口管理這一大塊，內容多，任務重，可當我著手準備繼續(xù)開發(fā)新功能的時候發(fā)現(xiàn)了個重大的問題。

我之前接口相關的功能都寫在一個vue文件里，看了下代碼行數(shù)已然近800，現(xiàn)在查看之前代碼和改動就已經(jīng)非常的不方便的，這后面功能還多了，繼續(xù)寫下去估計自己都要扔了。

所以重構前端代碼優(yōu)先提上了日程。

怎么重構，那當然還是利用vue的組件化特性來進行拆分。已當前的完成度來看，從當初的 1 個文件（紅色框的），拆分了現(xiàn)在的 10 文件（其他的）。

二、如何拆分

這部分主要有 2 個部分。

1. 補充對應知識

這不是廢話么？因為之前對相關知識儲備比較少，所以一開始也不知道如何下手，于是找起來。網(wǎng)上有很多博客、視頻等免費學習資源，大家很容易就可以搜到。

我起初也是想針對性的補充下vue組件相關性高的知識點，后來看著看著，不知不覺幾乎把 vue 系統(tǒng)化的肝了一遍，雖然花費了不少時間，但是收獲也很多，之前許多一知半解的問題都知道為啥了。

這里羅列一些重要的知識點，僅供參考：

• vue 生命周期
• vue 組件基礎知識
• 組件間通信技術
• vuex

其中比較花費精力的就是后面2個了。因為組件拆分勢必就會有多個組件協(xié)作，那么父子、兄弟、任意組件之間的數(shù)據(jù)傳遞和操作就需要這些技術來解決。

2. 合理拆分

合理拆分其實并沒有一個嚴格意義的要求，對我來說重點是2個：代碼結構更清晰、復用代碼。

舉例說明一下，看圖。

圖中是接口定義的編輯頁面，本來都是在一個文件里的一大坨，經(jīng)過拆分之后：

• 紅色框作為一個最外層組件，里面包含了其他組件。
• 3個綠色框又對應著3個子組件。
• 而在請求參數(shù)部分，我又進一步的拆分了子組件（黃色框）。

后續(xù)如果有新增或者其他改動，代碼結構一目了然，很容易進行維護。

而在實戰(zhàn)中遵循了這么一個組件化編碼的流程：

• 先拆分出靜態(tài)組件，按不同功能拆分，命名合理，如果你的拆分覺得不好取名字，大概率拆的不合理。
• 再實現(xiàn)動態(tài)組件，看下這個組件是一個在用還是會重復使用，決定好數(shù)據(jù)要存放的位置。
• 最后實現(xiàn)交互，可以從綁定事件開始。

一步步來，中間也踩了不少坑，畢竟將知識的簡單demo應用到項目實戰(zhàn)中，還是要花點精力去琢磨的。

三、關于項目

這個項目后續(xù)還是會繼續(xù)更新下去，只是時間并不固定。作為練手項目，前后端的開發(fā)都可以得到一定的鍛煉。

不過近期因為工作上用到 react，所以現(xiàn)在優(yōu)先在肝這方面的知識，有興趣的小伙伴也可以去了解下 react、antd pro 等。

前端：

https://github.com/wessonlan/bloomtest-web

后端

https://github.com/wessonlan/bloomtest-backend

以上就是測試平臺開發(fā)vue組件化重構前端代碼的詳細內容，更多關于vue組件化重構的資料請關注腳本之家其它相關文章！

最新評論