[发明专利]一种代码生成方法及系统

说明书

本发明公开了一种代码生成方法，适于在服务器中执行，该方法包括：将用户界面配置文件发送给客户端，以便在客户端呈现可视化用户界面；接收用户在客户端上呈现的可视化用户界面上的操作信息，操作信息包括被操作的组件信息、页面信息以及组件在页面的布局信息；向数据库发送访问请求，以便获取组件对应的代码片段和页面源代码文件；以及基于组件在页面的布局信息，将组件对应的代码片段集成到页面源代码文件中相应的位置。本方案能够对结构化的代码片段自动整合，解决代码复用的灵活性，提高前端开发效率。

技术领域

本发明涉及前端开发技术领域，尤其涉及一种代码生成方法及系统。

背景技术

Web前端开发是创建网页页面或浏览器应用等前端界面呈现给用户的过程。通过javascript脚本语言、html超文本标记语言、css样式语言以及衍生出来的各种框架，来实现用户界面交互。框架是整个或部分系统中可复用的组件，目前主流的web框架有angular，vue，react等，可以提高web开发效率。

为了进一步提高前端开发效率，需要增加代码复用性、规范性以及灵活性。提高代码复用性的方法有很多，如继承、构造代码块、循环等。目前解决代码复用性的方法，一种是使用视图层的组件库，如extjs，jquery-ui，yui，antdesign的angular组件库，iview等：将一个复杂的场景分解后单独开发和维护。但是组件库不够灵活，不能满足定制的需求，这时，要么花费大量的精力去修改组件库的源码，要么等待组件库有新版本支持需求。而项目的实际应用场景多种多样，组件库很难满足所有的场景。一种是使用基础脚手架工具，例如vue-cli，yeoman：可用于生成基础代码，能够快速搭建一个完整的项目结构，但是基础脚手架工具只能生成很基础的功能，不能做到灵活定制，而且难以满足行业使用习惯和使用场景。

因此，需要一种自动化的代码片段集成方法，能够提高代码片段的复用性和灵活性，提高前端开发效率。

发明内容

为此，本发明提供了一种能够进行代码片段自动化整合的代码生成方法及系统。

根据本发明的一个方面，提供了一种代码生成方法，该方法可以在服务器中执行。在该方法中，可以首先将包含组件和页面的用户界面配置文件信息发送给客户端，以便在客户端呈现可视化用户界面。然后，接收用户在客户端上呈现的可视化用户界面上的操作信息，其中，操作信息包括被操作的组件信息、页面信息以及组件在页面的布局信息。随后，向数据库发送访问请求，以便获取组件对应的代码片段和页面源代码文件。最后，基于组件在页面的布局信息，将组件对应的代码片段集成到页面源代码文件中相应的位置。

可选地，在上述方法中，可视化用户界面包括组件列表和页面编辑区，在页面编辑区中，可以调整组件在页面中的布局位置以及编辑组件。

可选地，在上述方法中，数据库为关系型数据库，可以结构化存储组件的代码片段和页面源代码文件。

可选地，在上述方法中，可以解析源代码文件，基于组件标识信息，查找定位到相应的节点。然后，确定追加所述节点的方式，将代码片段集成到源代码文件中相应的位置。

可选地，在上述方法中，追加节点的方式包括在节点内部添加新元素、在节点的尾部添加新元素以及删除节点。

可选地，在上述方法中，可以基于源代码文件中的注释节点，扫描定位出不同类别的代码块。然后基于代码块中的注释信息，定位到代码片段相应的节点，注释信息至少包括组件标识信息。

可选地，在上述方法中，代码块的类别包括属性类、方法类、全局状态类。注释信息可以记录组件对应的代码片段的信息，包括组件标识信息、组件版本、写入时间、变量名、方法名中的一项或多项。

可选地，在上述方法中，可以通过加入实例化标识后缀，对代码片段中的变量名和方法名进行重命名，来区分不同的代码片段。或者通过在外层标签中加入类名来区分不同的代码片段。