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

说明书

技术领域

本发明涉及计算机领域，尤其涉及一种实现代码可视化编辑组合的方法及系统。

背景技术

现有技术中，Web前端代码生成通常通过浏览器在线或离线编辑器进行手动代码编辑，并保存。上述代码生成方法存在如下缺点：1.常用代码无法高效复用，2.代码参数配置的无法实现可视化，3.缺乏可修改区域和不可修改区域的标示，4.代码生成和输出效率低。

发明内容

本发明所要解决的技术问题是针对现有技术的不足，提供实现代码可视化编辑组合的方法及系统。

本发明解决上述技术问题的技术方案如下：一种实现代码可视化编辑组合的方法，包括如下步骤：

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

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

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

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

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

本发明的有益效果是：本发明通过将代码片段绑定拖动事件，并拖动至代码编辑区进行可视化编辑组合，这大大提高了常用代码的复用率，实现代码参数配置的可视化，标示可修改区域和不可修改区域，大大提高代码生成和输出效率。

在上述技术方案的基础上，本发明还可以做如下改进。

进一步，上述技术方案还包括预先设定代码编辑区的属性为可编辑，使代码片段能正常插入。

进一步，所述步骤1的具体实现为：服务器对代码片段进行转义，传送给web页面；web页面对接收到的代码片段进行html标签转义，使之能在web页面进行显示。

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

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

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

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

进一步，步骤4.1中生成代理容器，使代理容器跟随鼠标移动至代码编辑区的具体实现为：鼠标左键点击代码名称时，web页面产生一个代理容器，将当前拖动代码片段名称对应的页面标签容器中的代码片段拷贝至代理容器中，进而通过代理容器使代码片段跟随鼠标移动至代码编辑区。

进一步，步骤4.3中对插入的代码片段进行参数的可视化配置的具体实现为：通过文本输入或下拉条件选择的形式，对插入的代码片段进行参数的可视化配置，配置入参和出参。

进一步，步骤5中将组合的可编辑代码进行转义得到目标代码片段的具体实现为：去除组合的可编辑代码中包含的输入框、下拉框、不可编辑区域标识，进而生成目标代码。

本发明解决上述技术问题的另一技术方案如下：一种实现代码可视化编辑组合的系统，包括服务器和web页面，所述web页面包括页面标签容器、页面展示模块、代理容器、代码编辑模块和目标代码生成模块；

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

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

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

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

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

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

在上述技术方案的基础上，本发明还可以做如下改进。