一種圖標(biāo)管理方法的設(shè)計(jì)與實(shí)現(xiàn)

張光明 張浩洋 陳肖勇

摘? 要： 圖標(biāo)作為網(wǎng)站設(shè)計(jì)中一個(gè)不可或缺的組成部分，起著對(duì)網(wǎng)頁信息的強(qiáng)調(diào)和提示性作用，一般由矢量圖構(gòu)成。在一個(gè)復(fù)雜的系統(tǒng)中，圖標(biāo)的大量使用容易造成代碼冗余，文件繁多，維護(hù)繁瑣且專業(yè)性強(qiáng)。本文基于Vue、Element UI、SpringBoot、MySQL等給出了一種圖標(biāo)解決方案，實(shí)現(xiàn)了從前端到后端、從內(nèi)部到外部管理圖標(biāo)的效果，為圖標(biāo)管理提供了一種新思路。

關(guān)鍵詞： 圖標(biāo)； Vue； Element UI； SpringBoot； MySQL

中圖分類號(hào)：TP399? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A? ? ?文章編號(hào)：1006-8228（2023）04-123-04

Abstract： As an indispensable part of website design， icons play an important role in emphasizing and prompting the information on the web page. It is generally composed of vector images. However， in a complex system， the extensive use of icons is easy to cause code redundancy， numerous files， cumbersome maintenance and strong professionalism. An icon solution based on Vue， Element UI， SpringBoot and MySQL is given to achieve the effect of managing icons from front-end to back-end and from internal to external， which provides a new idea for icon management.

Key words： icon; Vue; Element UI; SpringBoot; MySQL

0 引言

隨著互聯(lián)網(wǎng)的日益發(fā)展，對(duì)Web應(yīng)用的需求隨之增多，系統(tǒng)日趨龐大，對(duì)于高效性和易維護(hù)性提出了越來越高的要求。而目前對(duì)于圖標(biāo)的使用通常是以文件的形式存儲(chǔ)于前端項(xiàng)目里，在代碼中引用其路徑得以顯示。這種方式的弊端在于：①項(xiàng)目臃腫，展開一個(gè)圖標(biāo)文件夾可能數(shù)百個(gè)文件；②代碼利用率低，功能性差，大段路徑占據(jù)主要內(nèi)容，無法增加自定義屬性；③如若需求變更，替換圖標(biāo)，則需要修改項(xiàng)目代碼，重新打包、上傳、部署，事倍功半，效率低下，而且這些步驟，非專業(yè)人員也難以操作。為了有效解決這些問題，前端圖標(biāo)組件化結(jié)合后端存儲(chǔ)圖標(biāo)內(nèi)容的管理方法應(yīng)運(yùn)而生，本文從相關(guān)技術(shù)、設(shè)計(jì)思路以及具體實(shí)現(xiàn)等方面詳細(xì)闡述了這一方法。

1 涉及相關(guān)技術(shù)

1.1 Vue

Vue是當(dāng)下十分流行的一套用于用戶界面的漸進(jìn)式JS框架。Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合[1]。Vue通過雙向數(shù)據(jù)綁定實(shí)現(xiàn)了MVVM（Model-View-ViewModel）模式，分離視圖和模型，既可以觀察數(shù)據(jù)的變化來更新視圖，又能監(jiān)聽視圖變化來通知數(shù)據(jù)發(fā)生改變，如圖1。

Vue獨(dú)立和可復(fù)用的組件化代碼允許使用簡潔的組件來構(gòu)建復(fù)雜的系統(tǒng)，利用組件化的特點(diǎn)，任何封裝的代碼都可以注冊(cè)為標(biāo)簽，大大減少了重復(fù)開發(fā)，提高了開發(fā)效率。幾乎任何類型的應(yīng)用程序界面都可以抽象為組件樹，組件樹可以由獨(dú)立的可重用組件組成[2]。其示意圖如圖2所示。

1.2 Element UI

Element UI是餓了么推出的一款基于Vue的前端組件庫，可以幫助開發(fā)人員快速構(gòu)建功能豐富、風(fēng)格統(tǒng)一的頁面，同樣對(duì)于開發(fā)效率的提升有明顯效果。在引入組件庫之后即可使用其組件，例如el-tooltip、el-button等。

1.3 SpringBoot

SpringBoot是一個(gè)基于Java的后端框架，配置簡單易上手，簡化開發(fā)過程。

一般分為四層：Entity層、Mapper層、Service層、Controller層。各層的功能分別為：①存放實(shí)體類及其相應(yīng)的set、get方法，與數(shù)據(jù)庫中的屬性值基本保持一致。②對(duì)數(shù)據(jù)庫進(jìn)行數(shù)據(jù)持久化操作。③把mapper和service進(jìn)行整合，實(shí)現(xiàn)接口。④接收前端傳過來的參數(shù)進(jìn)行業(yè)務(wù)操作，再將處理結(jié)果返回到前端[3]。

1.4 MySQL

MySQL是一個(gè)開源的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，將數(shù)據(jù)保存在不同的表中，實(shí)現(xiàn)數(shù)據(jù)的增刪改查。支持標(biāo)準(zhǔn)的SQL數(shù)據(jù)語言形式，支持大型數(shù)據(jù)庫。

2 方法設(shè)計(jì)

2.1 頁面概覽

圖標(biāo)管理集中了添加、刪除、編輯、搜索、復(fù)制功能，所有上傳的圖標(biāo)都展示在這里，能夠直觀的看到每個(gè)圖標(biāo)的樣式、名稱和編碼?？梢愿鶕?jù)名稱或編碼自由查詢所需圖標(biāo)。點(diǎn)擊添加按鈕，輸入名稱、編碼，上傳svg格式圖標(biāo)文件。

鼠標(biāo)懸浮于已上傳的圖標(biāo)之上，可顯示三個(gè)按鈕，分別為編輯、刪除和復(fù)制。點(diǎn)擊編輯，可編輯圖標(biāo)的名稱、編碼、xml代碼或者為圖標(biāo)賦予個(gè)性化顏色。點(diǎn)擊刪除，可調(diào)用接口從數(shù)據(jù)庫中移除該圖標(biāo)。點(diǎn)擊復(fù)制，可一鍵生成該圖標(biāo)對(duì)應(yīng)Vue的ICON組件代碼，例如“”，粘貼到所需項(xiàng)目中。所有使用的圖標(biāo)能夠在這里統(tǒng)一操作，即使非專業(yè)開發(fā)人員也能快速學(xué)會(huì)使用，完成圖標(biāo)替換或修改。如圖3所示。

2.2 前端方案

圖標(biāo)作為一個(gè)頻繁引用的功能，在增加開發(fā)效率，減少維護(hù)成本的前提下，首先想到的是通過Vue將其定義為一個(gè)簡潔的組件。在組件里根據(jù)編碼調(diào)用接口獲取各個(gè)圖標(biāo)具體代碼并顯示在前端頁面中，所以需要第一個(gè)參數(shù)，即圖標(biāo)的編碼。在引用組件的地方就可以通過輸入不同的編碼，得到不同的圖標(biāo)。

組件不僅需要達(dá)到通用性，還需滿足個(gè)性化，其首要問題就是尺寸。不同場合需要的圖標(biāo)大小不一，有的圖標(biāo)在標(biāo)題中，有的圖標(biāo)在按鈕中，等等，所以需要第二個(gè)參數(shù)：尺寸。

其次，有時(shí)為了突出重點(diǎn)，增加吸引力，每個(gè)類型的圖標(biāo)需要其獨(dú)特顯眼的顏色，所以還需要第三個(gè)參數(shù)：顏色。

最后，有的位置空間不足以放置更多的文字或者美化修飾，所以需要將圖標(biāo)的介紹文字以提示文本的形式包含到圖標(biāo)之中，使得鼠標(biāo)懸浮顯示圖標(biāo)含義，所以需要定義這第四個(gè)參數(shù)：是否顯示懸浮文本。這里，Element UI就發(fā)揮了其作用，可以直接使用el-tooltip組件，來快速定義懸浮文本，并顯示在合適的位置。

2.3 后端方案

后端首先要思考的是以何種形式來存儲(chǔ)圖標(biāo)文件，傳統(tǒng)的圖片信息存儲(chǔ)方式是以文件的形式，存儲(chǔ)于服務(wù)器的文件系統(tǒng)中，數(shù)據(jù)庫保存圖標(biāo)文件的路徑。但是如果圖片較多，服務(wù)器上的文件數(shù)量就會(huì)很多，管理會(huì)是一件很棘手的事情。另外一個(gè)問題是資源的安全性大打折扣，一旦服務(wù)器重新部署，保存的圖片都將遺失[4]。

所以，本次方法選擇將圖標(biāo)以字節(jié)流的形式保存為二進(jìn)制大型對(duì)象類型（blob），存儲(chǔ)到MySQL中，在數(shù)據(jù)庫中建一張icon的表，用來存儲(chǔ)圖標(biāo)信息，服務(wù)器端就無需用文件夾存儲(chǔ)圖片，網(wǎng)頁中顯示的圖片都來自數(shù)據(jù)庫，避免一旦文件夾不小心丟失造成所有圖片都找不回的風(fēng)險(xiǎn)[5]。

接著通過SpringBoot作為前端與MySQL之間的橋梁，快速簡易搭建框架，在Entity層存放圖標(biāo)實(shí)體類，在Controller層接收前端傳過來的圖標(biāo)信息，在Mapper層直接操作接數(shù)據(jù)庫實(shí)現(xiàn)圖標(biāo)增刪改查，在Service層連接Controller層和Mapper層，編寫并聯(lián)通圖標(biāo)增刪改查的邏輯，例如查詢時(shí)Service層將blob類型轉(zhuǎn)換為前端熟知的xml文本，方便前端美化加工和直接顯示。最后Controller層再將處理完的數(shù)據(jù)返回。另外需要注意的一點(diǎn)是，需要增加編碼重復(fù)校驗(yàn)，否則前端在獲取單個(gè)圖標(biāo)時(shí)會(huì)產(chǎn)生惟一性錯(cuò)誤。

2.4 流程圖

添加圖標(biāo)和獲取圖標(biāo)流程圖如圖4和圖5。

⑴ 添加圖標(biāo)

⑵ 獲取圖標(biāo)

3 方法實(shí)現(xiàn)

3.1 前端實(shí)現(xiàn)

父組件調(diào)用子組件，父組件是各個(gè)需要圖標(biāo)的頁面，子組件是圖標(biāo)組件。父組件為子組件傳遞四個(gè)參數(shù)：編碼（code）、尺寸（size）、顏色（color）、是否顯示提示文本（tip），首先根據(jù)code調(diào)用后端接口得到該圖標(biāo)信息，包括name，xml等，對(duì)xml進(jìn)行截取拼接，獲得前端展示所需的svg部分，命名為contentSvg。子組件外層為Element UI中的el-tooltip組件，包含鼠標(biāo)懸浮顯示的內(nèi)容和是否顯示提示文本，對(duì)應(yīng)接口獲取的name和父組件的tip，子組件內(nèi)層為svg，包含填充色，樣式和html內(nèi)容，對(duì)應(yīng)父組件的color，size和接口獲取的contentSvg。如圖6所示。

3.2 后端實(shí)現(xiàn)

首先在MySQL創(chuàng)建一張表，包括varchar類型的name，code，xml和blob類型的icon，然后在SpringBoot中Entity層建一個(gè)對(duì)應(yīng)的類，其中icon為字節(jié)流類型。接下來在Controller層通過MultipartFile類接收前端傳遞的數(shù)據(jù)，并使用file.getBytes（）方法將圖標(biāo)文件轉(zhuǎn)換成字節(jié)流，存儲(chǔ)到MySQL數(shù)據(jù)庫，其中xml字段為空。等到查詢的時(shí)候，前端攜帶code調(diào)用Controller層暴露的查詢接口，Service層對(duì)Mapper層查詢到的圖標(biāo)數(shù)據(jù)進(jìn)行處理，使用String類將字節(jié)流icon轉(zhuǎn)換為xml格式，然后調(diào)用Entity的set函數(shù)存儲(chǔ)到xml字段中，最后一套流程下來，回到Controller層，將數(shù)據(jù)返回給前端。如上圖6所示。

4 結(jié)束語

本文著重介紹了一種前后端結(jié)合的圖標(biāo)管理方法，該方法采用了數(shù)據(jù)庫存儲(chǔ)圖標(biāo)，后端接口調(diào)用圖標(biāo)，前端圖標(biāo)組件化復(fù)用等方式，在外部通過圖形化界面統(tǒng)一管理圖標(biāo)，實(shí)現(xiàn)增刪改查及復(fù)制組件代碼，在前端項(xiàng)目內(nèi)部，可以直接粘貼以快捷引用圖標(biāo)組件，并賦予其個(gè)性化配置，相比于目前的圖標(biāo)管理方法，極大提升了開發(fā)與維護(hù)效率，為系統(tǒng)圖標(biāo)管理提供了重要經(jīng)驗(yàn)。

參考文獻(xiàn)（References）：

[1] 沈劍翹，陳澤椿.Vue.js在構(gòu)建系統(tǒng)前端SPA的應(yīng)用[J].科技創(chuàng)新與應(yīng)用，2020（3）：181-182

[2] 方生.基于“Vue.js”前端框架技術(shù)的研究[J].電腦知識(shí)與技術(shù)：學(xué)術(shù)版，2021，17（19）：59-60

[3] 楊治中.SSM框架中entity層，mapper層，service層，controller層等作用[EB/OL].https：//blog.csdn.net/huzia/article/details/124290560，2022-04-20

[4] 吳聞，吳焰斌.基于JSP及MySql數(shù)據(jù)庫的圖片存儲(chǔ)和顯示技術(shù)初探[J].科技管理，2011（1）

[5] 單春燕.應(yīng)用BLOB技術(shù)實(shí)現(xiàn)圖像資料的存儲(chǔ)[J].中國管理信息化，2013，16（7）：88

作者簡介：張光明（1999-），男，湖北隨州人，本科，前端工程師，主要研究方向：Web前端開發(fā)。