測(cè)試平臺(tái)開發(fā)vue組件化重構(gòu)前端代碼
基于 springboot+vue 的測(cè)試平臺(tái)開發(fā)
繼續(xù)更新（人在魔都 T_T）。
這期其實(shí)并不是一個(gè)詳細(xì)的開發(fā)過(guò)程記錄，主要還是針對(duì)本次前端重構(gòu)來(lái)聊聊幾個(gè)關(guān)注點(diǎn)。
目前重構(gòu)的總進(jìn)度在80%，重構(gòu)完的頁(yè)面沒什么變化，再回顧一下。
一、為什么重構(gòu)
目前項(xiàng)目的功能開發(fā)重點(diǎn)還是在接口管理這一大塊，內(nèi)容多，任務(wù)重，可當(dāng)我著手準(zhǔn)備繼續(xù)開發(fā)新功能的時(shí)候發(fā)現(xiàn)了個(gè)重大的問(wèn)題。
我之前接口相關(guān)的功能都寫在一個(gè)vue文件里，看了下代碼行數(shù)已然近800，現(xiàn)在查看之前代碼和改動(dòng)就已經(jīng)非常的不方便的，這后面功能還多了，繼續(xù)寫下去估計(jì)自己都要扔了。
所以重構(gòu)前端代碼優(yōu)先提上了日程。
怎么重構(gòu)，那當(dāng)然還是利用vue的組件化特性來(lái)進(jìn)行拆分。已當(dāng)前的完成度來(lái)看，從當(dāng)初的 1 個(gè)文件（紅色框的），拆分了現(xiàn)在的 10 文件（其他的）。
二、如何拆分
這部分主要有 2 個(gè)部分。
1. 補(bǔ)充對(duì)應(yīng)知識(shí)
這不是廢話么？因?yàn)橹皩?duì)相關(guān)知識(shí)儲(chǔ)備比較少，所以一開始也不知道如何下手，于是找起來(lái)。網(wǎng)上有很多博客、視頻等免費(fèi)學(xué)習(xí)資源，大家很容易就可以搜到。
我起初也是想針對(duì)性的補(bǔ)充下vue組件相關(guān)性高的知識(shí)點(diǎn)，后來(lái)看著看著，不知不覺幾乎把 vue 系統(tǒng)化的肝了一遍，雖然花費(fèi)了不少時(shí)間，但是收獲也很多，之前許多一知半解的問(wèn)題都知道為啥了。
這里羅列一些重要的知識(shí)點(diǎn)，僅供參考：
- vue 生命周期
- vue 組件基礎(chǔ)知識(shí)
- 組件間通信技術(shù)
- vuex
其中比較花費(fèi)精力的就是后面2個(gè)了。因?yàn)榻M件拆分勢(shì)必就會(huì)有多個(gè)組件協(xié)作，那么父子、兄弟、任意組件之間的數(shù)據(jù)傳遞和操作就需要這些技術(shù)來(lái)解決。
2. 合理拆分
合理拆分其實(shí)并沒有一個(gè)嚴(yán)格意義的要求，對(duì)我來(lái)說(shuō)重點(diǎn)是2個(gè)：代碼結(jié)構(gòu)更清晰、復(fù)用代碼。
舉例說(shuō)明一下，看圖。
圖中是接口定義的編輯頁(yè)面，本來(lái)都是在一個(gè)文件里的一大坨，經(jīng)過(guò)拆分之后：
- 紅色框作為一個(gè)最外層組件，里面包含了其他組件。
- 3個(gè)綠色框又對(duì)應(yīng)著3個(gè)子組件。
- 而在請(qǐng)求參數(shù)部分，我又進(jìn)一步的拆分了子組件（黃色框）。
后續(xù)如果有新增或者其他改動(dòng)，代碼結(jié)構(gòu)一目了然，很容易進(jìn)行維護(hù)。
而在實(shí)戰(zhàn)中遵循了這么一個(gè)組件化編碼的流程：
- 先拆分出靜態(tài)組件，按不同功能拆分，命名合理，如果你的拆分覺得不好取名字，大概率拆的不合理。
- 再實(shí)現(xiàn)動(dòng)態(tài)組件，看下這個(gè)組件是一個(gè)在用還是會(huì)重復(fù)使用，決定好數(shù)據(jù)要存放的位置。
- 最后實(shí)現(xiàn)交互，可以從綁定事件開始。
一步步來(lái)，中間也踩了不少坑，畢竟將知識(shí)的簡(jiǎn)單demo應(yīng)用到項(xiàng)目實(shí)戰(zhàn)中，還是要花點(diǎn)精力去琢磨的。
三、關(guān)于項(xiàng)目
這個(gè)項(xiàng)目后續(xù)還是會(huì)繼續(xù)更新下去，只是時(shí)間并不固定。作為練手項(xiàng)目，前后端的開發(fā)都可以得到一定的鍛煉。
不過(guò)近期因?yàn)楣ぷ魃嫌玫?react，所以現(xiàn)在優(yōu)先在肝這方面的知識(shí)，有興趣的小伙伴也可以去了解下 react、antd pro 等。
前端：
https://github.com/wessonlan/bloomtest-web
后端
https://github.com/wessonlan/bloomtest-backend
以上就是測(cè)試平臺(tái)開發(fā)vue組件化重構(gòu)前端代碼的詳細(xì)內(nèi)容，更多關(guān)于vue組件化重構(gòu)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過(guò)程,也就是new?Vue()?開始就是vue生命周期的開始。Vue?實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom?->?渲染、更新?->?渲染、卸載?等?系列過(guò)程,稱這是Vue的?命周期2022-07-07
詳解Vue3.0中ElementPlus<input輸入框自動(dòng)獲取焦點(diǎn)>
這篇文章主要給大家介紹了關(guān)于Vue3.0中ElementPlus<input輸入框自動(dòng)獲取焦點(diǎn)>的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
基于vue-cli3+typescript的tsx開發(fā)模板搭建過(guò)程分享
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開發(fā)模板,本文通過(guò)實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
element表單驗(yàn)證如何清除校驗(yàn)提示語(yǔ)
本文主要介紹了element表單驗(yàn)證如何清除校驗(yàn)提示語(yǔ)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
本文主要介紹了Vue3.2+Ts組件之間通信的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue3.0報(bào)錯(cuò)Cannot?find?module‘worker_threads‘的解決辦法
這篇文章介紹了vue3.0報(bào)錯(cuò)Cannot?find?module‘worker_threads‘的解決辦法。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題
這篇文章主要介紹了解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue.extend使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要給大家介紹了關(guān)于如何使用vuex實(shí)現(xiàn)兄弟組件通信的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11