一种通过拖拽生成代码的方法技术

本发明专利技术公开了一种通过拖拽生成代码的方法

【技术实现步骤摘要】
一种通过拖拽生成代码的方法、系统、设备及介质


[0001]本专利技术属于前端代码生成
，涉及一种通过拖拽生成代码的方法
、
系统
、
设备及介质
。

技术介绍

[0002]利用成熟框架进行前端开发会发现有一些工作其实是繁复的，它们有一些共同的特点：频率高
、
非常基础
、
花费时间
。
[0003]常规开发的流程在写
Vue
时会发现：例如
[0004]1、class
的名称需要分别在
template
和
style
中定义
。
[0005]2、v
‑
on
，
v
‑
bind
，
v
‑
model
，
v
‑
for
等指令的值需要分别在
template
和
script
中定义
。
[0006]3、
依赖第三方组件库的需要打开官网拷贝某个组件所对应的代码
。
[0007]上面三种场景占用了开发一个组件所需要使用的相当一部分时间
。
尤其是第三条，经常就是打开官网
‑
>
找到组件
‑
>
拷贝
template
‑
>
拷贝
data
‑
>
拷贝
method
‑
>
验证效果
。
如果遇到复杂组件时会花费较多时间
。

技术实现思路

[0008]本专利技术的目的在于克服上述现有技术的缺点，提供了一种通过拖拽生成代码的方法
、
系统
、
设备及介质，该方法
、
系统
、
设备及介质的代码生成效率较高
。
[0009]为达到上述目的，本专利技术采用如下技术方案：
[0010]本专利技术一方面，本专利技术提供了一种通过拖拽生成代码的方法，包括：
[0011]拖拽页面上的组件；
[0012]根据用户拖拽的组件的
ID
，解析对应的
JSON
文件，得到解析出的代码；
[0013]配置该组件的属性，得到该组件的属性代码；
[0014]所述解析出的代码与该组件的属性代码进行合并，得到
Vue
组件代码
。
[0015]所述通过拖拽页面上的组件元素之前还包括：
[0016]在
Vue
应用中，注册所有可能的组件，并以
JSON
文件的形式进行存放
。
[0017]所述拖拽页面上的组件，以触发拖拽事件，所述拖拽事件携带有该组件的相关数据
。
[0018]所述组件的相关数据包括组件的
ID、
类型及位置
。
[0019]所述根据用户拖拽的组件的
ID
，解析对应的
JSON
文件之后还包括：在
Vue
应用中生成对应的组件实例，再将该组件实例渲染至页面上
。
[0020]所述组件的属性包括宽度
、
数据及方法
。
[0021]所述得到
Vue
组件代码之后还包括：
[0022]将生成的
Vue
组件代码渲染到页面上
。
[0023]本专利技术二方面，本专利技术提供了一种通过拖拽生成代码的系统，包括：
[0024]拖拽模块，用于拖拽页面上的组件；
[0025]解析模块，用于根据用户拖拽的组件的
ID
，解析对应的
JSON
文件，得到解析出的代码；
[0026]配置模块，用于配置该组件的属性，得到该组件的属性代码；
[0027]合并模块，用于所述解析出的代码与该组件的属性代码进行合并，得到
Vue
组件代码
。
[0028]本专利技术三方面，本专利技术提供了一种计算机设备，包括存储器
、
处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述通过拖拽生成代码的方法的步骤
。
[0029]本专利技术四方面，本专利技术提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述通过拖拽生成代码的方法的步骤
。
[0030]本专利技术具有以下有益效果：
[0031]本专利技术所述的通过拖拽生成代码的方法
、
系统
、
设备及介质在具体操作时，采用拖拽的形式生成代码，具体的，拖拽页面上的组件元素，以触发拖拽事件，根据该组件的
ID
，解析对应的
JSON
文件，得到解析出的代码，同时形成该组件的配置的属性代码，再将两者合并，以形成
Vue
组件代码，需要说明的是，本专利技术采用拖拽的形式生成代码，避免进行找组件
、
拷贝以及验证的操作，操作简单，代码生成效率较高
。
附图说明
[0032]构成本专利技术的一部分的说明书附图用来提供对本专利技术的进一步理解，本专利技术的示意性实施例及其说明用于解释本专利技术，并不构成对本专利技术的不当限定
。
在附图中：
[0033]图1为低代码工具整体架构图；
[0034]图2为本专利技术的流程图
。
具体实施方式
[0035]为了使本
的人员更好地理解本专利技术方案，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚
、
完整地描述，显然，所描述的实施例仅仅是本专利技术一部分的实施例，而不是全部的实施例
。
基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本专利技术保护的范围
。
[0036]需要说明的是，本专利技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序
。
应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本专利技术的实施例能够以除了在这里图示或描述的那些以外的顺序实施
。
此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程
、
方法
、
系统
、
产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种通过拖拽生成代码的方法，其特征在于，包括：拖拽页面上的组件；根据用户拖拽的组件的
ID
，解析对应的
JSON
文件，得到解析出的代码；配置该组件的属性，得到该组件的属性代码；所述解析出的代码与该组件的属性代码进行合并，得到
Vue
组件代码
。2.
根据库权利要求1所述的通过拖拽生成代码的方法，其特征在于，所述通过拖拽页面上的组件元素之前还包括：在
Vue
应用中，注册所有可能的组件，并以
JSON
文件的形式进行存放
。3.
根据库权利要求1所述的通过拖拽生成代码的方法，其特征在于，所述拖拽页面上的组件，以触发拖拽事件，所述拖拽事件携带有该组件的相关数据
。4.
根据库权利要求3所述的通过拖拽生成代码的方法，其特征在于，所述组件的相关数据包括组件的
ID、
类型及位置
。5.
根据库权利要求1所述的通过拖拽生成代码的方法，其特征在于，所述根据用户拖拽的组件的
ID
，解析对应的
JSON
文件之后还包括：在
Vue
应用中生成对应的组件实例，再将该组件实例渲染至页面上
。6....

【专利技术属性】
技术研发人员：胡路政，杜金刚，赵晋松，袁敏，
申请(专利权)人：西安热工研究院有限公司，
类型：发明
国别省市：