[发明专利]一种前端Vue页面可视化配置的方法、装置及存储介质

权利要求书

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所述的方法，其特征在于，所述方法还包括：

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

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

显示确认图标；

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