CN112860234A - 一种前端页面代码生成方法及系统 - Google Patents

一种前端页面代码生成方法及系统 Download PDF

Info

Publication number
CN112860234A
CN112860234A CN202110061625.9A CN202110061625A CN112860234A CN 112860234 A CN112860234 A CN 112860234A CN 202110061625 A CN202110061625 A CN 202110061625A CN 112860234 A CN112860234 A CN 112860234A
Authority
CN
China
Prior art keywords
code
editor
end page
templates
page code
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
Application number
CN202110061625.9A
Other languages
English (en)
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 Shenzhou Digital Technology Co ltd
Original Assignee
Beijing Shenzhou Digital Technology 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 Shenzhou Digital Technology Co ltd filed Critical Beijing Shenzhou Digital Technology Co ltd
Priority to CN202110061625.9A priority Critical patent/CN112860234A/zh
Publication of CN112860234A publication Critical patent/CN112860234A/zh
Pending legal-status Critical Current

Links

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/33—Intelligent editors
    • 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/30—Creation or generation of source code
    • G06F8/35—Creation or generation of source code model driven
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开的前端页面代码生成方法及系统，涉及软件工程领域，利用编辑器，提取现有项目或工程的通用业务组件各个最小单元组件的代码，生成多个代码模板，将多个代码模板输入渲染组件，生成可视化的多个业务组件，分别将该多个业务组件加载至编辑器，利用编辑器并根据实际需求对多个业务组件进行整合，根据整合后的业务组件，生成对应的前端页面代码，提高了前端页面代码的规范性与、复用性及开发效率。

Description

一种前端页面代码生成方法及系统
技术领域
本发明涉及软件工程领域，具体涉及一种前端页面代码生成方法及系统。
背景技术
目前的代码生成方法一般采用可视化向导的方式配置生成部分代码，然后，软件开发人员对代码进行必要的编辑修改，这种生成过程只进行一次，不对已修改的代码进行维护；但是这种代码生成方法的局限性也是显而易见的，IDE集成开发工具或者编辑器只负责生成一次，剩下的工作量都是软件开发人员的，重新生成将会覆盖已修改的代码，而且也只适用于部分场景，可配置性不足，导致代码的规范性较差、可复用性及开发效率较低。
发明内容
为解决现有技术的不足，本发明实施例提供了一种前端页面代码生成方法及系统。
第一方面，本发明实施例提供的前端页面代码生成方法包括以下步骤：
利用编辑器，提取现有项目或工程的通用业务组件各个最小单元组件的代码，生成多个代码模板；
将所述多个代码模板输入渲染组件，生成可视化的多个业务组件；
分别将所述多个业务组件加载至所述编辑器；
利用所述编辑器并根据实际需求对所述多个业务组件进行整合；
根据整合后的业务组件，生成对应的前端页面代码。
优选地，利用所述编辑器并根据实际需求对所述多个业务组件进行整合包括：
利用编辑器解析所述多个代码模板并根据解析结果，判断所述多个代码模板是否解析成功；
若所述多个代码模板解析不成功，则利用编辑器规则解析所述多个代码模板并根据解析结果，判断所述多个代码模板是否解析成功；
若所述多个代码模板解析不成功，则利用代码编写规则，修改所述多个代码模板，直至所述多个代码模板均解析成功。
优选地，判断所述多个代码模板是否解析成功包括：
若代码模板解析成功，则分别提取所述代码模板中HTML语言的代码、CSS语言的代码、javascript语言的代码。
优选地，在根据整合后的代码模板，生成对应的前端页面代码之后，所述方法还包括：
将所述前端页面代码导入对应工程；
为所述前端页面代码模板配置路由；
对开发完的前端工程进行打包合并压缩混淆，构建出可在测试环境及生产环境使用的前端工程包。
第二方面，本发明实施例提供的前端页面代码生成系统包括：
提取模块，用于利用编辑器，提取现有项目或工程的通用业务组件各个最小单元组件的代码，生成多个代码模板；
输入模块，用于将所述多个代码模板输入渲染组件，生成可视化的多个业务组件；
加载模块，用于分别将所述多个业务组件加载至所述编辑器；
整合模块，用于利用所述编辑器并根据实际需求对所述多个业务组件进行整合；
根据整合后的业务组件，生成对应的前端页面代码。
本发明实施例提供的前端页面代码生成方法及系统，具有以下有益效果：
将现有的通用业务组件进行拆封，以编辑器的方式集成到代码开发工具，通过简单拖拽生成标准的前端页面代码，并可在线编辑标准的前端页面代码并可实时更新前端页面代码，提高了前端页面代码的规范性与可复用性，避免了重复工作，从而提高了开发效率。
具体实施方式
以下结合具体实施例对本发明作具体的介绍。
本发明实施例提供的前端页面代码生成方法包括以下步骤：
S101，利用编辑器，提取现有项目或工程的通用业务组件各个最小单元组件的代码，生成多个代码模板。
S102，将多个代码模板输入渲染组件，生成可视化的多个业务组件。
S103，分别将该多个业务组件加载至编辑器。
S104，利用编辑器并根据实际需求对多个业务组件进行整合。
其中，编辑器具有数据的增加、删除、修改、查询、分页或搜索功能。
S105，根据整合后的业务组件，生成对应的前端页面代码。
作为一个具体的实施例，前端页面代码包括与其具有关联关系的类库和json文件。
可选地，利用编辑器并根据实际需求对多个业务组件进行整合包括：
利用编辑器解析多个代码模板并根据解析结果，判断多个代码模板是否解析成功；
若多个代码模板解析不成功，则利用编辑器规则解析多个代码模板并根据解析结果，判断多个代码模板是否解析成功；
若多个代码模板解析不成功，则利用代码编写规则，修改多个代码模板，直至所述多个代码模板均解析成功。
可选地，判断多个代码模板是否解析成功包括：
若代码模板解析成功，则分别提取所述代码模板中HTML语言的代码、CSS语言的代码、javascript语言的代码。
可选地，在根据整合后的业务组件，生成对应的前端页面代码之后，该方法还包括：
将前端页面代码导入对应工程；
为前端页面代码模板配置路由；
对开发完的前端工程进行打包合并压缩混淆，构建出可在测试环境及生产环境使用的前端工程包。
本发明实施例还提供了一种前端页面代码生成系统，该系统包括：
提取模块，用于利用编辑器，提取现有项目或工程的通用业务组件各个最小单元组件的代码，生成多个代码模板；
输入模块，用于将所述多个代码模板输入渲染组件，生成可视化的多个业务组件；
加载模块，用于分别将所述多个业务组件加载至所述编辑器；
整合模块，用于利用所述编辑器并根据实际需求对所述多个业务组件进行整合；
根据整合后的业务组件，生成对应的前端页面代码。
本发明实施例提供的前端页面代码生成方法及系统，利用编辑器，提取现有项目或工程的通用业务组件各个最小单元组件的代码，生成多个代码模板，将多个代码模板输入渲染组件，生成可视化的多个业务组件，分别将该多个业务组件加载至编辑器，利用编辑器并根据实际需求对多个业务组件进行整合，根据整合后的业务组件，生成对应的前端页面代码，提高了前端页面代码的规范性与、复用性及开发效率。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
可以理解的是，上述方法及装置中的相关特征可以相互参考。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
此外，存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (5)

1.一种前端页面代码生成方法，其特征在于，包括：
利用编辑器，提取现有项目或工程的通用业务组件各个最小单元组件的代码，生成多个代码模板；
将所述多个代码模板输入渲染组件，生成可视化的多个业务组件；
分别将所述多个业务组件加载至所述编辑器；
利用所述编辑器并根据实际需求对所述多个业务组件进行整合；
根据整合后的业务组件，生成对应的前端页面代码。
2.根据权利要求1所述的前端页面代码生成方法，其特征在于，利用所述编辑器并根据实际需求对所述多个业务组件进行整合包括：
利用编辑器解析所述多个代码模板并根据解析结果，判断所述多个代码模板是否解析成功；
若所述多个代码模板解析不成功，则利用编辑器规则解析所述多个代码模板并根据解析结果，判断所述多个代码模板是否解析成功；
若所述多个代码模板解析不成功，则利用代码编写规则，修改所述多个代码模板，直至所述多个代码模板均解析成功。
3.根据权利要求2所述的前端页面代码生成方法，其特征在于，判断所述多个代码模板是否解析成功包括：
若代码模板解析成功，则分别提取所述代码模板中HTML语言的代码、CSS语言的代码、javascript语言的代码。
4.根据权利要求1所述的前端页面代码生成方法，其特征在于，在根据整合后的代码模板，生成对应的前端页面代码之后，所述方法还包括：
将所述前端页面代码导入对应工程；
为所述前端页面代码模板配置路由；
对开发完的前端工程进行打包合并压缩混淆，构建出可在测试环境及生产环境使用的前端工程包。
5.一种前端页面代码生成系统，其特征在于，包括：
提取模块，用于利用编辑器，提取现有项目或工程的通用业务组件各个最小单元组件的代码，生成多个代码模板；
输入模块，用于将所述多个代码模板输入渲染组件，生成可视化的多个业务组件；
加载模块，用于分别将所述多个业务组件加载至所述编辑器；
整合模块，用于利用所述编辑器并根据实际需求对所述多个业务组件进行整合；
根据整合后的业务组件，生成对应的前端页面代码。
CN202110061625.9A 2021-01-18 2021-01-18 一种前端页面代码生成方法及系统 Pending CN112860234A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110061625.9A CN112860234A (zh) 2021-01-18 2021-01-18 一种前端页面代码生成方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110061625.9A CN112860234A (zh) 2021-01-18 2021-01-18 一种前端页面代码生成方法及系统

Publications (1)

Publication Number Publication Date
CN112860234A true CN112860234A (zh) 2021-05-28

Family

ID=76006226

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110061625.9A Pending CN112860234A (zh) 2021-01-18 2021-01-18 一种前端页面代码生成方法及系统

Country Status (1)

Country Link
CN (1) CN112860234A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113268238A (zh) * 2021-06-02 2021-08-17 中信百信银行股份有限公司 一种应用流程编排的h5编辑方法及系统
CN113867714A (zh) * 2021-09-24 2021-12-31 安徽杰予信息科技有限公司 一种适配多语言的自动代码生成方法

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140068553A1 (en) * 2012-08-29 2014-03-06 Kamesh Sivaraman Balasubramanian Wireframe Recognition and Analysis Engine
CN104331285A (zh) * 2014-10-30 2015-02-04 北京思特奇信息技术股份有限公司 一种代码自动生成方法及系统
CN110096271A (zh) * 2019-05-08 2019-08-06 中汇信息技术（上海）有限公司 组件可视化方法、基于组件可视化的页面处理方法及装置
CN110825369A (zh) * 2019-11-07 2020-02-21 四川长虹电器股份有限公司 一种基于java语言的代码自动生成的方法
CN111221525A (zh) * 2020-01-09 2020-06-02 北京金山安全软件有限公司 一种脚本代码的生成方法、装置、电子设备及存储介质
CN111241454A (zh) * 2020-01-21 2020-06-05 优信拍（北京）信息科技有限公司 一种生成网页代码的方法、系统和装置
CN111352628A (zh) * 2020-02-28 2020-06-30 深圳壹账通智能科技有限公司 一种前端代码生成方法、装置、计算机系统及可读存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140068553A1 (en) * 2012-08-29 2014-03-06 Kamesh Sivaraman Balasubramanian Wireframe Recognition and Analysis Engine
CN104331285A (zh) * 2014-10-30 2015-02-04 北京思特奇信息技术股份有限公司 一种代码自动生成方法及系统
CN110096271A (zh) * 2019-05-08 2019-08-06 中汇信息技术（上海）有限公司 组件可视化方法、基于组件可视化的页面处理方法及装置
CN110825369A (zh) * 2019-11-07 2020-02-21 四川长虹电器股份有限公司 一种基于java语言的代码自动生成的方法
CN111221525A (zh) * 2020-01-09 2020-06-02 北京金山安全软件有限公司 一种脚本代码的生成方法、装置、电子设备及存储介质
CN111241454A (zh) * 2020-01-21 2020-06-05 优信拍（北京）信息科技有限公司 一种生成网页代码的方法、系统和装置
CN111352628A (zh) * 2020-02-28 2020-06-30 深圳壹账通智能科技有限公司 一种前端代码生成方法、装置、计算机系统及可读存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113268238A (zh) * 2021-06-02 2021-08-17 中信百信银行股份有限公司 一种应用流程编排的h5编辑方法及系统
CN113867714A (zh) * 2021-09-24 2021-12-31 安徽杰予信息科技有限公司 一种适配多语言的自动代码生成方法
CN113867714B (zh) * 2021-09-24 2024-06-04 安徽杰予信息科技有限公司 一种适配多语言的自动代码生成方法

Similar Documents

Publication Publication Date Title
CN107644286B (zh) 工作流处理方法及装置
CN110502227B (zh) 代码补全的方法及装置、存储介质、电子设备
CN112860234A (zh) 一种前端页面代码生成方法及系统
CN109491658A (zh) 计算机可执行代码数据的生成方法及装置
CN109918296B (zh) 软件自动化测试方法及装置
CN107943465B (zh) 一种生成html表单的方法及装置
CN112286814A (zh) 一种测试用例脚本的自动化生成系统及方法
CN110955714A (zh) 一种将非结构化文本转化为结构化文本的方法及装置
CN111026080A (zh) 控制器的硬件在环测试方法及装置
CN114297204A (zh) 一种异构数据源的数据存储、检索方法及装置
US10678514B2 (en) Method and device for generating code assistance information
CN110221825B (zh) 一种在计算机上实现母语编程的方法
CN116755669A (zh) 一种基于dsl语言操作模型的低代码开发方法和工具
CN111381935A (zh) 一种基于dsl配置表达式的功能实现方法及系统
US10509659B1 (en) Input processing logic to produce outputs for downstream systems using configurations
CN110673828A (zh) 一种产品配置方法
CN110554867B (zh) 一种应用程序的处理方法和装置
CN105843661B (zh) 一种面向主机系统的代码重定位方法及其系统
CN110968500A (zh) 一种测试用例的执行方法及装置
CN112860542A (zh) 一种ui自动化测试方法
CN111459474B (zh) 一种模板化的数据处理方法及装置
CN113672509A (zh) 自动化测试方法、装置、测试平台及存储介质
CN111240646A (zh) 一种基于全流程开发的程序设计方法
CN114880394B (zh) 一种sql脚本的共享方法、设备及介质
CN112328256A (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