楊輝 黃家昌

摘? 要：文章基于Vue框架實(shí)現(xiàn)了一種Web頁(yè)面設(shè)計(jì)器，用戶可以在上面直接拖動(dòng)已有控件，來(lái)設(shè)計(jì)（配置）常見(jiàn)的頁(yè)面、表單，頁(yè)面代碼通過(guò)拖動(dòng)配置的方式，直接生成，極大程度地降低了對(duì)用戶編程能力的要求。配置生成的方式，屏蔽了底層的語(yǔ)法細(xì)節(jié)，保障了頁(yè)面功能的穩(wěn)定性和可靠性?；陧?yè)面設(shè)計(jì)器的應(yīng)用，提高了企業(yè)開(kāi)發(fā)效率，組件化的功能封裝提升了功能的復(fù)用性，促進(jìn)了企業(yè)軟件開(kāi)發(fā)的降本增效。

關(guān)鍵詞：Vue；頁(yè)面設(shè)計(jì)器；可視化

中圖分類號(hào)：TP311.5? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：2096-4706（2023）10-0099-04

Abstract： This paper realizes a Web page designer based on the Vue framework， on which users can directly drag existing controls to design （configure） general pages and forms， and the page code is directly generated by dragging. It significantly reduces the need for user programming skills. The configuration generation method shields the underlying syntax details and guarantees the stability and reliability of the page functionality. The application based on the page designer improves the efficiency of enterprise development， and the componentized function encapsulation enhances the reusability of functions and promotes the cost reduction and efficiency increasing of enterprise software development.

Keywords： Vue; page designer; visualization

0? 引? 言

傳統(tǒng)的web頁(yè)面開(kāi)發(fā)，需要UI設(shè)計(jì)師根據(jù)產(chǎn)品經(jīng)理的需求出設(shè)計(jì)稿，確認(rèn)無(wú)誤后，將標(biāo)注切圖文件交給前端開(kāi)發(fā)工程師，進(jìn)行靜態(tài)頁(yè)面的編寫(xiě)。這個(gè)過(guò)程中，如果產(chǎn)品經(jīng)理提出變更，又需要重復(fù)如上過(guò)程，十分煩瑣。前端工程師在開(kāi)發(fā)過(guò)程中，不同的頁(yè)面中經(jīng)常存在功能效果非常相似的模塊，往往通過(guò)復(fù)制粘貼，修改配置屬性，使得項(xiàng)目代碼冗余，功能實(shí)現(xiàn)低效，不利于項(xiàng)目代碼組件化、模塊化，代碼難以復(fù)用。通過(guò)實(shí)現(xiàn)一種web頁(yè)面設(shè)計(jì)器，可以使得產(chǎn)品經(jīng)理直接在設(shè)計(jì)器上拖動(dòng)已有控件，來(lái)設(shè)計(jì)（配置）常見(jiàn)的頁(yè)面、表單，頁(yè)面代碼通過(guò)拖動(dòng)配置的方式，直接生成，前端開(kāi)發(fā)工程師只需要使用配置就可以還原頁(yè)面，使得他們從常規(guī)的代碼編寫(xiě)解放出來(lái)，轉(zhuǎn)向去優(yōu)化豐富已有控件的配置屬性以及開(kāi)發(fā)集成新的控件[1]。這種方法的運(yùn)用，可以大大提高企業(yè)開(kāi)發(fā)效率，減少不必要的溝通，同時(shí)也因?yàn)楣δ芙M件化，提升了功能的復(fù)用性和穩(wěn)定性[2]。

1? Vue組件簡(jiǎn)介

1.1? Vue簡(jiǎn)介

Vue.js是一個(gè)用于創(chuàng)建用戶界面的開(kāi)源JavaScript框架[3]。相較于傳統(tǒng)JQuery找元素操作DOM的開(kāi)發(fā)模式，Vue則是前端MVVM模式時(shí)代的主流框架之一，即實(shí)現(xiàn)了數(shù)據(jù)驅(qū)動(dòng)頁(yè)面。在Vue框架下，數(shù)據(jù)發(fā)生變化的時(shí)候，框架會(huì)通知我們修改了哪些數(shù)據(jù)，好讓我們可以方便的去更新網(wǎng)頁(yè)[4]。響應(yīng)式的特征極大降低了前端頁(yè)面處理視圖和數(shù)據(jù)之間操作的復(fù)雜性。在組件間通過(guò)響應(yīng)式通知更新，在組件內(nèi)部通過(guò)虛擬DOM來(lái)更新數(shù)據(jù)，相互融合，使得Vue具有很好的性能，有較好的用戶體驗(yàn)[5]。

1.2? Ant-Design-Vue簡(jiǎn)介

Ant Design Vue是使用Vue實(shí)現(xiàn)的遵循Ant Design設(shè)計(jì)規(guī)范的高質(zhì)量UI組件庫(kù)，用于開(kāi)發(fā)和服務(wù)于企業(yè)級(jí)中后臺(tái)產(chǎn)品。本文所實(shí)現(xiàn)的設(shè)計(jì)器中的控件大部分是基于此組件進(jìn)行封裝完善。

1.3? Vue-Draggable簡(jiǎn)介

Vue.Draggable是一款基于Sortable.js實(shí)現(xiàn)的Vue拖拽插件。本文所實(shí)現(xiàn)的組件在設(shè)計(jì)器上可視化拖拽效果是基于這個(gè)組件庫(kù)。

1.4? vxe-table簡(jiǎn)介

vxe-table是一款基于Vue的表格組件，支持增刪改查、虛擬列表、虛擬樹(shù)、懶加載、快捷菜單、數(shù)據(jù)校驗(yàn)、樹(shù)形結(jié)構(gòu)、打印導(dǎo)出、表單渲染、數(shù)據(jù)分頁(yè)等，靈活多樣的配置項(xiàng)，極大方便的滿足了網(wǎng)頁(yè)端對(duì)表格操作的訴求。本文所實(shí)現(xiàn)的設(shè)計(jì)器中表格類的控件都基于這個(gè)組件來(lái)擴(kuò)展。

1.5? V-charts簡(jiǎn)介

V-charts是一款基于Vue和ECharts封裝的圖表組件。通過(guò)對(duì)ECharts圖表庫(kù)進(jìn)行封裝，在完全支持ECharts的所有方法和屬性的基礎(chǔ)上，把數(shù)據(jù)封裝成很好的模式，方便用戶使用。本文所實(shí)現(xiàn)的設(shè)計(jì)器中圖形類的控件都基于這個(gè)組件來(lái)擴(kuò)展。

2? 頁(yè)面設(shè)計(jì)器實(shí)現(xiàn)

2.1? 基本元素

2.1.1? 控件

1）概述。將常用到的控件進(jìn)行封裝，形成控件，控件可以任意拖拽到模板或者頁(yè)面中，通過(guò)配置實(shí)現(xiàn)所需要的交互效果。本方法控件分為：常用控件和布局控件兩種。

常用控件包括：按鈕、文本框、單選框組、下拉框（下拉選擇框、下拉表格、下拉菜單）、表格（普通表格、表格樹(shù)、可編輯表格）、樹(shù)、圖片、文件上傳等。

布局控件包括：柵欄、分割面板、輪播、標(biāo)簽頁(yè)等。

2）實(shí)現(xiàn)。控件的定義：基于vue寫(xiě)好組件代碼，如果是容器組件需要在配置頁(yè)（PreCreateTemp）和運(yùn)行頁(yè)（createTemp）引入，不為容器組件在表單項(xiàng)配置（PreFormItem）和表單項(xiàng)運(yùn)行（FormItem）中引入。在src＼components＼componentsConfig.js文件中增加需要定義控件的配置對(duì)象。若為容器控件需要定義好對(duì)應(yīng)的控件數(shù)組，并在組件中定義好slot的位置，配置組件還需要引入定義draggable的位置以提供其他控件的拖入。

配置項(xiàng)：控件的配置若為通用配置，則需要在inputConfig（存放控件配置的Vue模板文件）中加入當(dāng)前控件判斷的邏輯處理，若為特殊配置，建議獨(dú)立編寫(xiě)配置組件并引入inputConfig同時(shí)做判斷處理。

2.1.2? 模板

多個(gè)控件通過(guò)布局和樣式配置組織在一起形成模板。模板可以被多次復(fù)用和嵌套。

2.1.3? 頁(yè)面

多個(gè)控件或者模板混合組成為最終需要的頁(yè)面。

2.2? 布局設(shè)計(jì)

設(shè)計(jì)器的整體布局如圖1所示。

2.2.1? 左側(cè)控件區(qū)

將已寫(xiě)好的組件放置到這個(gè)區(qū)域，這些組件的配置會(huì)以對(duì)象的形式存儲(chǔ)在JavaScript文件中，并對(duì)其部分屬性賦予初始值。每個(gè)控件都有一個(gè)唯一key值作為區(qū)分控件對(duì)象的標(biāo)識(shí)。

2.2.2? 中間的頁(yè)面設(shè)計(jì)區(qū)

操作人員可以從左側(cè)的控件區(qū)拖動(dòng)控件或者模板到頁(yè)面設(shè)計(jì)區(qū)，控件的部分配置屬性會(huì)動(dòng)態(tài)顯示在這個(gè)區(qū)域。

2.2.3? 右側(cè)的屬性配置區(qū)域

控件屬性：控件具體詳細(xì)的配置區(qū)域，主要配置控件的各項(xiàng)屬性以及擴(kuò)展事件或者樣式腳本的編寫(xiě)。

模板屬性：為模板或頁(yè)面的總體屬性，主要對(duì)整個(gè)區(qū)域的統(tǒng)一屬性進(jìn)行配置，如區(qū)域內(nèi)組件大小等。

2.2.4? 操作區(qū)域

1）切換全局配置：切換頁(yè)面的全局配置為當(dāng)前的模板配置。當(dāng)頁(yè)面中拖入模板時(shí)若外層沒(méi)有控件，屬性配置區(qū)里的模板屬性只會(huì)顯示當(dāng)前拖入的模板配置屬性而不是當(dāng)前頁(yè)面的屬性。通過(guò)這個(gè)按鈕可以切換模板屬性為當(dāng)前頁(yè)面的全局屬性。

2）保存為頁(yè)面：將當(dāng)前的配置保存為一個(gè)頁(yè)面，根據(jù)頁(yè)面ID可以直接被用戶查看；保存為模板：將當(dāng)前的配置保存為一個(gè)模板，模板可以在頁(yè)面中嵌套被復(fù)用。

3）另存為（保存后出現(xiàn)）：由于保存一次模板或頁(yè)面后再次點(diǎn)擊將不再?gòu)棿?，默認(rèn)覆蓋原來(lái)保存的頁(yè)面或模板，若此時(shí)想修改頁(yè)面或者模板的存儲(chǔ)信息，需要添加另存為的功能，再次彈窗提供信息的修改。

4）回退：每次的控件位置的變化（拖動(dòng)，復(fù)制，刪除）都會(huì)觸發(fā)一次備份，在store的備份數(shù)組中存入當(dāng)前的頁(yè)面配置，點(diǎn)擊回退時(shí)會(huì)將上一次的備份替換成當(dāng)前的頁(yè)面配置（即撤銷(xiāo)控件的位置變化），同時(shí)將最新的一次備份從數(shù)組移除。

5）預(yù)覽：彈窗顯示配置控件在實(shí)際頁(yè)面中的展現(xiàn)。

6）清空：清空當(dāng)前頁(yè)面的所有已配置的內(nèi)容（還原初始化）。

2.3? 事件聯(lián)動(dòng)

在控件上可以配置觸發(fā)控件，如圖2所示?？梢赃x擇當(dāng)面配置頁(yè)面上任意一個(gè)相關(guān)的觸發(fā)控件，別名為頁(yè)面上已經(jīng)配置的控件的名稱，參數(shù)為當(dāng)前選中控件所在模板綁定的數(shù)據(jù)參數(shù)。這樣別名控件發(fā)生變化時(shí)，變更數(shù)據(jù)就會(huì)反映到當(dāng)前控件。如果是表綁定了文本框，那么當(dāng)文本框內(nèi)容變化時(shí)，就會(huì)自動(dòng)過(guò)濾所配置參數(shù)相關(guān)的數(shù)據(jù)，達(dá)到數(shù)據(jù)篩選的效果。

2.3.1? 綁定聯(lián)動(dòng)

控件的聯(lián)動(dòng)需要將聯(lián)動(dòng)的控件綁定在一起，頁(yè)面的全局配置中存有配置頁(yè)面中的所有控件的列表（不含結(jié)構(gòu)），控件需要關(guān)聯(lián)別的控件的時(shí)會(huì)將頁(yè)面中的所有控件（過(guò)濾未配置過(guò)別名keyName的控件）列表提供配置，以及需要配置控件值在當(dāng)前控件的查詢參數(shù)（參數(shù)列表從當(dāng)前模板的數(shù)據(jù)集中獲?。?。配置后會(huì)在當(dāng)前控件的配置對(duì)象中存儲(chǔ)關(guān)聯(lián)的控件列表triggerKeyList（keyName：控件別名，用于查找控件，searchName：查詢參數(shù)）。如圖3所示。

2.3.2? 觸發(fā)聯(lián)動(dòng)

控件在生成時(shí)會(huì)遍歷自身的triggerKeyList，生成監(jiān)聽(tīng)控件列表watchList，監(jiān)聽(tīng)控件列表中的按鈕會(huì)生成watchBtnList，列表中存儲(chǔ)從全局控件列表中遍歷獲取的對(duì)應(yīng)配置對(duì)象。并監(jiān)聽(tīng)這兩個(gè)數(shù)組?？丶闹底兓瘯r(shí)會(huì)將值設(shè)置到控件配置對(duì)象的watchValue屬性中，按鈕會(huì)設(shè)置到watchParam中，監(jiān)聽(tīng)的控件值變化時(shí)會(huì)觸發(fā)監(jiān)聽(tīng)事件，在監(jiān)聽(tīng)事件中處理對(duì)應(yīng)的邏輯即可（取值取對(duì)應(yīng)的watchValue或watchParam即可）。以表格舉例，監(jiān)聽(tīng)到對(duì)象值變化時(shí)會(huì)遍歷監(jiān)聽(tīng)數(shù)組將數(shù)組中的參數(shù)name以及對(duì)應(yīng)的value設(shè)置到查詢參數(shù)中，并觸發(fā)表格查詢。

2.4? 核心實(shí)現(xiàn)

頁(yè)面設(shè)計(jì)過(guò)程中維護(hù)了一個(gè)頁(yè)面的配置對(duì)象DataJson，結(jié)構(gòu)如圖4所示。

其中l(wèi)ist為頁(yè)面中的控件列表結(jié)構(gòu)；config為頁(yè)面的整體配置，其中包含了頁(yè)面的全局配置，觸發(fā)控件列表等；commonModal為頁(yè)面中的彈窗對(duì)象，頁(yè)面上的所有彈窗共用這個(gè)對(duì)象?？丶膹棿皟?nèi)容存放在各自的彈窗對(duì)象中，在彈窗觸發(fā)前，會(huì)將控件的彈窗對(duì)象設(shè)置到頁(yè)面的彈窗對(duì)象中，從而控制不同彈窗對(duì)象的切換。

配置頁(yè)面加載時(shí)，會(huì)調(diào)用初始化方法初始化所有控件對(duì)象的屬性，向中間配置區(qū)域拖入控件，draggable插件會(huì)自動(dòng)的向全局配置對(duì)象dataJson的list中插入當(dāng)前拖入控件的對(duì)象，同時(shí)根據(jù)控件的默認(rèn)配置屬性進(jìn)行展示。后續(xù)根據(jù)右側(cè)具體的屬性配置，更改控件對(duì)象的屬性，從而變更控件在頁(yè)面中的展現(xiàn)。

配置頁(yè)面存有一個(gè)從store中讀取的當(dāng)前選中控件的對(duì)象的計(jì)算屬性?？丶先肱渲脜^(qū)域、控件單擊選中都會(huì)將當(dāng)前的控件設(shè)置為當(dāng)前選中控件，從而改變計(jì)算屬性的值，并將計(jì)算屬性獲取到的值傳入右側(cè)的詳細(xì)配置的控件中，實(shí)現(xiàn)對(duì)當(dāng)前選中控件的屬性的配置。同時(shí)若控件為模板或者模板內(nèi)的控件則會(huì)將當(dāng)前的模板的全局配置對(duì)象config傳入到右側(cè)的模板屬性中，實(shí)現(xiàn)對(duì)全局屬性的配置。

3? 頁(yè)面設(shè)計(jì)器應(yīng)用

本文實(shí)現(xiàn)的頁(yè)面設(shè)計(jì)器目前已經(jīng)實(shí)現(xiàn)了66種控件，分為基礎(chǔ)控件、高級(jí)控件、表格控件、圖形控件、布局控件5大類，涵蓋企業(yè)中后臺(tái)應(yīng)用所需的大部分控件，如文本框、樹(shù)形控件、表單、布局等，每個(gè)控件都包含了大量的可視化配置屬性，足以滿足各種復(fù)雜應(yīng)用。目前通過(guò)頁(yè)面設(shè)計(jì)器配置完成的系統(tǒng)涵蓋企業(yè)ERP應(yīng)用中的人財(cái)物事等十幾個(gè)大小系統(tǒng)，應(yīng)用過(guò)程中不斷地豐富控件，提煉業(yè)務(wù)模板，提高應(yīng)用復(fù)用率。大體來(lái)說(shuō)，本文的頁(yè)面設(shè)計(jì)器應(yīng)用方法流程大致如圖5所示。

4? 結(jié)? 論

本文基于Vue框架設(shè)計(jì)實(shí)現(xiàn)了一種頁(yè)面設(shè)計(jì)器，設(shè)計(jì)器提供了一種控件定義的方法，可以方便的集成、擴(kuò)展已有的組件，或者加入自定義的業(yè)務(wù)組件，整合Vue-draggable組件實(shí)現(xiàn)了組件拖拽，頁(yè)面配置的可視化，達(dá)到了所見(jiàn)即所得的頁(yè)面設(shè)計(jì)效果。設(shè)計(jì)實(shí)現(xiàn)了一種事件聯(lián)動(dòng)的方式，方便頁(yè)面中控件間的數(shù)據(jù)綁定、聯(lián)動(dòng)。提出了將已配置好的頁(yè)面保存為模板提供給新頁(yè)面進(jìn)行嵌套組合的模式，大幅度提高了業(yè)務(wù)模板化，組件高度復(fù)用。頁(yè)面設(shè)計(jì)器的提出，使得需求人員可以直接進(jìn)行定制配置，開(kāi)發(fā)人員可以不斷整合完善已有組件，開(kāi)發(fā)擴(kuò)展新組件，提供需求人員可視化配置，綜合提升了工作效率。

參考文獻(xiàn)：

[1] 王志任.基于Vue.js的開(kāi)發(fā)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn) [D].廣州：廣東工業(yè)大學(xué)，2018.

[2] 胡飛菊，張少平.一種手工半智能的Web統(tǒng)一開(kāi)發(fā)平臺(tái) [J].計(jì)算機(jī)應(yīng)用與軟件，2019，36（1）：12-16.

[3] 李成仁.基于Vue.js的單頁(yè)面WebGIS可視化框架研究與實(shí)現(xiàn) [J].地理空間信息，2020，18（5）：83-86+98+7.

[4] 陳巖.輕量級(jí)響應(yīng)式框架Vue.js應(yīng)用分析 [J].中國(guó)管理信息化，2018，21（3）：181-183.

[5] 朱二華.基于Vue.js的Web前端應(yīng)用研究 [J].科技與創(chuàng)新，2017（20）：119-121.

作者簡(jiǎn)介：楊輝（1989—），男，漢族，福建福州人，高級(jí)工程師，碩士，研究方向：軟件工程、人工智能、區(qū)塊鏈應(yīng)用；黃家昌（1970—），男，漢族，福建福州人，注冊(cè)會(huì)計(jì)師，本科，研究方向：醫(yī)院運(yùn)營(yíng)管理、信息化建設(shè)、財(cái)務(wù)管理等。