一种基于Vue的页面设计方法与流程

本发明涉及计算机领域，特别指一种基于vue的页面设计方法。

背景技术：

传统的web页面设计，需要ui设计师根据产品经理的需求设计出设计稿，在产品经理确认无误后，将标注切图文件交给前端开发工程师，进行静态页面的编写。在静态页面编写的过程中，如果产品经理提出设计变更，需要重复如上过程，十分繁琐。前端工程师在页面的开发过程中，不同的页面中经常存在功能效果非常相似的模块，往往通过复制黏贴后再修改配置属性的方式生成不同页面，使得项目代码存在冗余，功能实现低效，不利于项目代码的组件化和模块化，存在代码难以复用的缺点。

因此，如何提供一种基于vue的页面设计方法，实现减少页面设计的冗余代码，提高页面设计的效率，成为一个亟待解决的问题。

技术实现要素：

本发明要解决的技术问题，在于提供一种基于vue的页面设计方法，实现减少页面设计的冗余代码，提高页面设计的效率。

本发明是这样实现的：一种基于vue的页面设计方法，包括如下步骤：

步骤s10、定义控件组；

步骤s20、拖动所述控件组或者预设的第一模板至设计区；

步骤s30、配置设计区内的所述控件组或者第一模板的属性，并生成配置信息；

步骤s40、基于所述配置信息生成第二模板或者页面。

进一步地，所述步骤s10具体为：

将各功能基于vue生成代码后，进行封装生成控件组；所述控件组包括常用控件以及布局控件；

所述常用控件至少包括按钮控件、文本框控件、单选框组控件、下拉框控件、表格控件、树控件、图片控件以及文件上传控件；所述下拉框包括下拉选择框、下拉表格以及下拉菜单；所述表格包括普通表格、表格树以及可编辑表格；

所述布局控件至少包括栅栏控件、分割面板控件、轮播控件以及标签页控件；

各所述常用控件以及布局控件均分别设有一唯一key值作为标识。

进一步地，所述步骤s20具体包括：

步骤s21、基于所述分割面板控件将设计区分割为控件区、页面设计区、属性配置区以及操作区；

步骤s22、基于组件拖拽插件拖动所述控件组或者预设的第一模板至控件区；

步骤s23、将位于所述控件区内的控件组拖动至页面设计区进行位置的排布。

进一步地，所述步骤s21中，所述控件区用于存放控件组；所述页面设计区用于基于控件区存放的控件组设计页面；所述属性配置区用于配置位于页面设计区内的控件组的属性；所述操作区用于切换全局配置、保存、另存为、回退、预览以及清空所述页面设计区内的配置。

进一步地，所述步骤s30具体为：

配置所述页面设计区内的所述控件组或者第一模板的基本属性、扩展事件、样式脚本或者联动事件，并生成配置信息。

进一步地，所述步骤s40具体为：

在所述操作区内，基于所述配置信息生成第二模板或者页面。

本发明的优点在于：

通过定义所述控件组，可以方便的集成和扩展已有的控件，或者加入自定义的控件，基于组件拖拽插件对所述控件组进行拖拽，且设计区为可视化的，达到了所见即所得的页面设计效果；通过定义各控件的基本属性、扩展事件、样式脚本或者联动事件属性，方便控件间的数据绑定和联动；通过将设计好的页面保存为所述第二模板，提供给新页面进行嵌套组合的模式，大幅度提高了业务模板化以及组件复用程度，使得需求人员可以直接进行定制配置，开发人员可以不断整合完善已有的所述控件组，开发扩展新控件，提供需求人员可视化的配置，即极大的减少了页面设计的冗余代码，极大的提高了页面设计的效率。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1是本发明一种基于vue的页面设计方法的流程图。

具体实施方式

请参照图1所示，本发明一种基于vue的页面设计方法的较佳实施例，包括如下步骤：

步骤s10、定义控件组；

步骤s20、拖动所述控件组或者预设的第一模板至设计区；

步骤s30、配置设计区内的所述控件组或者第一模板的属性，并生成配置信息；

步骤s40、基于所述配置信息生成第二模板或者页面；所述第一模板和第二模板可以被多次复用和嵌套。

所述步骤s10具体为：

将各功能基于vue生成代码后，进行封装生成控件组；所述控件组包括常用控件以及布局控件；vue即vue.js，是一个用于创建用户界面的开源javascript框架，也是一个创建单页应用的web应用框架；

所述常用控件至少包括按钮控件、文本框控件、单选框组控件、下拉框控件、表格控件、树控件、图片控件以及文件上传控件；所述下拉框包括下拉选择框、下拉表格以及下拉菜单；所述表格包括普通表格、表格树以及可编辑表格；

所述布局控件至少包括栅栏控件、分割面板控件、轮播控件以及标签页控件；

各所述常用控件以及布局控件均分别设有一唯一key值作为标识，用于区分控件对象。

若控件是容器控件需要在配置页(precreatetemp)和运行页(createtemp)引入，否则在表单项配置(preformitem)和表单项运行(formitem)中引入。在src\components\componentsconfig.js文件中增加需要定义控件的配置对象。若为容器控件需要定义好对应的控件数组，并在控件中定义好slot的位置，配置控件还需要引入定义draggable的位置以提供其他控件的拖入。

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

所述步骤s20具体包括：

步骤s21、基于所述分割面板控件将设计区分割为控件区、页面设计区、属性配置区以及操作区；

步骤s22、基于组件拖拽插件拖动所述控件组或者预设的第一模板至控件区；所述组件拖拽插件为vue-draggable；所述控件区内的控件组的配置以对象的形式存储在javascript文件中，并对其部分属性赋予初始值；

步骤s23、将位于所述控件区内的控件组拖动至页面设计区进行位置的排布，所述控件组的部分配置属性会在页面设计区内动态显示。

所述步骤s21中，所述控件区用于存放控件组；所述页面设计区用于基于控件区存放的控件组设计页面；所述属性配置区用于配置位于页面设计区内的控件组的属性；所述操作区用于切换全局配置、保存、另存为、回退、预览以及清空所述页面设计区内的配置。

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

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

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

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

所述预览即弹窗显示配置控件在实际页面中的展现。

所述清空即清空当前页面的所有已配置的内容(还原初始化)。

所述步骤s30具体为：

配置所述页面设计区内的所述控件组或者第一模板的基本属性、扩展事件、样式脚本或者联动事件，并生成配置信息。

其中联动事件的配置与触发过程如下：

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

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

所述步骤s40具体为：

在所述操作区内，基于所述配置信息生成第二模板或者页面。

在页面设计过程中还维护了一个包括list、config以及commommodal的配置对象datajson；其中list为页面中的控件列表结构；config为页面的整体配置，包含了页面的全局配置，触发控件列表等；commonmodal为页面中的弹窗对象,页面上的所有弹窗共用这个对象。控件的弹窗内容存放在各自的弹窗对象中，在弹窗触发前，会将控件的弹窗对象设置到页面的弹窗对象中，从而控制不同弹窗对象的切换。

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

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

综上所述，本发明的优点在于：

通过定义所述控件组，可以方便的集成和扩展已有的控件，或者加入自定义的控件，基于组件拖拽插件对所述控件组进行拖拽，且设计区为可视化的，达到了所见即所得的页面设计效果；通过定义各控件的基本属性、扩展事件、样式脚本或者联动事件属性，方便控件间的数据绑定和联动；通过将设计好的页面保存为所述第二模板，提供给新页面进行嵌套组合的模式，大幅度提高了业务模板化以及组件复用程度，使得需求人员可以直接进行定制配置，开发人员可以不断整合完善已有的所述控件组，开发扩展新控件，提供需求人员可视化的配置，即极大的减少了页面设计的冗余代码，极大的提高了页面设计的效率。

虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。