[发明专利]一种实现代码可视化编辑组合的方法及系统

权利要求书

1.一种实现代码可视化编辑组合的方法，其特征在于，包括如下步骤：

步骤1：服务器将待处理的一个或一个以上代码片段转义传送给web页面；

步骤2：所述web页面将转义后的代码片段分别装载入不同的页面标签容器中，每个页面标签容器绑定拖动事件；

步骤3：所述web页面根据各个页面标签容器的内容在页面中展示代码片段对应的名称、入参和出参格式；

步骤4：依次将待处理的代码片段拖动至代码编辑区进行可视化编辑组合，生成组合的可编辑代码；

步骤4中依次将待处理的代码片段拖动至代码编辑区进行可视化编辑组合，生成组合的可编辑代码的具体实现为：

步骤4.1：利用鼠标左键点击一个待处理的代码片段的名称，此时生成相应的代理容器，该代理容器跟随鼠标指针移动至代码编辑区；

步骤4.2：在代码编辑区点击鼠标左键，判断当前位置是否可以插入代码，如果允许，则执行步骤4.3；如果不允许，则提示当前位置不能插入该代码片段，则自动释放当前的代理容器，结束流程；

步骤4.3：直接插入所拖动的代码片段，并对插入的代码片段进行参数的可视化配置，判断所有代码片段是否均处理完毕，如果是则得到组合的可编辑代码，结束；否则返回步骤4.1；

步骤5：将组合的可编辑代码进行转义得到目标代码，将组合的可编辑代码和目标代码均传送给服务器保存。

2.根据权利要求1所述一种实现代码可视化编辑组合的方法，其特征在于，还包括预先设定代码编辑区的属性为可编辑，使代码片段能正常插入。

3.根据权利要求1所述一种实现代码可视化编辑组合的方法，其特征在于，所述步骤1的具体实现为：服务器对代码片段进行转义，传送给web页面；web页面对接收到的代码片段进行html标签转义，使之能在web页面进行显示。

4.根据权利要求1所述一种实现代码可视化编辑组合的方法，其特征在于，步骤4.1中生成代理容器，使代理容器跟随鼠标移动至代码编辑区的具体实现为：鼠标左键点击代码名称时，web页面产生一个代理容器，将当前拖动代码片段名称对应的页面标签容器中的代码片段拷贝至代理容器中，进而通过代理容器使代码片段跟随鼠标移动至代码编辑区。

5.根据权利要求1所述一种实现代码可视化编辑组合的方法，其特征在于，步骤4.3中对插入的代码片段进行参数的可视化配置的具体实现为：通过文本输入或下拉条件选择的形式，对插入的代码片段进行参数的可视化配置，配置入参和出参。

6.根据权利要求1所述一种实现代码可视化编辑组合的方法，其特征在于，步骤5中将组合的可编辑代码进行转义得到目标代码片段的具体实现为：去除组合的可编辑代码中包含的输入框、下拉框、不可编辑区域标识，进而生成目标代码。

7.一种实现代码可视化编辑组合的系统，其特征在于，包括服务器和web页面，所述web页面包括页面标签容器、页面展示模块、代理容器、代码编辑模块和目标代码生成模块；

所述服务器，其用于将待处理的代码片段转义传送给web页面；还用于存储经web页面处理生成的组合的可编辑代码和目标代码；

所述web页面标签容器，其用于存储转义后的代码片段；还用于与拖动事件绑定；

所述页面展示模块，其用于根据页面标签容器的内容在页面中展示代码片段对应的名称、入参和出参格式；

所述代理容器，其在点击代码名称时产生，用于暂存页面标签容器中的代码片段，当代码片段允许插入代码编辑模块时，将代码片段插入到代码编辑模块，否则自动释放；

所述代码编辑模块，其用于通过文本输入和下拉条件选择形式对插入的代码片段进行参数的可视化配置，得到组合的可编辑代码；

所述目标代码生成模块，其用于将组合的可编辑代码进行转义得到目标代码片段，将组合的可编辑代码和目标代码均传送给服务器保存。

8.根据权利要求7所述一种实现代码可视化编辑组合的系统，其特征在于，所述服务器包括第一转义模块和数据库；

所述第一转义模块，其用于从数据库中获取待处理的代码片段，并对代码片段进行转义，传送给web页面；

所述数据库，其用于存储待处理的代码片段；还用于存储经web页面处理产生的组合的可编辑代码和目标代码。

9.根据权利要求7所述一种实现代码可视化编辑组合的系统，其特征在于，所述web页面还包括第二转义模块，其用于对接收到的代码片段进行html标签转义，使之能在web页面进行显示。