CN110515683B - 一种前端Vue页面可视化配置的方法、装置及存储介质 - Google Patents

Abstract

本申请涉及路由配置领域，提供一种前端Vue页面可视化配置的方法、装置及存储介质，该方法包括：在路由管理工具中输入路由文件夹地址，遍历路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息；启动浏览器，在UI界面中将所有路由的配置文件渲染为一个树状结构；每个路由路径对应多个页面节点，页面节点之间存在路由关系。同一个页面节点中的路由页面之间存在路由关系；通过树状结构查询每个路由的页面节点之间的串联状态；接收针对树状结构的预览指令，执行预览指令，根据各页面节点之间的串联状态跳转到下一个页面节点，直至预览结束。通过采用本方案，能够提高开发效率和缩短定位问题的时间。

Description

一种前端Vue页面可视化配置的方法、装置及存储介质

技术领域

本申请涉及路由配置领域，尤其涉及前端Vue页面可视化配置的方法、装置及存储介质。

背景技术

目前，业内在vue框架项目中，路由的配置通常由一个或多个Vue.js文件配置路由配置信息，从路由配置信息中只能知道每一个路由路径指向的页面名称，无法预览页面具体内容。当页面数量达到数十个的时候，配置文件会变得非常庞大，层级结构也会变得很复杂。当开发人员试图修改和添加其他页面路由、或者定位路由相关问题时，则很难理解整个路由配置信息，增加开发的难度和定位问题的时间。

发明内容

本申请提供了一种前端Vue页面可视化配置的方法、装置及存储介质，能够解决在vue框架项目中难理解整个路由配置信息，开发的难度大和定位问题的时间长的问题。

第一方面，本申请提供一种前端Vue页面可视化配置的方法，所述方法包括：

接收用户输入的指令，响应于所述指令：显示命令行的显示窗口，在所述显示窗口运行路由管理工具；

在所述路由管理工具中输入路由文件夹地址，通过所述路由管理工具遍历所述路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息；其中，所述路由文件夹地址是指访问路由文件夹的路径，所述路由文件夹包括路由配置信息、存放Vue组件的文件夹、存放路由配置信息的文件夹、Vue项目的入口文件和根组件；所述路由配置信息包括路由路径；

启动浏览器，加载人机交互UI界面，在所述UI界面中将所有路由的配置文件渲染为一个树状结构；其中，每个路由路径对应多个页面节点，页面节点之间存在路由关系，每个页面节点包括多个路由页面，同一个页面节点中的路由页面之间存在路由关系；

通过所述树状结构查询每个路由的页面节点之间的串联状态，所述串联状态是指页面节点之间存在的跳转关系；

接收针对所述树状结构的预览指令，执行所述预览指令，根据各页面节点之间的串联状态有序和自动的跳转到下一个页面节点，直至预览结束。

一种可能的设计中，对于一个审批页面节点而言，所述审批页面节点包括审批管理页面、待办页面和审批事件回调页面，所述审批管理页面用于编辑表单页面、审批和查看触发审批事件；所述代办页面用于获取待审批数量和待审批实例；所述审批事件回调页面用于当审批事件发生时，调用注册的http接口返回对应的审批事件信息。

一种可能的设计中，每个页面节点的有效操作范围内均设置控制图标，所述控制图标包括放大图标和缩小图标，每个页面节点的有效操作范围内设置的控制图标仅对所述页面节点生效。

一种可能的设计中，所述通过所述树状结构查询每个路由的页面节点之间的串联状态，包括：

获取查询指令，所述查询指令包括路由页面的标识信息；

根据所述查询指令在所述树状结构中定位于所述标识信息对应的目标路由页面；

在所述树状结构中查询与所述目标路由页面存在串联关系的路由页面或页面节点。

一种可能的设计中，所述路由管理工具为Vue Devtools工具，在Vue Devtools工具中通过选择Vue组件，以查看Vue组件内的数据信息；所述通过所述树状结构查询每个路由的页面节点之间的串联状态，包括：

将Vuex集成到所述Vue Devtools工具中，所述Vuex用于管理页面节点之间的串联状态，以及以预设规则保证页面节点之间的串联状态以一种可预测的方式发生变化；

检测到针对所述Vue Devtools工具中Vuex选项的选择命令后，显示所述Vue项目内Vuex的状态变化信息。

一种可能的设计中，所述方法还包括：

当检测到鼠标移动至所述树状结构中的目标页面节点时，在所述UI界面上显示所述目标页面节点的缩略图。

一种可能的设计中，所述方法还包括：

检测到针对所述页面节点的有效操作范围内的控制图标的第一输入；

根据所述第一输入修改或添加路由路径和路由页面，以更新所述页面节点的路由路径和路由页面；

显示确认图标；

检测到针对所述确认图标的输入后，修改所述页面节点的配置参数，并同步至与所述页面节点对应的路由配置文件。

第二方面，本申请提供一种页面配置装置，具有实现对应于上述第一方面提供的前端Vue页面可视化配置的方法的功能。所述功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块，所述模块可以是软件和/或硬件。

一种可能的设计中，所述页面配置装置包括：

输入输出模块，用于接收用户输入的指令；

显示模块，用于响应于所述输入输出模块接收的所述指令：显示命令行的显示窗口，在所述显示窗口运行路由管理工具；

所述输入输出模块还用于在所述路由管理工具中输入路由文件夹地址；

处理模块，用于通过所述路由管理工具遍历所述路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息；其中，所述路由文件夹地址是指访问路由文件夹的路径，所述路由文件夹包括路由配置信息、存放Vue组件的文件夹、存放路由配置信息的文件夹、Vue项目的入口文件和根组件；所述路由配置信息包括路由路径；

所述处理模块还用于启动浏览器，加载人机交互UI界面，在所述UI界面中将所有路由的配置文件渲染为一个树状结构；其中，每个路由路径对应多个页面节点，页面节点之间存在路由关系，每个页面节点包括多个路由页面，同一个页面节点中的路由页面之间存在路由关系；

所述处理模块还用于通过所述树状结构查询每个路由的页面节点之间的串联状态，所述串联状态是指页面节点之间存在的跳转关系；在所述输入输出模块接收针对所述树状结构的预览指令，执行所述预览指令，根据各页面节点之间的串联状态有序和自动的跳转到下一个页面节点，直至预览结束。

一种可能的设计中，对于一个审批页面节点而言，所述审批页面节点包括审批管理页面、待办页面和审批事件回调页面，所述审批管理页面用于编辑表单页面、审批和查看触发审批事件；所述代办页面用于获取待审批数量和待审批实例；所述审批事件回调页面用于当审批事件发生时，调用注册的http接口返回对应的审批事件信息。

一种可能的设计中，每个页面节点的有效操作范围内均设置控制图标，所述控制图标包括放大图标和缩小图标，每个页面节点的有效操作范围内设置的控制图标仅对所述页面节点生效。

一种可能的设计中，所述处理模块具体用于：

通过所述输入输出模块获取查询指令，所述查询指令包括路由页面的标识信息；

根据所述查询指令在所述树状结构中定位于所述标识信息对应的目标路由页面；

在所述树状结构中查询与所述目标路由页面存在串联关系的路由页面或页面节点。

一种可能的设计中，所述路由管理工具为Vue Devtools工具，在Vue Devtools工具中通过选择Vue组件，以查看Vue组件内的数据信息；所述处理模块具体用于：

将Vuex集成到所述Vue Devtools工具中，所述Vuex用于管理页面节点之间的串联状态，以及以预设规则保证页面节点之间的串联状态以一种可预测的方式发生变化；

检测到针对所述Vue Devtools工具中Vuex选项的选择命令后，显示所述Vue项目内Vuex的状态变化信息。

一种可能的设计中，所述处理模块还用于：

当检测到鼠标移动至所述树状结构中的目标页面节点时，在所述UI界面上显示所述目标页面节点的缩略图。

一种可能的设计中，所述处理模块还用于：

检测到针对所述页面节点的有效操作范围内的控制图标的第一输入；

根据所述第一输入修改或添加路由路径和路由页面，以更新所述页面节点的路由路径和路由页面；

控制所述显示模块显示确认图标；

检测到针对所述确认图标的输入后，修改所述页面节点的配置参数，并同步至与所述页面节点对应的路由配置文件。

本申请又一方面提供了一种计算机装置，其包括至少一个连接的处理器、存储器、显示单元和输入输出单元，其中，所述存储器用于存储程序代码，所述处理器用于调用所述存储器中的程序代码来执行上述第一方面所述的方法。

本申请又一方面提供了一种计算机存储介质，其包括指令，当其在计算机上运行时，使得计算机执行上述第一方面所述的方法。

相较于现有技术，本申请提供的方案中，通过在命令行执行在所述路由管理工具中输入路由文件夹地址，通过所述路由管理工具即可遍历整个路由配置的所有文件，并通过默认浏览器打开一个UI界面，UI界面中可以将所有路由配置信息渲染成一个树状结构，通过树状结构，能够直观的、清晰的看到每一个路由页面串联的情况，并且每一个页面节点，在鼠标移动到节点上的时候，可以查看页面的缩略图。可见，采用本方案，能够清晰的知道所有配置文件的对应关系，预览每个页面，使得非开发人员加快熟悉整个业务流程的速度，以及在UI页面上添加和删除路由页面，实现非开发人员编辑，还能够提高开发效率和缩短定位问题的时间。

附图说明

图1为本申请实施例中前端Vue页面可视化配置的方法的一种流程示意图；

图2为本申请实施例中Vue项目的一种结构示意图；

图3为本申请实施例Vuex的一种可视化监听界面示意图；

图4为本申请实施例页面配置装置的一种结构示意图；

图5为本申请实施例中计算机装置的一种结构示意图。

本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或模块的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或模块，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或模块，本申请中所出现的模块的划分，仅仅是一种逻辑上的划分，实际应用中实现时可以有另外的划分方式，例如多个模块可以结合成或集成在另一个系统中，或一些特征可以忽略，或不执行。

本申请提供一种前端Vue页面可视化配置的方法、装置及存储介质，可用于前端Vue页面的路由配置和开发。

为解决上述技术问题，本申请主要提供以下技术方案：

通过在命令行执行该工具，输入路由文件夹地址，该工具可以遍历整个路由配置的所有文件，并通过当前电脑中默认浏览器打开一个UI界面，UI界面中可以将所有路由配置信息渲染成一个树状结构，通过树状结构，能够直观的、清晰的看到每一个路由页面串联的情况，并且每一个页面节点，在鼠标移动到节点上的时候，可以查看页面的缩略图。能够清晰的知道所有配置文件的对应关系，预览每个页面，加快熟悉整个业务流程的速度，以及在UI页面上添加和删除路由页面，实现非开发人员编辑，还能够提高开发效率和缩短定位问题的时间。

请参照图1，以下介绍本申请实施例中提供的一种前端Vue页面可视化配置的方法，所述方法包括：

101、接收用户输入的指令，响应于所述指令：显示命令行的显示窗口，在所述显示窗口运行路由管理工具。

其中，所述路由管理工具用于对前端Vue框架单页面项目的路由进行可视化配置，以及检测前端Vue框架单页面项目的路由。

其中，Vue框架是一个JavaScriptMVVM库，即一套构建用户界面的渐进式框架，Vue框架可用Vue.js表示，Vue框架包括多个Vue项目，每个Vue项目表示一个单页面节点。Vue框架中包括调试插件和Vue组件库。调试插件可以是指在浏览器中安装Vue Devtools，打开Vue项目，在console控制台选择Vue面板。Vue组件库包括UI组件库。

例如，使用npm工具来安装vue-router，通过import导入并定义Vue模块、vue-router模块和需要使用的组件，在本例中，分别是Goods、Ratings和Seller组件。最后，如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能。然后，通过const router＝new VueRouter()来定义一个路由，并传入对应的路由配置信息(也可以称为路由配置参数)，路由配置信息包括路径path和组件components。最后，在使用newVue来创建和挂载Vue根实例时，要通过router配置参数注入路由，即在router中export出来的路由对象，从而让整个应用都有路由功能。

102、在所述路由管理工具中输入路由文件夹地址，通过所述路由管理工具遍历所述路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息。

其中，所述路由文件夹地址是指访问路由文件夹的路径，所述路由文件夹包括路由配置信息、存放Vue组件的文件夹、存放路由配置信息的文件夹、Vue项目的入口文件和根组件。

例如，可采用find(char*lpPath)函数遍历所述路由文件夹地址对应的各路由文件夹；或者使用CFileFind类遍历所述路由文件夹地址对应的各路由文件夹，具体来说，使用CFileFind类遍历时，调用CModelDlg::FindBmpFile(CString strFoldername)，判断是否成功找到文件，修改""内内容给限定查找文件类型，如果找到的是文件夹存放路由文件夹地址，则遍历所有文件，执行FindNextFile，第一次执行FindNextFile时选择到第一个文件，以后执行为选择到下一个文件，如果找到的是返回上层的目录，则结束本次查找，若找到的是路由文件夹，则遍历该路由文件夹下的文件。

如图2所示的一种Vue项目的结构示意图，从图2可知，components/文件夹用来存放Vue组件。一般把每一个组件中使用到的image图片放置到对应的组件子文件目录下，便于统一的管理。

Node_modules/npm安装的该项目的依赖库。

vuex/文件夹存放的是和Vuex store相关的东西(state对象，actions，mutations)。

router/文件夹存放的是跟vue-router相关的路由配置项。

build/文件是webpack的打包编译配置文件。

static/文件夹存放一些静态的、较少变动的image或者css文件。

config/文件夹存放的是一些配置项，比如服务器访问的端口配置等。

dist/该文件夹一开始是不存在，在我们的项目经过build之后才会产出。

App.vue根组件，所有的子组件都将在这里被引用。

index.html整个项目的入口文件，将会引用我们的根组件App.vue。

main.js入口文件的js逻辑，在webpack打包之后将被注入到index.html中。

103、启动浏览器，加载人机交互UI界面，在所述UI界面中将所有路由的配置文件渲染为一个树状结构。

其中，每个路由路径对应多个页面节点，页面节点之间存在路由关系，每个页面节点包括多个路由页面，同一个页面节点中的路由页面之间存在路由关系。例如，对于一个审批页面节点而言，该审批页面节点包括审批管理页面、待办页面和审批事件回调页面。审批管理页面用于编辑表单页面、审批和查看触发审批事件；代办页面用于获取待审批数量和待审批实例；审批事件回调页面用于当审批事件发生时，调用注册的http接口返回对应的审批事件信息，例如返回一个请假审批事件的通知信息。

一些实施方式中，每个页面节点的有效操作范围内均设置控制图标，所述控制图标包括放大图标和缩小图标，每个页面节点的有效操作范围内设置的控制图标仅对所述页面节点生效。

一些实施方式中，所述树状结构是Vuex的一个核心组成。所述树状结构是指有分支的数据结构，属于一种阶层性的非线性结构且由至少一个页面节点所组成的有限集合；在所述树状结构中存在一个树根(root)即特殊的页面节点，其余页面节点分为n>＝0个互斥的集合，T1,T2,T…Tn,且每个集合称为子树。其中，Vuex包括The state tree、Getters、Mutators和Actions。

其中，The state tree：Vuex使用单一状态树，用一个对象即可包含全部的应用层级状态。每个应用将仅仅包含一个store实例。通过单状态树能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照信息。

Getters：用来从store获取Vue组件数据。

Mutators：事件处理器用来驱动状态的变化。

Actions：可以给组件使用的函数，以此用来驱动事件处理器Mutations。

当Vuex从store实例中读取状态值的时候，若状态发生了变化，那么相应的Vue组件也会高效的更新。并且，改变store实例中状态的唯一途径就是提交commit mutations。这样便于跟踪每一次状态的变化。只要状态发生变化，则一定伴随着mutation的提交。如图3为Vuex的一种可视化监听界面示意图。

104、通过所述树状结构查询每个路由的页面节点之间的串联状态。

其中，所述串联状态是指页面节点之间存在的跳转关系。例如，可以通过创建点击区域和跳转链接的方式,各页面节点串联，以实现从一个页面跳转至另一个页面的目的。

一些实施方式中，所述通过所述树状结构查询每个路由的页面节点之间的串联状态，包括：

获取查询指令，所述查询指令包括路由页面的标识信息；

根据所述查询指令在所述树状结构中定位于所述标识信息对应的目标路由页面；

在所述树状结构中查询与所述目标路由页面存在串联关系的路由页面或页面节点。

一些实施方式中，在Vue Devtools工具中，可以通过选择Vue组件，以查看Vue组件内的数据信息。

另一些实施方式中，除了采用树状结构管理各页面节点之间的串联状态，还可在路由管理工具中集成部署Vuex，即可采用Vuex来管理页面节点之间的串联状态。举例来说，所述路由管理工具为Vue Devtools工具时，在Vue Devtools工具中通过选择Vue组件，以查看Vue组件内的数据信息；所述通过所述树状结构查询每个路由的页面节点之间的串联状态，包括：

将Vuex集成到所述Vue Devtools工具中，所述Vuex用于管理页面节点之间的串联状态，以及以预设规则保证页面节点之间的串联状态以一种可预测的方式发生变化；

检测到针对所述Vue Devtools工具中Vuex选项的选择命令后，显示所述Vue项目内Vuex的状态变化信息，即可查看该Vue项目内Vuex的状态变化信息。

可见，通过这种集成部署Vuex的方式，能够直观的、轻松的查看Vue项目中的Vuex状态变化情况。其中，Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

105、接收针对所述树状结构的预览指令，执行所述预览指令，根据各页面节点之间的串联状态有序和自动的跳转到下一个页面节点，直至预览结束。

例如，针对一个新上线的请假审批管理实例而言，该请假审批管理实例包括请假审批管理页面节点、订阅事件页面节点和请假审批事件回调页面节点。该请假审批管理页面节点与订阅事件页面节点之间存在串联状态(也可称为跳转关系)；订阅事件页面节点与请假审批事件回调页面节点之间存在跳转关系；该请假审批管理页面节点与请假审批事件回调页面节点之间存在跳转关系。主管想要熟悉该请假审批管理实例的处理流程时，先进入请假审批管理页面节点，由于各页面节点之间存在跳转关系，所以在收到主管点击相应图标的操作后，即可自动进入订阅事件页面节点或者请假审批事件回调页面节点，进而达到预览每个页面、以及加快熟悉整个请假审批业务流程的速度的目的。

例如，主管在订阅事件页面节点上订阅了员工请假事件，当员工线上申请请假后，会触发一个请假审批事件，通过该订阅时间页面节点通知到该主管，主管审批通过后，触发该请假审批事件回调页面节点向该员工发送审批通过的通知消息。

与现有机制相比，本申请实施例中，通过在命令行执行在所述路由管理工具中输入路由文件夹地址，通过所述路由管理工具即可遍历整个路由配置的所有文件(例如路由配置信息)，并通过默认浏览器打开一个UI界面，在UI界面中将所有路由配置信息渲染成一个树状结构，通过树状结构，能够直观的、清晰的看到每一个路由页面串联的情况，并且每一个页面节点，在鼠标移动到节点上时，即可查看页面的缩略图。可见，采用本方案，能够清晰的知道所有配置文件的对应关系，预览每个页面，使得非开发人员加快熟悉整个业务流程的速度，以及在UI页面上添加和删除路由页面，实现非开发人员编辑，还能够提高开发效率和缩短定位问题的时间。

可选的，在本申请的一些实施例中，一些实施方式中，为便于用户直观的和可视化的定位或预览编辑好的页面节点，本申请实施例还提供一种直观化和可视化的缩略图，具体来说，当检测到鼠标移动至所述树状结构中的目标页面节点时，在所述UI界面上显示所述目标页面节点的缩略图。

一些实施方式中，为便于用户在UI页面上添加和删除路由页面，本申请实施例还包括：

检测到针对所述页面节点的有效操作范围内的控制图标的第一输入；

根据所述第一输入更新所述页面节点的路由路径和路由页面，例如通过修改或添加路由路径和路由页面来更新所述页面节点的路由路径和路由页面；

显示确认图标；

检测到针对所述确认图标的输入后，修改所述页面节点的配置参数，并同步至与所述页面节点对应的路由配置文件。

例如，在所述树状结构中，每个页面节点的周围都有“+”、“-”按钮(即页面节点的有效操作范围内的控制图标)，点击以后可以直接修改添加路由路径和页面，点击确认按钮，即可修改本地保存的路由配置文件。可见，通过树状结构即可直观化和可视化的修改页面节点的配置参数，进而同步修改页面节点对应的路由配置文件，无需花费大量时间去遍历数据库才能定位到待更新的路由配置文件，实现一键同步，节省整个更新时间。

上述图1-图3中任一项所对应的实施例及实施方式中提及的各项技术特征也同样适用于本申请中的图4和图5所对应的实施例，后续类似之处不再赘述。

以上对本申请中一种前端Vue页面可视化配置的方法进行说明，以下对执行上述前端Vue页面可视化配置的方法的装置进行描述。

如图4所示的一种所述页面配置装置40的结构示意图，其可应用于前端Vue页面的路由配置。本申请实施例中的所述页面配置装置40能够实现对应于上述图1所对应的实施例中所执行的前端Vue页面可视化配置的方法的步骤。所述页面配置装置40实现的功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块，所述模块可以是软件和/或硬件。所述所述页面配置装置40可包括显示模块401、输入输出模块402和处理模块403，所述显示模块401、所述输入输出模块402和所述处理模块403的功能实现可参考图1所对应的实施例中所执行的操作，此处不作赘述。所述处理模块403可用于控制所述显示模块401的显示操作，以及控制所述输入输出模块402的输入输出和收发操作。

一些实施方式中，所述输入输出模块402可用于接收用户输入的指令；

所述显示模块401可用于响应于所述输入输出模块402接收的所述指令：显示命令行的显示窗口，在所述显示窗口运行路由管理工具；

所述输入输出模块402还可用于在所述路由管理工具中输入路由文件夹地址；

所述处理模块403可用于通过所述路由管理工具遍历所述路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息；其中，所述路由文件夹地址是指访问路由文件夹的路径，所述路由文件夹包括路由配置信息、存放Vue组件的文件夹、存放路由配置信息的文件夹、Vue项目的入口文件和根组件；所述路由配置信息包括路由路径；

所述处理模块403还用于启动浏览器，加载人机交互UI界面，在所述UI界面中将所有路由的配置文件渲染为一个树状结构；其中，每个路由路径对应多个页面节点，页面节点之间存在路由关系，每个页面节点包括多个路由页面，同一个页面节点中的路由页面之间存在路由关系；

所述处理模块403还用于通过所述树状结构查询每个路由的页面节点之间的串联状态，所述串联状态是指页面节点之间存在的跳转关系；在所述输入输出模块接收针对所述树状结构的预览指令，执行所述预览指令，根据各页面节点之间的串联状态有序和自动的跳转到下一个页面节点，直至预览结束。

与现有机制相比，本申请实施例中，所述输入输出模块402在命令行执行在所述路由管理工具中输入路由文件夹地址，使得所述处理模块403能够通过所述路由管理工具遍历整个路由配置的所有文件，并通过默认浏览器打开一个UI界面，在UI界面中可以将所有路由配置信息渲染成一个树状结构，通过树状结构，能够直观的、清晰的看到每一个路由页面串联的情况，并且每一个页面节点，在鼠标移动到节点上时，即可查看页面的缩略图。可见，采用本方案，能够清晰的知道所有配置文件的对应关系，预览每个页面，使得非开发人员加快熟悉整个业务流程的速度，实现非开发人员编辑，还能够提高开发效率。

一些实施方式中，对于一个审批页面节点而言，所述审批页面节点包括审批管理页面、待办页面和审批事件回调页面，所述审批管理页面用于编辑表单页面、审批和查看触发审批事件；所述代办页面用于获取待审批数量和待审批实例；所述审批事件回调页面用于当审批事件发生时，调用注册的http接口返回对应的审批事件信息。

一些实施方式中，每个页面节点的有效操作范围内均设置控制图标，所述控制图标包括放大图标和缩小图标，每个页面节点的有效操作范围内设置的控制图标仅对所述页面节点生效。

一些实施方式中，所述处理模块403具体用于：

通过所述输入输出模块402获取查询指令，所述查询指令包括路由页面的标识信息；

根据所述查询指令在所述树状结构中定位于所述标识信息对应的目标路由页面；

在所述树状结构中查询与所述目标路由页面存在串联关系的路由页面或页面节点。

一些实施方式中，所述路由管理工具为Vue Devtools工具，在Vue Devtools工具中通过选择Vue组件，以查看Vue组件内的数据信息；所述处理模块403具体用于：

将Vuex集成到所述Vue Devtools工具中，所述Vuex用于管理页面节点之间的串联状态，以及以预设规则保证页面节点之间的串联状态以一种可预测的方式发生变化；

检测到针对所述Vue Devtools工具中Vuex选项的选择命令后，显示所述Vue项目内Vuex的状态变化信息。

一些实施方式中，所述处理模块403还用于：

当检测到鼠标移动至所述树状结构中的目标页面节点时，在所述UI界面上显示所述目标页面节点的缩略图。

一些实施方式中，所述处理模块403还用于：

检测到针对所述页面节点的有效操作范围内的控制图标的第一输入；

根据所述第一输入修改或添加路由路径和路由页面，以更新所述页面节点的路由路径和路由页面；

控制所述显示模块401显示确认图标；

检测到针对所述确认图标的输入后，修改所述页面节点的配置参数，并同步至与所述页面节点对应的路由配置文件。

上面从模块化功能实体的角度分别介绍了本申请实施例中的页面配置装置40，以下从硬件角度介绍一种计算机装置，如图5所示，其包括：处理器、存储器、显示单元、输入输出单元以及存储在所述存储器中并可在所述处理器上运行的计算机程序。例如，该计算机程序可以为图1所对应的实施例中前端Vue页面可视化配置的方法对应的程序。例如，当计算机装置实现如图4所示的页面配置装置40的功能时，所述处理器执行所述计算机程序时实现上述图4所对应的实施例中由页面配置装置40执行的前端Vue页面可视化配置的方法中的各步骤；或者，所述处理器执行所述计算机程序时实现上述图4所对应的实施例的页面配置装置40中各模块的功能。又例如，该计算机程序可以为图1所对应的实施例中前端Vue页面可视化配置的方法对应的程序。

所称处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述计算机装置的控制中心，利用各种接口和线路连接整个计算机装置的各个部分。

所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述计算机装置的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、视频数据等)等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

所述输入输出单元也可以用输入单元和输出单元代替，可以为相同或者不同的物理实体。为相同的物理实体时，可以统称为输入输出单元。该输入输出单元可称为收发器。

所述显示单元可为显示屏。

所述存储器可以集成在所述处理器中，也可以与所述处理器分开设置。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器或者网络设备等)执行本申请各个实施例所述的方法。

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，这些均属于本申请的保护之内。

Claims (10)

1.一种前端Vue页面可视化配置的方法，其特征在于，所述方法包括：

接收用户输入的指令，响应于所述指令：显示命令行的显示窗口，在所述显示窗口运行路由管理工具；

在所述路由管理工具中输入路由文件夹地址，通过所述路由管理工具遍历所述路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息；其中，所述路由文件夹地址是指访问路由文件夹的路径，所述路由文件夹包括路由配置信息、存放Vue组件的文件夹、存放路由配置信息的文件夹、Vue项目的入口文件和根组件；所述路由配置信息包括路由路径；

启动浏览器，加载人机交互UI界面，在所述UI界面中将所有路由的路由配置信息渲染为一个树状结构；其中，每个路由路径对应多个页面节点，页面节点之间存在路由关系，每个页面节点包括多个路由页面，同一个页面节点中的路由页面之间存在路由关系；

通过所述树状结构查询每个路由的页面节点之间的串联状态，所述串联状态是指页面节点之间存在的跳转关系；

接收针对所述树状结构的预览指令，执行所述预览指令，根据各页面节点之间的串联状态有序和自动的跳转到下一个页面节点，直至预览结束。

2.根据权利要求1所述的方法，其特征在于，对于一个审批页面节点而言，所述审批页面节点包括审批管理页面、待办页面和审批事件回调页面，所述审批管理页面用于编辑表单页面、审批和查看触发审批事件；所述待办 页面用于获取待审批数量和待审批实例；所述审批事件回调页面用于当审批事件发生时，调用注册的http接口返回对应的审批事件信息。

3.根据权利要求2所述的方法，其特征在于，每个页面节点的有效操作范围内均设置控制图标，所述控制图标包括放大图标和缩小图标，每个页面节点的有效操作范围内设置的控制图标仅对所述页面节点生效。

4.根据权利要求1-3中任一项所述的方法，其特征在于，所述通过所述树状结构查询每个路由的页面节点之间的串联状态，包括：

获取查询指令，所述查询指令包括路由页面的标识信息；

根据所述查询指令在所述树状结构中定位于所述标识信息对应的目标路由页面；

在所述树状结构中查询与所述目标路由页面存在串联关系的路由页面或页面节点。

5.根据权利要求1-3中任一项所述的方法，其特征在于，所述路由管理工具为VueDevtools工具，在Vue Devtools工具中通过选择Vue组件，以查看Vue组件内的数据信息；所述通过所述树状结构查询每个路由的页面节点之间的串联状态，包括：

将Vuex集成到所述Vue Devtools工具中，所述Vuex用于管理页面节点之间的串联状态，以及以预设规则保证页面节点之间的串联状态以一种可预测的方式发生变化；

检测到针对所述Vue Devtools工具中Vuex选项的选择命令后，显示所述Vue项目内Vuex的状态变化信息。

6.根据权利要求3所述的方法，其特征在于，所述方法还包括：

当检测到鼠标移动至所述树状结构中的目标页面节点时，在所述UI界面上显示所述目标页面节点的缩略图。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

检测到针对所述页面节点的有效操作范围内的控制图标的第一输入；

根据所述第一输入修改或添加路由路径和路由页面，以更新所述页面节点的路由路径和路由页面；

显示确认图标；

检测到针对所述确认图标的输入后，修改所述页面节点的配置参数，并同步至与所述页面节点对应的路由配置文件。

8.一种页面配置装置，其特征在于，所述页面配置装置包括：

输入输出模块，用于接收用户输入的指令；

显示模块，用于响应于所述输入输出模块接收的所述指令：显示命令行的显示窗口，在所述显示窗口运行路由管理工具；

所述输入输出模块还用于在所述路由管理工具中输入路由文件夹地址；

处理模块，用于通过所述路由管理工具遍历所述路由文件夹地址对应的各路由文件夹，并为遍历到的各路由文件夹分别配置路由配置信息；其中，所述路由文件夹地址是指访问路由文件夹的路径，所述路由文件夹包括路由配置信息、存放Vue组件的文件夹、存放路由配置信息的文件夹、Vue项目的入口文件和根组件；所述路由配置信息包括路由路径；

所述处理模块还用于启动浏览器，加载人机交互UI界面，在所述UI界面中将所有路由的路由配置信息渲染为一个树状结构；其中，每个路由路径对应多个页面节点，页面节点之间存在路由关系，每个页面节点包括多个路由页面，同一个页面节点中的路由页面之间存在路由关系；

所述处理模块还用于通过所述树状结构查询每个路由的页面节点之间的串联状态，所述串联状态是指页面节点之间存在的跳转关系；在所述输入输出模块接收针对所述树状结构的预览指令，执行所述预览指令，根据各页面节点之间的串联状态有序和自动的跳转到下一个页面节点，直至预览结束。

9.一种计算机的装置，其特征在于，所述装置包括：

至少一个处理器、存储器、输入输出单元和显示单元；

其中，所述存储器用于存储程序代码，所述处理器用于调用所述存储器中存储的程序代码来执行如权利要求1-7中任一项所述的方法。

10.一种计算机存储介质，其特征在于，其包括指令，当其在计算机上运行时，使得计算机执行如权利要求1-7中任一项所述的方法。

Images