CN104049978B - 一种实现代码可视化编辑组合的方法及系统 - Google Patents
一种实现代码可视化编辑组合的方法及系统 Download PDFInfo
- Publication number
- CN104049978B CN104049978B CN201410301768.2A CN201410301768A CN104049978B CN 104049978 B CN104049978 B CN 104049978B CN 201410301768 A CN201410301768 A CN 201410301768A CN 104049978 B CN104049978 B CN 104049978B
- Authority
- CN
- China
- Prior art keywords
- code
- snippet
- page
- web page
- editable
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Landscapes
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明涉及一种实现代码可视化编辑组合的方法及系统，包括服务器将待处理的一个或一个以上代码片段转义传送给web页面；所述web页面将转义后的代码片段分别装载入不同的页面标签容器中，每个页面标签容器绑定拖动事件；所述web页面根据各个页面标签容器的内容在页面中展示代码片段对应的名称、入参和出参格式；依次将待处理的代码片段拖动至代码编辑区进行可视化编辑组合，生成组合的可编辑代码；将组合的可编辑代码进行转义得到目标代码，将组合的可编辑代码和目标代码均传送给服务器保存；本发明大大提高了常用代码的复用率，实现代码参数配置的可视化，标示可修改区域和不可修改区域，大大提高代码生成和输出效率。
Description
技术领域
本发明涉及计算机领域，尤其涉及一种实现代码可视化编辑组合的方法及系统。
背景技术
现有技术中，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页面标签容器，其用于存储转义后的代码片段；还用于与拖动事件绑定；
所述页面展示模块，其用于根据页面标签容器的内容在页面中展示代码片段对应的名称、入参和出参格式；
所述代理容器，其在点击代码名称时产生，用于暂存页面标签容器中的代码片段，当代码片段允许插入代码编辑模块时，将代码片段插入到代码编辑模块，否则自动释放；
所述代码编辑模块，其用于通过文本输入和下拉条件选择形式对插入的代码片段进行参数的可视化配置，得到组合的可编辑代码；
所述目标代码生成模块，其用于将组合的可编辑代码进行转义得到目标代码片段，将组合的可编辑代码和目标代码均传送给服务器保存。
在上述技术方案的基础上，本发明还可以做如下改进。
进一步，所述服务器包括第一转义模块和数据库；
所述第一转义模块，其用于从数据库中获取待处理的代码片段，并对代码片段进行转义，传送给web页面；
所述数据库，其用于存储待处理的代码片段；还用于存储经web页面处理产生的组合的可编辑代码和目标代码。
进一步，所述web页面还包括第二转义模块，其用于对接收到的代码片段进行html标签转义，使之能在web页面进行显示。
附图说明
图1为本发明所述一种实现代码可视化编辑组合的方法流程图；
图2为本发明所述步骤4的实现流程图；
图3为本发明所述一种实现代码可视化编辑组合的系统框图；
图4为本发明所述服务器内部框图。
附图中，各标号所代表的部件列表如下：
100、服务器，101、第一转义模块，102、数据库，200、web页面，201、页面标签容器，202、页面展示模块，203、代理容器，204、代码编辑模块，205、目标代码生成模块，206、第二转义模块。
具体实施方式
以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
如图1所示，一种实现代码可视化编辑组合的方法，包括如下步骤：
步骤1：服务器将待处理的一个或一个以上代码片段转义传送给web页面；
步骤2：所述web页面将转义后的代码片段分别装载入不同的页面标签容器中，每个页面标签容器绑定拖动事件；
步骤3：所述web页面根据各个页面标签容器的内容在页面中展示代码片段对应的名称、入参和出参格式；
步骤4：依次将待处理的代码片段拖动至代码编辑区进行可视化编辑组合，生成组合的可编辑代码；
步骤5：将组合的可编辑代码进行转义得到目标代码，将组合的可编辑代码和目标代码均传送给服务器保存。
上述技术方案还包括预先设定代码编辑区的属性为可编辑，使代码片段能正常插入。
所述步骤1的具体实现为：服务器对代码片段进行转义，传送给web页面；web页面对接收到的代码片段进行html标签转义，使之能在web页面进行显示。
如图2所示，步骤4中依次将待处理的代码片段拖动至代码编辑区进行可视化编辑组合，生成组合的可编辑代码的具体实现为：
步骤4.1：利用鼠标左键点击一个待处理的代码片段的名称，此时生成相应的代理容器，该代理容器跟随鼠标指针移动至代码编辑区；
步骤4.2：在代码编辑区点击鼠标左键，判断当前位置是否可以插入代码，如果允许，则执行步骤4.3；如果不允许，则提示当前位置不能插入该代码片段，则自动释放当前的代理容器，结束流程；
步骤4.3：直接插入所拖动的代码片段，并对插入的代码片段进行参数的可视化配置，判断所有代码片段是否均处理完毕，如果是则得到组合的可编辑代码，结束；否则返回步骤4.1。
其中，步骤4.1中生成代理容器，使代理容器跟随鼠标移动至代码编辑区的具体实现为：鼠标左键点击代码名称时，web页面产生一个代理容器，将当前拖动代码片段名称对应的页面标签容器中的代码片段拷贝至代理容器中，进而通过代理容器使代码片段跟随鼠标移动至代码编辑区。
其中，步骤4.2中需要判断在前位置是否可以插入代码，虽然预先设定代码编辑区的属性为可编辑，使代码能正常插入，是在未插入任何代码片段的情况下代码编辑区域是都可插入的，但当代码编辑区插入了部分代码片段后，有些代码片段的某些地方是连续的，不可打断修改的，这些地方就是不可插入其他代码片段的，如果待插入的地方没有插入过代码片段，或者插入过代码片段，但该代码片段的该处可以打断，则可插入。
其中，步骤4.3中对插入的代码片段进行参数的可视化配置的具体实现为：通过文本输入或下拉条件选择的形式，对插入的代码片段进行参数的可视化配置，配置入参和出参。
所述步骤5中将组合的可编辑代码进行转义得到目标代码片段的具体实现为：去除组合的可编辑代码中包含的输入框、下拉框、不可编辑区域标识，进而生成目标代码。
如图3所示，一种实现代码可视化编辑组合的系统，包括服务器100和web页面200，所述web页面200包括页面标签容器201、页面展示模块202、代理容器203、代码编辑模块204和目标代码生成模块205；所述服务器100，其用于将待处理的代码片段转义传送给web页面200，还用于存储经web页面200处理生成的组合的可编辑代码和目标代码；所述web页面标签容器201，其用于存储转义后的代码片段；还用于与拖动事件绑定；所述页面展示模块202，其用于根据页面标签容器的内容在页面中展示代码片段对应的名称、入参和出参格式；所述代理容器203，其在点击代码名称时产生，用于暂存页面标签容器中的代码片段，当代码片段允许插入代码编辑模块204时，将代码片段插入到代码编辑模块204，否则自动释放；所述代码编辑模块204，其用于通过文本输入和下拉条件选择形式对插入的代码片段进行参数的可视化配置，得到组合的可编辑代码；所述目标代码生成模块205，其用于将组合的可编辑代码进行转义得到目标代码片段，将组合的可编辑代码和目标代码均传送给服务器100保存。
其中所述代理容器203是中间一个过渡元素，当前拖动的代码名称和代码片段会存储在代理容器中，当在代码编辑区插入代码片段时，将代理中的代码片段插入到鼠标点击的位置，并清除代理容器203，如果不能插入则直接清除代理容器203。
如图4所示，所述服务器100包括第一转义模块101和数据库102；所述第一转义模块101，其用于从数据库中获取待处理的代码片段，并对代码片段进行转义，传送给web页面200；所述数据库102，其用于存储待处理的代码片段；还用于存储经web页面200处理产生的组合的可编辑代码和目标代码。
所述web页面200还包括第二转义模块206，其用于对接收到的代码片段进行html标签转义，使之能在web页面进行显示。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (9)
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页面进行显示。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410301768.2A CN104049978B (zh) | 2014-06-27 | 2014-06-27 | 一种实现代码可视化编辑组合的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410301768.2A CN104049978B (zh) | 2014-06-27 | 2014-06-27 | 一种实现代码可视化编辑组合的方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104049978A CN104049978A (zh) | 2014-09-17 |
| CN104049978B true CN104049978B (zh) | 2017-06-13 |
Family
ID=51502886
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410301768.2A Active CN104049978B (zh) | 2014-06-27 | 2014-06-27 | 一种实现代码可视化编辑组合的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104049978B (zh) |
Families Citing this family (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104408548A (zh) * | 2014-10-31 | 2015-03-11 | 北京思特奇信息技术股份有限公司 | 一种图形化引导展示方法及系统 |
| CN105808263A (zh) * | 2016-03-11 | 2016-07-27 | 浪潮通信信息系统有限公司 | 一种系统运行时可视化代码片断搭建前端系统的方法 |
| CN106652644A (zh) * | 2016-10-12 | 2017-05-10 | 大连文森特软件科技有限公司 | 基于可视化编程的vr驾驶考核项目制作与体验系统 |
| CN106571082A (zh) * | 2016-10-12 | 2017-04-19 | 大连文森特软件科技有限公司 | 基于在线可视化编程的vr驾驶考核项目制作与体验系统 |
| CN106377898A (zh) * | 2016-10-12 | 2017-02-08 | 大连文森特软件科技有限公司 | 基于可视化编程的vr飞行游戏制作与体验系统 |
| CN106362402A (zh) * | 2016-10-12 | 2017-02-01 | 大连文森特软件科技有限公司 | 基于在线可视化编程的vr驾驶游戏制作与体验系统 |
| CN106682324A (zh) * | 2016-12-30 | 2017-05-17 | 苏州同元软控信息技术有限公司 | 一种基于Modelica的复杂方程可视化建模系统 |
| CN108710490B (zh) * | 2017-04-12 | 2022-06-07 | 北京京东尚科信息技术有限公司 | 一种Web页面的编辑方法和装置 |
| CN109086040A (zh) * | 2018-06-27 | 2018-12-25 | 珠海宏桥高科技有限公司 | 一种快速生成html代码的方法和系统 |
| CN109635266A (zh) * | 2018-12-24 | 2019-04-16 | 成都四方伟业软件股份有限公司 | 三维可视化编辑方法、装置及三维可视化系统 |
| CN110007917B (zh) * | 2019-03-08 | 2022-09-30 | 国电南瑞科技股份有限公司 | 一种基于浏览器的可视化页面生成和浏览方法 |
| CN110457028B (zh) * | 2019-08-06 | 2023-09-01 | 软通智慧信息技术有限公司 | 一种页面可视化编程方法、装置、服务器和存储介质 |
| CN111428451B (zh) * | 2020-06-09 | 2020-09-08 | 平安国际智慧城市科技股份有限公司 | 文本在线编辑方法、装置、电子设备及存储介质 |
| CN113360147B (zh) * | 2021-03-10 | 2024-04-05 | 杭州芄兰科技有限公司 | 一种互动式代码展示与教学工具 |
| CN113568615A (zh) * | 2021-08-05 | 2021-10-29 | 上海淇玥信息技术有限公司 | 一种表单页面禁止编辑展示方法、装置和电子设备 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101207450A (zh) * | 2007-12-14 | 2008-06-25 | 北大方正集团有限公司 | 一种专题模板制作方法、系统及客户端和网络侧服务器 |
| CN103069383A (zh) * | 2010-06-02 | 2013-04-24 | 艾伦智能科技公司 | 具有图形用户界面的装置及开发多媒体计算机应用程序的方法 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8700988B2 (en) * | 2002-12-20 | 2014-04-15 | Sap Portals Israel Ltd. | Selectively interpreted portal page layout template |
| US7469385B2 (en) * | 2004-02-20 | 2008-12-23 | Microsoft Corporation | Methods and systems for abstraction of logical editing operations |
-
2014
- 2014-06-27 CN CN201410301768.2A patent/CN104049978B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101207450A (zh) * | 2007-12-14 | 2008-06-25 | 北大方正集团有限公司 | 一种专题模板制作方法、系统及客户端和网络侧服务器 |
| CN103069383A (zh) * | 2010-06-02 | 2013-04-24 | 艾伦智能科技公司 | 具有图形用户界面的装置及开发多媒体计算机应用程序的方法 |
Non-Patent Citations (1)
| Title |
|---|
| "可视化编程系统中ActiveX控件容器的实现";周桂云等;《中国科技信息》;20060215(第4期);第51页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104049978A (zh) | 2014-09-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104049978B (zh) | 一种实现代码可视化编辑组合的方法及系统 | |
| CN105138501B (zh) | 一种可配置的动态报表生成方法及系统 | |
| CN104933084B (zh) | 一种用于获得答案信息的方法、装置和设备 | |
| CN108269063A (zh) | word文档在线协同编辑方法及系统 | |
| WO2008033774A4 (en) | Methods and system for real-time citation generation | |
| CN104298727B (zh) | 一种基于文档的模板匹配方法及装置 | |
| CN103064584A (zh) | 粘贴方法和装置 | |
| CN109815467B (zh) | 一种司法调解文书智能生成方法、系统及装置 | |
| CN108008944A (zh) | 规则引擎响应方法及系统、规则引擎、服务终端、存储器 | |
| CN106126489A (zh) | 一种报告文件动态图表编辑方法及系统 | |
| CN103412961B (zh) | 一种实时导出海量数据报表的处理方法和系统 | |
| CN110096480A (zh) | 一种文本标注系统、方法及存储介质 | |
| NZ771533A (en) | A method and system for managing digital evidence using a blockchain | |
| CN104636880A (zh) | 一种项目管理进展反馈和偏差分析的方法及系统 | |
| CN105204860A (zh) | 一种快速生成自定义静态Web页面的方法及装置 | |
| CN106845935A (zh) | 一种工程项目流程模板化的方法和系统 | |
| CN105069222A (zh) | 钣金工艺自动生成系统 | |
| CN109375919A (zh) | 一种生成及发送营销邮件内容页的方法 | |
| CN105550207B (zh) | 一种信息推广方法及装置 | |
| CN104461548B (zh) | 代码片段的添加方法和装置 | |
| US7392480B2 (en) | Engineering drawing data extraction software | |
| CN106502977B (zh) | 一种基于b/s构架的表单处理方法及表单系统 | |
| CN106856450B (zh) | 基于社交网络的社交信息生成方法和装置 | |
| CN108733332A (zh) | 一种通用的打印模板元数据设计方法 | |
| CN107330602A (zh) | 一种基于互联网的工程计划编制系统和方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |