CN114138254B - 一种代码自动生成方法、介质、设备和系统 - Google Patents

一种代码自动生成方法、介质、设备和系统 Download PDF

Info

Publication number
CN114138254B
CN114138254B CN202111446341.8A CN202111446341A CN114138254B CN 114138254 B CN114138254 B CN 114138254B CN 202111446341 A CN202111446341 A CN 202111446341A CN 114138254 B CN114138254 B CN 114138254B
Authority
CN
China
Prior art keywords
page
user
template
code
generating
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
Application number
CN202111446341.8A
Other languages
English (en)
Other versions
CN114138254A (zh
Inventor
孔庆丰
朱玲英
鲁阳琼
谭奕欣
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Yusys Technologies Group Co ltd
Original Assignee
Beijing Yusys Technologies Group Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Yusys Technologies Group Co ltd filed Critical Beijing Yusys Technologies Group Co ltd
Priority to CN202111446341.8A priority Critical patent/CN114138254B/zh
Publication of CN114138254A publication Critical patent/CN114138254A/zh
Application granted granted Critical
Publication of CN114138254B publication Critical patent/CN114138254B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/25—Integrating or interfacing systems involving database management systems
    • G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/28—Databases characterised by their database models, e.g. relational or object models
    • G06F16/284—Relational databases
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/44—Encoding
    • G06F8/447—Target code generation
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Stored Programmes (AREA)

Abstract

本发明实施例提供一种代码自动生成方法、介质、设备和系统，所述方法包括：接收代码生成请求；响应于所述代码生成请求，生成用户操作页面；基于所述用户操作页面获取用户配置信息；根据所述用户配置信息，生成代码。本发明实施例提供一种操作简单的模板开发及自动生成工具，可以解决前端开发者在开发过程中存在的重复性工作较多、耗费时间长、页面可复用性低、代码质量得不到保证、代码可维护性较弱的至少一个技术问题。

Description

一种代码自动生成方法、介质、设备和系统
技术领域
本发明涉及计算机技术软件领域，具体涉及一种代码自动生成方法、介质、设备和系统。
背景技术
随着计算机技术的飞速发展和人类需求的不断提高，以及不同客户的个性化需求，使得软件开发的功能越来越复杂；再加上市场竞争不断激烈，又使得软件的开发周期不断缩短，这给软件的开发者带来了更加严格要求。
传统软件开发过程中需要编写大量的源代码，且源代码可复用性低；团队多成员协同手工开发方式不仅费时费力，代码的质量不能保证；各成员开发风格不一致导致后期代码维护较为困难；开发者需要投入更多的精力到代码的对比与更新中，而不是软件的流程逻辑设计和构架设计上，这大大降低了软件开发者的开发效率和软件的开发质量。
在实现本发明过程中，发明人发现现有技术中至少存在如下问题：
目前，提高开发者开发效率的途径主要从如何较少简单重复的代码的手工编写方面进行优化，例如构建自己的组件库、工具库等；但此种方式需要开发者不断去熟悉和学习新的组件库和工具库，且程序开发过程中的维护困难、代码质量的问题并不能得到充分的解决。
发明内容
有鉴于此，本发明实施例的目的在于提供一种操作简单的模板开发及自动生成工具，以解决前端开发者在开发过程中存在的重复性工作较多、耗费时间长、页面可复用性低、代码质量得不到保证、代码可维护性较弱等中的至少一个技术问题。
为达上述目的，第一方面，提供一种代码自动生成方法，所述方法包括：
接收代码生成请求；
响应于所述代码生成请求，生成用户操作页面；
基于所述用户操作页面获取用户配置信息；
根据所述用户配置信息，生成代码。
在一些可能的实施方式中，上述方法具体包括如下步骤：
所述接收代码生成请求，具体包括：接收新建页面请求；
所述响应于所述代码生成请求，生成用户操作页面，具体包括：响应于所述新建页面请求，生成并呈现可视化的功能页面；
所述的基于所述用户操作页面获取用户配置信息，具体包括：获取用户在所述功能页面上输入的页面名称和页面描述；以及，获取用户基于所述功能页面选择的页面模板；
所述的根据所述用户配置信息，生成代码，具体包括：响应于用户发出的生成代码指令，根据所述页面名称、所述页面描述和所述页面模板生成代码。
在一些可能的实施方式中，所述的响应于所述新建页面请求，生成并呈现可视化的功能页面，具体包括：
从所述新建页面请求中获取初始化参数；其中，所述初始化参数包括：页面名称配置项参数，页面描述配置项参数和页面模板配置项参数；
根据所述初始化参数和webView网页视图技术中的web容器操作类生成并呈现可视化的功能页面。
在一些可能的实施方式中，所述的响应于用户发出的生成代码指令，根据所述页面名称、所述页面描述和所述页面模板生成代码，具体包括：
响应于用户发出的生成代码指令，利用代码生成器根据所述页面名称、所述页面描述和所述页面模板生成代码。
在一些可能的实施方式中，上述方法具体包括如下步骤：
所述的接收代码生成请求，具体包括：接收自动生成页面的请求；
所述的响应于所述代码生成请求，生成用户操作页面，具体包括：响应于所述自动生成页面的请求，生成并呈现可视化的配置页面；
所述的基于所述用户操作页面获取用户配置信息，具体包括：获取用户在所述配置页面中输入的页面名称和页面描述；获取用户通过所述配置页面上传的数据源文件；
所述的根据所述用户配置信息，生成代码，具体包括：
响应于用户发出的生成代码指令，利用表格解析方法，解析用户上传的所述数据源文件，生成配置参数；
响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，所述用户配置信息包括：用户配置的页面名称、用户配置的页面描述和选择的资源模板，根据所述用户配置信息生成编译代码；
利用代码生成器根据所述配置参数和所述编译代码，生成最终的源代码。
在一些可能的实施方式中，上述方法具体包括如下步骤：
所述的接收代码生成请求，具体包括：接收数据库配置生成页面的请求；
所述的响应于所述代码生成请求，生成用户操作页面，具体包括：响应于所述数据库配置生成页面的请求，生成并呈现可视化的配置页面；
所述的基于所述用户操作页面获取用户配置信息，具体包括：获取用户在所述配置页面中输入的页面名称和页面描述；获取用户通过所述配置页面选择的数据来源，所述数据来源为数据库；
所述的根据所述用户配置信息，生成代码，具体包括：
响应于用户发出的生成代码指令，对所述数据库的源数据进行解析，生成配置参数；
响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，生成编译代码；
利用代码生成器根据所述编译代码和所述配置参数生成能够直接运行的代码。
在一些可能的实施方式中，所述方法还包括如下步骤：
接收多模板组合拼接请求；
根据所述多模板组合拼接请求，生成并呈现可视化的多模板组合拼接界面；其中，所述多模板组合拼接界面包括可视化编辑区域和模板选择区域，所述模板选择区域中呈现多个待选模板；
响应于用户对所述多个待选模板中的至少两个模板的选中操作，将选中的至少两个模板添加到所述可视化编辑区域中，并在所述可视化编辑区域中展示被选中的至少两个模板；
响应于用户的生成页面的指令，向用户呈现弹框以接收用户输入的页面名称和页面描述；
根据所述被选中的至少两个模板，所述页面名称和所述页面描述，组合拼接成完整的页面；
生成所述完整的页面对应的代码。
在一些可能的实施方式中，所述模板选择区域中还具有搜索框，用于供用户根据关键词搜索与所述关键词相匹配的待选模板；所述模板选择区域呈现与所述关键词相匹配的待选模板；所述可视化编辑区域中还展示被选中的至少两个模板分别对应的名称；
所述的根据所述多模板组合拼接请求，生成并呈现可视化的多模板组合拼接界面，具体包括：
根据所述多模板组合拼接请求，基于webView视图技术打开新的页面，以创建多模板组合拼接界面；其中，所述多模板组合拼接界面包括以左右布局方式呈现的可视化编辑区域和模板选择区域。
第二方面，提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面所述的任意一种代码自动生成方法。
第三方面，提供一种计算机设备，其包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如第一方面所述的任意一种代码自动生成方法。
第四方面，提供一种代码自动生成系统，其包括：模板化代码生成子系统，所述模板化代码生成子系统包括：
静态模板代码生成装置，用于接收新建页面请求；响应于所述新建页面请求，生成并呈现可视化的功能页面；获取用户在所述功能页面上输入的页面名称和页面描述；以及，获取用户基于所述功能页面选择的页面模板；响应于用户发出的生成代码指令，利用代码生成器根据所述页面名称、所述页面描述和所述页面模板生成代码；
动态模板代码生成装置，用于接收自动生成页面的请求；响应于所述自动生成页面的请求，生成并呈现可视化的配置页面；获取用户在所述配置页面中输入的页面名称和页面描述，以及获取用户通过所述配置页面上传的数据源文件；响应于用户发出的生成代码指令，利用表格解析方法，解析用户上传的所述数据源文件，生成配置参数；响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，所述用户配置信息包括：用户配置的页面名称、用户配置的页面描述和选择的资源模板，根据所述用户配置信息生成编译代码；利用代码生成器根据所述配置参数和所述编译代码，生成最终的源代码；
数据库动态模板代码生成装置，用于接收数据库配置生成页面的请求；响应于所述数据库配置生成页面的请求，生成并呈现可视化的配置页面；获取用户在所述配置页面中输入的页面名称和页面描述；以及获取用户通过所述配置页面选择的数据来源，所述数据来源为数据库；响应于用户发出的生成代码指令，对所述数据库的源数据进行解析，生成配置参数；响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，生成编译代码；利用代码生成器根据所述编译代码和所述配置参数生成能够直接运行的源代码。
上述技术方案具有如下有益效果：本申请的开发工具从模板化自动创建、业务代码自动生成、可视化低代码自动生成方面帮助开发者进行开发。代码自动生成，在基于用户自主选择配置的基础上，有效生成可用代码，实现根据具体需求生成业务代码，减少开发者手工编写工作量，提升开发者的开发效率；并且模板生成代码能更好地统一编码风格，提升开发时的代码质量，改善代码维护困难的问题。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1A是本发明实施例的模板开发及代码自动生成工具的逻辑结构示意图；
图1B是本发明实施例的模板开发及代码自动生成工具的代码生成方法的流程图；
图2A是本发明实施例的静态模板代码生成方法的流程图；
图2B是本发明实施例的模板化动态生成代码中静态模板代码生成的具体实施流程图；
图3是本发明实施例的模板化动态生成代码中动态模板代码生成的具体实施流程图；
图4是本发明实施例的模板化动态生成代码中的SQL数据库动态模板生成的具体实施流程图；
图5是本发明实施例的可视化低代码自动生成的具体实施流程图；
图6A是本发明实施例的静态模板代码生成中新建页面呈现的界面示例图；
图6B是本发明实施例的静态模板代码生成中选择模板功能的界面示例图；
图7是本发明实施例的静态模板代码生成中新建页面对应的业务功能代码；
图8A是本发明实施例的动态模板自动生成中自动生成页面的菜单示例图；
图8B是本发明实施例的动态模板自动生成中配置界面的示例图；
图9是本发明实施例的动态模板自动生成中自动生成页面对应的业务功能代码；
图10是本发明实施例的SQL数据库动态模板生成中的数据库配置生成页面的菜单示例图；
图11是本发明实施例的SQL数据库动态模板生成中页面信息的配置界面示例图；
图12是本发明实施例的可视化低代码自动生成过程中的多模板组合拼接的界面图一；
图13是本发明实施例的可视化低代码自动生成过程中的多模板组合拼接的界面图二；
图14是本发明实施例的可视化低代码自动生成过程中的多模板组合拼接的界面图三；
图15是本发明实施例的可视化低代码自动生成过程中的各个模板在vue主文件中的拼接方式设计图；
图16是本发明实施例的计算机可读存储介质的功能框图；
图17是本发明实施例的计算机设备的功能框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本申请是针对于前端开发者开发效率提升的一款开发工具，该工具提供包括前端脚手架工程自动创建、业务模板化代码自动生成、以及可视化低代码生成代码功能。
本申请的开发工具从模板化自动创建、业务代码自动生成、可视化低代码自动生成方面帮助开发者进行开发。代码自动生成，在基于用户自主选择配置的基础上，有效生成可用代码，实现根据具体需求生成业务代码，减少开发者手工编写工作量，提升开发者的开发效率；并且模板生成代码能更好地统一编码风格，提升开发时的代码质量，改善代码维护困难的问题。
本申请以此帮助软件开发者节省代码的开发时间，将更多时间与精力投入到软件流程逻辑设计与整体设计上。同时，模板配置化方式生成代码，以及可视化的视图组件拖拽或点击方式生成代码，操作简单、上手容易，很大程度降低了软件开发者的开发门槛，使得项目中人员技术配置压力减小。
为了提高前端开发者在开发过程中存在的重复性工作较多、耗费时间、页面可复用性低、代码质量得不到保证、代码可维护性较弱等至少一个问题，本发明实施例提供了一种操作简单的模板开发及自动生成工具。
如图1A所示，本发明实施例的模板开发及代码自动生成工具主要包括：模板化代码生成和可视化低代码自动生成两部分。其中，模板化代码生成又包括：静态模板代码生成、动态模板代码自动生成、数据库(例如SQL)动态模板代码生成三种方式。
模板化开发功能主要包括：静态模板新建页面、自动生成页面动态模板以及数据库配置生成页面方式。这三种功能实现都用到node.js实现模板代码读取与新页面代码写入，vscode开源代码包的开源API实现vscode新容器页面与代码生成组件之间的参数传递，用户操作行为处理，配置参数传递处理等功能；CodeGanerator技术生成最终用户需要的源代码文件。
图1B是本发明实施例的模板开发及代码自动生成工具的代码生成方法的流程图。如图1B所示，该方法包括如下步骤：S11、接收代码生成请求；S12、响应于代码生成请求，生成用户操作页面；S13、基于用户操作页面获取用户配置信息；S14、根据用户配置信息，生成代码。
以下对图1A和图1B的技术方案对应的多个实施例进行详细说明：
实施例一
如图2A所示，该代码自动生成方法包括如下步骤：
S110、接收新建页面请求；
S120、响应于新建页面请求，生成并呈现可视化的功能页面；
S130、获取用户在功能页面上输入的页面名称和页面描述；
S140、获取用户基于功能页面选择的页面模板；具体地，本步骤可以从模板资源库中获取多个候选模板，在该功能页面上生成模板选择界面或面板，该模板选择界面被配置为具有模板菜单目录区域和模板展示区域，在模板展示区域内展示上述多个候选模板或者其缩略图；响应于用户对模板菜单目录区域中相应控件的触发操作，例如点击操作，在模板展示区域内显示由该触发操作确定的页面模板供用户进行预览；响应于用户的选中指令，获得用户选中的页面模板，并且确定该被选中的页面模板的配置参数。
S150、响应于用户发出的生成代码指令，根据页面名称、页面描述和页面模板生成代码。具体地，本步骤响应于用户发出的生成代码指令，利用代码生成器CodeGanerator根据页面名称、页面描述和页面模板生成代码。
以下进行更加详阅的说明：
如图2B所示，模板化动态生成代码中的静态模板创建过程具体实施过程可以包括如下步骤：
S21、如图6A所示，在右键菜单中，通过VScode配置项扩展，进行个性化配置菜单功能，实现“新建页面”选项，并且在进一步的实施例中还可实现“自动生成页面”、“数据库配置生成页面”、“多模板组合拼接”中的任意一个或多个菜单选项。当用户点击“新建页面”菜单选项时，响应于用户对新建页面菜单选项的点击操作，发送初始化参数，该初始化参数用于打开正确的用户操作页面即将初始化面板并渲染出来。
在一些实施例中，上述初始化参数例如可以包括：用户选择的功能面板对应的初始化参数；该功能面板对应的初始化参数包含：页面名称配置项，页面描述配置项、页面模板配置项等参数。在进一步的实施例中，初始化参数还可以包括用户点击的目录，该用户点击的目录是指用户期望存储生成的源代码的文件目录。上述选择的功能面板是指与用户选定的“新建页面”选项相对应的功能面板。
在一些实施例中，采用vscode.postMessag接口发送或传递初始化参数，vscode.postMessag是发送初始化参数的接口名称，其是vscode插件包提供的开源API，最有利于使用和降低开发工作量，若采用其他自己封装的API，会增加开发者很多工作量。
在一些实施例中，上述页面模板配置项，用于供用户从多个候选的模板中选择期望的目标页面模板。该多个候选的模板例如包括：表单类型的模板，其可以包括：普通表单，分组表单、表单+列表、Tab页签表单等功能；以及，查询类型的模板，其包括：普通查询，查询+表单，树+查询等模板类型。在进一步的实施例中，页面模板配置项为控件形式，响应对该控件的触发操作，生成并呈现用于选择页面模板的选择界面，在该选择界面中的左侧呈现多个不同类型的模板的名称，在该选择界面的右侧呈现被预览的模板的图形化视图，响应于用户对模板的图形化视图的选中操作，从而能确定用户选中的页面模板。上述图形化视图可以是缩略图。
S22、通过webView网页视图技术，从资源模板库中调起多个候选的模板类型的资源模板。vscode.postMessage，vscode.receiveMessage等API将初始化参数传递至NodeJS处理模块，NodeJS处理模块根据上述初始化参数进行用户操作区域渲染，并动态创建对应功能页面。在一些实施例中，每个模板类型对应一个资源模板。步骤S22具体可以包括如下步骤：
S221、在创建功能页面过程中，渲染用户操作区域时，调用webView网页视图技术中BaseWebviewPanel即web容器操作类创建用户操作区域。BaseWebviewPanel是自主封装的公共方法类，其作用是提供创建开发工具中用户操作界面，设置用户操作界面的内容，传递参数消息等。BaseWebviewPanel公共类是在web容器打开前调用的。
S222、通过内置初始化面板API、vscode.postMessage，vscode.receiveMessage中任意的一个或多个等API来实现参数传递，以及用户操作反馈等。该初始化面板为步骤S21中的用户操作页面。
S223、在获取多个候选的模板类型的资源模板后，将初始化参数传递至NodeJS处理模块中。
S224、NodeJS处理模块通过对初始化参数及资源模板(用户选择的模板类型对应的一个资源模板)进行解析处理，将最终呈现内容渲染至用户操作区域。上述初始化参数例如为：每个功能面板在渲染的时候需要的初始化参数。
S23、基于功能页面获取用户自定义参数。其包括：接收用户在功能页面(即功能面板)上输入的页面名称和页面描述；并且接收用户基于功能页面(即功能面板)选择的页面模板。该用户自定义参数为功能面板上用户需要填写的或者配置的参数。具体地，用户自定义参数例如包括：用户输入的页面名称，用户输入的页面描述，用户选择的页面模板类型等。进一步地，用户自定义参数还可以包括：用户打开的功能面板类型。
S24、用户编辑/配置完成后，点击确定按钮后，响应于用户发出的生成代码的操作指令，触发开始进行生成源代码的流程。其包括如下步骤：
通过用户配置信息(用户自定义参数)，调读取资源模板内容后，CodeGenerator负责生成源代码，CodeGenerator是一种代码生成器，它可以生成一个可以直接运行的代码。
具体地，CodeGenerator代码生成器中，主要用到CodeTemplate(读取资源模板内容公共类)，该公共类主要用于读取对应资源模板内容，读取完成之后由codeTemplateTree(代码模板树解析公共类)对模板内容进行解析。页面上用户操作内容通过sendViewParam2Back(用户操作参数传递类)传递到代码生成器并解析，资源模板内容以及用户参数解析完成之后，调用TemplateCombineGenerator(模板代码生成公共类)，结合Handlebars语义引擎转换成最终用户可二次开发的源代码。同时listTemplateFoldersSync(用户目录查找解析公共类)，可将用户选择的目录解析后传递给文件管理模块用于定位用户选择的源代码文件目录。
在进一步的实施例中，该方法还可以包括步骤S25：
S25、在代码生成器生成源代码时，通过文件管理模块Uri.file API在用户上述右键选择的目录下新建一个空白的vue文件，并将源代码同步地写入此文件中；URI是指HTTP统一资源标识符(Uniform Resource Identifier)。在另外可选的实施例中，并非采用同步写入的方式，而是先由代码生成器生成源代码，在完整的源代码生成之后，再将完整的源代码写入到用户指定的文件目录下建立的文件中。
以下通过一个具体的例子来对上述技术方案进行更加详细的说明：
上述创新功能通过插件集成方式集成至yufp-adt.vsix插件包，通过vscode插件安装功能，选择打包好的yufp-adt.vsix插件包进行安装，安装完成后，vscode插件菜单列表中增加yufp-adt.vsix插件，即可使用。
静态模板代码生成过程如下：
1、如图6A所示，选中工程项目业务代码目录文件夹，在工程项目views目录下右键后点击选择“新建页面”；
2、在右侧显示内容中，在页面名称配置项对应的输入框中输入或填写页面名称：searchTable，在页面描述配置项对应的输入框中输入页面描述：查询表格；
3、页面名称及页面描述填写完成后，在下方页面“页面模板”选项中，响应于用户对“页面模板”配置项或控件的触发操作，在相同页面或新的页面中展示如图6B所示的界面，通过对模板的基础预览，选择对应业务功能所需模板；预览的模板图片在开发工具中是缩略图。页面模板的类型包括：默认的空白模板、表单类的页面模板、查询类的页面模板、以及上述三种以外的其他类页面模板。图6B所示的界面的左侧为菜单区域，右侧是预览模板的缩略图展示区域，响应于用户对最左侧的小三角箭头的点击操作，可以进一步展开各类页面模板的下一级菜单目录，响应于用户对下一级菜单目录的点击操作，进一步展示下一级的页面模板的缩略图。
4、选择模板完成后，响应于用户点击“新建”按钮，在项目中选中目录下，自动生成空白的vue文件，并在该文件中生成对应的业务功能代码和/或业务功能逻辑。新建页面结果对应的相应代码如图7所示。
实施例二
如图3所示，动态模板创建实现过程的流程可以包括如下步骤：
在动态模板创建中，在右键菜单中，通过VScode配置项扩展，进行个性化配置菜单功能，实现“自动生成页面”选项，并且在进一步的实施例中还可实现“新建页面”、“数据库配置生成页面”、“多模板组合拼接”中的任意一个或多个菜单选项。当用户点击“自动生成页面”菜单选项时，vscode.postMessage发送初始化参数，通过该初始化参数调起或打开正确的用户操作页面并渲染出来。BaseWebviewPanel公共类是在web容器打开前调用的。
S31、在右键菜单中选择“自动生成页面”选项后，通过webView网页视图技术生成配置页面(用户操作页面)。
S32、通过webView网页视图技术，从资源模板库中调起对应的模板类型的资源模板。vscode.postMessage，vscode.receiveMessage等API将初始化参数和用户自定义参数传递至node.js核心，用于进行用户操作区域渲染，并动态创建用户操作面板；
S33、在动态模板创建中，接收用户在配置页面(用户操作页面)中输入的页面名称和页面描述；以及接收用户通过配置页面上传的数据源文件。
具体地，开发者(用户)先对excel配置文件模板进行下载，再对excel配置文件模板按业务功能需求进行编辑，编辑完成后通过内置消息传递postMessage API，将excel数据源文件上传即可。用户下载的是excel配置文件模板，用户需要按照excel配置文件模板的示例要求规范填写，表格才能被解析。
进一步地，在可选的实施例中，还可以包括：接收用户在配置页面中输入的自定义配置信息。具体地，开发者能够在可视化的配置界面中对模板类型、生成规则、表格属性、页面功能、表格首行、表格列宽中的任意一个或多个进行自定义配置，点击生成按键可生成代码。
用户在操作页面操作完毕之后，点击确定，响应于用户的该指令开始执行解析excel数据源文件，生成源代码的流程。
S34、根据用户自定义配置，调起ExcelParamsHelper表格解析技术，解析用户上传的excel数据源文件的配置，生成配置参数(其包括用户点击的目录，选择的资源模板类型，以及该功能面板上包含的页面名称，页面描述，用户上传的excel模板路径等参数)。可选地，在解析xlxs过程中，使用ExcelParamsHelper提供的ExcelReader.readFile API读取excel数据源文件中的数据后，转换成JSON格式的数据对象。
S35、Handlebars语义化代码生成引擎用于解析用户配置信息(例如用户配置的页面名称、页面描述和选择的资源模板)，构建编译代码。具体地，根据用户选择的资源模板类型，在用户操作面板上填充与用户选择的页面模板中的对应的数据，最终生成静态的编译代码。此处生成的编译代码是不可二次开发的，是编译语言。
S36、代码生成器根据用户选择的条件即用户在操作过程中输入的参数和勾选的参数，以及上述编译代码，生成最终的源代码，其处理过程同步骤S24。
上述步骤S34与S35可同时执行，配合Handlebars语义化代码生成引擎，代码生成器根据用户自定义配置生成最终源代码。
在进一步的实施例中，还包括如下将生成的源代码写入到指定目录的步骤：
调用NodeJS的fs文件读写模块API读取模板内容，通过调用文件管理模块Uri.file API在指定目录创建对应文件，将代码生成器生成的业务功能源代码写入在指定目录创建的文件中。
以下通过一个具体的例子来对上述技术方案进行更加详细的说明：
上述创新功能通过插件集成方式集成至yufp-adt.vsix插件包，通过vscode插件安装功能，选择打包好的yufp-adt.vsix插件包进行安装，安装完成后，vscode插件菜单列表中增加yufp-adt.vsix插件，即可使用。
动态模板自动生成过程如下：
1、如图8A所示，选中工程项目业务代码目录文件夹，在工程项目views目录下右键后点击“自动生成页面”；
2、如图8B所示，在右侧显示内容中，对页面基础信息中的页面名称和页面描述进行填写；
3、选择需要生成的页面数据文件excel模板文件，数据文件可点击链接直接下载，下载后按照示例配置完后上传。具体地，在“数据文件”下方，点击“下载：代码生成数据文件示例模板”，下载模板文件，并在模板文件中根据字段配置说明，填写业务功能所需字段内容；填写完成后，将模板文件上传至数据文件配置项。
4、选择“生成方式”，默认为“自动”，可进行自定义配置选择业务所需模板；
5、当用户选择生成方式是“自定义”时，激活下方的自定义配置面板，供用户对模板内容中的模板类型、生成规则、表格属性、页面功能、表格首列、日期列宽度、数字列宽度、文本列宽度、文本域宽度中的至少一个进行基础配置；其中，模板类型可通过下拉框中方式供用户选择；在页面模板配置项中，通过用户点击“预览”按钮生成预览页面，供用户在预览页面上选择期望的页面模板；生成规则配置项例如为供用户配置是否生成到对应目录下；表格属性配置项(其是表格渲染的属性，影响表格最终的展示效果)为多个复选框，例如包括：默认生成的代码中表格是否默认加载、表格是否分页显示、表格是否排序显示中的一个或多个；页面功能配置项为多个复选框，例如包括：查询(表格)、新增、修改、详情、删除、MOCK模拟、导出EXCEL中的一个或多个；表格首列配置项为多个单选控件，例如为：行号、单选、复选中的任意一个；日期列宽度、数字列宽度、文本列宽度、文本域宽度具有相应的配置框。
6、点击“生成”按键，页面进行自动创建；项目中选中目录下，自动生成文件，并在该文件生成对应的业务功能代码及业务功能逻辑。创建完成的页面对应的源代码如图9所示。
实施例三
如图4所示，SQL数据库动态模板创建过程可以包括如下步骤：
S41、参阅图10，在SQL数据库动态模板创建过程中，在右键菜单中，通过VScode配置项扩展，进行个性化配置菜单功能，实现“数据库配置生成页面”选项，当用户点击“数据库配置生成页面”菜单选项时，通过vscode.postMessage发送初始化参数，该初始化参数用于调起或打开正确的用户操作页面并渲染出来。
S42、在右键菜单中选择“数据库配置生成页面”选项后，通过webView网页视图技术生成可视化的配置页面(用户操作页面)。BaseWebviewPane公共类是在web容器打开前调用的。
S43、如图11所示，接收用户在配置页面中输入的页面名称和页面描述，接收用户通过配置页面选择的数据来源，该数据来源为数据库。进一步地，还可以接收用户输入的服务器连接和数据来源表配置信息。
用户在操作面板上配置完成之后，点击下一步按钮，进入后续解析SQL数据库源数据，生成源代码的流程。
S44、通过接入Node.JS进行SQL数据库连接服务，用户选择对应数据库表后，将表字段内容通过数据参数解析，生成相应参数到用户操作页面中，数据库连接服务链接后，基于用户操作页面对表字段进行字段key、字段类型、是否是查询项等进行查询并获取配置信息。
S45、响应于用户点击下一步按钮的操作，根据开发者自定义配置，调起或触发Handlebars语义化代码生成引擎，编译生成开发者自定义代码。步骤S44与步骤45可以同时执行，S45具体包括如下步骤：
Handlebars语义化代码生成引擎用于解析用户配置信息，构建编译代码。具体地，根据用户选择的资源模板类型，在操作面板上填充与用户选择的页面模板中的对应的数据，最终生成静态的编译代码。此处生成的编译代码是不可二次开发的，是编译语言。
S46、代码生成器根据用户在操作过程中输入的参数和勾选的参数(如图11中的参数，包含页面名称，页面描述，勾选的数据来源，或者，进一步包括的配置的数据库服务器连接，数据库来源表)以及上述编译代码，生成能够直接运行的代码。
在进一步的实施例中，还包括如下步骤：
源代码生成好之后，进一步调用文件管理模块Uri.file API文件写入接口在指定目录创建对应文件，在代码生成器生成源代码后，文件管理模块在用户上述右键选择的目录下新建一个空白的vue文件，并将源代码写入此文件中。
以下通过一个具体的例子来对上述技术方案进行更加详细的说明：
上述创新功能通过插件集成方式集成至yufp-adt.vsix插件包，通过vscode插件安装功能，选择打包好的yufp-adt.vsix插件包进行安装，安装完成后，vscode插件菜单列表中增加yufp-adt.vsix插件，即可使用。
SQL数据库动态模板生成过程如下：
1、如图10所示，启动数据库连接工具，选中工程项目业务代码目录文件夹，在工程项目views目录下右键后点击选择“数据库配置生成页面”；
2、如图11所示，在右侧显示内容中，对页面基础信息包括的页面名称和页面描述进行填写；数据来源选择数据库；
3、在“服务器连接”项，填写数据库连接工具地址及端口号；
4、在“数据库来源表”项，选择业务功能数据库对应数据库表，点击“下一步”按钮；
5、项目中选中目录下，自动生成填写页面名称文件，并在文件生成对应的业务功能代码及业务功能逻辑。
实施例四
如图5所示，可视化低代码自动生是用户根据需求通过拖拽工具中内置的视图组件，组合拼接成完整的页面，生成页面代码的源代码文件的功能。具体实施过程可以包括如下步骤：
S50、接收多模板组合拼接请求，调用vscode Webviewer，其是web容器操作类，用于使得用户打开用户操作界面。
S51、根据多模板组合拼接请求，生成并呈现可视化的多模板组合拼接界面选择。判断用户是否已经选择组合模板。
具体地，用户点击“多模板组合拼接”后，调用webView视图技术中的BaseWebviewPanel功能打开一个新的webView页面，创建左右布局区域或上下布局区域等。在一些实施例中，左边区域为可视化编辑区域，可对创建模板内容实时模板组合编辑；右边区域为模板选择区域，开发者可在此区域进行模板选择，用户可自由拖拽模板到左边编辑区域。
S52、当确定用户已选择组合模板时，响应于用户的生成页面的指令，向用户呈现弹框以接收用户输入的页面名称和页面描述。判断页面名称是否合法，如果页面名称合法再执行步骤S54，如果页面名称不合法则执行步骤S53。
S53、向用户提示账号不存在，并且流程返回步骤S51。
S54、判断页面描述是否为空。当页面描述为空时，执行步骤S55，否则，执行步骤S56。
S55、向用户提示页面描述不能为空。然后流程返回到步骤S51。
S56、当页面描述不为空时，获取并解析用户所选模板。
具体地，用户编辑确认后，通过消息管理(Message)模块进行错误日志管理，通过工作空间(workspace)模块获取工作台文件夹路径：workspace.getWorkspaceFolder，通过commands模块API执行文件创建。
S57、以字符串形式拼接模板，即将最终生成的模板先以字符串的形式存储。
S581、判断用户新建的文件是否已存在，如果存在则执行步骤S582，否则，执行步骤S59。
S582、如果该用户新建的文件已存在时，则进一步判断是否覆盖，如果为否，则跳转到步骤S51，如果为是，则进入步骤S59。
S59、生成模板文件夹。
具体地，调用NodeJS的fs模块API读取资源库中模板内容，通过调用文件模块Uri.file API在指定目录创建对应文件，生成业务功能源代码，并将源代码写入文件中。
以下通过一个具体的例子来对上述技术方案进行更加详细的说明：
上述创新功能通过插件集成方式集成至yufp-adt.vsix插件包，通过vscode插件安装功能，选择打包好的yufp-adt.vsix插件包进行安装，安装完成后，vscode插件菜单列表中增加yufp-adt.vsix插件，即可使用。
可视化低代码自动生成过程(多模板拼接组合)如下：
1、选中工程项目业务代码目录文件夹，在项目views目录下右键后点击选择“多模板组合拼接”，如图12所示，其为多模板组合拼接界面，图中左侧区域为已选模板展示区域，图中右侧区域为待选择模板展示区域。开发者可以通过点击选择右区域处的模板从而添加到左侧区域中。进一步地，在左侧区域中可显示提示文字，例如：请从右侧选择模板。在图12中右侧区域顶部设置搜索框，开发者可以通过输入关键字快速便捷地查询或搜索需要的模板。在搜索框中可以进一步显示用于提示开发者进行搜索的文字。
2、如图13所示，左侧区域为已选模板展示区域，其中展示模板右上角具有删除图标，点击该删除图标可以删除已选模板，以及模板下方将展示模板名字。图13中右侧区域为待选模板展示区域，通过右侧区域中上方的搜索框，开发者可以通过输入关键字查询或搜索需要的模板。
3、选择模板后点击“生成页面”按钮，在弹出的模态框中填写信息，生成模板页面。
如图14所示，完成页面名称和页面描述填写后，点击确定生成页面。值得注意的是，页面名称必须符合文件名命名规范且字符长度不能超过20，页面描述不能为空。已选模板中将会展示开发者已选择的模板。
4、各个模板在vue主文件中的拼接方式设计如图15所示，在图15中，标号61对应的代码表示模板按顺序排列，标号62对应的代码表示模板引用，标号63对应的代码表示模板加载。
上述技术方案的有益技术效果在于：
本发明实施例提供一款开发工具，致力于提高前端用户开发效率，节省开发时间，推进项目周期，节省项目成本。同时配置化生成代码，可视化拖拽生成代码等自动生成代码的方式极大降低了开发人员的上手难度。
实施例五
参阅1A，本实施例提供一种代码自动生成系统，对应于模板开发及代码自动生成工具，其包括：
模板化代码生成子系统，该模板化代码生成子系统包括：
静态模板代码生成装置，用于接收新建页面请求；响应于所述新建页面请求，生成并呈现可视化的功能页面；获取用户在所述功能页面上输入的页面名称和页面描述；以及，获取用户基于所述功能页面选择的页面模板；响应于用户发出的生成代码指令，利用代码生成器根据所述页面名称、所述页面描述和所述页面模板生成代码；
动态模板代码生成装置，用于接收自动生成页面的请求；响应于所述自动生成页面的请求，生成并呈现可视化的配置页面；获取用户在所述配置页面中输入的页面名称和页面描述，以及获取用户通过所述配置页面上传的数据源文件；响应于用户发出的生成代码指令，利用表格解析方法，解析用户上传的所述数据源文件，生成配置参数；响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，所述用户配置信息包括：用户配置的页面名称、用户配置的页面描述和选择的资源模板，根据所述用户配置信息生成编译代码；利用代码生成器根据所述配置参数和所述编译代码，生成最终的源代码；
数据库动态模板代码生成装置，用于接收数据库配置生成页面的请求；响应于所述数据库配置生成页面的请求，生成并呈现可视化的配置页面；获取用户在所述配置页面中输入的页面名称和页面描述；以及获取用户通过所述配置页面选择的数据来源，所述数据来源为数据库；响应于用户发出的生成代码指令，对所述数据库的源数据进行解析，生成配置参数；响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，生成编译代码；利用代码生成器根据所述编译代码和所述配置参数生成能够直接运行的源代码。
在进一步的实施例中，该系统还可以包括：可视化低代码自动生成子系统；该可视化低代码自动生成子系统包括：多模板组合拼接代码生成装置，用于接收多模板组合拼接请求；根据多模板组合拼接请求，生成并呈现可视化的多模板组合拼接界面；其中，多模板组合拼接界面包括可视化编辑区域和模板选择区域，模板选择区域中呈现多个待选模板；响应于用户对多个待选模板中的至少两个模板的选中操作，将选中的至少两个模板添加到可视化编辑区域中，并在可视化编辑区域中展示被选中的至少两个模板；响应于用户的生成页面的指令，向用户呈现弹框以接收用户输入的页面名称和页面描述；根据被选中的至少两个模板，页面名称和页面描述，组合拼接成完整的页面；生成完整的页面对应的代码。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
实施例六
如图16所示，本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质内存储有计算机程序，计算机程序被处理器执行时实现上述方法的各步骤。
所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。当然，还有其他方式的可读存储介质，例如量子存储器、石墨烯存储器等等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
实施例七
本发明实施例还提供了一种电子设备，如图17所示，包括一个或多个处理器301、通信接口302、存储器303和通信总线304，其中，处理器301，通信接口302，存储器303通过通信总线304完成相互间的通信。
存储器303，用于存放计算机程序；
处理器301，用于执行存储器303上所存放的程序时，实现上述方法的各步骤。
处理器301可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
存储器303可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器303可包括硬盘驱动器(Hard Disk Drive，HDD)、软盘驱动器、闪存、光盘、磁光盘、磁带或通用串行总线(Universal Serial Bus，USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器303可包括可移除或不可移除(或固定)的介质。在特定实施例中，存储器303是非易失性固态存储器。在特定实施例中，存储器303包括只读存储器(ROM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(PROM)、可擦除PROM(EPROM)、电可擦除PROM(EEPROM)、电可改写ROM(EAROM)或闪存或者两个或更多个以上这些的组合。
通信总线304包括硬件、软件或两者，用于将上述部件彼此耦接在一起。举例来说，总线可包括加速图形端口(AGP)或其他图形总线、增强工业标准架构(EISA)总线、前端总线(FSB)、超传输(HT)互连、工业标准架构(ISA)总线、无限带宽互连、低引脚数(LPC)总线、存储器总线、微信道架构(MCA)总线、外围组件互连(PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(SATA)总线、视频电子标准协会局部(VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线可包括一个或多个总线。尽管本发明实施例描述和示出了特定的总线，但本发明考虑任何合适的总线或互连。
上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
虽然本申请提供了如实施例或流程图的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或客户端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (11)

1.一种代码自动生成方法，其特征在于，所述方法包括：
接收新建页面请求；
从所述新建页面请求中获取初始化参数，所述初始化参数包括：页面名称配置项参数，页面描述配置项参数和页面模板配置项参数；
根据所述初始化参数和webView网页视图技术中的web容器操作类生成并呈现可视化的功能页面，所述web容器操作类是BaseWebviewPanel公共类；
获取用户在所述功能页面上输入的页面名称和页面描述；以及，获取用户基于所述功能页面选择的页面模板；
响应于用户发出的生成代码指令，利用代码生成器根据所述页面名称、所述页面描述和所述页面模板生成源代码。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
接收自动生成页面的请求；
响应于所述自动生成页面的请求，生成并呈现可视化的配置页面；
获取用户在所述配置页面中输入的页面名称和页面描述；获取用户通过所述配置页面上传的数据源文件；
响应于用户发出的生成代码指令，利用表格解析方法，解析用户上传的所述数据源文件，生成配置参数；
响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，所述用户配置信息包括：用户配置的页面名称、用户配置的页面描述和选择的资源模板，根据所述用户配置信息生成编译代码；
利用代码生成器根据所述配置参数和所述编译代码，生成最终的源代码。
3.根据权利要求1所述的方法，其特征在于，所述方法还包括：
接收数据库配置生成页面的请求；
响应于所述数据库配置生成页面的请求，生成并呈现可视化的配置页面；
获取用户在所述配置页面中输入的页面名称和页面描述；获取用户通过所述配置页面选择的数据来源，所述数据来源为数据库；
响应于用户发出的生成代码指令，对所述数据库的源数据进行解析，生成配置参数；
响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，生成编译代码；
利用代码生成器根据所述编译代码和所述配置参数生成能够直接运行的代码。
4.根据权利要求1-3中任一项所述的方法，其特征在于，所述方法还包括：
接收多模板组合拼接请求；
根据所述多模板组合拼接请求，生成并呈现可视化的多模板组合拼接界面；其中，所述多模板组合拼接界面包括可视化编辑区域和模板选择区域，所述模板选择区域中呈现多个待选模板；
响应于用户对所述多个待选模板中的至少两个模板的选中操作，将选中的至少两个模板添加到所述可视化编辑区域中，并在所述可视化编辑区域中展示被选中的至少两个模板；
响应于用户的生成页面的指令，向用户呈现弹框以接收用户输入的页面名称和页面描述；
根据所述被选中的至少两个模板，所述页面名称和所述页面描述，组合拼接成完整的页面；
生成所述完整的页面对应的代码。
5.根据权利要求4所述的方法，其特征在于，所述模板选择区域中还具有搜索框，用于供用户根据关键词搜索与所述关键词相匹配的待选模板；所述模板选择区域呈现与所述关键词相匹配的待选模板；所述可视化编辑区域中还展示被选中的至少两个模板分别对应的名称；
所述的根据所述多模板组合拼接请求，生成并呈现可视化的多模板组合拼接界面，具体包括：
根据所述多模板组合拼接请求，基于webView视图技术打开新的页面，以创建多模板组合拼接界面；其中，所述多模板组合拼接界面包括以左右布局方式呈现的可视化编辑区域和模板选择区域。
6.根据权利要求1所述的方法，其特征在于，所述初始化参数还包括用户点击的目录，所述用户点击的目录是指用户期望存储生成的源代码的文件目录；所述方法还包括：
在完整的源代码生成之后，再将完整的源代码写入到用户指定的文件目录下建立的空白的文件中。
7.根据权利要求1所述的方法，其特征在于，所述的获取用户基于所述功能页面选择的页面模板，具体包括：
在所述功能页面上生成模板选择界面，所述模板选择界面被配置为具有模板菜单目录区域和模板展示区域，在所述模板展示区域内展示多个候选模板或者其缩略图；
响应于用户对所述模板菜单目录区域中相应控件的触发操作，在所述模板展示区域内显示由所述触发操作确定的页面模板供用户进行预览；
响应于用户的选中指令，获得用户选中的页面模板。
8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任意一项所述的代码自动生成方法。
9.一种计算机设备，其特征在于，其包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1-7中任一所述的代码自动生成方法。
10.一种代码自动生成系统，其特征在于，包括：模板化代码生成子系统，所述模板化代码生成子系统包括：
静态模板代码生成装置，用于接收新建页面请求；从所述新建页面请求中获取初始化参数，所述初始化参数包括：页面名称配置项参数，页面描述配置项参数和页面模板配置项参数；根据所述初始化参数和webView网页视图技术中的web容器操作类生成并呈现可视化的功能页面，所述web容器操作类是BaseWebviewPanel公共类；获取用户在所述功能页面上输入的页面名称和页面描述；以及，获取用户基于所述功能页面选择的页面模板；响应于用户发出的生成代码指令，利用代码生成器根据所述页面名称、所述页面描述和所述页面模板生成源代码；
动态模板代码生成装置，用于接收自动生成页面的请求；响应于所述自动生成页面的请求，生成并呈现可视化的配置页面；获取用户在所述配置页面中输入的页面名称和页面描述，以及获取用户通过所述配置页面上传的数据源文件；响应于用户发出的生成代码指令，利用表格解析方法，解析用户上传的所述数据源文件，生成配置参数；响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，所述用户配置信息包括：用户配置的页面名称、用户配置的页面描述和选择的资源模板，根据所述用户配置信息生成编译代码；利用代码生成器根据所述配置参数和所述编译代码，生成最终的源代码；
数据库动态模板代码生成装置，用于接收数据库配置生成页面的请求；响应于所述数据库配置生成页面的请求，生成并呈现可视化的配置页面；获取用户在所述配置页面中输入的页面名称和页面描述；以及获取用户通过所述配置页面选择的数据来源，所述数据来源为数据库；响应于用户发出的生成代码指令，对所述数据库的源数据进行解析，生成配置参数；响应于用户发出的生成代码指令，利用Handlebars语义化代码生成引擎解析用户配置信息，生成编译代码；利用代码生成器根据所述编译代码和所述配置参数生成能够直接运行的源代码。
11.根据权利要求10所述的代码自动生成系统，其特征在于，还包括：可视化低代码自动生成子系统；所述可视化低代码自动生成子系统包括：多模板组合拼接代码生成装置，用于接收多模板组合拼接请求；根据所述多模板组合拼接请求，生成并呈现可视化的多模板组合拼接界面；其中，所述多模板组合拼接界面包括可视化编辑区域和模板选择区域，所述模板选择区域中呈现多个待选模板；响应于用户对所述多个待选模板中的至少两个模板的选中操作，将选中的至少两个模板添加到所述可视化编辑区域中，并在所述可视化编辑区域中展示被选中的至少两个模板；响应于用户的生成页面的指令，向用户呈现弹框以接收用户输入的页面名称和页面描述；根据所述被选中的至少两个模板，所述页面名称和所述页面描述，组合拼接成完整的页面；生成所述完整的页面对应的代码。
CN202111446341.8A 2021-11-30 2021-11-30 一种代码自动生成方法、介质、设备和系统 Active CN114138254B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111446341.8A CN114138254B (zh) 2021-11-30 2021-11-30 一种代码自动生成方法、介质、设备和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111446341.8A CN114138254B (zh) 2021-11-30 2021-11-30 一种代码自动生成方法、介质、设备和系统

Publications (2)

Publication Number Publication Date
CN114138254A CN114138254A (zh) 2022-03-04
CN114138254B true CN114138254B (zh) 2022-06-07

Family

ID=80386098

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111446341.8A Active CN114138254B (zh) 2021-11-30 2021-11-30 一种代码自动生成方法、介质、设备和系统

Country Status (1)

Country Link
CN (1) CN114138254B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114968242A (zh) * 2022-06-20 2022-08-30 中国农业银行股份有限公司 一种前端代码生成方法及装置
CN117608559B (zh) * 2024-01-24 2024-04-19 卡奥斯创智物联科技有限公司 页面显示代码生成方法、装置、电子设备、存储介质
CN117807346A (zh) * 2024-03-01 2024-04-02 山东浪潮科学研究院有限公司 一种基于浏览器的前端请求mock工具

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110442329A (zh) * 2019-06-26 2019-11-12 平安科技（深圳）有限公司 代码段的生成方法、装置、存储介质及计算机设备
CN111427552A (zh) * 2020-02-27 2020-07-17 深圳壹账通智能科技有限公司 前端组件化开发方法、装置、计算机设备及存储介质

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105701183A (zh) * 2016-01-07 2016-06-22 无锡天脉聚源传媒科技有限公司 一种用户个性化模板的实现方法及装置
CN110968311B (zh) * 2018-09-30 2024-01-05 北京嘀嘀无限科技发展有限公司 前端页面构建方法、装置及电子设备
CN112528193A (zh) * 2019-08-27 2021-03-19 阿里巴巴集团控股有限公司 页面文案处理方法、页面文案管理方法、装置、终端设备、计算机设备及服务器
CN111522549B (zh) * 2020-03-31 2023-07-25 中国工商银行股份有限公司 页面生成方法、装置、电子设备和存储介质
CN112433799A (zh) * 2020-11-25 2021-03-02 平安普惠企业管理有限公司 页面生成方法、装置、设备及介质

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110442329A (zh) * 2019-06-26 2019-11-12 平安科技（深圳）有限公司 代码段的生成方法、装置、存储介质及计算机设备
CN111427552A (zh) * 2020-02-27 2020-07-17 深圳壹账通智能科技有限公司 前端组件化开发方法、装置、计算机设备及存储介质

Also Published As

Publication number Publication date
CN114138254A (zh) 2022-03-04

Similar Documents

Publication Publication Date Title
CN114138254B (zh) 一种代码自动生成方法、介质、设备和系统
US9779133B2 (en) Contextual debugging of SQL queries in database-accessing applications
US20230083102A1 (en) Systems and methods for conversion of web content into reusable templates and components
US7734560B2 (en) Loose coupling of pattern components with interface regeneration and propagation
CN110806863A (zh) 接口文档生成方法及装置、电子设备、存储介质
CN115617327A (zh) 低代码页面搭建系统、方法及计算机可读存储介质
WO2015078343A1 (zh) 用于web开发系统的开发方法和web开发系统
US8589877B2 (en) Modeling and linking documents for packaged software application configuration
Vipul et al. ReactJS by Example-Building Modern Web Applications with React
CN114625353A (zh) 模型框架代码生成系统及方法
Cheng et al. Build Mobile Apps with Ionic 4 and Firebase
US20140040731A1 (en) Manipulating design models by editing generated reports
US20150261507A1 (en) Validating sql queries in a report
Armel Web application development with Laravel PHP Framework version 4
Chiarelli Beginning React: Simplify your frontend development workflow and enhance the user experience of your applications with React
Moiseev et al. Angular Development with TypeScript
CN114564199A (zh) 一种生成使用页面的方法、装置、设备及可读存储介质
CN114860218A (zh) 一种低代码开发方法和装置
CN111273900A (zh) 基于gitlab实时代码共享的在线拖拽编码生成方法
Roldán React Design Patterns and Best Practices: Design, build and deploy production-ready web applications using standard industry practices
CN116627418B (zh) 一种基于递归算法的多级表单界面可视化生成方法及装置
CN113010168A (zh) 一种基于场景树的用户界面生成方法
US10896161B2 (en) Integrated computing environment for managing and presenting design iterations
Clerissi et al. Test driven development of web applications: A lightweight approach
Farhi Reactive Programming with Angular and ngrx

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
GR01 Patent grant
GR01 Patent grant