基于Vue的前端開發(fā)框架的設(shè)計(jì)與實(shí)現(xiàn)分析

李如桃

【摘 要】 近年來，伴隨Web前端技術(shù)發(fā)展速度的不斷加快，用戶對(duì)產(chǎn)品的性能及應(yīng)用提出了多元化的要求，加大了前端開發(fā)難度。為了科學(xué)地解決前端在開發(fā)環(huán)節(jié)存在的維護(hù)難、可擴(kuò)展性低、代碼重用性低等問題，合理提升開發(fā)效率，有效進(jìn)行框架開發(fā)成為必然趨勢(shì)?；诖耍恼乱訴ue為基礎(chǔ)的前端開發(fā)框架從設(shè)計(jì)與實(shí)現(xiàn)角度展開研究，首先闡述了開發(fā)框架的功能架構(gòu)設(shè)計(jì)，其次論述了架構(gòu)功能的具體實(shí)現(xiàn)，以供參考。

【關(guān)鍵詞】 Vue；前端開發(fā)；開發(fā)框架；框架設(shè)計(jì)

伴隨前端應(yīng)用復(fù)雜度的持續(xù)提升，傳統(tǒng)的應(yīng)用開發(fā)方式，無法適應(yīng)現(xiàn)代化產(chǎn)品在發(fā)展層面的多元變化，為了有效應(yīng)對(duì)當(dāng)前前端在開發(fā)環(huán)節(jié)面臨的諸多問題，前端工程師在開發(fā)期間，一般會(huì)選擇開發(fā)框架的方式通過模型組建合理提升開發(fā)的整體工作效率。當(dāng)前，效果較好的前端框架數(shù)量處于充足狀態(tài)，但是此種類型的框架對(duì)于通用性模塊在集成上以及實(shí)際邏輯在交互層面的設(shè)計(jì)等相關(guān)工作匱乏度較高，如果以現(xiàn)在狀態(tài)對(duì)項(xiàng)目完成相對(duì)應(yīng)的研發(fā)工作，必然會(huì)在成本上形成一定的消耗?；诖?，針對(duì)以Vue為基礎(chǔ)的前端開發(fā)框架在設(shè)計(jì)和實(shí)現(xiàn)角度展開深層次的探討，就當(dāng)前現(xiàn)狀來講，擁有極為重要的現(xiàn)實(shí)價(jià)值。

一、以Vue為基礎(chǔ)的前端在開發(fā)角度的框架功能架構(gòu)設(shè)計(jì)分析

（一）基礎(chǔ)功能模塊框架設(shè)計(jì)分析

1. 認(rèn)證登錄設(shè)計(jì)

在前端應(yīng)用環(huán)節(jié)，認(rèn)證登錄屬于不可或缺的一項(xiàng)基礎(chǔ)性功能。在具體開發(fā)環(huán)節(jié)，幾乎所有Web應(yīng)用都要完成認(rèn)證登錄，針對(duì)常見的工作業(yè)務(wù)在需求層面展開討論，在框架內(nèi)部體系中組織建立以Token為基礎(chǔ)的登錄認(rèn)證工作流程，并在調(diào)用接口上提供一套完整的API體系，使一鍵登錄、短信驗(yàn)證碼、動(dòng)態(tài)性驗(yàn)證碼等功能得以實(shí)現(xiàn)，開發(fā)人員對(duì)該框架進(jìn)行開發(fā)時(shí)，只需要對(duì)有關(guān)API接口完成調(diào)用，即可正常使用該功能，不需要重復(fù)實(shí)行開發(fā)操作。

2. 權(quán)限控制設(shè)計(jì)

開發(fā)框架體系在內(nèi)部，針對(duì)權(quán)限從控制角度研發(fā)出了一套完備性相對(duì)較高的體系，可以針對(duì)時(shí)間權(quán)限、按鈕權(quán)限、菜單權(quán)限等相關(guān)權(quán)限實(shí)現(xiàn)合理調(diào)控，從實(shí)踐上提供了不同的解決方案。其中，就管控角度來講，以動(dòng)態(tài)性的路由為基礎(chǔ)執(zhí)行相關(guān)操作，頁(yè)面在執(zhí)行初始化指令時(shí)，到服務(wù)端對(duì)用戶路由表完成加載操作，動(dòng)態(tài)地在路由上對(duì)其完成掛載操作，不同用戶在路由表中擁有不同的對(duì)應(yīng)信息。按鍵權(quán)限和菜單權(quán)限就實(shí)現(xiàn)管理角度而言相似程度整體比較高，都是在執(zhí)行初始化命令時(shí)，針對(duì)用戶按鈕相關(guān)信息完成加載操作，在全局體系框架內(nèi)，針對(duì)按鈕權(quán)限組建相對(duì)應(yīng)的執(zhí)行函數(shù)，實(shí)現(xiàn)按鈕與用戶在權(quán)限層面的相關(guān)聯(lián)系的科學(xué)匹配，針對(duì)按鈕的隱藏功能以及顯示功能實(shí)現(xiàn)動(dòng)態(tài)性的控制。

3. 角色管理設(shè)計(jì)

利用Element-UI中的Card卡片對(duì)用戶以及角色進(jìn)行科學(xué)管理和控制，將用戶及角色有關(guān)聯(lián)的數(shù)據(jù)信息以卡片的方式呈現(xiàn)，卡片中用到的組件類型為樹形，用于用戶決策及資源信息實(shí)現(xiàn)合理儲(chǔ)存，能夠更加便捷地執(zhí)行用戶角色和資源之間的修改和調(diào)整等操作。

（二）組件內(nèi)部功能模塊在框架角度的設(shè)計(jì)分析

框架體系內(nèi)部在功能上封裝與集成了豐富度較高的相關(guān)組件，為用戶在調(diào)用層面的工作提供更加便捷性的服務(wù)。針對(duì)常見的表格組件、編輯器、樹形表格、圖像組件等完成科學(xué)集成，針對(duì)少數(shù)組件執(zhí)行封裝操作，以適當(dāng)呈現(xiàn)方式，合理滿足不同場(chǎng)景下提出的多元化需求。文章主要論述Charts可視化組件、Chat聊天組件、Svg-icon圖標(biāo)組件的設(shè)計(jì)與實(shí)現(xiàn)。

在前端開發(fā)環(huán)節(jié)中，圖標(biāo)引用數(shù)量極其龐大，如果選擇傳統(tǒng)方式進(jìn)行圖標(biāo)應(yīng)用，通常只能以選擇手工的方式，對(duì)圖標(biāo)實(shí)現(xiàn)逐個(gè)引用，這種方式不僅會(huì)耗費(fèi)大量人力，也會(huì)降低工作效率。Svg-icon組件以圖標(biāo)名稱為基礎(chǔ)，對(duì)相關(guān)資源執(zhí)行加載操作，可以對(duì)圖標(biāo)完成自動(dòng)化的渲染，并以手動(dòng)的方式對(duì)圖標(biāo)的大小和顏色進(jìn)行更改，也能更加便捷地對(duì)在線圖標(biāo)實(shí)現(xiàn)科學(xué)引用。Chat聊天組件能夠?yàn)橛脩粼诹奶鞂用娼M織建立簡(jiǎn)單化水準(zhǔn)較高的聊天室，在聊天室內(nèi)完成消息的發(fā)送及存儲(chǔ)等相關(guān)操作。Charts可視化組件的主要作用是以Echarts作為基礎(chǔ)，針對(duì)各個(gè)圖表模板在框架內(nèi)部實(shí)現(xiàn)封裝，不僅可以從動(dòng)態(tài)性角度對(duì)數(shù)據(jù)實(shí)現(xiàn)綁定，還能從實(shí)時(shí)化角度對(duì)數(shù)據(jù)完成更新，并且將事件監(jiān)聽功能在可視化圖表當(dāng)中添加完成，支持在點(diǎn)擊圖標(biāo)的同時(shí)，完成路由跳轉(zhuǎn)操作。

二、以Vue為基礎(chǔ)的前端在開發(fā)角度的框架功能實(shí)現(xiàn)分析

（一）登錄功能的實(shí)現(xiàn)分析

1. 登錄驗(yàn)證

用戶在登錄的頁(yè)面上完成用戶名和用戶密碼輸入操作之后，將身份驗(yàn)證請(qǐng)求信息發(fā)送到服務(wù)器端。

服務(wù)器端在完成信息接收操作之后，將用戶名與密碼等與數(shù)據(jù)庫(kù)中的信息實(shí)現(xiàn)校驗(yàn)比對(duì)。

服務(wù)器端將校驗(yàn)結(jié)果發(fā)送到客戶端，信息匹配完成后，向客戶端返回一個(gè)簽名Token，如若匹配失敗，則會(huì)直接顯示匹配失敗。

客戶端在接到服務(wù)器端發(fā)送的相應(yīng)用戶簽名信息之后，將在本地文件中執(zhí)行存儲(chǔ)操作，以后每次向服務(wù)器端請(qǐng)求相應(yīng)信息時(shí)，相對(duì)應(yīng)的簽名信息都會(huì)包含其中。

服務(wù)器端對(duì)過濾器Filter執(zhí)行應(yīng)用操作，可以對(duì)簽名信息的真實(shí)性完成校驗(yàn)，如果校驗(yàn)成功會(huì)直接在請(qǐng)求角度發(fā)送相應(yīng)信息，失敗則直接顯示失敗。

2. 用戶信息的加載

用戶在執(zhí)行登錄和驗(yàn)證等相關(guān)操作時(shí)，客戶端會(huì)向服務(wù)端口發(fā)送的相關(guān)簽名的數(shù)據(jù)信息，在本地文件中執(zhí)行儲(chǔ)存操作，但是不會(huì)對(duì)用戶關(guān)聯(lián)信息一同執(zhí)行存儲(chǔ)操作。原因是防止相同用戶賬號(hào)在不同設(shè)備頁(yè)面登錄時(shí)，由于另一臺(tái)設(shè)備對(duì)信息同時(shí)執(zhí)行修改操作而導(dǎo)致另一臺(tái)設(shè)備中無法顯示用戶的最新信息，避免了兩臺(tái)設(shè)備信息不相符的問題。

在此環(huán)節(jié)采取的設(shè)計(jì)方案是頁(yè)面在執(zhí)行刷新操作期間，會(huì)優(yōu)先從本地文件中掃描有無簽名信息的存在，如果沒有掃描到，則需要再次執(zhí)行認(rèn)證流程，如果掃描到簽名信息，則會(huì)在API發(fā)送請(qǐng)求時(shí)直接裹挾認(rèn)證信息到服務(wù)端，之后獲取用戶的具體信息，確保信息的實(shí)時(shí)性。

（二）實(shí)現(xiàn)權(quán)限控制

1. 實(shí)現(xiàn)菜單級(jí)別權(quán)限

前端在向后臺(tái)發(fā)送路由數(shù)據(jù)的請(qǐng)求信息時(shí)，需要對(duì)時(shí)機(jī)拿捏得當(dāng)，一般用戶在完成登錄操作后，服務(wù)器端口菜單信息會(huì)實(shí)現(xiàn)自動(dòng)加載，加載完成后會(huì)在Store中完成儲(chǔ)存。

2. 實(shí)現(xiàn)按鈕級(jí)別權(quán)限

用戶在正確執(zhí)行登錄操作并進(jìn)入到主頁(yè)面之前，服務(wù)器端口會(huì)對(duì)菜單資源實(shí)現(xiàn)同時(shí)加載，確保用戶進(jìn)入到頁(yè)面后，按鈕相關(guān)信息能夠正確加載，后臺(tái)再將Json相關(guān)數(shù)據(jù)信息發(fā)送到前端，之后在Store中完成數(shù)據(jù)信息的存儲(chǔ)。

按鈕資源加載完成并順利儲(chǔ)存在Store之后，針對(duì)其中某個(gè)頁(yè)面執(zhí)行訪問操作時(shí)，頁(yè)面中的所有按鈕都可以選擇使用hasBtnPermission的方法，對(duì)按鈕顯示進(jìn)行控制。首先在store中對(duì)當(dāng)前用戶儲(chǔ)存的按鈕權(quán)限信息進(jìn)行處理，將用戶具備的所有權(quán)限標(biāo)識(shí)統(tǒng)一存放在數(shù)組中，之后再與用戶將要訪問的頁(yè)面當(dāng)中的按鈕信息與權(quán)限層面的標(biāo)識(shí)與標(biāo)記做好甄別，甄別結(jié)果顯示成功，則出現(xiàn)Ture字樣，失敗則出現(xiàn)False字樣。

在按鈕當(dāng)中對(duì)V-if屬性完成應(yīng)用，按照匹配結(jié)果實(shí)現(xiàn)隱藏和顯示。

3. 角色管理的具體實(shí)現(xiàn)

用戶在角色關(guān)系層面的管理主要涵蓋系統(tǒng)管理人員針對(duì)用戶在角色、狀態(tài)等層面的管控，其中用戶決策信息的管理工作主要涵蓋角色的刪除、添加等，用戶狀態(tài)信息管理包含用戶啟用、用戶禁用等。

（三）組件設(shè)計(jì)的實(shí)現(xiàn)

1. Svg-icon組件

首先針對(duì)Svg資源執(zhí)行導(dǎo)入，通常情況下，所導(dǎo)入的Svg圖片中會(huì)包含大量的冗余數(shù)據(jù)信息，增加了圖標(biāo)資源在框架中的整體占有率，借助該組件能夠?qū)θ哂嘈畔⑼瓿蛇^濾，對(duì)圖標(biāo)進(jìn)行精簡(jiǎn)。之后對(duì)Svg圖標(biāo)資源完成導(dǎo)入操作，傳統(tǒng)方式是每次應(yīng)用資源時(shí)完成一次導(dǎo)入，耗時(shí)耗力，利用圖標(biāo)自動(dòng)導(dǎo)入方式則方便許多。

圖標(biāo)導(dǎo)入完成后，對(duì)Svg-icon完成全局注冊(cè)，在頁(yè)面內(nèi)實(shí)現(xiàn)引用，對(duì)本地圖標(biāo)與外部圖標(biāo)兩種資源的引用進(jìn)行甄別，結(jié)果顯示內(nèi)部資源則可直接通過，結(jié)果顯示外部資源則會(huì)借助CSS中的Mask屬性對(duì)圖片進(jìn)行遮蓋，對(duì)圖標(biāo)格式實(shí)現(xiàn)統(tǒng)一之后，按照?qǐng)D標(biāo)名稱完成加載。

isExternel函數(shù)主要是對(duì)引用資源進(jìn)行甄別，看其是否為網(wǎng)絡(luò)資源，如果是則需要做單獨(dú)處理。之后引入Svg-spite-loader對(duì)文件內(nèi)容進(jìn)行讀取之后，將其注入CSS當(dāng)中，引入完成后，項(xiàng)目運(yùn)行若產(chǎn)生異常信息，原因是文件讀取工具與默認(rèn)處理工具二者之間產(chǎn)生問題。

在框架體系中對(duì)Webpack執(zhí)行配置，讓文件處理相關(guān)文具在指定文件夾下針對(duì)Svg圖標(biāo)進(jìn)行相應(yīng)處理，之后再由Url-loader對(duì)其余Svg圖標(biāo)進(jìn)行處理，合理規(guī)避二者之間產(chǎn)生的沖突。

2. Chartx可視化組件的實(shí)現(xiàn)

首先安裝Echrts，在項(xiàng)目根目錄中運(yùn)行安裝命令，安裝操作結(jié)束后，在項(xiàng)目中對(duì)其執(zhí)行引入操作。一般狀況下，為了提高開發(fā)的便捷性，在項(xiàng)目當(dāng)中會(huì)針對(duì)Echarts組件在前期角度進(jìn)行引用。之后對(duì)組件的封裝和實(shí)現(xiàn)進(jìn)行介紹，并創(chuàng)建兩個(gè)文件，一個(gè)由父組件對(duì)圖表進(jìn)行調(diào)用，一個(gè)則由子組件對(duì)圖表進(jìn)行渲染。

在子組件中按照要求引入插件，在選項(xiàng)中對(duì)可視化圖表完成配置，其中包括數(shù)據(jù)選項(xiàng)、公共組件、顯示樣式、標(biāo)題設(shè)置等相關(guān)配置。

組件中加入了圖表事件的監(jiān)聽，由監(jiān)聽組件完成路由跳轉(zhuǎn)、信息提示等邏輯性的操作。

3. Chat聊天組件的實(shí)現(xiàn)

用戶Card.vue組件的主要功能是對(duì)當(dāng)前用戶執(zhí)行展示操作之后，以模糊性匹配的方法，在用戶的好友列表中對(duì)好友執(zhí)行查找操作。以用戶名結(jié)合頭像的方式，針對(duì)用戶在信息層面實(shí)現(xiàn)標(biāo)記，之后在用戶完成登錄操作后，在本地文件儲(chǔ)存夾SessionStorage中對(duì)用戶信息進(jìn)行獲取，用戶功能查找主要是以V-model屬性為基礎(chǔ)，將與用戶有關(guān)聯(lián)的搜索關(guān)鍵詞，在好友列表中儲(chǔ)存的全部好友姓名中完成模糊性匹配。

用戶列表組件功能是將當(dāng)前用戶的所有好友以列表進(jìn)行顯示，當(dāng)點(diǎn)擊某個(gè)好友的頭像并對(duì)其發(fā)起聊天時(shí)，會(huì)首先觸發(fā)方法ChangeCurrentSession方法，將當(dāng)前聊天好友數(shù)據(jù)信息更改成CurrentSession，之后使用ElementUI體系內(nèi)的Badge組件，針對(duì)當(dāng)前正在聊天的好友，從好友狀態(tài)上做好標(biāo)記。

Message.Vue組件在聊天室當(dāng)中的功能是展示好友聊天信息，當(dāng)用戶點(diǎn)擊好友聊天框并執(zhí)行聊天操作時(shí)，以v-for循環(huán)為基礎(chǔ)，在聊天框內(nèi)部自動(dòng)對(duì)用戶和好友以往聊天記錄完成展示操作，應(yīng)用Filters對(duì)用戶頭像信息實(shí)現(xiàn)篩選，對(duì)于信息進(jìn)行過濾，將其變?yōu)镠ours：Minutes，再借助Vue對(duì)Directives指令實(shí)現(xiàn)自定義，信息發(fā)送完成后，自動(dòng)滾動(dòng)到聊天窗口的底部。

三、結(jié)語

綜上所述，文章著重論述了框架的設(shè)計(jì)與實(shí)現(xiàn)，對(duì)前端開發(fā)環(huán)節(jié)面臨的開發(fā)難度大、效率低等相關(guān)問題，從解決方法上提出了不同的多元方案，但是就框架整體來講，是以JavaScript框架體系當(dāng)中的Vue.js為基礎(chǔ)執(zhí)行開發(fā)操作，針對(duì)框架底層的代碼在重構(gòu)以及性能優(yōu)化等諸多層面所涉及的內(nèi)容相對(duì)不多。在未來，需要在深層次關(guān)注具體需求的情況下，加強(qiáng)對(duì)框架在性能角度的設(shè)計(jì)和創(chuàng)新，與此同時(shí)陸續(xù)跟進(jìn)用戶在使用層面的體驗(yàn)感受，對(duì)框架在應(yīng)用角度的實(shí)際功能做出優(yōu)化和創(chuàng)新。

參考文獻(xiàn)：

［1］ 李鳳盼，趙志敏，王瑩瑩. 基于Vue的建筑項(xiàng)目智能管理可視化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］. 軟件，2023，44（02）：77-80.

［2］ 劉秋蘭，張靜. 淺談Web前端開發(fā)模式發(fā)展［J］. 電子測(cè)試，2022，36（21）：135-137.

［3］ 王萍芳. 基于VUE的智能采摘機(jī)器人前端開發(fā)框架研究［J］. 農(nóng)機(jī)化研究，2023，45（05）：229-232.

［4］ 周園園. 基于Vue. js和JavaScript技術(shù)設(shè)計(jì)與實(shí)現(xiàn)的多功能Web計(jì)算器［J］. 科技資訊，2022，20（12）：10-13.

［5］ 黃可. 基于Vue的信息融合界面開發(fā)方案的設(shè)計(jì)與實(shí)現(xiàn)［J］. 信息技術(shù)與標(biāo)準(zhǔn)化，2022（03）：79-82.