基于Vue的页面设计器实现与应用

杨辉 黄家昌

摘  要：文章基于Vue框架实现了一种Web页面设计器，用户可以在上面直接拖动已有控件，来设计（配置）常见的页面、表单，页面代码通过拖动配置的方式，直接生成，极大程度地降低了对用户编程能力的要求。配置生成的方式，屏蔽了底层的语法细节，保障了页面功能的稳定性和可靠性。基于页面设计器的应用，提高了企业开发效率，组件化的功能封装提升了功能的复用性，促进了企业软件开发的降本增效。

关键词：Vue；
页面设计器；
可视化

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

传统的web页面开发，需要UI设计师根据产品经理的需求出设计稿，确认无误后，将标注切图文件交给前端开发工程师，进行静态页面的编写。这个过程中，如果产品经理提出变更，又需要重复如上过程，十分烦琐。前端工程师在开发过程中，不同的页面中经常存在功能效果非常相似的模块，往往通过复制粘贴，修改配置属性，使得项目代码冗余，功能实现低效，不利于项目代码组件化、模块化，代码难以复用。通过实现一种web页面设计器，可以使得产品经理直接在设计器上拖动已有控件，来设计（配置）常见的页面、表单，页面代码通过拖动配置的方式，直接生成，前端开发工程师只需要使用配置就可以还原页面，使得他们从常规的代码编写解放出来，转向去优化丰富已有控件的配置属性以及开发集成新的控件[1]。这种方法的运用，可以大大提高企业开发效率，减少不必要的沟通，同时也因为功能组件化，提升了功能的复用性和稳定性[2]。

1  Vue组件简介

1.1  Vue简介

Vue.js是一个用于创建用户界面的开源JavaScript框架[3]。相较于传统JQuery找元素操作DOM的开发模式，Vue则是前端MVVM模式时代的主流框架之一，即实现了数据驱动页面。在Vue框架下，数据发生变化的时候，框架会通知我们修改了哪些数据，好让我们可以方便的去更新网页[4]。响应式的特征极大降低了前端页面处理视图和数据之间操作的复杂性。在组件间通过响应式通知更新，在组件内部通過虚拟DOM来更新数据，相互融合，使得Vue具有很好的性能，有较好的用户体验[5]。

1.2  Ant-Design-Vue简介

Ant Design Vue是使用Vue实现的遵循Ant Design设计规范的高质量UI组件库，用于开发和服务于企业级中后台产品。本文所实现的设计器中的控件大部分是基于此组件进行封装完善。

1.3  Vue-Draggable简介

Vue.Draggable是一款基于Sortable.js实现的Vue拖拽插件。本文所实现的组件在设计器上可视化拖拽效果是基于这个组件库。

1.4  vxe-table简介

vxe-table是一款基于Vue的表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页等，灵活多样的配置项，极大方便的满足了网页端对表格操作的诉求。本文所实现的设计器中表格类的控件都基于这个组件来扩展。

1.5  V-charts简介

V-charts是一款基于Vue和ECharts封装的图表组件。通过对ECharts图表库进行封装，在完全支持ECharts的所有方法和属性的基础上，把数据封装成很好的模式，方便用户使用。本文所实现的设计器中图形类的控件都基于这个组件来扩展。

2  页面设计器实现

2.1  基本元素

2.1.1  控件

1）概述。将常用到的控件进行封装，形成控件，控件可以任意拖拽到模板或者页面中，通过配置实现所需要的交互效果。本方法控件分为：常用控件和布局控件两种。

常用控件包括：按钮、文本框、单选框组、下拉框（下拉选择框、下拉表格、下拉菜单）、表格（普通表格、表格树、可编辑表格）、树、图片、文件上传等。

布局控件包括：栅栏、分割面板、轮播、标签页等。

2）实现。控件的定义：基于vue写好组件代码，如果是容器组件需要在配置页（PreCreateTemp）和运行页（createTemp）引入，不为容器组件在表单项配置（PreFormItem）和表单项运行（FormItem）中引入。在src＼components＼componentsConfig.js文件中增加需要定义控件的配置对象。若为容器控件需要定义好对应的控件数组，并在组件中定义好slot的位置，配置组件还需要引入定义draggable的位置以提供其他控件的拖入。

配置项：控件的配置若为通用配置，则需要在inputConfig（存放控件配置的Vue模板文件）中加入当前控件判断的逻辑处理，若为特殊配置，建议独立编写配置组件并引入inputConfig同时做判断处理。

2.1.2  模板

多个控件通过布局和样式配置组织在一起形成模板。模板可以被多次复用和嵌套。

2.1.3  页面

多个控件或者模板混合组成为最终需要的页面。

2.2  布局设计

设计器的整体布局如图1所示。

2.2.1  左侧控件区

将已写好的组件放置到这个区域，这些组件的配置会以对象的形式存储在JavaScript文件中，并对其部分属性赋予初始值。每个控件都有一个唯一key值作为区分控件对象的标识。

2.2.2  中间的页面设计区

操作人员可以从左侧的控件区拖动控件或者模板到页面设计区，控件的部分配置属性会动态显示在这个区域。

2.2.3  右侧的属性配置区域

控件属性：控件具体详细的配置区域，主要配置控件的各项属性以及扩展事件或者样式脚本的编写。

模板属性：为模板或页面的总体属性，主要对整个区域的统一属性进行配置，如区域内组件大小等。

2.2.4  操作区域

1）切换全局配置：切换页面的全局配置为当前的模板配置。当页面中拖入模板时若外层没有控件，属性配置区里的模板属性只会显示当前拖入的模板配置属性而不是当前页面的属性。通过这个按钮可以切换模板属性为当前页面的全局属性。

2）保存为页面：将当前的配置保存为一个页面，根据页面ID可以直接被用户查看；
保存为模板：将当前的配置保存为一个模板，模板可以在页面中嵌套被复用。

3）另存为（保存后出现）：由于保存一次模板或页面后再次点击将不再弹窗，默认覆盖原来保存的页面或模板，若此时想修改页面或者模板的存储信息，需要添加另存为的功能，再次弹窗提供信息的修改。

4）回退：每次的控件位置的變化（拖动，复制，删除）都会触发一次备份，在store的备份数组中存入当前的页面配置，点击回退时会将上一次的备份替换成当前的页面配置（即撤销控件的位置变化），同时将最新的一次备份从数组移除。

5）预览：弹窗显示配置控件在实际页面中的展现。

6）清空：清空当前页面的所有已配置的内容（还原初始化）。

2.3  事件联动

在控件上可以配置触发控件，如图2所示。可以选择当面配置页面上任意一个相关的触发控件，别名为页面上已经配置的控件的名称，参数为当前选中控件所在模板绑定的数据参数。这样别名控件发生变化时，变更数据就会反映到当前控件。如果是表绑定了文本框，那么当文本框内容变化时，就会自动过滤所配置参数相关的数据，达到数据筛选的效果。

2.3.1  绑定联动

控件的联动需要将联动的控件绑定在一起，页面的全局配置中存有配置页面中的所有控件的列表（不含结构），控件需要关联别的控件的时会将页面中的所有控件（过滤未配置过别名keyName的控件）列表提供配置，以及需要配置控件值在当前控件的查询参数（参数列表从当前模板的数据集中获取）。配置后会在当前控件的配置对象中存储关联的控件列表triggerKeyList（keyName：控件别名，用于查找控件，searchName：查询参数）。如图3所示。

2.3.2  触发联动

控件在生成时会遍历自身的triggerKeyList，生成监听控件列表watchList，监听控件列表中的按钮会生成watchBtnList，列表中存储从全局控件列表中遍历获取的对应配置对象。并监听这两个数组。控件的值变化时会将值设置到控件配置对象的watchValue属性中，按钮会设置到watchParam中，监听的控件值变化时会触发监听事件，在监听事件中处理对应的逻辑即可（取值取对应的watchValue或watchParam即可）。以表格举例，监听到对象值变化时会遍历监听数组将数组中的参数name以及对应的value设置到查询参数中，并触发表格查询。

2.4  核心实现

页面设计过程中维护了一个页面的配置对象DataJson，结构如图4所示。

其中list为页面中的控件列表结构；
config为页面的整体配置，其中包含了页面的全局配置，触发控件列表等；
commonModal为页面中的弹窗对象，页面上的所有弹窗共用这个对象。控件的弹窗内容存放在各自的弹窗对象中，在弹窗触发前，会将控件的弹窗对象设置到页面的弹窗对象中，从而控制不同弹窗对象的切换。

配置页面加载时，会调用初始化方法初始化所有控件对象的属性，向中间配置区域拖入控件，draggable插件会自动的向全局配置对象dataJson的list中插入当前拖入控件的对象，同时根据控件的默认配置属性进行展示。后续根据右侧具体的属性配置，更改控件对象的属性，从而变更控件在页面中的展现。

配置页面存有一个从store中读取的当前选中控件的对象的计算属性。控件拖入配置区域、控件单击选中都会将当前的控件设置为当前选中控件，从而改变计算属性的值，并将计算属性获取到的值传入右侧的详细配置的控件中，实现对当前选中控件的属性的配置。同时若控件为模板或者模板内的控件则会将当前的模板的全局配置对象config传入到右侧的模板屬性中，实现对全局属性的配置。

3  页面设计器应用

本文实现的页面设计器目前已经实现了66种控件，分为基础控件、高级控件、表格控件、图形控件、布局控件5大类，涵盖企业中后台应用所需的大部分控件，如文本框、树形控件、表单、布局等，每个控件都包含了大量的可视化配置属性，足以满足各种复杂应用。目前通过页面设计器配置完成的系统涵盖企业ERP应用中的人财物事等十几个大小系统，应用过程中不断地丰富控件，提炼业务模板，提高应用复用率。大体来说，本文的页面设计器应用方法流程大致如图5所示。

4  结  论

本文基于Vue框架设计实现了一种页面设计器，设计器提供了一种控件定义的方法，可以方便的集成、扩展已有的组件，或者加入自定义的业务组件，整合Vue-draggable组件实现了组件拖拽，页面配置的可视化，达到了所见即所得的页面设计效果。设计实现了一种事件联动的方式，方便页面中控件间的数据绑定、联动。提出了将已配置好的页面保存为模板提供给新页面进行嵌套组合的模式，大幅度提高了业务模板化，组件高度复用。页面设计器的提出，使得需求人员可以直接进行定制配置，开发人员可以不断整合完善已有组件，开发扩展新组件，提供需求人员可视化配置，综合提升了工作效率。

参考文献：

[1] 王志任.基于Vue.js的开发平台的设计与实现 [D].广州：广东工业大学，2018.

[2] 胡飞菊，张少平.一种手工半智能的Web统一开发平台 [J].计算机应用与软件，2019，36（1）：12-16.

[3] 李成仁.基于Vue.js的单页面WebGIS可视化框架研究与实现 [J].地理空间信息，2020，18（5）：83-86+98+7.

[4] 陈岩.轻量级响应式框架Vue.js应用分析 [J].中国管理信息化，2018，21（3）：181-183.

[5] 朱二华.基于Vue.js的Web前端应用研究 [J].科技与创新，2017（20）：119-121.

作者简介：杨辉（1989—），男，汉族，福建福州人，高级工程师，硕士，研究方向：软件工程、人工智能、区块链应用；
黄家昌（1970—），男，汉族，福建福州人，注册会计师，本科，研究方向：医院运营管理、信息化建设、财务管理等。

猜你喜欢可视化无锡市“三项举措”探索执法可视化新路径江苏安全生产(2022年7期)2022-08-24基于CiteSpace的足三里穴研究可视化分析世界科学技术-中医药现代化(2022年3期)2022-08-22自然资源可视化决策系统北京测绘(2022年6期)2022-08-01三维可视化信息管理系统在选煤生产中的应用选煤技术(2022年2期)2022-06-06思维可视化师道·教研(2022年1期)2022-03-12基于Power BI的油田注水运行动态分析与可视化展示云南化工(2021年8期)2021-12-21自然资源可视化决策系统北京测绘(2021年7期)2021-07-28基于CGAL和OpenGL的海底地形三维可视化海洋信息技术与应用(2020年1期)2020-06-11可视化阅读：新媒体语境下信息可视化新趋势山东农业工程学院学报(2019年11期)2020-01-19“融评”：党媒评论的可视化创新传媒评论(2019年4期)2019-07-13