CN111142871B - 一种前端页面开发系统、方法、设备、介质 - Google Patents

一种前端页面开发系统、方法、设备、介质 Download PDF

Info

Publication number
CN111142871B
CN111142871B CN201911349820.0A CN201911349820A CN111142871B CN 111142871 B CN111142871 B CN 111142871B CN 201911349820 A CN201911349820 A CN 201911349820A CN 111142871 B CN111142871 B CN 111142871B
Authority
CN
China
Prior art keywords
document
target
command
requirement
module
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
CN201911349820.0A
Other languages
English (en)
Other versions
CN111142871A (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.)
DBAPPSecurity Co Ltd
Original Assignee
DBAPPSecurity 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 DBAPPSecurity Co Ltd filed Critical DBAPPSecurity Co Ltd
Priority to CN201911349820.0A priority Critical patent/CN111142871B/zh
Publication of CN111142871A publication Critical patent/CN111142871A/zh
Application granted granted Critical
Publication of CN111142871B publication Critical patent/CN111142871B/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/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/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/42—Syntactic analysis
    • G06F8/427—Parsing
    • 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
    • Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
    • Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
    • Y02P90/30—Computing systems specially adapted for manufacturing

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本申请公开了一种前端页面开发系统、方法、设备、介质，该系统包括：文档获取接口，用于获取第一需求文档；数据绑定模块，用于识别所述第一需求文档中的数据字段关键名；UI装饰模块，用于获取UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；文档规范模块，用于获取目标文档规范命令，并进行相应的规范设置，得到目标需求文档；文档转代码模块，用于对所述目标需求文档进行解析，得到抽象决策树，并转换成相应的目标代码；代码执行模块，用于执行所述目标代码，得到前端UI。这样此系统能够使得需求文档符合预设规范，以便可以转换成相应的代码以运行得到前端UI，缩短前端页面开发时间，提高前端页面开发效率。

Description

一种前端页面开发系统、方法、设备、介质
技术领域
本申请涉及前端开发技术领域，特别涉及一种前端页面开发系统、方法、设备、介质。
背景技术
前端页面开发的过程一般如下，先由产品输出需求文档，再由设计师根据需求文档进行UI视图效果的设计，得到设计稿，前端根据设计稿开发前端页面，在进行相关接口调试，最后通过测试才能完整的呈现在用户面前，整个过程耗时较长，由于需求文档的撰写没有既定的规范，不同的人撰写的需求文档不相同，只是通过需求文档中的UI(UserInterface，用户界面)效果截图等不能够清晰的了解所有的设计需求，导致前端开发效率低。
发明内容
有鉴于此，本申请的目的在于提供一种前端页面开发系统、方法、设备、介质，能够使得需求文档符合预设规范，以便可以转换成相应的代码以运行得到前端UI，缩短前端页面开发时间，提高前端页面开发效率。其具体方案如下：
第一方面，本申请公开了一种前端页面开发系统，包括：
文档获取接口，用于获取产品输出的第一需求文档；
数据绑定模块，用于识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；
UI装饰模块，用于获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；
文档规范模块，用于获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；
文档转代码模块，用于对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；
代码执行模块，用于执行所述目标代码，得到前端UI。
可选的，所述UI装饰模块，包括：
UI设计命令获取接口，用于获取根据所述第一需求文档中的目标内容生成的UI设计命令；
内容替换子模块，用于利用所述UI设计命令替换所述目标内容，得到第二需求文档。
可选的，所述文档规范模块，包括：
规范命令获取接口，用于获取目标文档规范命令；
规范设置子模块，用于根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档。
可选的，所述文档转代码模块，包括：
文档解析子模块，用于对所述目标需求文档进行解析，得到抽象决策树；
文档转代码子模块，用于利用所述抽象决策树将所述目标需求文档转换成相应的目标代码。
第二方面，本申请公开了一种前端页面开发方法，包括：
获取产品输出的第一需求文档；
识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联绑定；
获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；
获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；
对所述目标需求文档进行解析抽象，得到决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；
执行所述目标代码，得到前端UI。
可选的，所述获取根据所述第一需求文档中的目标内容生成的UI设计命令，包括：
获取根据所述第一需求文档中、包括文案内容、视图结构、接口描述以及数据结构中任一项或几项组合的目标内容生成的UI设计命令。
可选的，所述获取目标文档规范命令，包括：
获取包括文档缩进命令、文档显示符号命令以及行内标记中任一项或几项组合的目标文档规范命令。
可选的，所述对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码，包括：
对所述目标需求文档进行解析，得到抽象决策树；
利用所述抽象决策树将所述目标需求文档转换成中间码；
将所述中间码转换成相应的目标代码。
第三方面，本申请公开了一种前端页面开发设备，包括：
存储器和处理器；
其中，所述存储器，用于存储计算机程序；
所述处理器，用于执行所述计算机程序，以实现前述公开的前端页面开发方法。
第四方面，本申请公开了一种计算机可读存储介质，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现前述公开的前端页面开发方法。
可见，本申请包括文档获取接口，用于获取产品输出的第一需求文档；数据绑定模块，用于识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；UI装饰模块，用于获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；文档规范模块，用于获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；文档转代码模块，用于对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；代码执行模块，用于执行所述目标代码，得到前端UI。这样此系统能够使得需求文档符合预设规范，以便可以转换成相应的代码以运行得到前端UI，缩短前端页面开发时间，提高前端页面开发效率。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1为本申请公开的一种前端页面开发系统结构示意图；
图2为本申请公开的一种为需求文档和运行得到前端页面的代码包括的内容示意图；
图3为本申请公开的一种前端页面开发方法流程图；
图4为本申请公开的一种具体的数据绑定示意图；
图5为本申请公开的一种UI设计效果图；
图6为本申请公开的一种为规范的部分需求文档转换成代码后得到的前端UI效果图；
图7为本申请公开的一种前端页面开发设备结构图；
图8为本申请公开的一种电子设备结构图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
目前，前端页面开发的过程一般如下，先由产品输出需求文档，再由设计师根据需求文档进行UI视图效果的设计，得到设计稿，前端根据设计稿开发前端页面，在进行相关接口调试，最后通过测试才能完整的呈现在用户面前，整个过程耗时较长，由于需求文档的撰写没有既定的规范，不同的人撰写的需求文档不相同，只是通过需求文档中的UI效果截图等不能够清晰的了解所有的设计需求，造成前端开发效率低。有鉴于此，本申请提出了一种前端页面开发系统，该系统能够使得需求文档符合预设规范，以便可以转换成相应的代码以运行得到前端UI，缩短前端页面开发时间，提高前端页面开发效率。
参见图1所示，本申请实施例公开了一种前端页面开发系统，该方法包括：
文档获取接口11，用于获取产品输出的第一需求文档；
数据绑定模块12，用于识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；
UI装饰模块13，用于获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；
文档规范模块14，用于获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；
文档转代码模块15，用于对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；
代码执行模块16，用于执行所述目标代码，得到前端UI。
可见，本申请包括文档获取接口，用于获取产品输出的第一需求文档；数据绑定模块，用于识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；UI装饰模块，用于获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；文档规范模块，用于获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；文档转代码模块，用于对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；代码执行模块，用于执行所述目标代码，得到前端UI。这样此系统能够使得需求文档符合预设规范，以便可以转换成相应的代码以运行得到前端UI，缩短前端页面开发时间，提高前端页面开发效率。
进一步的，所述UI装饰模块13，包括：UI设计命令获取接口，用于获取根据所述第一需求文档中的目标内容生成的UI设计命令；内容替换子模块，用于利用所述UI设计命令替换所述目标内容，得到第二需求文档。参见图2所示，为需求文档和运行得到前端页面的代码包括的内容示意图。所述需求文档中一般主要包括需求背景、文案内容、界面信息、功能描述、数据结构、视图结构以及接口描述，运行得到前端页面的代码一般主要包括视图结构、数据结构、文案内容、视图逻辑、接口描述以及数据状态管理，两者都包括：文案内容、视图结构、接口描述以及数据结构。所述目标内容包括文案内容、视图结构、接口描述以及数据结构中任一项或几项的组合。可以通过所述UI装饰模块13获取根据所述第一需求文档中的所述目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档。
在具体的实施过程中，所述文档规范模块14，包括：规范命令获取接口，用于获取目标文档规范命令；规范设置子模块，用于根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档。在得到所述第二需求文档之后，还需要对所述第二需求文档的形式做出一定的规范，例如，#表示一级标题，##表示二级标题，无序的列表通过*号表示，有序的列表通过数字表示，用三个*(或-或_)表示文档分割线，[链接名称](http://www.baidu.com)表示链接，！[图片名称](图片地址)表示图片，**AAA**表示粗体，*AAA*表示斜体等，所以需要通过所述文档规范模块14获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档。
在具体的实施过程中，所述文档转代码模块15，包括：文档解析子模块，用于对所述目标需求文档进行解析，得到抽象决策树；文档转代码子模块，用于利用所述抽象决策树将所述目标需求文档转换成相应的目标代码。在得到所述目标需求文档之后，所述文档转代码模块15，需要对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码，具体的，所述目标代码可以只是运行得到前端UI的部分代码。
参见图3所示，本申请实施例公开了一种前端页面开发方法，该方法包括：
步骤S21：获取产品输出的第一需求文档。
本实施例中，需要获取产品输出的第一需求文档，所述第一需求文档通常包括：需求背景、文案内容、界面信息、功能描述、数据结构、视图结构以及接口描述。
步骤S22：识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定。
在具体的实施过程中，在获取到所述第一需求文档之后，还需要识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定，这样产品那边就可以直接定义某些内容的属性名称，省去了前后端再统一通论名称的过程，也省去了前端在单独绑定数据的步骤。借鉴vue中表格数据是通过对应的字段名称一一匹配数据的原理。可以通过描述数据类型，实现数据mock，规则符合mock.js的数据占位符定义。例如，参见图4所示，数据绑定示意图。name对应input的key，age对应numberPicker的key。相对应的key进行相关联，从而实现数据的绑定。
步骤S23：获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档。
在具体的实施过程中，还需要将所述第一需求文档中的目标内容转换成相应的可以转换成代码的UI设计命令，以便最后可以直接将目标需求文档中需要的那部分内容转换成代码，所以需要获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档。所述获取根据所述第一需求文档中的目标内容生成的UI设计命令，包括：获取根据所述第一需求文档中、包括文案内容、视图结构、接口描述以及数据结构中任一项或几项组合的目标内容生成的UI设计命令。在将所述第一需求文档中的所述目标内容转换成所述UI设计命令的过程中，可以使用element框架，通过icon＝smile实现不同组件的不同样式，输入不同的关键字实现不同的组件，例如，select对接选择器，button对接按钮，radio对接单选按钮。参见图5所示，为UI设计效果图，通过将关键字“按钮”对接成Button()，得到系统默认UI中的显示效果，在分别利用withStyle()和withHandle()设计按钮的尺寸和显示颜色，接着通过withHandle(withStyle(Button(‘按钮)))设计按钮被点击之后的弹窗，得到的UI效果图见图5所示。
步骤S24：获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档。
在得到所述第二需求文档之后，还需要获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档。其中，所述获取目标文档规范命令，包括：获取包括文档缩进命令、文档显示符号命令以及行内标记中任一项或几项组合的目标文档规范命令。也即所述目标文档规范命令为对所述第二需求文档的文档形式做出规范，例如，缩进、符号、文案以及行内标记等。
步骤S25：对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码。
在具体的实施过程中，得到所述目标文档之后，需要对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码。所述对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码，包括：对所述目标需求文档进行解析，得到抽象决策树；利用所述抽象决策树将所述目标需求文档转换成中间码；将所述中间码转换成相应的目标代码。在将所述目标需求文档转换成所述目标代码的过程中，可以利用类似MD(Markdown)语法。
步骤S26：执行所述目标代码，得到前端UI。
可以理解的是，在将所述目标需求文档转换成所述目标代码之后，需要执行所述目标代码，得到前端UI。具体的，所述目标代码可以只是得到前端UI代码中的一部分。参见图6所示，为规范的部分需求文档转换成代码后得到的前端UI效果图。
可见，本申请先获取产品输出的第一需求文档；再识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；执行所述目标代码，得到前端UI。这样能够使得需求文档符合预设规范，以便可以转换成相应的代码以运行得到前端UI，缩短前端页面开发时间，提高前端页面开发效率。
进一步的，参见图7所示，本申请实施例还公开了一种前端页面开发设备，包括：处理器21和存储器22。
其中，所述存储器22，用于存储计算机程序；所述处理器22，用于执行所述计算机程序，以实现前述实施例中公开的前端页面开发方法。
其中，关于上述前端页面开发方法的具体过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。
进一步的，参见图8所示，本申请还公开了一种电子设备20，所述电子设备20能够实现前述公开的前端页面开发方法，图中的内容不能被认为是对本申请的使用范围的任何限制。
图8为本申请实施例提供的一种电子设备20的结构示意图，该电子设备具体可以包括但不限于平板电脑、笔记本电脑或台式电脑等。
通常，本实施例中的电子设备20包括：处理器21和存储器22。
其中，处理器21可以包括一个或多个处理核心，比如四核心处理器、八核心处理器等。处理器21可以采用DSP(digital signal processing,数字信号处理)、FPGA(field-programmable gate array,现场可编程们阵列)、PLA(programmable logic array,可编程逻辑阵列)中的至少一种硬件来实现。处理器21也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(central processing unit,中应处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器21可以集成有GPU(graphics processing unit,图像处理器)，GPU用于负责显示屏所需要显示的图像的渲染和绘制。一些实施例中，处理器21可以包括AI(artificialintelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器22可以包括一个或多个计算机可读存储介质，计算机可读存储介质可以是非暂态的。存储器22还可以包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。本实施例中，存储器22至少用于存储以下计算机程序221，其中，该计算机程序被处理器21加载并执行之后，能够实现前述任一实施例中公开的电子设备执行的前端页面方法步骤。另外，存储器22所存储的资源还可以包括操作系统222和数据223等，存储方式可以是短暂存储也可以是永久存储。其中，操作系统222可以是Windows、Unix、Linux等。数据223可以包括各种各样的数据。
在一些实施例中，电子设备20还可包括有显示屏23、输入输出接口24、通信接口25、传感器26、电源27以及通信总线28。
本技术领域人员可以理解，图8中示出的结构并不构成对电子设备20的限定，可以包括比图示更多或更少的组件。
进一步的，本申请实施例还公开了一种计算机可读存储介质，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现以下步骤：
获取产品输出的第一需求文档；识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；执行所述目标代码，得到前端UI。
可见，本申请先获取产品输出的第一需求文档；再识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；执行所述目标代码，得到前端UI。这样能够使得需求文档符合预设规范，以便可以转换成相应的代码以运行得到前端UI，缩短前端页面开发时间，提高前端页面开发效率。
本实施例中，所述计算机可读存储介质中保存的计算机子程序被处理器执行时，可以具体实现以下步骤：获取根据所述第一需求文档中、包括文案内容、视图结构、接口描述以及数据结构中任一项或几项组合的目标内容生成的UI设计命令。
本实施例中，所述计算机可读存储介质中保存的计算机子程序被处理器执行时，可以具体实现以下步骤：获取包括文档缩进命令、文档显示符号命令以及行内标记中任一项或几项组合的目标文档规范命令。
本实施例中，所述计算机可读存储介质中保存的计算机子程序被处理器执行时，可以具体实现以下步骤：对所述目标需求文档进行解析，得到抽象决策树；利用所述抽象决策树将所述目标需求文档转换成中间码；将所述中间码转换成相应的目标代码。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
最后，还需要说明的是，在本文中，诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或者操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得一系列包含其他要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上对本申请所提供的一种前端页面开发系统、方法、设备、介质进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (9)

1.一种前端页面开发系统，其特征在于，包括：
文档获取接口，用于获取产品输出的第一需求文档；
数据绑定模块，用于识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；
UI装饰模块，用于获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；
文档规范模块，用于获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；
文档转代码模块，用于对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；
代码执行模块，用于执行所述目标代码，得到前端UI；
其中，所述文档规范模块获取目标文档规范命令的过程，包括：
获取包括文档缩进命令、文档显示符号命令以及行内标记中任一项或几项组合的目标文档规范命令。
2.根据权利要求1所述的前端页面开发系统，其特征在于，所述UI装饰模块，包括：
UI设计命令获取接口，用于获取根据所述第一需求文档中的目标内容生成的UI设计命令；
内容替换子模块，用于利用所述UI设计命令替换所述目标内容，得到第二需求文档。
3.根据权利要求1所述的前端页面开发系统，其特征在于，所述文档规范模块，包括：
规范命令获取接口，用于获取目标文档规范命令；
规范设置子模块，用于根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档。
4.根据权利要求1至3任一项所述的前端页面开发系统，其特征在于，所述文档转代码模块，包括：
文档解析子模块，用于对所述目标需求文档进行解析，得到抽象决策树；
文档转代码子模块，用于利用所述抽象决策树将所述目标需求文档转换成相应的目标代码。
5.一种前端页面开发方法，其特征在于，包括：
获取产品输出的第一需求文档；
识别所述第一需求文档中的数据字段关键名，以便将所述数据字段关键名与UI视图进行关联以及对相应的数据进行绑定；
获取根据所述第一需求文档中的目标内容生成的UI设计命令，并利用所述UI设计命令替换所述目标内容，得到第二需求文档；
获取目标文档规范命令，并根据所述目标文档规范命令对所述第二需求文档进行相应的规范设置，得到符合预设规范标准的目标需求文档；
对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码；
执行所述目标代码，得到前端UI；
其中，所述获取目标文档规范命令，包括：
获取包括文档缩进命令、文档显示符号命令以及行内标记中任一项或几项组合的目标文档规范命令。
6.根据权利要求5所述的前端页面开发方法，其特征在于，所述获取根据所述第一需求文档中的目标内容生成的UI设计命令，包括：
获取根据所述第一需求文档中、包括文案内容、视图结构、接口描述以及数据结构中任一项或几项组合的目标内容生成的UI设计命令。
7.根据权利要求5至6任一项所述的前端页面开发方法，其特征在于，所述对所述目标需求文档进行解析，得到抽象决策树，并利用所述抽象决策树将所述目标需求文档转换成相应的目标代码，包括：
对所述目标需求文档进行解析，得到抽象决策树；
利用所述抽象决策树将所述目标需求文档转换成中间码；
将所述中间码转换成相应的目标代码。
8.一种前端页面开发设备，其特征在于，包括：
存储器和处理器；
其中，所述存储器，用于存储计算机程序；
所述处理器，用于执行所述计算机程序，以实现权利要求5至7任一项所述的前端页面开发方法。
9.一种计算机可读存储介质，其特征在于，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现如权利要求5至7任一项所述的前端页面开发方法。
CN201911349820.0A 2019-12-24 2019-12-24 一种前端页面开发系统、方法、设备、介质 Active CN111142871B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911349820.0A CN111142871B (zh) 2019-12-24 2019-12-24 一种前端页面开发系统、方法、设备、介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911349820.0A CN111142871B (zh) 2019-12-24 2019-12-24 一种前端页面开发系统、方法、设备、介质

Publications (2)

Publication Number Publication Date
CN111142871A CN111142871A (zh) 2020-05-12
CN111142871B true CN111142871B (zh) 2023-06-06

Family

ID=70519680

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911349820.0A Active CN111142871B (zh) 2019-12-24 2019-12-24 一种前端页面开发系统、方法、设备、介质

Country Status (1)

Country Link
CN (1) CN111142871B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111782330B (zh) * 2020-07-07 2024-01-26 赞同科技股份有限公司 一种基于Web应用的页面数据获取方法、装置及设备
CN113805871B (zh) * 2021-09-26 2023-08-15 平安国际智慧城市科技股份有限公司 前端代码的生成方法、装置及计算机设备

Citations (22)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101004680A (zh) * 2006-11-23 2007-07-25 福建顶点软件股份有限公司 一种以直接业务对象模型定义为核心的灵活快捷的软件开发方法及支持系统
CN101334728A (zh) * 2008-07-28 2008-12-31 北京航空航天大学 一种基于xml文档描述的界面生成方法和平台
CN102521412A (zh) * 2011-12-28 2012-06-27 用友软件股份有限公司 数据关联装置和数据关联方法
CN102945203A (zh) * 2012-10-26 2013-02-27 深圳出入境检验检疫局信息中心 一种用于移动互联网应用的代码安全测试方法
CN104111828A (zh) * 2013-04-22 2014-10-22 易保网络技术(上海)有限公司 人机交互界面自动生成方法及系统
KR20150003935A (ko) * 2013-06-28 2015-01-12 주식회사 케이티 문자 ars 서비스 제공 방법, 문자 ars 개발툴을 제공하는 방법 및 서버, 그리고 xml 생성 방법
CN104657140A (zh) * 2015-02-10 2015-05-27 广州华多网络科技有限公司 代码生成方法及装置
CN104965714A (zh) * 2015-07-27 2015-10-07 广州杰赛科技股份有限公司 应用软件的代码生成方法和系统
CN105224377A (zh) * 2015-10-08 2016-01-06 广州华旻信息科技有限公司 一种通过元数据自动生成软件项目编码文件的方法及装置
CN105242597A (zh) * 2015-09-29 2016-01-13 中国科学院光电技术研究所 一种嵌入式控制器调试界面的自动生成方法
CN105988792A (zh) * 2015-02-11 2016-10-05 国核（北京）科学技术研究院有限公司 核电软件开发自动化系统和方法
CN107135110A (zh) * 2017-06-08 2017-09-05 成都安恒信息技术有限公司 一种私有云中预部署云计算物理资源的系统及使用方法
CN107273117A (zh) * 2017-05-25 2017-10-20 深圳市彬讯科技有限公司 一种编程友好型的敏捷代码自动生成系统
CN107357942A (zh) * 2017-09-04 2017-11-17 山东达创网络科技股份有限公司 一种源代码辅助生成工具及其生成方法
CN109062925A (zh) * 2018-06-06 2018-12-21 中国平安人寿保险股份有限公司 自动生成insert语句的方法、装置、计算机设备及存储介质
CN109491708A (zh) * 2018-11-21 2019-03-19 北京锐安科技有限公司 文档生成方法、系统、设备和介质
CN109634579A (zh) * 2018-10-29 2019-04-16 平安科技（深圳）有限公司 代码生成方法、装置、计算机装置及存储介质
CN109976763A (zh) * 2019-03-25 2019-07-05 联想(北京)有限公司 一种代码处理方法、装置、电子设备及计算系统
CN110262783A (zh) * 2019-05-22 2019-09-20 深圳华科云动力科技有限公司 一种接口生成方法、装置及终端设备
CN110457031A (zh) * 2019-08-21 2019-11-15 赛尔网络有限公司 一种软件开发方法、装置、设备及介质
CN110502229A (zh) * 2019-08-26 2019-11-26 广州小鹏汽车科技有限公司 页面的生成方法、装置、终端、计算机设备和存储介质
CN110532176A (zh) * 2019-07-31 2019-12-03 平安科技（深圳）有限公司 一种智能合约的形式化验证方法、电子装置及存储介质

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2007056807A1 (en) * 2005-11-18 2007-05-24 Robert Arthur Crewdson Computer software development system and method
US20080037880A1 (en) * 2006-08-11 2008-02-14 Lcj Enterprises Llc Scalable, progressive image compression and archiving system over a low bit rate internet protocol network
US20120185483A1 (en) * 2011-01-14 2012-07-19 Shah Amip J System and method for tree creation
CN106250164A (zh) * 2016-08-16 2016-12-21 广州仕邦人力资源有限公司 一种基于需求文档的代码生成方法及装置
US10606566B2 (en) * 2017-06-03 2020-03-31 Apple Inc. Integration of learning models into a software development system

Patent Citations (22)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101004680A (zh) * 2006-11-23 2007-07-25 福建顶点软件股份有限公司 一种以直接业务对象模型定义为核心的灵活快捷的软件开发方法及支持系统
CN101334728A (zh) * 2008-07-28 2008-12-31 北京航空航天大学 一种基于xml文档描述的界面生成方法和平台
CN102521412A (zh) * 2011-12-28 2012-06-27 用友软件股份有限公司 数据关联装置和数据关联方法
CN102945203A (zh) * 2012-10-26 2013-02-27 深圳出入境检验检疫局信息中心 一种用于移动互联网应用的代码安全测试方法
CN104111828A (zh) * 2013-04-22 2014-10-22 易保网络技术(上海)有限公司 人机交互界面自动生成方法及系统
KR20150003935A (ko) * 2013-06-28 2015-01-12 주식회사 케이티 문자 ars 서비스 제공 방법, 문자 ars 개발툴을 제공하는 방법 및 서버, 그리고 xml 생성 방법
CN104657140A (zh) * 2015-02-10 2015-05-27 广州华多网络科技有限公司 代码生成方法及装置
CN105988792A (zh) * 2015-02-11 2016-10-05 国核（北京）科学技术研究院有限公司 核电软件开发自动化系统和方法
CN104965714A (zh) * 2015-07-27 2015-10-07 广州杰赛科技股份有限公司 应用软件的代码生成方法和系统
CN105242597A (zh) * 2015-09-29 2016-01-13 中国科学院光电技术研究所 一种嵌入式控制器调试界面的自动生成方法
CN105224377A (zh) * 2015-10-08 2016-01-06 广州华旻信息科技有限公司 一种通过元数据自动生成软件项目编码文件的方法及装置
CN107273117A (zh) * 2017-05-25 2017-10-20 深圳市彬讯科技有限公司 一种编程友好型的敏捷代码自动生成系统
CN107135110A (zh) * 2017-06-08 2017-09-05 成都安恒信息技术有限公司 一种私有云中预部署云计算物理资源的系统及使用方法
CN107357942A (zh) * 2017-09-04 2017-11-17 山东达创网络科技股份有限公司 一种源代码辅助生成工具及其生成方法
CN109062925A (zh) * 2018-06-06 2018-12-21 中国平安人寿保险股份有限公司 自动生成insert语句的方法、装置、计算机设备及存储介质
CN109634579A (zh) * 2018-10-29 2019-04-16 平安科技（深圳）有限公司 代码生成方法、装置、计算机装置及存储介质
CN109491708A (zh) * 2018-11-21 2019-03-19 北京锐安科技有限公司 文档生成方法、系统、设备和介质
CN109976763A (zh) * 2019-03-25 2019-07-05 联想(北京)有限公司 一种代码处理方法、装置、电子设备及计算系统
CN110262783A (zh) * 2019-05-22 2019-09-20 深圳华科云动力科技有限公司 一种接口生成方法、装置及终端设备
CN110532176A (zh) * 2019-07-31 2019-12-03 平安科技（深圳）有限公司 一种智能合约的形式化验证方法、电子装置及存储介质
CN110457031A (zh) * 2019-08-21 2019-11-15 赛尔网络有限公司 一种软件开发方法、装置、设备及介质
CN110502229A (zh) * 2019-08-26 2019-11-26 广州小鹏汽车科技有限公司 页面的生成方法、装置、终端、计算机设备和存储介质

Also Published As

Publication number Publication date
CN111142871A (zh) 2020-05-12

Similar Documents

Publication Publication Date Title
CN113807098B (zh) 模型训练方法和装置、电子设备以及存储介质
KR20210116379A (ko) 텍스트 창작 방법, 텍스트 창작 장치, 전자 기기 및 저장 매체
CN112148871B (zh) 摘要生成方法、装置、电子设备及存储介质
CN110502520B (zh) 一种数据入库的方法、系统、设备及计算机可读存储介质
CN111142871B (zh) 一种前端页面开发系统、方法、设备、介质
CN112749300B (zh) 用于视频分类的方法、装置、设备、存储介质和程序产品
US20230252220A1 (en) Style transfer
CN110968294A (zh) 一种业务领域模型建立系统及方法
JP7309811B2 (ja) データ注釈方法、装置、電子機器および記憶媒体
CN114860905A (zh) 意图识别方法、装置及设备
US9298480B2 (en) Programmatic editing of text files
CN111026916B (zh) 文本描述的转换方法、装置、电子设备及存储介质
CN110377891B (zh) 事件分析文章的生成方法、装置、设备及计算机可读存储介质
Krishna et al. SHR++: An interface for morpho-syntactic annotation of Sanskrit corpora
CN111860862A (zh) 执行学习模型的分层简化
CN113128175A (zh) 一种大批量pdf文件合并的方法及系统
US20240126978A1 (en) Determining attributes for elements of displayable content and adding them to an accessibility tree
CN113553435B (zh) 智能标签的确定方法、装置、设备及存储介质
US20130179896A1 (en) Multi-thread processing of an XML document
CN116339733B (zh) 一种应用程序页面生成方法、系统、电子设备及介质
JP5941345B2 (ja) 文字情報の分析方法および情報分析装置並びにプログラム
CN112560415A (zh) 一种数据处理方法、装置、设备及介质
CN118193115A (zh) 用户界面测评方法、装置、设备及存储介质
CN114064773A (zh) 一种数据转换方法、装置、计算机设备及存储介质
CN114416088A (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
GR01 Patent grant
GR01 Patent grant