CN117111909A - 代码自动化生成方法、系统、计算机设备及存储介质 - Google Patents
代码自动化生成方法、系统、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN117111909A CN117111909A CN202311073297.XA CN202311073297A CN117111909A CN 117111909 A CN117111909 A CN 117111909A CN 202311073297 A CN202311073297 A CN 202311073297A CN 117111909 A CN117111909 A CN 117111909A
- Authority
- CN
- China
- Prior art keywords
- code
- data
- generating
- initial data
- metadata
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000003860 storage Methods 0.000 title claims abstract description 18
- 238000013461 design Methods 0.000 claims abstract description 76
- 238000004422 calculation algorithm Methods 0.000 claims abstract description 51
- 238000012545 processing Methods 0.000 claims abstract description 42
- 238000005457 optimization Methods 0.000 claims abstract description 17
- 238000007781 pre-processing Methods 0.000 claims abstract description 16
- 238000006243 chemical reaction Methods 0.000 claims description 21
- 238000004364 calculation method Methods 0.000 claims description 20
- 238000000547 structure data Methods 0.000 claims description 18
- 230000011218 segmentation Effects 0.000 claims description 15
- 238000009826 distribution Methods 0.000 claims description 9
- 238000001914 filtration Methods 0.000 claims description 5
- 238000004806 packaging method and process Methods 0.000 claims description 4
- 238000012827 research and development Methods 0.000 abstract description 35
- 239000000463 material Substances 0.000 abstract description 7
- 238000005516 engineering process Methods 0.000 abstract description 3
- 238000011161 development Methods 0.000 description 29
- 230000018109 developmental process Effects 0.000 description 29
- 238000004891 communication Methods 0.000 description 22
- 230000008569 process Effects 0.000 description 14
- 230000009467 reduction Effects 0.000 description 10
- 238000009795 derivation Methods 0.000 description 7
- 238000004904 shortening Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 239000000284 extract Substances 0.000 description 5
- 238000000605 extraction Methods 0.000 description 5
- 238000012216 screening Methods 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 238000001514 detection method Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 238000012356 Product development Methods 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000000873 masking effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002035 prolonged effect Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3684—Test management for test design, e.g. generating new test cases
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3688—Test management for test execution, e.g. scheduling of test suites
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Document Processing Apparatus (AREA)
Abstract
本申请实施例属于数据处理领域及金融科技领域，涉及一种代码自动化生成方法，包括：获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据；根据所述初始数据，生成规范协议；根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据；根据所述规范协议和所述代码结构表达数据，生成代码元数据；对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码。本申请还提供一种代码自动化生成系统、计算机设备及存储介质。本申请缩短了互联网金融产品的研发周期，提高了研发效率，降低了人力成本、物力成本和时间成本的损耗。
Description
技术领域
本申请涉及数据处理领域及金融科技领域，应用于互联网金融产品的设计稿智能生成代码的场景中，尤其涉及一种代码自动化生成方法、系统、计算机设备及存储介质。
背景技术
现如今，在互联网蓬勃发展的背景下，金融与互联网融合进入了互联网金融时代。一个互联网金融产品的完整研发流程，一般需要产品设计师和开发工程师共同参与，通过两者的合作将产品需求转化为代码。
然而，基于互联网金融产品对于人们个人财产安全的重要程度，在其开发过程中就需要严谨对待，避免出现错漏。按照传统的合作方式，设计侧和开发侧在研发流程的初期就需要反复确认产品需求，并且在研发流程的中期需要频繁进行沟通，除此之外，在研发流程的后期，设计侧可能存在团队间标准不统一、设计规范不同步的问题，以及开发侧可能存在代码重复开发、UI还原度低的问题，这些问题导致了互联网金融产品在研发完成之后时常会出现验收满意度较低的情况。
因此，采用上述的合作方式进行研发，容易因沟通效率低而导致研发效率降低，从而拉长产品的研发周期，增加人力成本、物力成本和时间成本的额外损耗。
发明内容
本申请实施例的目的在于提出一种代码自动化生成方法、系统、计算机设备及存储介质，其主要目的在于缩短互联网金融产品的研发周期，实现降本增效。
为了解决上述技术问题，本申请实施例提供一种代码自动化生成方法，采用了如下所述的技术方案：
获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据；
根据所述初始数据，生成规范协议；
根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据；
根据所述规范协议和所述代码结构表达数据，生成代码元数据；
对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码。
进一步的，所述布局算法包括空间布局算法和投影布局算法，所述根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据的步骤，具体包括：
对所述初始数据进行数据结构转换，得到第一结构数据；
采用所述空间布局算法，通过flexbox模型对所述第一结构数据进行行列分割推导，确定所述第一结构数据的空间分布；
采用所述投影布局算法，为行列分割推导完成的第一结构数据填充box-shadow属性，得到所述第二结构数据；
根据预设的样式计算流程对所述第二结构数据进行样式计算，得到所述代码结构表达数据。
进一步的，所述根据所述规范协议和所述代码结构表达数据，生成代码元数据的步骤，具体包括：
获取所述代码结构表达数据对应的字节流；
按照所述规范协议对所述字节流进行解析和封包，得到所述代码元数据。
进一步的，所述根据所述初始数据，生成规范协议的步骤，具体包括：
根据所述初始数据建立标准化规则；
将所述标准化规则转换为所述规范协议。
进一步的，所述对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码的步骤，具体包括：
对所述代码元数据的各个元素节点进行节点描述，以添加各个所述元素节点对应的语义组合，得到所述节点描述数据；
根据所述节点描述数据进行代码生成，得到所述页面代码。
进一步的，所述获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据的步骤，具体包括：
获取所述设计稿文件，对所述设计稿文件进行数据加工，得到待处理图层信息；
对所述待处理图层信息进行信息提取和图层筛选，得到所述初始数据。
进一步的，在所述对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码的步骤之后，还包括：
接收开发者对应的用户端发出的操作指令；
响应于所述操作指令，对所述页面代码进行调试，得到调试后的开发代码。
为了解决上述技术问题，本申请实施例还提供一种代码自动化生成系统，采用了如下所述的技术方案：
预处理模块，用于获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据；
第一生成模块，用于根据所述初始数据，生成规范协议；
布局优化模块，用于根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据；
第二生成模块，用于根据所述规范协议和所述代码结构表达数据，生成代码元数据；
第三生成模块，用于对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码。
为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：
一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的代码自动化生成方法的步骤。
为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：
一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的代码自动化生成方法的步骤。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请公开的代码自动化生成方法，通过获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据；根据所述初始数据，生成规范协议；根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据；根据所述规范协议和所述代码结构表达数据，生成代码元数据；对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码。本申请通过智能化地提取原始的设计稿文件中的相关数据，并生成标准化的规范协议和结构化的数据描述，最终实现了由设计稿文件到页面代码的自动转换，利用中间语言确保了设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率，降低了人力成本、物力成本和时间成本的损耗。
附图说明
为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请可以应用于其中的示例性系统架构图；
图2根据本申请的代码自动化生成方法的一个实施例的流程图；
图3是根据本申请的代码自动化生成系统的一个实施例的结构示意图；
图4是根据本申请的计算机设备的一个实施例的结构示意图。
具体实施方式
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3(MPEG Audio Layer III，动态影像专家压缩标准音频层面3)播放器、MP4(MPEG Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
需要说明的是，本申请实施例所提供的代码自动化生成方法一般由服务器执行，相应地，代码自动化生成系统一般设置于服务器中。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
继续参考图2，示出了根据本申请的代码自动化生成方法的一个实施例的流程图。所述的代码自动化生成方法，包括以下步骤：
步骤S201，获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据；
在本实施例中，为了在金融科技领域实现互联网金融产品开发的降本增效，可以通过服务器运行代码自动化生成方法，首先需要获取携带有若干图层元信息的设计稿文件，并对图层元信息进行预处理，得到预处理后的初始数据。具体地，互联网金融产品的设计稿文件一般由设计人员提供，一份设计稿文件是由若干图层元信息和资源文件组成的一个压缩文档，服务器获取设计人员所提交的设计稿文件后，通过对设计稿文件进行数据加工，即可得到其包含的若干图层元信息对应的待处理图层信息，而后可以对待处理图层信息进行信息提取和图层筛选，从而得到一份可以供布局算法服务处理的数据，作为初始数据。
可选地，在初始数据中，可以生成UI的树状图结构，还可以标识控件等信息，以使得后续的处理更加便捷。
步骤S202，根据所述初始数据，生成规范协议；
在本实施例中，根据设计稿文件得到初始数据后，就可以根据初始数据，生成规范协议。具体地，协议是在计算机网络通信过程中，为了保证计算机之间可以准确地进行数据通信，所需要制定的通信规则，得到经过预处理的初始数据后，为了确保语义的合理性，需要根据初始数据建立标准化规则，并转换为统一的规范协议。
步骤S203，根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据；
在本实施例中，生成规范协议后，即可根据预设的布局算法对初始数据进行布局优化，并得到代码结构表达数据。具体地，由于初始数据经过预处理，所以可以供布局算法服务处理，从而获得视觉还原度良好、布局结构合理的代码结构表达数据，本实施例所采用的布局算法包括空间布局算法和投影布局算法，首先，可以对初始数据进行数据结构转换，并将数据结构转换后的数据作为第一结构数据，而后，可以采用空间布局算法，通过flexbox(一维布局)模型对第一结构数据进行行列分割推导，确定第一结构数据的空间分布，再根据投影布局算法对确定空间分布后的第一结构数据的box-shadow(阴影效果)数据进行设置，将设置后的数据作为第二结构数据，最后，根据预设的样式计算流程对第二结构数据进行样式计算，并将样式计算后的数据作为代码结构表达数据。
可选地，除了空间布局算法和投影布局算法外，所采用的布局算法还可以包括背景图布局算法、特征检测布局算法、坐标推导算法、背景图层及冗余图层检测算法等，通过布局算法对第一结构数据进行行列分割推导后，即可得到分割良好、成组合理的第二结构数据，以供后续进行样式计算。
步骤S204，根据所述规范协议和所述代码结构表达数据，生成代码元数据；
在本实施例中，通过上述流程生成规范协议并得到代码结构表达数据后，即可根据规范协议和代码结构表达数据，生成代码元数据。具体地，可以采用协议解析器，在获取代码结构表达数据集对应的字节流后，按照规范协议对字节流进行解析，以得到符合规范协议的数据，而后再进行封包，从而得到代码元数据。
步骤S205，对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码。
在本实施例中，得到代码元数据后，即可对代码元数据进行语义化处理，并得到语义化处理后的节点描述数据，最后根据节点描述数据生成页面代码。具体地，经过协议解析器处理得到代码元数据后，由于节点元素缺乏相应的语义化类名对其进行描述，若直接根据代码元数据生成代码，则生成的代码依然不具备很好的可读性，因此，有必要先对代码元数据进行语义化处理，可以对代码元数据的各个元素节点进行节点描述，以添加各个元素节点对应的语义组合，从而得到节点描述数据，而后再采用代码生成器，根据节点描述数据进行代码生成，最终得到页面代码，实现了设计稿文件到页面代码的自动转换，后续还可以由开发人员对页面代码进行二次开发和调试后，根据调试好的代码生成完整的页面。
本申请通过智能化地提取原始的设计稿文件中的相关数据，并生成标准化的规范协议和结构化的数据描述，最终实现了由设计稿文件到页面代码的自动转换，利用中间语言确保了设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率，降低了人力成本、物力成本和时间成本的损耗。
在本实施例的一些可选的实现方式中，所述布局算法包括空间布局算法和投影布局算法，上述根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据的步骤包括：
对所述初始数据进行数据结构转换，得到第一结构数据；
采用所述空间布局算法，通过flexbox模型对所述第一结构数据进行行列分割推导，确定所述第一结构数据的空间分布；
采用所述投影布局算法，为行列分割推导完成的第一结构数据填充box-shadow属性，得到所述第二结构数据；
根据预设的样式计算流程对所述第二结构数据进行样式计算，得到所述代码结构表达数据。
在本实施例中，生成规范协议后，即可对初始数据进行数据结构转换，并将数据结构转换后的数据作为第一结构数据，再采用空间布局算法，通过flexbox模型对第一结构数据进行行列分割推导，确定第一结构数据的空间分布，并采用投影布局算法，为行列分割推导完成的第一结构数据填充box-shadow属性，得到第二结构数据，最后，根据预设的样式计算流程对第二结构数据进行样式计算，并将样式计算后的数据作为代码结构表达数据。具体地，经过预处理后的初始数据，一般是以左上角为原点坐标的绝对定位为基础的，导致了初始数据的各个元素之间是扁平化的，没有从属关系，而绝对定位布局会导致后续生成的代码无论是扩展性、可读性都达不到开发要求，因此需要布局算法进行处理才可以获得获得视觉还原度良好、布局结构合理的代码结构表达数据，通过布局算法对初始数据进行处理的操作流程包括了数据结构转换、布局推导和样式计算三个步骤，首先，对初始数据进行数据结构转换，可以将其转换为类似DOM树的结构，从而使其可以进行节点插入、删除、查找操作，将数据结构转换后的数据作为第一结构数据；其次，在数据结构转换之后，需要进行布局推导，通过空间布局算法对第一结构数据进行行列分割推导，通过flexbox模型确定第一结构数据的空间分布，并进行对齐，以获得分割良好、成组合理，并且结构化的节点结构，而后通过投影布局算法，为经过行列分割推导后的第一结构数据设置box-shadow属性，以在元素的框架上添加阴影效果，营造层次感，并将得到的数据作为第二结构数据；再次，根据预设的样式计算流程对第二结构数据进行样式计算，即可得到代码结构表达数据，例如，根据层级关系，可以通过坐标计算得出flexbox模型的主轴、侧轴等样式。
需要说明的是，flexbox模型即为Flexible Box模型，是一种一维的布局模型，可以为元素之间提供强大的空间分布和对齐能力，其所有属性都跟主轴和侧轴(交叉轴)有关。box-shadow属性一般用于在元素的框架上添加阴影效果，同一个元素可以设置多个阴影效果，并用逗号分隔开。
可以理解的是，DOM是HTML文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。上述的第一结构数据即为与其功能相似的结构化数据。
本申请通过对原始的设计稿文件进行结构化的数据描述，在设计稿文件到页面代码的转换过程中，提高了还原度，并提高了最终生成的页面代码的扩展性和可读性，从而确保设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率。
在本实施例的一些可选的实现方式中，上述根据所述规范协议和所述代码结构表达数据，生成代码元数据的步骤包括：
获取所述代码结构表达数据对应的字节流；
按照所述规范协议对所述字节流进行解析和封包，得到所述代码元数据。
在本实施例中，在生成规范协议并且得到代码结构表达数据后，即可获取代码结构表达数据对应的字节流，而后按照规范协议对字节流进行解析和封包，从而得到代码元数据。具体地，需要将代码结构表达数据输入预设的协议解析器，通过协议解析器获取代码结构表达数据集对应的字节流，并对字节流进行解析，按照规范协议，将其转换为符合规范协议的字节流，再对其进行封包，所得到的数据即为代码元数据，
本申请通过协议解析器按照协议规范生成代码元数据，使得获得的代码元数据具有统一的规范标准，确保了设计侧和开发侧的无障碍沟通，从而缩短了互联网金融产品的研发周期，提高了研发效率。
在本实施例的一些可选的实现方式中，上述根据所述初始数据，生成规范协议的步骤包括：
根据所述初始数据建立标准化规则；
将所述标准化规则转换为所述规范协议。
在本实施例中，得到初始数据后，首先需要根据初始数据建立标准化规则，再将标准化规则转换为统一的规范协议。具体地，在设计稿文件转换为页面代码的整体过程中，为了确保最终生成的页面代码的语义合理性，且需要确保构建设计人员和开发人员无障碍沟通，因此需要中间语言，即根据初始数据建立标准化规则，并转换为统一的规范协议。
本申请通过在原始的设计稿文件中提取初始数据后，根据初始数据建立标准化规则，使得后续的数据转换和代码生成过程中，实现了统一的语言规范，作为设计侧和开发侧的中间语言，确保了双方的无障碍沟通，从而提高了研发效率。
在本实施例的一些可选的实现方式中，上述对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码的步骤包括：
对所述代码元数据的各个元素节点进行节点描述，以添加各个所述元素节点对应的语义组合，得到所述节点描述数据；
根据所述节点描述数据进行代码生成，得到所述页面代码。
在本实施例中，根据协议规范和代码结构表达数据得到代码元数据后，即可对代码元数据的各个元素节点进行节点描述，以添加各个元素节点对应的语义组合，从而得到节点描述数据，实现对代码元数据的语义化处理，而后再根据节点描述数据进行代码生成，得到页面代码。具体地，代码元数据在经过布局算法处理和协议规范后，由于节点元素缺乏相应的语义化类名，依然不具备很好地可读性，因此，为了使其可以二次开发并且具有拓展性，就需要进行语义化处理，即对代码元数据的各个元素节点进行节点描述，添加各个元素节点对应的语义组合，以使得可以确定各个元素节点的语义化类名，例如，将个人信息主页面区域命名为profile，将子视图姓名区域命名为profile_name,而姓名区域所使用的控件则命名为profile_name_text，如此就可以根据子节点推断出整个节点树的完整语义。将上述语义化处理后得到的数据作为节点描述数据，再通过代码生成器，根据节点描述数据进行代码生成，最终即可得到页面代码。
本申请通过语义化处理，确保了由设计稿文件自动转换成的页面代码的可读性和拓展性，使其可以被二次开发，从而实现了设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率。
在本实施例的一些可选的实现方式中，上述获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据的步骤，具体包括：
获取所述设计稿文件，对所述设计稿文件进行数据加工，得到待处理图层信息；
对所述待处理图层信息进行信息提取和图层筛选，得到所述初始数据。
在本实施例中，为了进行代码的自动化生成，首先需要获取携带有若干图层元信息的设计稿文件，并对设计稿文件进行数据加工，得到待处理图层信息，再对待处理图层信息进行信息提取和图层筛选，得到初始数据。具体地，设计稿文件是由若干图层元信息和资源文件组成的压缩文档，获取设计稿文件后，需要对其进行预处理，首先可以对设计稿文件进行数据加工，例如，将设计稿中携带的若干图层元信息解耦成实际图层，然后再对实际图层进行各类处理，如过滤不可见图层，合并必要图层，处理蒙层等，从而得到待处理图层信息；而后可以对待处理图层信息进行信息提取和图层筛选，从而得到预处理后的初始数据，其中，信息提取和图层筛选的过程包括图层信息提取、图层信息转化、无用图层检测、图层打平处理、成组信息筛选。
本申请通过对设计稿文件的预处理，提取了必要的图层信息并过滤掉了无用的数据，使得后续代码自动化生成的过程更为便捷，从而缩短了互联网金融产品的研发周期，提高了研发效率。
在本实施例的一些可选的实现方式中，在所述对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码的步骤之后，还包括：
接收开发者对应的用户端发出的操作指令；
响应于所述操作指令，对所述页面代码进行调试，得到调试后的目标代码；
根据所述目标代码，生成目标页面。
在本实施例中，得到页面代码后，还可以接收开发者对应的用户端发出的操作指令，并响应于操作指令，对页面代码进行调试，得到调试后的目标代码，再根据目标代码，生成目标页面。具体地，自动化生成页面代码的过程，其目的在于根据页面代码得到研发的互联网金融产品的产品页面，在得到页面代码后，可以由开发人员对其进行二次开发，即在用户端可以通过操作指令对其进行调试，再将调试后的代码作为目标代码，即可根据目标代码生成最终的目标页面。
本申请通过页面代码的二次开发，提高了页面代码对于设计稿文件的还原度，并提高了设计侧和开发侧双方的满意度，最终实现了降本增效。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种代码自动化生成系统的一个实施例，该系统实施例与图2所示的方法实施例相对应，该系统具体可以应用于各种电子设备中。
如图3所示，本实施例所述的代码自动化生成系统300包括：预处理模块301、第一生成模块302、布局优化模块303、第二生成模块304以及第三生成模块305。其中：
预处理模块301，用于获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据；
第一生成模块302，用于根据所述初始数据，生成规范协议；
布局优化模块303，用于根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据；
第二生成模块304，用于根据所述规范协议和所述代码结构表达数据，生成代码元数据；
第三生成模块305，用于对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码。
本申请提供的代码自动化生成系统，通过智能化地提取原始的设计稿文件中的相关数据，并生成标准化的规范协议和结构化的数据描述，最终实现了由设计稿文件到页面代码的自动转换，利用中间语言确保了设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率，降低了人力成本、物力成本和时间成本的损耗。
在本实施例的一些可选的实现方式中，布局优化模块303还用于：
对所述初始数据进行数据结构转换，得到第一结构数据；
采用所述空间布局算法，通过flexbox模型对所述第一结构数据进行行列分割推导，确定所述第一结构数据的空间分布；
采用所述投影布局算法，为行列分割推导完成的第一结构数据填充box-shadow属性，得到所述第二结构数据；
根据预设的样式计算流程对所述第二结构数据进行样式计算，得到所述代码结构表达数据。
本申请提供的代码自动化生成系统，通过对原始的设计稿文件进行结构化的数据描述，在设计稿文件到页面代码的转换过程中，提高了还原度，并提高了最终生成的页面代码的扩展性和可读性，从而确保设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率。
在本实施例的一些可选的实现方式中，第二生成模块304还用于：
获取所述代码结构表达数据对应的字节流；
按照所述规范协议对所述字节流进行解析和封包，得到所述代码元数据。
本申请提供的代码自动化生成系统，通过协议解析器按照协议规范生成代码元数据，使得获得的代码元数据具有统一的规范标准，确保了设计侧和开发侧的无障碍沟通，从而缩短了互联网金融产品的研发周期，提高了研发效率。
在本实施例的一些可选的实现方式中，第一生成模块302还用于：
根据所述初始数据建立标准化规则；
将所述标准化规则转换为所述规范协议。
本申请提供的代码自动化生成系统，通过在原始的设计稿文件中提取初始数据后，根据初始数据建立标准化规则，使得后续的数据转换和代码生成过程中，实现了统一的语言规范，作为设计侧和开发侧的中间语言，确保了双方的无障碍沟通，从而提高了研发效率。
在本实施例的一些可选的实现方式中，第三生成模块305还用于：
对所述代码元数据的各个元素节点进行节点描述，以添加各个所述元素节点对应的语义组合，得到所述节点描述数据；
根据所述节点描述数据进行代码生成，得到所述页面代码。
本申请提供的代码自动化生成系统，通过语义化处理，确保了由设计稿文件自动转换成的页面代码的可读性和拓展性，使其可以被二次开发，从而实现了设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率。
在本实施例的一些可选的实现方式中，预处理模块301还用于：
获取所述设计稿文件，对所述设计稿文件进行数据加工，得到待处理图层信息；
对所述待处理图层信息进行信息提取和图层筛选，得到所述初始数据。
本申请提供的代码自动化生成系统，通过对设计稿文件的预处理，提取了必要的图层信息并过滤掉了无用的数据，使得后续代码自动化生成的过程更为便捷，从而缩短了互联网金融产品的研发周期，提高了研发效率。
在本实施例的一些可选的实现方式中，代码自动化生成系统300还用于：
接收开发者对应的用户端发出的操作指令；
响应于所述操作指令，对所述页面代码进行调试，得到调试后的目标代码；
根据所述目标代码，生成目标页面。
本申请提供的代码自动化生成系统，通过页面代码的二次开发，提高了页面代码对于设计稿文件的还原度，并提高了设计侧和开发侧双方的满意度，最终实现了降本增效。
为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。
所述计算机设备4包括通过系统总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有组件41-43的计算机设备4，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。
所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备4的内部存储单元，例如该计算机设备4的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备4的外部存储设备，例如该计算机设备4上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备4的操作系统和各类应用软件，例如代码自动化生成方法的计算机可读指令等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器42在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备4的总体操作。本实施例中，所述处理器42用于运行所述存储器41中存储的计算机可读指令或者处理数据，例如运行所述代码自动化生成方法的计算机可读指令。
所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。
本申请提供的计算机设备，通过智能化地提取原始的设计稿文件中的相关数据，并生成标准化的规范协议和结构化的数据描述，最终实现了由设计稿文件到页面代码的自动转换，利用中间语言确保了设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率，降低了人力成本、物力成本和时间成本的损耗。
本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的代码自动化生成方法的步骤。
本申请提供的计算机可读存储介质，通过智能化地提取原始的设计稿文件中的相关数据，并生成标准化的规范协议和结构化的数据描述，最终实现了由设计稿文件到页面代码的自动转换，利用中间语言确保了设计侧和开发侧的无障碍沟通，缩短了互联网金融产品的研发周期，提高了研发效率，降低了人力成本、物力成本和时间成本的损耗。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。
显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。
Claims (10)
1.一种代码自动化生成方法，其特征在于，包括下述步骤：
获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据；
根据所述初始数据，生成规范协议；
根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据；
根据所述规范协议和所述代码结构表达数据，生成代码元数据；
对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码。
2.根据权利要求1所述的代码自动化生成方法，其特征在于，所述布局算法包括空间布局算法和投影布局算法，所述根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据的步骤，具体包括：
对所述初始数据进行数据结构转换，得到第一结构数据；
采用所述空间布局算法，通过flexbox模型对所述第一结构数据进行行列分割推导，确定所述第一结构数据的空间分布；
采用所述投影布局算法，为行列分割推导完成的第一结构数据填充box-shadow属性，得到所述第二结构数据；
根据预设的样式计算流程对所述第二结构数据进行样式计算，得到所述代码结构表达数据。
3.根据权利要求1所述的代码自动化生成方法，其特征在于，所述根据所述规范协议和所述代码结构表达数据，生成代码元数据的步骤，具体包括：
获取所述代码结构表达数据对应的字节流；
按照所述规范协议对所述字节流进行解析和封包，得到所述代码元数据。
4.根据权利要求1所述的代码自动化生成方法，其特征在于，所述根据所述初始数据，生成规范协议的步骤，具体包括：
根据所述初始数据建立标准化规则；
将所述标准化规则转换为所述规范协议。
5.根据权利要求1所述的代码自动化生成方法，其特征在于，所述对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码的步骤，具体包括：
对所述代码元数据的各个元素节点进行节点描述，以添加各个所述元素节点对应的语义组合，得到所述节点描述数据；
根据所述节点描述数据进行代码生成，得到所述页面代码。
6.根据权利要求1所述的代码自动化生成方法，其特征在于，所述获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据的步骤，具体包括：
获取所述设计稿文件，对所述设计稿文件进行数据加工，得到待处理图层信息；
对所述待处理图层信息进行信息提取和图层筛选，得到所述初始数据。
7.根据权利要求1至6任一项所述的代码自动化生成方法，其特征在于，在所述对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码的步骤之后，还包括：
接收开发者对应的用户端发出的操作指令；
响应于所述操作指令，对所述页面代码进行调试，得到调试后的目标代码；
根据所述目标代码，生成目标页面。
8.一种代码自动化生成系统，其特征在于，包括：
预处理模块，用于获取携带有若干图层元信息的设计稿文件，并对所述图层元信息进行预处理，得到预处理后的初始数据；
第一生成模块，用于根据所述初始数据，生成规范协议；
布局优化模块，用于根据预设的布局算法对所述初始数据进行布局优化，得到代码结构表达数据；
第二生成模块，用于根据所述规范协议和所述代码结构表达数据，生成代码元数据；
第三生成模块，用于对所述代码元数据进行语义化处理，得到语义化处理后的节点描述数据，并根据所述节点描述数据生成页面代码。
9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的代码自动化生成方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的代码自动化生成方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311073297.XA CN117111909A (zh) | 2023-08-23 | 2023-08-23 | 代码自动化生成方法、系统、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311073297.XA CN117111909A (zh) | 2023-08-23 | 2023-08-23 | 代码自动化生成方法、系统、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117111909A true CN117111909A (zh) | 2023-11-24 |
Family
ID=88801602
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311073297.XA Pending CN117111909A (zh) | 2023-08-23 | 2023-08-23 | 代码自动化生成方法、系统、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117111909A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117608559A (zh) * | 2024-01-24 | 2024-02-27 | 卡奥斯创智物联科技有限公司 | 页面显示代码生成方法、装置、电子设备、存储介质 |
-
2023
- 2023-08-23 CN CN202311073297.XA patent/CN117111909A/zh active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117608559A (zh) * | 2024-01-24 | 2024-02-27 | 卡奥斯创智物联科技有限公司 | 页面显示代码生成方法、装置、电子设备、存储介质 |
| CN117608559B (zh) * | 2024-01-24 | 2024-04-19 | 卡奥斯创智物联科技有限公司 | 页面显示代码生成方法、装置、电子设备、存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112015430B (zh) | JavaScript代码翻译方法、装置、计算机设备及存储介质 | |
| WO2021017735A1 (zh) | 一种智能合约的形式化验证方法、电子装置及存储介质 | |
| CN115617327A (zh) | 低代码页面搭建系统、方法及计算机可读存储介质 | |
| CN117033249B (zh) | 一种测试用例生成方法、装置、计算机设备及存储介质 | |
| CN108334585A (zh) | 一种网页爬虫方法、装置以及电子设备 | |
| CN111125598A (zh) | 数据智能查询方法、装置、设备及存储介质 | |
| CN109657121A (zh) | 一种基于网络爬虫的Web页面信息采集方法及装置 | |
| CN113032708A (zh) | 一种无代码Web开发系统 | |
| CN113377373A (zh) | 基于解析引擎的页面加载方法、装置、计算机设备及介质 | |
| CN117111909A (zh) | 代码自动化生成方法、系统、计算机设备及存储介质 | |
| CN114996619A (zh) | 一种页面显示的方法、装置、计算机设备及存储介质 | |
| CN114625349A (zh) | 前端页面生成方法、装置、终端设备及存储介质 | |
| CN114398138B (zh) | 界面生成方法、装置、计算机设备和存储介质 | |
| US10956659B1 (en) | System for generating templates from webpages | |
| CN116644213A (zh) | Xml文件读取方法、装置、设备及存储介质 | |
| CN116860856A (zh) | 一种财务数据处理方法、装置、计算机设备及存储介质 | |
| JP7309811B2 (ja) | データ注釈方法、装置、電子機器および記憶媒体 | |
| CN113050921A (zh) | 一种网页转换方法、装置、存储介质和计算机设备 | |
| CN113741864A (zh) | 基于自然语言处理的语义化服务接口自动设计方法与系统 | |
| CN115659087B (zh) | 页面渲染方法、设备及存储介质 | |
| CN108664511B (zh) | 获取网页信息方法和装置 | |
| CN115577689A (zh) | 一种表格组件的生成方法、装置、设备及介质 | |
| CN116363686B (zh) | 一种在线社交网络视频平台来源检测方法及其相关设备 | |
| CN117492752A (zh) | 一种页面动态配置方法、装置、计算机设备及存储介质 | |
| CN107179900A (zh) | Doxml语言 |
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 |