一种图标管理方法的设计与实现

张光明 张浩洋 陈肖勇

摘  要： 图标作为网站设计中一个不可或缺的组成部分，起着对网页信息的强调和提示性作用，一般由矢量图构成。在一个复杂的系统中，图标的大量使用容易造成代码冗余，文件繁多，维护繁琐且专业性强。本文基于Vue、Element UI、SpringBoot、MySQL等给出了一种图标解决方案，实现了从前端到后端、从内部到外部管理图标的效果，为图标管理提供了一种新思路。

关键词： 图标； Vue； Element UI； SpringBoot； MySQL

中图分类号：TP399          文献标识码：A     文章编号：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 引言

随着互联网的日益发展，对Web应用的需求随之增多，系统日趋庞大，对于高效性和易维护性提出了越来越高的要求。而目前对于图标的使用通常是以文件的形式存储于前端项目里，在代码中引用其路径得以显示。这种方式的弊端在于：①项目臃肿，展开一个图标文件夹可能数百个文件；②代码利用率低，功能性差，大段路径占据主要内容，无法增加自定义属性；③如若需求变更，替换图标，则需要修改项目代码，重新打包、上传、部署，事倍功半，效率低下，而且这些步骤，非专业人员也难以操作。为了有效解决这些问题，前端图标组件化结合后端存储图标内容的管理方法应运而生，本文从相关技术、设计思路以及具体实现等方面详细阐述了这一方法。

1 涉及相关技术

1.1 Vue

Vue是当下十分流行的一套用于用户界面的渐进式JS框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合[1]。Vue通过双向数据绑定实现了MVVM（Model-View-ViewModel）模式，分离视图和模型，既可以观察数据的变化来更新视图，又能监听视图变化来通知数据发生改变，如图1。

Vue独立和可复用的组件化代码允许使用简洁的组件来构建复杂的系统，利用组件化的特点，任何封装的代码都可以注册为标签，大大减少了重复开发，提高了开发效率。几乎任何类型的应用程序界面都可以抽象为组件树，组件树可以由独立的可重用组件组成[2]。其示意图如图2所示。

1.2 Element UI

Element UI是饿了么推出的一款基于Vue的前端组件库，可以帮助开发人员快速构建功能丰富、风格统一的页面，同样对于开发效率的提升有明显效果。在引入组件库之后即可使用其组件，例如el-tooltip、el-button等。

1.3 SpringBoot

SpringBoot是一个基于Java的后端框架，配置简单易上手，简化开发过程。

一般分为四层：Entity层、Mapper层、Service层、Controller层。各层的功能分别为：①存放实体类及其相应的set、get方法，与数据库中的属性值基本保持一致。②对数据库进行数据持久化操作。③把mapper和service进行整合，实现接口。④接收前端传过来的参数进行业务操作，再将处理结果返回到前端[3]。

1.4 MySQL

MySQL是一个开源的关系型数据库管理系统，将数据保存在不同的表中，实现数据的增删改查。支持标准的SQL数据语言形式，支持大型数据库。

2 方法设计

2.1 页面概览

图标管理集中了添加、删除、编辑、搜索、复制功能，所有上传的图标都展示在这里，能够直观的看到每个图标的样式、名称和编码。可以根据名稱或编码自由查询所需图标。点击添加按钮，输入名称、编码，上传svg格式图标文件。

鼠标悬浮于已上传的图标之上，可显示三个按钮，分别为编辑、删除和复制。点击编辑，可编辑图标的名称、编码、xml代码或者为图标赋予个性化颜色。点击删除，可调用接口从数据库中移除该图标。点击复制，可一键生成该图标对应Vue的ICON组件代码，例如“”，粘贴到所需项目中。所有使用的图标能够在这里统一操作，即使非专业开发人员也能快速学会使用，完成图标替换或修改。如图3所示。

2.2 前端方案

图标作为一个频繁引用的功能，在增加开发效率，减少维护成本的前提下，首先想到的是通过Vue将其定义为一个简洁的组件。在组件里根据编码调用接口获取各个图标具体代码并显示在前端页面中，所以需要第一个参数，即图标的编码。在引用组件的地方就可以通过输入不同的編码，得到不同的图标。

组件不仅需要达到通用性，还需满足个性化，其首要问题就是尺寸。不同场合需要的图标大小不一，有的图标在标题中，有的图标在按钮中，等等，所以需要第二个参数：尺寸。

其次，有时为了突出重点，增加吸引力，每个类型的图标需要其独特显眼的颜色，所以还需要第三个参数：颜色。

最后，有的位置空间不足以放置更多的文字或者美化修饰，所以需要将图标的介绍文字以提示文本的形式包含到图标之中，使得鼠标悬浮显示图标含义，所以需要定义这第四个参数：是否显示悬浮文本。这里，Element UI就发挥了其作用，可以直接使用el-tooltip组件，来快速定义悬浮文本，并显示在合适的位置。

2.3 后端方案

后端首先要思考的是以何种形式来存储图标文件，传统的图片信息存储方式是以文件的形式，存储于服务器的文件系统中，数据库保存图标文件的路径。但是如果图片较多，服务器上的文件数量就会很多，管理会是一件很棘手的事情。另外一个问题是资源的安全性大打折扣，一旦服务器重新部署，保存的图片都将遗失[4]。

所以，本次方法选择将图标以字节流的形式保存为二进制大型对象类型（blob），存储到MySQL中，在数据库中建一张icon的表，用来存储图标信息，服务器端就无需用文件夹存储图片，网页中显示的图片都来自数据库，避免一旦文件夹不小心丢失造成所有图片都找不回的风险[5]。

接着通过SpringBoot作为前端与MySQL之间的桥梁，快速简易搭建框架，在Entity层存放图标实体类，在Controller层接收前端传过来的图标信息，在Mapper层直接操作接数据库实现图标增删改查，在Service层连接Controller层和Mapper层，编写并联通图标增删改查的逻辑，例如查询时Service层将blob类型转换为前端熟知的xml文本，方便前端美化加工和直接显示。最后Controller层再将处理完的数据返回。另外需要注意的一点是，需要增加编码重复校验，否则前端在获取单个图标时会产生惟一性错误。

2.4 流程图

添加图标和获取图标流程图如图4和图5。

⑴ 添加图标

⑵ 获取图标

3 方法实现

3.1 前端实现

父组件调用子组件，父组件是各个需要图标的页面，子组件是图标组件。父组件为子组件传递四个参数：编码（code）、尺寸（size）、颜色（color）、是否显示提示文本（tip），首先根据code调用后端接口得到该图标信息，包括name，xml等，对xml进行截取拼接，获得前端展示所需的svg部分，命名为contentSvg。子组件外层为Element UI中的el-tooltip组件，包含鼠标悬浮显示的内容和是否显示提示文本，对应接口获取的name和父组件的tip，子组件内层为svg，包含填充色，样式和html内容，对应父组件的color，size和接口获取的contentSvg。如图6所示。

3.2 后端实现

首先在MySQL创建一张表，包括varchar类型的name，code，xml和blob类型的icon，然后在SpringBoot中Entity层建一个对应的类，其中icon为字节流类型。接下来在Controller层通过MultipartFile类接收前端传递的数据，并使用file.getBytes（）方法将图标文件转换成字节流，存储到MySQL数据库，其中xml字段为空。等到查询的时候，前端携带code调用Controller层暴露的查询接口，Service层对Mapper层查询到的图标数据进行处理，使用String类将字节流icon转换为xml格式，然后调用Entity的set函数存储到xml字段中，最后一套流程下来，回到Controller层，将数据返回给前端。如上图6所示。

4 结束语

本文着重介绍了一种前后端结合的图标管理方法，该方法采用了数据库存储图标，后端接口调用图标，前端图标组件化复用等方式，在外部通过图形化界面统一管理图标，实现增删改查及复制组件代码，在前端项目内部，可以直接粘贴以快捷引用图标组件，并赋予其个性化配置，相比于目前的图标管理方法，极大提升了开发与维护效率，为系统图标管理提供了重要经验。

参考文献（References）：

[1] 沈剑翘，陈泽椿.Vue.js在构建系统前端SPA的应用[J].科技创新与应用，2020（3）：181-182

[2] 方生.基于“Vue.js”前端框架技术的研究[J].电脑知识与技术：学术版，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数据库的图片存储和显示技术初探[J].科技管理，2011（1）

[5] 单春燕.应用BLOB技术实现图像资料的存储[J].中国管理信息化，2013，16（7）：88

作者简介：张光明（1999-），男，湖北随州人，本科，前端工程师，主要研究方向：Web前端开发。