买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

申请/专利权人：烟台海颐软件股份有限公司

摘要：本发明属于软件前端开发技术领域，具体涉及一种基于VUE技术的双向可视化转换系统及方法。当代码编辑器打开时，本地文件操作服务读取本地文件的页面文件源码，并提供给代码编辑器显示；当可视化编辑器打开时，本地文件操作服务读取本地文件的页面文件源码，并提供给源码解析器；源码解析器利用AST转换技术，将源码转换成JSON结构的数据模型；可视化编辑器读取JSON结构的数据模型，反向解析为页面的组件元素，通过可视化设计页面将内容展现出来。本发明通过双向转换技术，使可视化编辑器和代码编辑器之间的改动能够实时同步，提供了一种无缝衔接的用户体验，满足了用户对可视化和代码编辑的双重需求。

主权项：1.一种基于VUE技术的双向可视化转换系统，其特征在于，所述系统包括基于VUE的双向可视化开发框架；所述基于VUE的双向可视化开发框架包括：本地文件操作服务、代码编辑器、源码解析器、可视化编辑器、代码生成器；本地文件操作服务，用于读取本地文件的页面文件源码，并提供给源码解析器或代码编辑器，所述页面文件源码包括HTML源码和JavaScript源码；并用于接收代码生成器的页面文件源码，以便将页面文件源码写入本地文件；代码编辑器，用于从本地文件操作服务读取本地文件的页面文件源码，进行显示，并用于编写或修改页面代码；源码解析器，用于使用AST转换技术将编写或修改的页面代码或页面文件源码转换为JSON结构的数据模型；可视化编辑器，用于从源码解析器接收JSON数据模型，并将其转换为页面的组件元素，通过可视化设计页面将内容展现出来；还用于处理用户的拖拽和配置操作，并将这些更改保存回JSON数据模型中；代码生成器，用于读取JSON结构的数据模型，生成页面文件源码并提供给代码编辑器；同时，用于将页面文件源码提供给本地文件操作服务，以便将页面文件源码写入本地文件中；还包括可视化与代码的双向定位模块，所述可视化与代码的双向定位模块包括代码定位器，所述代码定位器用于接收可视化编辑器的组件信息或组件事件信息，并根据所述组件信息或组件事件信息，找到代码并计算行数和位置，发送给代码编辑器；所述可视化与代码的双向定位模块还包括组件定位器，所述组件定位器用于接收代码编辑器发送的代码标签名称或代码的JavaScript方法名称，根据所述代码标签名称找到对应组件对象，或根据代码的JavaScript方法名称找到对应组件事件列表，在代码编辑器中通过弹出浮层的方式显示JavaScript方法被引用的组件事件列表；代码标签的定位，具体包括：用户点击代码的标签名称；代码编辑器将用户选择的标签名称和ID名称传递到组件定位器；组件定位器根据标签和ID名称找到对应组件对象，发送给可视化编辑器；可视化编辑器接收到组件对象，在可视化编辑界面中将组件设为选中状态；JavaScript方法的定位，具体包括：用户点击代码的JavaScript方法名称；代码编辑器将用户选择的JavaScript方法名称传递到组件定位器；组件定位器根据JavaScript方法名称，遍历所有的组件对象，找到对应组件事件列表，返回给代码编辑器；代码编辑器接收到组件事件列表，在代码编辑器中通过弹出浮层的方式显示JavaScript方法被引用的组件事件列表。

全文数据：

权利要求：

百度查询： 烟台海颐软件股份有限公司 一种基于VUE技术的双向可视化转换系统及方法