本发明专利技术公开了一种基于Vue的前端代码可视化配置与智能化生成方法及系统，接收用户选择的新建页面的位置及新建页面的类型；如果新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；基于高抽象的数据编辑页面的模板文件，根据第一配置信息自动生成编辑页面代码数据；如果新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；基于高抽象的数据展示页面的模板文件，根据第二配置信息自动生成数据展示页面代码数据；在指定的路径下创建后缀为vue的文件，在文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。本发明专利技术能够提高前端代码的开发效率。
【技术实现步骤摘要】
本申请涉及智能代码开发，特别是涉及一种基于vue的前端代码可视化配置与智能化生成方法及系统。
技术介绍
1、vue是一套构建用户界面的渐进式框架，其目标是通过尽可能简单的api实现响应的数据绑定和组合的视图组件，vue可以做从简单到复杂的前端单页应用，随处可见的web前端都可以用vue来开发。
2、在常规vue前端业务代码开发过程中存在以下几个问题：常用的html页面标签元素种类是固定的，因为每个页面的业务逻辑有所差别，经常会面临着书写重复且必要的html标签的代码，然后再定义不同的标签属性、绑定不同的业务数据，然后再通过vue-cli工具编译调试，如果这个过程中，研发人员因为某个数据绑定错误或属性设置错误，研发人员还针对vue-cli编译工具报错进行处理虽然编译工具会提示具体出错的位置，但是处理错误的过程也会浪费时间，因此在重复写html标签元素的过程中浪费了研发人员在处理业务逻辑上的创新能力；同时通过组件化、模块化的代码抽象后发现，页面在处理request请求数据时，除了url和参数不同外，在ui界面对数据进行可视化展示的处理过程也高度相似，因此研发人员在写这部分代码的时候，也会有大部分时间在写重复且必要的代码。
技术实现思路
1、有鉴于此，本专利技术提供了一种基于vue的前端代码可视化配置与智能化生成系统，本专利技术经过对前端代码高度抽象，形成了一套属性可扩展的前端业务模版文件后，自主研发了一种基于vue的前端代码智能化生成系统，以提高前端代码的开发效率。
2、为此，本专利技术提供了以下技术方案：
3、本专利技术公开了一种基于vue的前端代码可视化配置与智能化生成方法，所述方法包括：
4、接收用户选择的新建页面的位置及新建页面的类型；
5、如果所述新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；
6、基于高抽象的数据编辑页面的模板文件，根据所述第一配置信息自动生成编辑页面代码数据；
7、如果所述新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；
8、基于高抽象的数据展示页面的模板文件，根据所述第二配置信息自动生成数据展示页面代码数据；
9、在指定的路径下创建后缀为vue的文件，在所述文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。
10、进一步地，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
11、进一步地，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
12、进一步地，根据所述第一配置信息自动生成编辑页面代码数据，包括：
13、先从高抽象的数据编辑页面的模板文件中读取并复制模版文件数据；
14、定位到表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，自动生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
15、定位到事件元素插入位置，循环遍历用户配置的事件元素，并从预先配置的后缀为json的文件中获取对应事件元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定点击事件名称；
16、定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
17、定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
18、定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表通过this.形式赋值给对应的变量；
19、定位到method{}中预定义的组件显示方法onshowwindow()，并在通过this.循环写调用所述调用方法；
20、完成编辑页面代码数据生成。
21、进一步地，根据所述第二配置信息自动生成数据展示页面代码数据，包括：
22、先从高抽象的数据展示页面的模板文件中读取并复制模版文件数据；
23、定位到搜索栏表单元素插入位置，循环遍历用户配置的表单元素，并从预先配置的后缀名为json的文件中获取对应表单元素的格式化数据，并根据用户配置信息设置对应的元素属性、帮定数据，如果表单元素为选择框，系统会自定生成一个变量名，绑定在选择列表中，并同时将该变量名保存到一个属性对象中，留作后续使用；
24、定位到列表项元素插入位置，循环遍历用户配置的列表项，并从预先配置的后缀名为json的的文件中获取对应列表项元素的格式化数据，并根据用户配置信息设置对应的属性值、绑定的数据；
25、定位到文件导入位置，分别将用户选择引用的数据源api对应的请求数据方法名通过import语句导入到文件中；
26、定位到页面私有属性data{}，将生成的变量名分别写入到data{}中；
27、定位到页面私有方法methods{}位置，自动根据引入的方法名创建一个同名的调用方法，并将请求到的数据列表数据通过this.形式赋值给对应的变量；
28、定位到created{}位置，并在通过this.循环写调用生成的调用方法；
29、完成展示页面代码数据生成。
30、本专利技术还公开了一种基于vue的前端代码可视化配置与智能化生成系统，所述系统包括：
31、类型选择模块，用于接收用户选择的新建页面的位置及新建页面的类型；
32、第一配置接收模块，如果所述新建的页面类型是数据编辑页面，则接收用户配置的数据编辑页面所需的第一配置信息；
33、第一代码生成模块，用于基于高抽象的数据编辑页面的模板文件，根据所述第一配置信息自动生成编辑页面代码数据；
34、第二配置接收模块，如果所述新建的页面类型是数据展示页面，则接收用户配置的数据展示页面所需的第二配置信息；
35、第二代码生成模块，用于基于高抽象的数据展示页面的模板文件，根据所述第二配置信息自动生成数据展示页面代码数据；
36、文件生成模块，用于在指定的路径下创建后缀为vue的文件，在所述文件中写入编辑页面代码数据和/或数据展示页面代码数据，以完成代码的智能化生成。
37、进一步地，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
38、进一步地，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
39、进一步地，第一代码生成模块，包括：
40、第一模板单元，用于从高抽象的数据编辑页面的模板文件中读取并复制模版文件数据；
41、表单元素单元，用于定位到表单元素插入位置，循环遍历用户配置本文档来自技高网
...
【技术保护点】
1.一种基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，所述方法包括：
2.根据权利要求1所述的基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
3.根据权利要求1所述的基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
4.根据权利要求2所述的基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，根据所述第一配置信息自动生成编辑页面代码数据，包括：
5.根据权利要求3所述的基于Vue的前端代码可视化配置与智能化生成方法，其特征在于，根据所述第二配置信息自动生成数据展示页面代码数据，包括：
6.一种基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，所述系统包括：
7.根据权利要求6所述的基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
8.根据权利要求6所述的基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
9.根据权利要求7所述的基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，第一代码生成模块，包括：
10.根据权利要求8所述的基于Vue的前端代码可视化配置与智能化生成系统，其特征在于，第二代码生成模块，包括：
...
【技术特征摘要】
1.一种基于vue的前端代码可视化配置与智能化生成方法，其特征在于，所述方法包括：
2.根据权利要求1所述的基于vue的前端代码可视化配置与智能化生成方法，其特征在于，所述第一配置信息包括：api接口、表单元素、属性及事件信息。
3.根据权利要求1所述的基于vue的前端代码可视化配置与智能化生成方法，其特征在于，所述第二配置信息包括：api接口、搜索栏表单元素及属性、列表元素及属性信息。
4.根据权利要求2所述的基于vue的前端代码可视化配置与智能化生成方法，其特征在于，根据所述第一配置信息自动生成编辑页面代码数据，包括：
5.根据权利要求3所述的基于vue的前端代码可视化配置与智能化生成方法，其特征在于，根据所述第二配置信息自动生成数据展...
【专利技术属性】
技术研发人员：王家文，
申请(专利权)人：大连佳佰讯物联网产业有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。