Vue重構項目完結篇

前言

2021年3月底，我決定開始重構公司的後臺管理項目。 2021年5月初，我完成了項目重構。 50+個頁面，預期2個月，結果一個多月提早完成了。

• 爲何重構？

1. 項目是18年開始的，過手人數較多且沒有制定代碼規範，看起來都費力。
2. 重複代碼隨處可見還不能隨便刪除，不然真的是「給我一個槓桿，我能夠撬起整個地球。」
3. 這個項目是jq+bootstrapt寫的，代碼十分臃腫，隨着版本的不斷迭代，項目愈來愈大，維護成本也愈來愈高。

這是一個惡性循環，我以爲無論怎麼優化，只不過是在給他換深色衣服罷了（深色顯瘦），要想根本上解決問題，仍是得全面重構。

• 從零到一的過程困難嗎？

既然選擇了遠方，便只顧風雨兼程。

項目是我一我的全面負責的，有必定的壓力同時也收穫了不少。 不管是作什麼，從零到一一定無疑是困難的。 我以爲大體能夠分爲三個階段： 準備階段：項目需求必須都有大體瞭解而後決定項目選用框架、項目週期把控、項目細節優化、需求優化、哪些地方能夠實現昇華，達到質的飛躍。 實施階段：會遇到不少突發情況，你須要迎難而上。好比某個需求沒法按照原方案實施、以前採用的依賴版本更新後出現各類問題。 結尾階段：你須要回顧並理清全部需求確保萬無一失。

因爲項目是我一手開發，因此也創建了一個組件庫。

歡迎你們添磚加瓦，共建美好家園。

GitHub地址

成長

錯綜複雜的權限問題

以前作過的權限這一塊，

頁面權限是後端直接返回路由，前端直接拿過來用

功能權限的也是後端整理出來，前端直接拿過來用

此次啥都要本身動手着實讓人有點頭大。

因爲公司的重構是純前端重構，因此說不少東西都只能在前端改變。

權限這一塊分爲頁面權限和功能權限，因爲後端返回的是tree數據，我必需要對數據進行處理，

提取出有權限訪問頁面和功能權限點。這個過程無疑是使人難過的。

提取完成以後頁面權限的實施方案就是動態路由

功能權限的實施方案就是自定義權限指令

點擊圖片無效傳送門

gis全方位運用

19年的時候就接觸過gis，當時是宇通客車的車輛監控以及大屏展現全球化。因此如今作起來還算輕車熟路。

這個需求是echarts結合高德地圖實現當日用戶活躍地域分佈圖。也就是用搞得地圖打底，echars展現數據。

我決定採用echarts-extension-amap+echars+ 高德API進行實現

在實施過程當中遇到過不少問題，並且這類文檔較少。必需要本身思考和反覆扒拉官方文檔。

源文件以及你在開發中可能遇到的坑在這裏

極致文件壓縮

因爲公司業務偏社交，也就避免不了各類圖片、大小文件、視頻。

對於文件的極致壓縮處理是必須的，以前也詳細介紹過文件壓縮這一塊個人解決方案以及心得。

在這裏我就不詳細說了，下面是直通車。感興趣的小夥伴能夠去看看，相信對你會有幫助。

點擊圖片無效傳送門

點擊圖片無效傳送門

高效文件上傳

以前用jq寫過關於上傳圖片到阿里雲，此次用Vue顯然是要從新封裝的。

圖片上傳分爲單圖片上傳和多圖片上傳。

• 爲何要區分單文件仍是多文件？

多文件確定要遍歷，出於性能考慮，單文件沒有必要走遍歷。

說說思路吧

極致壓縮 --> 判斷是單文件仍是多文件 --> 開始上傳（以及斷點續傳、上傳失敗刪除文件等問題）

點擊圖片無效傳送門

音視頻文件上傳

鑑定視頻文件是否爲h.264格式

因爲APP目前只支持h.264格式的音視頻文件播放，因此說這個必須得作

點擊圖片無效傳送門

播放視頻，截取視頻封面

這個問題的解決方案很容易想到

• 頁面隱藏一個video標籤

• 用戶選擇視頻後，藉助 window.URL.createObjectURL(file)建立一個本地視頻連接給頁面隱藏的video標籤

• 讓它播放，藉助video的onloadedmetadata、ontimeupdate方法建立cavas畫布截屏

• 截取完整後，刪除視頻連接window.URL.revokeObjectURL(videoUrl)釋放內存

上傳視頻

項目視頻上傳文件最大爲2G,因此說頗有必要來一個上傳進度條以及斷點續傳、上傳失敗特殊處理

multipartUpload方法裏有個progress回調會實時返回上傳進度，同時支持斷點續傳。仍是比較省心的。

client.multipartUpload(storeName, file, {
// eslint-disable-next-line require-yield
progress: function * (percentage, checkpoint, r) {
  that.progress = Math.ceil(percentage * 100)
}
}).then(function(result) {
    console.log(result)
    result.name = '/' + result.name
    resolve(result)
}).catch(function(err) {
    console.log(err)
})
複製代碼

上傳完成後的鑑權回顯

對於鑑權我以前有介紹過，想了解的小夥伴能夠看看,

簡單來講就一句話「防盜、節流、快速播放」

詳細過程見下文

點擊圖片無效傳送門

表格組件

項目中涉及到最多的也就是表格了，因此說我單獨封裝了一套適合大多數表格頁面的組件。

因爲項目中表格的複雜程度不一，因此說有些頁面仍是必須特殊狀況特殊處理。

畢竟我一我的的力量是有限的，因此也但願你們能夠添磚加瓦，進一步完善它。

GitHub地址

友情提示：你們使用時多少會和你的業務邏輯有誤差，略做修改在所不免

點擊圖片無效傳送門

即時通信的實現

後臺管理項目中有個模塊是連接APP聊天室的，實現即時通信+及時發現搞事用戶禁言，封禁等功能

採用的是第三方融雲實現的,整體來講仍是不錯的，創建鏈接只須要0.1s,基本秒進秒同步。

想詳細瞭解的小夥伴，請移步

點擊圖片無效傳送門

實戰技巧合集

這裏面是在項目中遇到的各類比較雜的問題，部分重點問題記錄在裏面了。

例如：實戰中的突發問題、一些好的插件等......

點擊圖片無效傳送門

總結

此次項目重構，從零到一，個人的確確成長了很多。

之前都是中途加入某個項目，或者負責某個模塊。

剛開始準備全面重構的時候，我是猶豫的，懼怕未知的挑戰。反正老項目也能夠正常運做，我徹底能夠輕輕鬆鬆的維護。

可是我回想本身的coding經歷，

19年剛工做在鄭州爲了工資高點，我以三年工做經驗進了外包，爲了彌補本身在實戰上的經驗不足，那段時間我通宵達

旦的學習，天天雖然壓力很大，幾個月下來我居然徹底適應了這種生活，對於需求輕車熟路。妥妥的「三年經驗」，

隨後手中負責的項目愈來愈多，最多的時候有8個。

雖然你們都誇我年紀輕輕，coding技術都這麼好。可是我也不敢說我纔剛畢業。

一年左右時也就是20年6月份，手上還有兩個「小弟」，乙方公司想讓我「轉正」去他們公司。

我以爲年輕的我應該去一線拼搏，這樣的「養老生活不是我想要的」，因而我拒絕了。

直接裸辭去大理和麗江旅遊了，爲期10天的旅遊很快就結束了。

我就直接飛來了魔都上海，在網上找的房子，也順利的住進去了。

次日開始準備簡歷，開始面試了。面試大概一週我發現外面的世界對於「專科畢業」好像不是那麼友好。

面試了7家公司，還好拿下了三個offer。

第一個是外包銀行14K

第二個外包公安13K

第三個是本身公司業務12K，前端負責人

我當時糾結了很久，我一直問本身究竟是爲了什麼來上海，我以爲本身須要技術沉澱一年，因此最終我選擇了第三個。

因此就有了如今，我還有什麼可猶豫的呢？我不由想罵本身。

會當凌絕頂,一覽衆山小。

本身負責一個項目從無到有的過程，雖然有過許多挑戰也好、困難也好

可是當你寫完最後一行代碼，進行打包交付的那一刻，

彷彿全世界都在爲你驕傲，爲你鼓掌。

說不出爲何，可是很開心、很自豪、頗有成就感。

可能這就是熱愛吧。

• 對於遇到的問題，我以爲咱們須要有本身的思考。

盡信書不如無書

• 對於工做，我以爲不管熱愛與否都須要責任在身

人生須知負責任的苦處，才能知道盡責任的樂趣。

• 對於生活，我以爲不管開心與否都須要樂在其中

明月幾時有，把酒問青天。

寫在最後

我是涼城a，一個前端，熱愛技術也熱愛生活。

與你相逢，我很開心。

若是你想了解更多，請點這裏，期待你的小⭐⭐

• 文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊和關注😊

• 本文首發於掘金，未經許可禁止轉載💌