CN112181399A - 一种基于数据解析构建模型生成前端代码的方法 - Google Patents

Abstract

本发明提供了一种基于数据解析构建模型来生成前端代码的方法，该方法包括以下步骤：根据前端框架和组件库构建出框架模板和组件模型库，制定配置数据解析策略和前端页面合成策略；配置前端页面框架模板和组件模型数据，按照数据解析策略把配置数据解析成为前端页面参数对象的集合，此集合对应要生成的前端众多的页面；按照前端页面合成策略对照框架模板和组件模型库将前端页面参数对象的集合合成为前端页面对象的集合，这些前端页面对象就是要生成页面的代码；前端页面对象的集合生成为前端页面文件、页面路由文件、样式文件和用于处理业务逻辑的服务文件。应用该方法，只需配置参数，就可以生成前端代码，完成前端页面代码编写的大部分工作，实现前端框架和组件库的快速使用。

Description

一种基于数据解析构建模型生成前端代码的方法

技术领域

本发明提供了一种生成前端代码的方法，具体涉及一种基于数据解析构建模型来生成前端结构统一性代码的技术，属于编程语言领域。

背景技术

随着计算机编程的快速发展，各种编程语言不断更新，新的框架和组件库也是层出不穷，程序的设计有了更多的选择，可根据实际情况选择更优的方案；但与此同时，对程序开发人员的要求也在逐渐提高，不仅要求开发人员要懂得数种编程语言，而且还要会使用当下流行的框架和组件库。这对开发人员来说不可谓不是一个巨大的挑战，他们进入一个新的项目，熟悉一个新的框架和组件库，往往需要花费数个月时间，这在当下是一个普遍存在的现象。针对这种现象，如何让开发人员简易快捷的使用前端框架和组件库，减少开发人员的工作量，成为了一个急切需要解决的问题。

发明内容

该发明提供了一种可以自动生成使用不同前端框架和组件库的规范统一性代码的方法，具体方案是：选定前端框架和组件库构建出框架模板和组件模型库，制定配置数据解析策略和前端页面合成策略，然后配置方法所需数据，根据配置数据解析策略把数据解析成为前端页面参数对象的集合，再应用前端页面合成策略对照框架模板和组件模型库将前端页面参数对象的集合合成为前端页面对象的集合，最后把前端页面对象的集合生成为前端页面文件、页面路由文件、样式文件和用于处理业务逻辑的服务文件。

在构建组件模型库实施中：选择一个前端组件库，在其中选择需要在开发时应用的组件，然后基于此来设计组件模型库。组件模型库包含了若干个组件模型，每个组件模型由组件显示代码、组件参数和组件方法构成，且对应唯一一个ID标识，此标识对应前端组件库的唯一一种组件。

在构建框架模板实施中：选择一种前端框架，剖析框架关于前端页面内容的展示、数据的定义与更新和浏览器页面触发事件的处理，将每个前端页面公共的代码和具体组件所需的代码划分开来，把公共代码写入当前框架的模板，并在模板中为具体组件的特殊代码预留好代码填充位置。

在制定配置数据解析策略实施中：数据是针对于每个前端页面需要的框架模板和组件模型集合来进行配置，这些数据储存于XML文件中，解析XML中的节点，把节点的值组合成一个个前端页面参数对象；每个前端页面参数对象包括框架模板参数和若干个组件模型参数的集合。

在制定前端页面合成策略实施中：前端页面的合成分为框架模板参数的嵌入、组件模型参数集合的转化和组件模型集合的嵌入三个过程。框架模板参数嵌入模板构建时预留的位置，具体嵌入方法是用模板参数替换模板构建时预留的标识符；组件模型参数有一个标识ID，对应组件模型库中每个组件模型唯一的ID标识，基于此，每个模型参数可以转化成一个组件模型；组件模型集合在嵌入框架模板时，需要把每个组件模型的组件显示代码、组件参数和组件方法分开整理到三个集合中，三个集合替换掉框架模板中预留的标识符就完成了一个前端页面的合成。

在生成前端代码文件实施中：生成文件时，框架模板参数内含有要生成文件的路径，在指定路径下生成若干个与前端页面对象集合对应的前端页面文件，同时在相同目录下生成一个页面样式文件、一个业务逻辑处理文件和一个控制页面跳转的路由文件。

附图说明

图1本发明实施基于数据解析构建模型生成前端代码方法的实现流程示意图。

图2本发明实施组件模型库构建的结构示意图。

图3本发明实施框架模板构建的结构示意图。

图4本发明实施框架参数配置截图。

图5本发明实施组件模型参数配置截图。

具体实施方式

本发明提供了一种基于数据分析构建模型来生成前段代码的方法，在下面实例中将结合附图对本发明进行详细的阐述。

此实例将生成一个简单功能的数个页面文件和相应的辅助文件；在实现时选择了前端框架vue、组件库vux来构建框架模板和组件模型库，选择业务流程管理工具activiti-flow来配置数据。首次构建框架模板和组件模型库，以后的工作只需要配置数据，就可以使用本发明的方法完成前端代码的生成。具体步骤如下：

1、构建vue框架模板

此模板是一个vue文件，根据vue的语法和代码结构，确定模板的固定代码部分，模板中的可变更的代码部分用替换符来占用，在生成页面代码时替换模板参数和组件模型参数对象，部分替换符含义如下，

2、构建vux组件模型库

选择vux常用的Xinput、Xnumber、Xswitch、Xcell等组件，按照vux的组件使用方法来建立，每个组件模型分为组件页面显示代码、组件参数和组件方法三部分，组件页面显示代码部分根据vux在vue页面中的使用来构建，也可以构建div和自定义组件来满足复杂的功能需求，具体设计将在配置组件参数时进行详细说明，部分组件含义如下：

3、配置数据

在activiti-flow中配置的数据可分为四部分，分别是activiti-flow的id、若干个userTask、若干个sequenceFlow和每个userTask的form，其含义如下：

1）userTask：每个userTask对应一个vue页面。在其中需要配置id，name，Form key，Category和Form（form的配置将在后面详细介绍）五部分。其含义如下：

2）sequenceFlow：sequenceFlow的配置分为两种，一种是由一个userTask发出连接另一个userTask，另一种是由一个userTask发出一个getWay而发散出的不同分支。这两种sequenceFlow会被看做是源userTask对应的vue页面上button，点击该button后页面跳转到目的userTask对应的目的页面，sequenceFlow在数据解析时会被解析成为一个组件模型参数对象，对应的组件模型是button。需要配置两个地方，分别是id和name，其含义如下：

3）form：在userTask的form中配置对应vue页面的组件，如：input、number、info、div、usercomponent（自定义组件）。这些组件模型共有的三个配置参数是id、name和type，其含义如下：

4、数据解析

在activiti-flow界面配置的数据会生成xml文件，将此文件解析成数个框架模板参数对象和与每个框架模板对象对应的组件模型参数集合；对照vux，对于需要参数或者方法的组件，在解析时将会在对应组件模型参数对象中加入所需参数或方法。

5、生成代码

在实现代码生成时，会生成两部分文件，分别是前端页面文件和其他辅助文件。将这些文件根据模板参数对象中路径参数创建到指定目录下。

1）前端页面文件：逐个将解析的框架模板参数对象按照框架模板生成为一个vue文件，生成时用对应模板参数和组件模型参数对象集合把框架模板中的替换符依次替换掉。

2）其他文件：生成前端页面对应的CSS文件、处理业务逻辑的Service文件、路由Route文件。

Claims (5)

1.一种基于数据解析构建模型来生成前端代码的方法，其特征在于：构建前端框架模板和组件模型库，解析配置参数的XML文件组合出一个数据源，最后将数据源转换成前端代码。

2.根据权利要求1所述的一种基于数据解析构建模型来生成前端代码的方法，其特征在于：根据前端组件库构建组件模型库，将每个组件模型设计为组件页面应用代码、组件参数和组件方法三部分。

3.根据权利要求1所述的一种基于数据解析构建模型来生成前端代码的方法，其特征在于：根据前端框架构建框架模板，将框架模板在内容上设计为前端页面内容的展示、数据的定义与更新和页面触发事件的处理三部分，在结构上设计为固定代码和可更改代码两部分。

4.根据权利要求1所述的一种基于数据解析构建模型来生成前端代码的方法，其特征在于：配置数据保存于XML文件中，解析XML文件中的节点，获得若干对应框架模板的类型、名称和路径的参数对象，和若干对应组件模型的id、名称和类型的参数对象。

5.根据权利要求1所述的一种基于数据解析构建模型来生成前端代码的方法，其特征在于：生成页面时采用预置替换规则，在构建框架模板时预置了替换符，用框架参数和组件模型参数把替换符替换掉生成出页面。

Images