CN109814858A - 基于Vue架构的WEB前端通用UI组件库 - Google Patents

Abstract

本发明公开了基于Vue架构的WEB前端通用UI组件库，包括：组件配置模块，提供接口服务，用于负责实例化相应的组件；通用组件，用于直接与用户交互；其中通用组件包括：基础布局组件、窗体组件、数据组件、消息组件和导航组件；所述通用组件中每个组件的配置信息从后台配置文件读取，组件配置模块为各组件与前端WEB网站提供统一的接口服务，根据组件的配置信息实现各组件之间与前端WEB网站的接口连接。本发明通过对各类组件可配置性的研究，以配置文件的形式对组件的属性、样式进行配置，可以随时删除、***和修改，大大增强了WEB网站的易维护性，前端组件的可移植性强，提高网站开发人员的工作效率。

Description

基于Vue架构的WEB前端通用UI组件库

技术领域

本发明涉及计算机技术领域，具体涉及到基于Vue架构的WEB前端通用UI组件库。

背景技术

World Wide Web(简称WEB)是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。

Web前端开发技术包括三个要素：HTML(HyperText Markup Language，超文本标记语言)、CSS(Cascading Style Sheet，层叠样式表单)和JavaScript(直译式脚本语言)。随着互联网技术的普及，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于JavaScript为标志的前端技术实现的。

然而，随着网站需求的惊人增长，传统的基于JavaScript的前端开发已经越来越不能满足开发需要，虽然JavaScript以其灵活性能实现各种网页的需求，但是其代码量却随之大幅度上升，代码的可读性与维护性急剧恶化。另外，WEB前端采用JavaScript语言开发，后端的开发语言却多种多样，这也大大增加了前后端开发人员的沟通难度。

发明内容

本发明所要解决的技术问题在于针对上述现有技术中的不足，提供基于Vue架构的WEB前端通用UI组件库。

本发明解决其技术问题所采用的技术方案是：

基于Vue架构的WEB前端通用UI组件库，包括：

组件配置模块，提供接口服务，用于负责实例化相应的组件；

通用组件，用于直接与用户交互；

其中通用组件包括：基础布局组件、窗体组件、数据组件、消息组件和导航组件；

所述通用组件中每个组件的配置信息从后台配置文件读取，组件配置模块为各组件与前端WEB网站提供统一的接口服务，根据组件的配置信息实现各组件之间与前端WEB网站的接口连接。

作为本发明的进一步技术方案为：所述配置信息包括组件属性信息、组件html显示信息、组件CSS样式信息。

作为本发明的进一步技术方案为：所述基础布局组件包括：布局组件、色彩组件、字体组件、图标组件和按钮组件；用于Web网站的页面模板的布局。

作为本发明的进一步技术方案为：所述窗体组件包括：单选框组件、多选框组件、输入框组件、选择器组件、级联选择器组件、时间选择器组件、日期选择器组件和表单组件；用于Web网站的单个功能页面的实现。

作为本发明的进一步技术方案为：所述数据组件包括：表格组件、标签组件、进度条组件、树型控件组件、分页组件；用于数据信息的展现。

作为本发明的进一步技术方案为：所述数据组件与所述窗体组件组合使用，可以对服务端数据库数据进行筛选，通过表格形式展现。

作为本发明的进一步技术方案为：所述消息组件包括：警告组件、加载组件、消息提示组件和弹框组件；用于Web网站与用户进行交互，反馈Web网站服务端处理的进度与消息。

作为本发明的进一步技术方案为：所述导航组件包括：导航菜单组件、标签页组件、面包屑组件、步骤条组件；用于用户登录Web网站后的功能操作引导。

作为本发明的进一步技术方案为：所述后台配置文件采用javascript脚本语言编写。

本发明的有益效果：

本发明通过对WEB网站常规功能的调研与分析归类，设计出低耦合性的可满足WEB常规功能需求的各类组件，并通过对各类组件可配置性的研究，以配置文件的形式对组件的属性、样式进行配置，可使WEB网站的整体结构更加清晰、易于理解，同时前端组件与WEB网站之间通过接口联系，可以随时删除、***和修改，大大增强了WEB网站的易维护性。前端组件的可移植性强，前端组件库之间的低耦合度都促成了WEB网站灵活多变的开发方式及升级方式，可提高网站开发人员的工作效率。

附图说明

图1为本发明提出的基于Vue架构的WEB前端通用UI组件库结构图。

具体实施方式

下面结合具体附图和实施例对本发明作进一步说明。对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下，所获得的所有其他实施例，都属于本发明保护范围。

参见图1，为本发明提出的基于Vue架构的WEB前端通用UI组件库结构图。

如图1所示，一种基于Vue架构的WEB前端UI组件库1，包括：组件配置模块11和多个通用组件类；当网站编码人员从前端需要调用后台UI组件库时，需要调用组件配置模块11，组件配置模块11负责实例化相应的组件；每个组件的配置信息从后台配置文件读取，配置信息包括组件的属性信息、html显示信息、CSS3样式信息。后台配置文件采用js为扩展名的文件,是用javascript脚本语言编写的，在本实施例中作为配置文件的标准格式。本发明的通用组件类包括：基础布局组件12、窗体组件13、数据组件14、消息组件15和导航组件16。通用组件中每个组件的配置信息从后台配置文件读取，组件配置模块11为各组件与前端WEB网站2提供统一的接口服务，根据组件的配置信息实现各组件之间与前端WEB网站的接口连接。

用户通过配置文件可以快速对组件属性进行设置，实现对组件的***、筛除和修改操作，以配置文件的形式对组件的属性、样式进行配置，大大增加了组件的灵活性，使得组件能移植于各类不同的WEB网站。

Vue.js是近几年基于JavaScript语言发展起来用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

本发明实施例中，对于配置信息中的html显示信息采用HTML5标准规范，其前端代码能够被当下的全部主流浏览器所渲染并显示，使用HTML5标准规范的web桌面应用的兼容性更好。

后台配置文件用javascript脚本语言编写，由于JavaScript在绝大多数主流浏览器的支持下可以在多种操作下运行，使用JavaScript的灵活更性高，可以将JavaScript代码直接嵌入在HTML代码中，当然也可以写成单独的JavaScript文件有利于页面结构和页面中具体行为的分离，方便错误的排查以及后期的维护。

基础布局组件12包括：布局(Layout)组件、色彩(Color)组件、字体(Typography)组件、图标(Icon)组件和按钮(Button)组件；用户通过配置文件可以快速对组件属性进行设置，用于Web网站的页面模板的布局。

其中用户通过配置文件对基础布局组件属性进行设置，用于Web网站的页面模板布局，具体为：基础布局组件直接与用户交互，基础布局组件用于Web网站基本页面模板的实现，网站编码人员对页面布局组件属性通过配置文件进行设置；包括：设置布局组件的内容：网页各分栏的间隔是多少，通过基础的1/24分栏任意扩展组合形成较为复杂的混合布局；设置色彩组件的内容：包括网站主色、辅助色和中性色；设置字体组件的内容：包括网站显示的全局字体；设置图标组件的内容：包括默认提供一套常用的图标集合。

窗体组件13包括：单选框(Radio)组件、多选框(Checkbox)组件、输入框(Input)组件、选择器(Select)组件、级联选择器(Cascader)组件、时间选择器(Time Picker)组件、日期选择器(Date Picker)组件和表单(Form)组件；用户通过配置文件可以快速对组件属性进行设置，用于Web网站的单个功能页面的实现。

窗体组件直接与用户交互，窗体组件用于Web网站的单个功能页面的实现，网站编码人员对窗体组件属性通过配置文件进行设置，包括：设置单选框组件的内容、禁用状态和按钮样式，通过CSS样式进行配置；设置多选框组件的内容、禁用状态、可选项目数量的限制和按钮样式，通过CSS样式进行配置；设置输入框组件的内容、禁用状态、带icon的输入框、文本域，其中文本域可调整大小、用于输入多行文本信息、尺寸和带输入建议；设置选择器组件的内容，禁用状态和分组信息；设置级联选择组件的内容、禁用状态和默认值；设置时间选择器组件的内容、时间范围，该时间范围可以分为固定时间范围和任意时间范围；设置日期选择器组件的内容、日期单位、日期范围；设置表单组件的内容、对齐方式、表单验证规则、校验规则。

数据组件14包括：表格组件(Table)、标签(Tag)组件、进度条(Progress)组件、树型控件(Tree)组件、分页(Pagination)组件；用户通过配置文件可以快速对组件属性进行设置，用于数据信息的展现。

数据组件直接与用户交互，数据组件用于数据信息的展现，网站编码人员对数据组件属性通过配置文件进行设置。包括：设置表格组件的内容、展现形式和固定表头；其中表格组件的展现形式包括基础表格、带斑马纹、带边框和带状态；设置标签组件的内容；设置进度条组件的内容和展现形式，其中进度条组件的展现形式包括：百分比内显、百分比外显和环形进度条；设置树型控件的内容；设置分页组件的内容和附加功能，其中附加功能有显示总数、每页条数和直接前往组件。

在本发明实施例中，数据组件与窗体组件可以组合使用，对服务端数据库数据进行筛选，可以通过表格形式展现。

消息组件15包括：警告(Alert)组件、加载(Loading)组件、消息提示(Message)组件和弹框(Message Box)组件；用户通过配置文件可以快速对组件属性进行设置，用于Web网站与用户进行交互，反馈Web网站服务端处理的进度与消息。

消息组件类直接与用户交互，主要分为提示型信息和确认型信息两种。提示型信息主要是对用户起提示和警示作用；确认型信息主要是起到和用户交互的作用，让用户对自身行为进行确认。网站编码人员通过配置文件对组件属性和CSS样式进行配置。包括：设置警告组件的内容和展现形式，该警告组件的展现形式有带辅助性文字介绍和自定义关闭按钮；设置加载组件的内容；设置消息提示组件内容和属性(状态和是否可关闭)；设置弹框组件的内容。

导航组件16包括：导航菜单(NavMenu)组件、标签页(Tabs)组件、面包屑(Breadcrumb)组件、步骤条(Steps)组件；用户通过配置文件可以快速对组件属性进行设置，用于用户登录Web网站后的功能操作引导。

导航组件直接与用户交互，主要用于用户登录Web网站后的功能操作引导，网站编码人员通过配置文件对组件属性和CSS样式进行配置。包括：设置导航菜单组件的内容、展现形式(顶栏形式和侧栏形式)；设置标签页组件的内容、展现形式(基本样式和选项卡样式)；设置面包屑组件的内容；设置步骤条组件的内容、是否带图标和是否有描述信息。

通过对WEB网站常规功能的调研与分析归类，设计出低耦合性的可满足WEB常规功能需求的各类组件，并通过对各类组件可配置性的研究，以配置文件的形式对组件的属性、样式进行配置，大大增加了组件的灵活性，使得组件能移植于各类不同的WEB网站。

本发明可使WEB网站的整体结构更加清晰、易于理解，同时前端组件与WEB网站之间通过接口联系，可以随时删除、***和修改，大大增强了WEB网站的易维护性。前端组件的可移植性强，前端组件库之间的低耦合度都促成了WEB网站灵活多变的开发方式及升级方式，可提高网站开发人员的工作效率。

以上对本发明所提供的技术方案进行了详细介绍。说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。

还需要说明的是，在本说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

Claims (9)

1.基于Vue架构的WEB前端通用UI组件库，其特征在于，包括：

组件配置模块，提供接口服务，用于负责实例化相应的组件；

通用组件，用于直接与用户交互；

其中通用组件包括：基础布局组件、窗体组件、数据组件、消息组件和导航组件；

所述通用组件中每个组件的配置信息从后台文件读取，组件配置模块为各组件与前端WEB网站提供统一的接口服务，根据组件的配置信息实现各组件之间与前端WEB网站的接口连接。

2.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述配置信息包括组件属性信息、组件html显示信息、组件CSS样式信息。

3.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述基础布局组件包括：布局组件、色彩组件、字体组件、图标组件和按钮组件；用于Web网站的页面模板的布局。

4.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述窗体组件包括：单选框组件、多选框组件、输入框组件、选择器组件、级联选择器组件、时间选择器组件、日期选择器组件和表单组件；用于Web网站的单个功能页面的实现。

5.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述数据组件包括：表格组件、标签组件、进度条组件、树型控件组件、分页组件；用于数据信息的展现。

6.根据权利要求5所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述数据组件与窗体组件组合使用，可以对服务端数据库数据进行筛选，通过表格形式展现。

7.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述消息组件包括：警告组件、加载组件、消息提示组件和弹框组件；用于Web网站与用户进行交互，反馈Web网站服务端处理的进度与消息。

8.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述导航组件包括：导航菜单组件、标签页组件、面包屑组件、步骤条组件；用于用户登录Web网站后的功能操作引导。

9.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述后台配置文件采用javascript脚本语言编写。