CN117389562A - 一种基于Vue的前端代码可视化配置与智能化生成方法及系统 - Google Patents
一种基于Vue的前端代码可视化配置与智能化生成方法及系统 Download PDFInfo
- Publication number
- CN117389562A CN117389562A CN202311406082.5A CN202311406082A CN117389562A CN 117389562 A CN117389562 A CN 117389562A CN 202311406082 A CN202311406082 A CN 202311406082A CN 117389562 A CN117389562 A CN 117389562A
- Authority
- CN
- China
- Prior art keywords
- data
- page
- file
- user
- configuration information
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 124
- 230000000007 visual effect Effects 0.000 title claims abstract description 13
- 238000003780 insertion Methods 0.000 claims description 24
- 230000037431 insertion Effects 0.000 claims description 24
- 230000008676 import Effects 0.000 claims description 12
- 238000012800 visualization Methods 0.000 claims 7
- 206010063385 Intellectualisation Diseases 0.000 claims 1
- 238000011161 development Methods 0.000 abstract description 11
- 230000008569 process Effects 0.000 description 13
- 239000008186 active pharmaceutical agent Substances 0.000 description 11
- 238000012545 processing Methods 0.000 description 5
- 238000003672 processing method Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000008092 positive effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computing Systems (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种基于Vue的前端代码可视化配置与智能化生成方法及系统，接收用户选择的新建页面的位置及新建页面的类型；如果新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；基于高抽象的数据编辑页面的模板文件，根据第一配置信息自动生成编辑页面代码数据；如果新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；基于高抽象的数据展示页面的模板文件，根据第二配置信息自动生成数据展示页面代码数据；在指定的路径下创建后缀为vue的文件，在文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。本发明能够提高前端代码的开发效率。
Description
技术领域
本申请涉及智能代码开发技术领域，特别是涉及一种基于Vue的前端代码可视化配置与智能化生成方法及系统。
背景技术
Vue是一套构建用户界面的渐进式框架，其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。
在常规Vue前端业务代码开发过程中存在以下几个问题：常用的html页面标签元素种类是固定的，因为每个页面的业务逻辑有所差别，经常会面临着书写重复且必要的html标签的代码，然后再定义不同的标签属性、绑定不同的业务数据，然后再通过vue-cli工具编译调试，如果这个过程中，研发人员因为某个数据绑定错误或属性设置错误，研发人员还针对vue-cli编译工具报错进行处理虽然编译工具会提示具体出错的位置，但是处理错误的过程也会浪费时间，因此在重复写html标签元素的过程中浪费了研发人员在处理业务逻辑上的创新能力；同时通过组件化、模块化的代码抽象后发现，页面在处理Request请求数据时，除了URL和参数不同外，在UI界面对数据进行可视化展示的处理过程也高度相似，因此研发人员在写这部分代码的时候，也会有大部分时间在写重复且必要的代码。
发明内容
有鉴于此，本发明提供了一种基于Vue的前端代码可视化配置与智能化生成系统，本发明经过对前端代码高度抽象，形成了一套属性可扩展的前端业务模版文件后，自主研发了一种基于Vue的前端代码智能化生成系统，以提高前端代码的开发效率。
为此，本发明提供了以下技术方案：
本发明公开了一种基于Vue的前端代码可视化配置与智能化生成方法，所述方法包括：
接收用户选择的新建页面的位置及新建页面的类型；
如果所述新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；
基于高抽象的数据编辑页面的模板文件，根据所述第一配置信息自动生成编辑页面代码数据；
如果所述新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；
基于高抽象的数据展示页面的模板文件，根据所述第二配置信息自动生成数据展示页面代码数据；
在指定的路径下创建后缀为vue的文件，在所述文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。
进一步地，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
进一步地，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
进一步地，根据所述第一配置信息自动生成编辑页面代码数据，包括：
先从高抽象的数据编辑页面的模板文件中读取并复制模版文件数据；
定位到表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，自动生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
定位到事件元素插入位置，循环遍历用户配置的事件元素，并从预先配置的后缀为json的文件中获取对应事件元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定点击事件名称；
定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表通过this.形式赋值给对应的变量；
定位到method{}中预定义的组件显示方法onShowWindow()，并在通过this.循环写调用所述调用方法；
完成编辑页面代码数据生成。
进一步地，根据所述第二配置信息自动生成数据展示页面代码数据，包括：
先从高抽象的数据展示页面的模板文件中读取并复制模版文件数据；
定位到搜索栏表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀名为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，系统会自定生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
定位到列表项元素插入位置，循环遍历用户配置的列表项，并从预先配置的后缀名为json的的文件中获取对应列表项元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定的数据；
定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表数据通过this.形式赋值给对应的变量；
定位到created{}位置，并在通过this.循环写调用生成的调用方法；
完成展示页面代码数据生成。
本发明还公开了一种基于Vue的前端代码可视化配置与智能化生成系统，所述系统包括：
类型选择模块，用于接收用户选择的新建页面的位置及新建页面的类型；
第一配置接收模块，如果所述新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；
第一代码生成模块，用于基于高抽象的数据编辑页面的模板文件，根据所述第一配置信息自动生成编辑页面代码数据；
第二配置接收模块，如果所述新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；
第二代码生成模块，用于基于高抽象的数据展示页面的模板文件，根据所述第二配置信息自动生成数据展示页面代码数据；
文件生成模块，用于在指定的路径下创建后缀为vue的文件，在所述文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。
进一步地，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
进一步地，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
进一步地，第一代码生成模块，包括：
第一模板单元，用于从高抽象的数据编辑页面的模板文件中读取并复制模版文件数据；
表单元素单元，用于定位到表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，自动生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
事件元素单元，用于定位到事件元素插入位置，循环遍历用户配置的事件元素，并从预先配置的后缀为json的文件中获取对应事件元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定点击事件名称；
第一文件单元，用于定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
第一私有属性单元，用于定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
第一私有方法单元，用于定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表通过this.形式赋值给对应的变量；
组件显示单元，用于定位到method{}中预定义的组件显示方法onShowWindow()，并在通过this.循环写调用所述调用方法。
进一步地，第二代码生成模块，包括：
第二模板单元，用于从高抽象的数据展示页面的模板文件中读取并复制模版文件数据；
搜索栏单元，用于定位到搜索栏表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀名为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，系统会自定生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
列表项单元，用于定位到列表项元素插入位置，循环遍历用户配置的列表项，并从预先配置的后缀名为json的的文件中获取对应列表项元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定的数据；
第二文件单元，用于定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
第二私有属性单元，用于定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
第二私有方法单元，用于定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表数据通过this.形式赋值给对应的变量；
方法调用单元，用于定位到created{}位置，并在通过this.循环写调用生成的调用方法。
本发明的优点和积极效果：
在Vue前端项目开发过程中，通过使用基于Vue的前端代码可视化配置与智能化生成系统，前端开发人员省去了手写html元素及属性、手写常规事件处理方法和其他模块方法导入等过程，开发人员只需要通过页面的简单配置，系统即可自动完成的常规页面的代码书写，且通过系统的标准化流程输出也大大提升了页面代码的准确性，以一个常规的数据展示页面为例，vue前端开发人员手写，至少需要60分钟，而通过于Vue的前端代码可视化配置与智能化生成系统只需要花费5分钟使用UI可视化配置界面即可完成前端代码的书写，工作效率提高了至少12倍，进一步提升了前端代码开发的整体效率。
与现有的基于模板的代码生成方案相比，1)代码生成依赖截止不同，现有技术一般是基于Vscode代码管理工具的webview作为代码生成的载体，并依赖vscode.postMessage,vscode.receiveMessage等api传递初始化参数到Nodejs，对第三方代码工具依赖度较高；而本发明是基于electron生成可运行的mac/window客户端作为代码生成载体，并通过electron的ipcRenderer与nodejs进行通讯，不依赖任何第三方代码管理工具；2)模板来源不同，现有技术中的代码模版来自于mysql数据库或excel文件，而本发明是基于本地代码源文件自动生成json格式的模板数据，不依赖代码源文件以外的数据库或word系列的文本文件；3)使用范围不同，现有技术中最终是以vscode插件形式呈现，这就限定了开发者必须使用vscode开发工具采集使用他们的发明成功，而本发明是生成一个可以自运行的mac/window客户端，对于开发者使用的开发工具没有任何限制，开发者可以保持自己的开发习惯。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图做以简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例中一种基于Vue的前端代码可视化配置与智能化生成方法的流程图；
图2为本发明实施例中用户配置第一配置信息的流程图；
图3为本发明实施例中编辑页面代码数据生成流程图；
图4为本发明实施例中用户配置第二配置信息的流程图；
图5为本发明实施例中展示页面代码数据生成流程图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
基于Vue的前端代码可视化配置与智能化生成系统适用于采用vue开发的前端项目，开发环境必须安装node.js和vue-li，node.js环境为前端工程读取本地项目代码目录及文件并将代码写入到文件中提供了必要条件，满足以上，即可使用系统。
如图1所示，本发明实施例中提供了一种基于Vue的前端代码可视化配置与智能化生成方法，包括：
S1、用户通过UI界面展示的项目目录列表选择需要新建页面的位置及新建页面的类型；
其中，UI即User Interface(用户界面)的简称。新建页面的类型为：数据编辑页面和数据展示页面；
S2、如果新建的页面类型是数据编辑页面，则配置数据编辑页面所需的api接口、表单元素及属性及事件等要素信息；
S3、前端根据配置信息自动生成编辑页面代码数据后，执行S6，将数据写入代码文件；
S4、如果新建的页面类型是数据展示页面，则配置数据展示页面所需的api接口、搜索栏表单元素及属性、列表元素及属性等要素信息；
S5、前端根据配置信息自动生成数据展示页面代码数据后，交由S6将数据写入代码文件；
S6、文件管理程序在指定的路径下创建.vue文件，并写入代码数据以完成代码的智能化生成。
如图2所示，S2由用户执行，具体包括以下步骤：
S2.1、用户选择编辑页面所要向后端提交数据的API接口，并向后端查询需要向所选择api接口提交的字段列表信息；
其中，API接口，即Application Program Interface，应用程序接口，是一组定义、程序及协议的集合，通过API接口实现计算机软件之间的相互通信。API的一个主要功能是提供通用功能集。程序员通过调用API函数对应用程序进行开发，可以减轻编程任务。
S2.2、用户任意选择一个表单元素添加到页面中，点击该元素的属性设置按钮，配置对应元素的属性信息以及选择绑定一个所需提交的字段，用户根据此方法依次为每一个需要提交的字段配置1个表单元素；
S2.3、如果表单元素为选择标签，需要配置选择标签的数据源API接口，即下拉列表的数据来源从哪里获取；
S2.4、用户通过添加事件按钮，添加操作事件，并设置其要的页面事件名称；
S2.5、完成编辑页面的元素配置，并将配置信息交由S3进行后续代码数据生成操作。
如图3所示，S3由前端程序执行，具体包括以下步骤：
S3.1、先从高抽象的编辑页面的模板文件中读取并复制模版文件数据；
S3.2、定位到表单元素插入位置，循环遍历用户在S2.2中配置的表单元素，并从预先配置的.json文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，系统会自定生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
S3.3、定位到事件元素插入位置，循环遍历用户在S2.4中配置的事件元素，并从预先配置的.json文件中获取对应事件元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定点击事件名称；
S3.4、定位到文件导入位置，分别将用户在S2.1和S2.3中选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
S3.5、定位到页面私有属性data{}，将S3.2中生成的变量名分别写入到data{}中；
S3.6、定位到页面私有方法methods{}位置，自动根据在S3.4中引入的方法名创建一个同名的调用方法，并将请求到的数据列表通过this.形式赋值给S3.5中对应的变量；
S3.7、定位到method{}中预定义的组件显示方法onShowWindow()，并在通过this.循环写调用在S3.6中调用方法；
S3.8、编辑页面代码数据生成完成，并将数据交由S6进行后续写入处理。
如图4所示，S4由用户执行，具体包括以下步骤：
S4.1、用户选择数据展示页面向后端获取展示数据的API接口，并向后端查询该api接口返回数据的字段列表信息；
S4.2、用户在搜索栏配置中，任意选择一个表单元素添加到页面中，点击该元素的属性设置按钮，配置对应元素的属性信息以及选择绑定一个需要搜索的字段，用户根据此方法可以设置多个搜索字段；
S4.3、如果搜索栏中的表单元素为选择标签，需要配置选择标签的数据源API接口，即下拉列表的数据来源从哪里获取；
S4.4、用户通过下拉框选择要在列表中展示的字段列表，系统会自动加载一个列表，点击对应列表项，配置每一个列表项的属性信息；
S4.5、完成展示页面的元素配置，并将配置信息交由S5进行后续代码数据生成操作。
如图5所示，S5由前端程序执行，具体包括以下步骤：
S5.1、先从高抽象的数据展示页面的模板文件中读取并复制模版文件数据；
S5.2、定位到搜索栏表单元素插入位置，循环遍历用户在S4.2中配置的表单元素，并从预先配置的.json文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，系统会自定生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
S5.3、定位到列表项元素插入位置，循环遍历用户在S4.4中配置的列表项，并从预先配置的.json文件中获取对应列表项元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定的数据；
S5.4、定位到文件导入位置，分别将用户在S4.1和4.2中选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
S5.5、定位到页面私有属性data{}，将S5.2中生成的变量名分别写入到data{}中；
S5.6、定位到页面私有方法methods{}位置，自动根据在S5.4中引入的方法名创建一个同名的调用方法，并将请求到的数据列表数据通过this.形式赋值给S5.5中对应的变量；
S5.7、定位到created{}位置，并在通过this.循环写调用在S5.6中生成的调用方法；
S5.8、展示页面代码数据生成完成，并将数据交由S6进行后续写入处理。
在另一实施例中，本发明还公开了一种基于Vue的前端代码可视化配置与智能化生成系统，该系统包括：
类型选择模块，用于接收用户选择的新建页面的位置及新建页面的类型；
第一配置接收模块，如果所述新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；其中，第一配置信息包括：api接口、表单元素、属性及事件信息。
第一代码生成模块，用于基于高抽象的数据编辑页面的模板文件，根据所述第一配置信息自动生成编辑页面代码数据；
第二配置接收模块，如果所述新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；其中，第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
第二代码生成模块，用于基于高抽象的数据展示页面的模板文件，根据所述第二配置信息自动生成数据展示页面代码数据；
文件生成模块，用于在指定的路径下创建后缀为vue的文件，在所述文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。
其中，第一代码生成模块，包括：
第一模板单元，用于从高抽象的数据编辑页面的模板文件中读取并复制模版文件数据；
表单元素单元，用于定位到表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，自动生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
事件元素单元，用于定位到事件元素插入位置，循环遍历用户配置的事件元素，并从预先配置的后缀为json的文件中获取对应事件元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定点击事件名称；
第一文件单元，用于定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
第一私有属性单元，用于定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
第一私有方法单元，用于定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表通过this.形式赋值给对应的变量；
组件显示单元，用于定位到method{}中预定义的组件显示方法onShowWindow()，并在通过this.循环写调用所述调用方法。
第二代码生成模块，包括：
第二模板单元，用于从高抽象的数据展示页面的模板文件中读取并复制模版文件数据；
搜索栏单元，用于定位到搜索栏表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀名为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，系统会自定生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
列表项单元，用于定位到列表项元素插入位置，循环遍历用户配置的列表项，并从预先配置的后缀名为json的的文件中获取对应列表项元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定的数据；
第二文件单元，用于定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
第二私有属性单元，用于定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
第二私有方法单元，用于定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表数据通过this.形式赋值给对应的变量；
方法调用单元，用于定位到created{}位置，并在通过this.循环写调用生成的调用方法。
在Vue前端项目开发过程中，通过使用上述实施例中基于Vue的前端代码可视化配置与智能化生成系统，前端开发人员省去了手写html元素及属性、手写常规事件处理方法和其他模块方法导入等过程，开发人员只需要通过页面的简单配置，系统即可自动完成的常规页面的代码书写，且通过系统的标准化流程输出也大大提升了页面代码的准确性，以一个常规的数据展示页面为例，vue前端开发人员手写，至少需要60分钟，而通过于Vue的前端代码可视化配置与智能化生成系统只需要花费5分钟使用UI可视化配置界面即可完成前端代码的书写，工作效率提高了至少12倍，进一步提升了前端代码开发的整体效率。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。
Claims (10)
1.一种基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，所述方法包括：
接收用户选择的新建页面的位置及新建页面的类型；
如果所述新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；
基于高抽象的数据编辑页面的模板文件，根据所述第一配置信息自动生成编辑页面代码数据；
如果所述新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；
基于高抽象的数据展示页面的模板文件，根据所述第二配置信息自动生成数据展示页面代码数据；
在指定的路径下创建后缀为vue的文件，在所述文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。
2.根据权利要求1所述的基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
3.根据权利要求1所述的基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
4.根据权利要求2所述的基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，根据所述第一配置信息自动生成编辑页面代码数据，包括：
先从高抽象的数据编辑页面的模板文件中读取并复制模版文件数据；
定位到表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，自动生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
定位到事件元素插入位置，循环遍历用户配置的事件元素，并从预先配置的后缀为json的文件中获取对应事件元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定点击事件名称；
定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表通过this.形式赋值给对应的变量；
定位到method{}中预定义的组件显示方法onShowWindow()，并在通过this.循环写调用所述调用方法；
完成编辑页面代码数据生成。
5.根据权利要求3所述的基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，根据所述第二配置信息自动生成数据展示页面代码数据，包括：
先从高抽象的数据展示页面的模板文件中读取并复制模版文件数据；
定位到搜索栏表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀名为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，系统会自定生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
定位到列表项元素插入位置，循环遍历用户配置的列表项，并从预先配置的后缀名为json的的文件中获取对应列表项元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定的数据；
定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表数据通过this.形式赋值给对应的变量；
定位到created{}位置，并在通过this.循环写调用生成的调用方法；
完成展示页面代码数据生成。
6.一种基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，所述系统包括：
类型选择模块，用于接收用户选择的新建页面的位置及新建页面的类型；
第一配置接收模块，如果所述新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；
第一代码生成模块，用于基于高抽象的数据编辑页面的模板文件，根据所述第一配置信息自动生成编辑页面代码数据；
第二配置接收模块，如果所述新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；
第二代码生成模块，用于基于高抽象的数据展示页面的模板文件，根据所述第二配置信息自动生成数据展示页面代码数据；
文件生成模块，用于在指定的路径下创建后缀为vue的文件，在所述文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。
7.根据权利要求6所述的基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
8.根据权利要求6所述的基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
9.根据权利要求7所述的基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，第一代码生成模块，包括：
第一模板单元，用于从高抽象的数据编辑页面的模板文件中读取并复制模版文件数据；
表单元素单元，用于定位到表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，自动生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
事件元素单元，用于定位到事件元素插入位置，循环遍历用户配置的事件元素，并从预先配置的后缀为json的文件中获取对应事件元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定点击事件名称；
第一文件单元，用于定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
第一私有属性单元，用于定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
第一私有方法单元，用于定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表通过this.形式赋值给对应的变量；
组件显示单元，用于定位到method{}中预定义的组件显示方法onShowWindow()，并在通过this.循环写调用所述调用方法。
10.根据权利要求8所述的基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，第二代码生成模块，包括：
第二模板单元，用于从高抽象的数据展示页面的模板文件中读取并复制模版文件数据；
搜索栏单元，用于定位到搜索栏表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀名为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，系统会自定生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
列表项单元，用于定位到列表项元素插入位置，循环遍历用户配置的列表项，并从预先配置的后缀名为json的的文件中获取对应列表项元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定的数据；
第二文件单元，用于定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
第二私有属性单元，用于定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
第二私有方法单元，用于定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表数据通过this.形式赋值给对应的变量；
方法调用单元，用于定位到created{}位置，并在通过this.循环写调用生成的调用方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311406082.5A CN117389562A (zh) | 2023-10-26 | 2023-10-26 | 一种基于Vue的前端代码可视化配置与智能化生成方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311406082.5A CN117389562A (zh) | 2023-10-26 | 2023-10-26 | 一种基于Vue的前端代码可视化配置与智能化生成方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117389562A true CN117389562A (zh) | 2024-01-12 |
Family
ID=89437097
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311406082.5A Pending CN117389562A (zh) | 2023-10-26 | 2023-10-26 | 一种基于Vue的前端代码可视化配置与智能化生成方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117389562A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117608559A (zh) * | 2024-01-24 | 2024-02-27 | 卡奥斯创智物联科技有限公司 | 页面显示代码生成方法、装置、电子设备、存储介质 |
| CN118409745A (zh) * | 2024-07-04 | 2024-07-30 | 烟台海颐软件股份有限公司 | 一种基于vue技术的双向可视化转换系统及方法 |
-
2023
- 2023-10-26 CN CN202311406082.5A patent/CN117389562A/zh active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117608559A (zh) * | 2024-01-24 | 2024-02-27 | 卡奥斯创智物联科技有限公司 | 页面显示代码生成方法、装置、电子设备、存储介质 |
| CN117608559B (zh) * | 2024-01-24 | 2024-04-19 | 卡奥斯创智物联科技有限公司 | 页面显示代码生成方法、装置、电子设备、存储介质 |
| CN118409745A (zh) * | 2024-07-04 | 2024-07-30 | 烟台海颐软件股份有限公司 | 一种基于vue技术的双向可视化转换系统及方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107844299B (zh) | 一种Web应用开发工具的实现方法 | |
| CN110806863A (zh) | 接口文档生成方法及装置、电子设备、存储介质 | |
| CN117389562A (zh) | 一种基于Vue的前端代码可视化配置与智能化生成方法及系统 | |
| CN108762743B (zh) | 一种数据表操作代码生成方法及装置 | |
| CN108027721B (zh) | 用于使用控件来配置通用程序的技术 | |
| US20050268280A1 (en) | Encapsulating changes to a software application | |
| Walls et al. | XDoclet in Action (In Action series) | |
| CN113076096A (zh) | 一种桌面应用程序开发方法、装置、设备及存储介质 | |
| CN111666072A (zh) | 一种软件代码及文档机器人方法 | |
| CN109522013A (zh) | 一种业务功能的代码生成方法及装置 | |
| CN113535164A (zh) | 一种前端界面的生成方法、装置、电子设备及存储介质 | |
| CN111061522B (zh) | 基于后端生成前端卡片组件的方法、装置、设备及存储介质 | |
| CN114036443A (zh) | 页面生成方法及装置 | |
| CN114860218A (zh) | 一种低代码开发方法和装置 | |
| US20050257190A1 (en) | Developing and executing applications with configurable patterns | |
| CN116467433A (zh) | 面向多源数据的知识图谱可视化方法、装置、设备及介质 | |
| CN114047914A (zh) | 界面配置方法、装置和电子设备及计算机可读存储介质 | |
| CN113535175A (zh) | 应用程序前端代码的生成方法、装置、电子设备及介质 | |
| CN113419711A (zh) | 页面引导方法、装置、电子设备及存储介质 | |
| CN117453713A (zh) | 多类型数据库的sql语句生成方法、设备和存储介质 | |
| CN117389538A (zh) | 页面组件内容开发方法、装置、设备以及存储介质 | |
| Mani et al. | Using user interface design to enhance service identification | |
| CN114721647B (zh) | 一种基于无代码应用开发的面向对象编程方法 | |
| CN114706580A (zh) | 前端网页开发方法、装置、存储介质和电子设备 | |
| CN114371848A (zh) | 页面联调方法、装置、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |