界面构建方法、装置及计算机可读存储介质与流程

本发明涉及信息处理领域，更具体而言，涉及一种界面构建方法、一种界面构建装置及一种计算机可读存储介质。

背景技术：

对于现在的大型企业，经常会因为业务的扩展导致现有软件无法满足业务的需求，比如业务单据需要增加字段或者需要增加新的页面等，在对这些看似很小的需求进行修改时，相关技术中往往没有成熟的产品支撑而是仅粗暴的对原有产品进行修改，而最终的结果可能会对原产品的稳定性产生不可预测的影响。

技术实现要素：

本发明旨在至少解决现有技术中存在的技术问题之一。

本发明的一个方面提供了一种界面构建方法。

本发明的一个方面提供了一种界面构建装置。

本发明的一个方面提供了一种计算机可读存储介质。

鉴于上述，本发明提供的一种界面构建方法，界面构建方法包括：接收框架请求数据，将框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型；通过模板设计组件将元数据模型进行模板设置，以生成模板数据；将模板数据输入至界面渲染组件进行界面渲染以构建界面框架。

本发明提供的界面构建方法，首先会接收到框架请求数据，该框架请求数据为用户在修改构建界面时，对界面框架进行设计的请求数据，该数据反映出用户对界面的设计要求，随后将框架请求数据输入至元数据设计组件中，元数据设计组件为整个方案的核心，其主要功能为设计元数据模型，即将框架请求数据转化为与之相对应的元数据模型，具体地，元数据为描述数据的数据，将用户输入的框架请求数据通过元数据设计组件描述为包括各项元数据的元数据模型，使得该元数据模型可将框架请求数据通过至少一个元数据进行表述；将元数据模型输入至模板设计组件中，通过模板设计组件将设计好的元数据模型进行模板设计，以生成模板数据，该模板数据会将用户原始输入的框架请求数据形成相对应的模板，以使得模板数据会对框架请求数据中的字段是否显示、是否可编辑、字体颜色等信息进行模板化显示，以便后续将框架请求数据相对应的内容请求数据按照该模板数据在界面上进行便捷显示。最后再将模板数据输入至界面渲染组件，进行界面渲染以构建界面框架，界面渲染组件根据与后台约定好的数据格式渲染界面dom元素，以展示用户通过框架请求数据进行构建的界面，优选地，界面渲染组件最终会生成html5界面；本发明基于元数据模型驱动，可以方便地对元数据模型进行修改，不仅可以快速地生成html5界面，还能针对不同用户(包括不同角色和个人)输入的框架请求数据以生成个性化的界面，对原有的软件系统没有任何影响，既保证了原有软件系统的稳定性又可以最大程度上满足了用户对个性化界面的需求，模板数据的产生可批量快速生成风格一致的界面，极大程度上缩短了产品的交付周期，减少了研发和管理成本。

优选地，界面渲染组件可支持列表、卡片、枚举控件、字符型控件、时间日期控件等各种控件形式，并支持自由扩展。同时在界面渲染组件内预置了不同的css(cascadingstylesheets，层叠样式表)的样式，方便用户对界面风格进行切换，也可以用自定义css样式的形式对样式进行扩展。

另外，根据本发明上述技术方案提供的界面构建方法还具有如下附加技术特征：

在上述任一技术方案中，优选地，将模板数据输入至界面渲染组件进行界面渲染以构建界面框架的步骤之后，还包括：获取内容请求数据，将内容请求数据发送至数据加载组件；在数据加载组件中查询与内容请求数据相对应的业务数据；将业务数据输入至界面渲染组件按照界面框架进行界面渲染。

在该技术方案中，在将模板数据输送至界面渲染组件进行界面渲染以构建界面框架之后，即完成了用户在构建界面时的框架设计需求，随后会对界面的内容进行具体设计：获取内容请求数据，随后将内容请求数据发送至数据加载组件，并且在数据加载组件中查询与内容请求数据相对应的业务数据，比如采购系统需要将采购订单的数据查询到业务，即数据加载组件可以根据请求对照查询出用户需求的业务数据，无需用户手动输入；最终再将业务数据输入至界面渲染组件按照界面框架进行界面渲染，并且由于各项数据均根据元数据进行操作，因此其业务数据与生成界面框架的模板数据具有一一对应的关系，在对其进行界面渲染时，即可实现内容与模板的一一对应，以形成界面构建后的最终效果。

具体地，业务数据加载组件也同样需要根据元数据对数据进行操作，比如增加、删除和修改等，元数据是orm(objectrelationalmapping，对象关系映射)框架的基础。

在上述任一技术方案中，优选地，将框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型的步骤，包括：将框架请求数据进行数据格式转化；将转化格式后的框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型；将模板数据输入至界面渲染组件进行界面渲染以构建界面框架的步骤，包括：将模板数据进行数据格式转化，将转化格式后的模板数据进行界面渲染以构建界面框架。

在该技术方案中，提供了一种获取元数据模型的具体方案，首先在获取到框架请求数据后将框架请求数据通过数据转换组件进行数据格式转化，由于框架请求数据的数据格式可能为后台组件无法识别的格式，因此需转换成后台组件可以识别的数据格式，随后将转化格式后的框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型，此时即可保证元数据设计组件可以识别框架请求数据；相对应地，在将模板数据输送至界面渲染组件进行界面渲染以构建界面框架时，为了保证组件间的数据格式具有一致性，也会将模板数据通过数据转换组件进行数据格式转化，将转化格式后的模板数据进行界面渲染以构建界面框架，以保证渲染可顺利完成。

具体地，数据转换组件可以将元数据模型、模板数据、和业务数据信息转化为html5界面渲染组件可以识别的数据类型，比如可以将后台数据统一转化为一定格式的json数据，方便界面渲染组件进行渲染。同时也可以将界面渲染组件的请求json格式数据转化为其他组件可以识别的数据格式。

在上述任一技术方案中，优选地，将内容请求数据发送至数据加载组件的步骤，包括：将内容请求数据进行数据格式转化；将转化格式后的内容请求数据发送至数据加载组件；将业务数据输入至界面渲染组件按照界面框架进行界面渲染的步骤，包括：将业务数据进行数据格式转化；将转化格式后的将业务数据输入至界面渲染组件按照界面框架进行界面渲染。

在该技术方案中，在将内容请求数据发送至数据加载组件时，为了保证各个组件之间数据格式的统一，首先将内容请求数据通过数据转换组件进行数据格式转化，随后将转化格式后的内容请求数据发送至数据加载组件，以保证数据加载组件可顺利识别出内容请求数据；相对应地，将业务数据输送至界面渲染组件按照界面框架进行界面渲染时，为了保证组件间的数据格式具有一致性，也会将业务数据通过数据转换组件进行数据格式转化，将转化格式后的将业务数据输入至界面渲染组件按照界面框架进行界面渲染，以保证渲染可顺利完成。

具体地，数据转换组件可以将元数据模型、模板数据、和业务数据信息转化为html5界面渲染组件可以识别的数据类型，比如可以将后台数据统一转化为一定格式的json数据，方便界面渲染组件进行渲染。同时也可以将界面渲染组件的请求json格式数据转化为其他组件可以识别的数据格式。

在上述任一技术方案中，优选地，将框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型的步骤包括：读取框架请求数据中涉及到的元数据；按照元数据的种类在元数据设计组件中匹配并生成元数据模型。

在该技术方案中，提供了一种获取框架请求数据中对应的元数据模型的具体步骤，首先读取框架请求数据中涉及到的元数据，即将框架请求数据中所涉及到的各项数据均通过元数据进行表述，随后按照元数据的种类在元数据设计组件的数据库中进行匹配，以获取到此次框架请求数据对应的元数据模型，具体地，元数据设计组件中的数据库为包括各项元数据的一个总模型，各个框架请求数据或许并非包含了数据库中的各项元数据，因此会按照框架请求数据的元数据的种类在数据库中剔除不包括的元数据，使得将数据库中涉及到的元数据生成元数据模型。

在上述任一技术方案中，优选地，通过模板设计组件将元数据模型进行模板设置，以生成模板数据的步骤，包括：通过模板设计组件获取元数据模板中的内容信息及板式信息，内容信息包括字段数据、字体数据、字号数据和颜色数据，板式信息为针对各项内容信息进行显示与否的数据；依照内容信息与板式信息在模板设计组件中生成模板数据，在模板数据中将各项内容信息依照相对应的板式信息进行模板展示。

在该技术方案中，提供了一种生成模板数据的具体方案，首先通过模板设计组件获取元数据模板中的内容信息及板式信息，其中内容信息包括字段数据、字体数据、字号数据、颜色数据，板式信息为针对各项内容信息进行显示与否的数据，即可能为对内容信息中的一项进行展示，也可能对另一项进行隐藏；随后在模板设计组件中根据内容信息与板式信息生成模板数据，以使得在模板数据中将各项内容信息依照相对应的板式信息进行模板展示，优选地，模板属于业务数据的展示层。

在上述任一技术方案中，优选地，元数据模型中包括框架请求数据的实体的类型与框架请求数据的实现的接口、框架请求数据中字段的类型、框架请求数据中字段的精度、框架请求数据中字段的权限、框架请求数据中字段的序列化与否的信息和框架请求数据中字段的空缺与否的信息。

在该技术方案中，将元数据模型中设置包括各项内容，具体有框架请求数据的实体的类型(聚合实体或单体)与框架请求数据的实现的接口、框架请求数据中字段的类型、框架请求数据中字段的精度、框架请求数据中字段的权限、框架请求数据中字段的序列化与否的信息、框架请求数据中字段的空缺与否的信息。

优选地，元数据是描述数据的数据，元数据模型包含了字段的类型(引用类型、数值型或者字符型等)、字段的精度、字段的权限、字段对应数据表字段的名称等，元数据是一切业务操作的基础；同时元数据中还可存储实体数据。

根据本发明的又一方面提供了一种界面构建装置，界面构建装置包括：元数据设计组件，用于接收框架请求数据，通过将输入的框架请求数据获取框架请求数据中对应的元数据模型；模板设计组件，用于将元数据模型进行模板设置，以生成模板数据；界面渲染组件，用于将模板数据进行界面渲染以构建界面框架。

本发明提供的界面构建装置包括元数据设计组件、模板设计组件、界面渲染组件，元数据设计组件会接收到框架请求数据，该框架请求数据为用户在修改构建界面时，对界面框架进行设计的请求数据，该数据反映出用户对界面的设计要求，随后将框架请求数据输入至元数据设计组件中，元数据设计组件为整个方案的核心，其主要功能为设计元数据模型，即将框架请求数据转化为与之相对应的元数据模型，具体地，元数据为描述数据的数据，将用户输入的框架请求数据通过元数据设计组件描述为包括各项元数据的元数据模型，使得该元数据模型可将框架请求数据通过至少一个元数据进行表述；将元数据模型输入至模板设计组件中，通过模板设计组件将设计好的元数据模型进行模板设计，以生成模板数据，该模板数据会将用户原始输入的框架请求数据形成相对应的模板，以使得模板数据会对框架请求数据中的字段是否显示、是否可编辑、字体颜色等信息进行模板化显示，以便后续将框架请求数据相对应的内容请求数据按照该模板数据在界面上进行便捷显示。最后再将模板数据输入至界面渲染组件，进行界面渲染以构建界面框架，界面渲染组件根据与后台约定好的数据格式渲染界面dom元素，以展示用户通过框架请求数据进行构建的界面，优选地，界面渲染组件最终会生成html5界面；本发明基于元数据模型驱动，可以方便地对元数据模型进行修改，不仅可以快速地生成html5界面，还能针对不同用户(包括不同角色和个人)输入的框架请求数据以生成个性化的界面，对原有的软件系统没有任何影响，既保证了原有软件系统的稳定性又可以最大程度上满足了用户对个性化界面的需求，模板数据的产生可批量快速生成风格一致的界面，极大程度上缩短了产品的交付周期，减少了研发和管理成本。

优选地，界面渲染组件可支持列表、卡片、枚举控件、字符型控件、时间日期控件等各种控件形式，并支持自由扩展。同时在界面渲染组件内预置了不同的css(cascadingstylesheets，层叠样式表)的样式，方便用户对界面风格进行切换，也可以用自定义css样式的形式对样式进行扩展。

另外，根据本发明上述技术方案提供的界面构建装置还具有如下附加技术特征：

在上述任一技术方案中，优选地，界面构建装置还包括：数据加载组件，用于接收内容请求数据，查询与内容请求数据相对应的业务数据；界面渲染组件还用于将业务数据按照界面框架进行界面渲染。

在该技术方案中，在将模板数据输入至界面渲染组件进行界面渲染以构建界面框架之后，即完成了用户在构建界面时的框架设计需求，随后会对界面的内容进行具体设计：获取内容请求数据，随后将内容请求数据发送至数据加载组件，并且在数据加载组件中查询与内容请求数据相对应的业务数据，比如采购系统需要将采购订单的数据查询到业务，即数据加载组件可以根据请求对照查询出用户需求的业务数据，无需用户手动输入；最终再将业务数据输入至界面渲染组件按照界面框架进行界面渲染，并且由于各项数据均根据元数据进行操作，因此其业务数据与生成界面框架的模板数据具有一一对应的关系，在对其进行界面渲染时，即可实现内容与模板的一一对应，以形成界面构建后的最终效果。

具体地，业务数据加载组件也同样需要根据元数据对数据进行操作，比如增加、删除和修改等，元数据是orm(objectrelationalmapping，对象关系映射)框架的基础。

在上述任一技术方案中，优选地，界面构建装置还包括：数据转换组件，数据转换组件用于将框架请求数据进行数据格式转化，将转化格式后的框架请求数据输入至元数据设计组件；数据转换组件还用于将框架请求数据输入至元数据设计组件；数据转换组件还用于将模板数据进行数据格式转化，将转化格式后的模板数据发送至界面渲染组件。

在该技术方案中，提供了一种获取元数据模型的具体方案，界面构建装置还包括数据转换组件，在获取到框架请求数据后将框架请求数据通过数据转换组件进行数据格式转化，由于框架请求数据的数据格式可能为后台组件无法识别的格式，因此需转换成后台组件可以识别的数据格式，随后将转化格式后的框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型，此时即可保证元数据设计组件可以识别框架请求数据；相对应地，在将模板数据输入至界面渲染组件进行界面渲染以构建界面框架时，为了保证组件间的数据格式具有一致性，也会将模板数据通过数据转换组件进行数据格式转化，将转化格式后的模板数据进行界面渲染以构建界面框架，以保证渲染可顺利完成。

具体地，数据转换组件可以将元数据模型、模板数据、和业务数据信息转化为html5界面渲染组件可以识别的数据类型，比如可以将后台数据统一转化为一定格式的json数据，方便界面渲染组件进行渲染。同时也可以将界面渲染组件的请求json格式数据转化为其他组件可以识别的数据格式。

在上述任一技术方案中，优选地，数据转换组件还用于将内容请求数据进行数据格式转化，将转化格式后的内容请求数据发送至数据加载组件；数据转换组件还用于将业务数据进行数据格式转化，将转化格式后的将业务数据输入至界面渲染组件按照界面框架进行界面渲染。

在该技术方案中，在将内容请求数据发送至数据加载组件时，为了保证各个组件之间数据格式的统一，首先将内容请求数据通过数据转换组件进行数据格式转化，随后将转化格式后的内容请求数据发送至数据加载组件，以保证数据加载组件可顺利识别出内容请求数据；相对应地，将业务数据输入至界面渲染组件按照界面框架进行界面渲染时，为了保证组件间的数据格式具有一致性，也会将业务数据通过数据转换组件进行数据格式转化，将转化格式后的将业务数据输入至界面渲染组件按照界面框架进行界面渲染，以保证渲染可顺利完成。

具体地，数据转换组件可以将元数据模型、模板数据、和业务数据信息转化为html5界面渲染组件可以识别的数据类型，比如可以将后台数据统一转化为一定格式的json数据，方便界面渲染组件进行渲染。同时也可以将界面渲染组件的请求json格式数据转化为其他组件可以识别的数据格式。

在上述任一技术方案中，优选地，元数据设计组件还用于读取框架请求数据中涉及到的元数据，按照元数据的种类在元数据设计组件中匹配并生成元数据模型。

在该技术方案中，提供了一种获取框架请求数据中对应的元数据模型的具体步骤，首先读取框架请求数据中涉及到的元数据，即将框架请求数据中所涉及到的各项数据均通过元数据进行表述，随后按照元数据的种类在元数据设计组件的数据库中进行匹配，以获取到此次框架请求数据对应的元数据模型，具体地，元数据设计组件中的数据库为包括各项元数据的一个总模型，各个框架请求数据或许并非包含了数据库中的各项元数据，因此会按照框架请求数据的元数据的种类在数据库中剔除不包括的元数据，使得将数据库中涉及到的元数据生成元数据模型。

在上述任一技术方案中，优选地，模板设计组件还用于通过模板设计组件获取元数据模板中的内容信息及板式信息，内容信息包括字段数据、字体数据、字号数据、颜色数据，板式信息为针对各项内容信息进行显示与否的数据；依照内容信息与板式信息在模板设计组件中生成模板数据，在模板数据中将各项内容信息依照相对应的板式信息进行模板展示。

在该技术方案中，提供了一种生成模板数据的具体方案，首先通过模板设计组件获取元数据模板中的内容信息及板式信息，其中内容信息包括字段数据、字体数据、字号数据、颜色数据，板式信息为针对各项内容信息进行显示与否的数据，即可能为对内容信息中的一项进行展示，也可能对另一项进行隐藏；随后在模板设计组件中根据内容信息与板式信息生成模板数据，以使得在模板数据中将各项内容信息依照相对应的板式信息进行模板展示，优选地，模板属于业务数据的展示层。

在上述任一技术方案中，优选地，元数据模型中包括框架请求数据的实体的类型与实现的接口、框架请求数据中字段的类型、框架请求数据中字段的精度、框架请求数据中字段的权限、框架请求数据中字段的序列化与否的信息、框架请求数据中字段的空缺与否的信息。

在该技术方案中，将元数据模型中设置包括各项内容，具体有框架请求数据的实体的类型(聚合实体或单体)与框架请求数据的实现的接口、框架请求数据中字段的类型、框架请求数据中字段的精度、框架请求数据中字段的权限、框架请求数据中字段的序列化与否的信息、框架请求数据中字段的空缺与否的信息。

优选地，元数据是描述数据的数据，元数据模型包含了字段的类型(引用类型、数值型或者字符型等)、字段的精度、字段的权限、字段对应数据表字段的名称等，元数据是一切业务操作的基础；同时元数据中还可存储实体数据。

本发明的一个方面提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现如上述任一项界面构建方法的步骤，因此具有上述任一项界面构建方法的有益效果，在此不再赘述。

根据本发明的附加方面和优点将在下面的描述部分中给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1示出了本发明的一个实施例提供的界面构建方法的一个流程示意图；

图2示出了本发明的一个实施例提供的界面构建方法的又一个流程示意图；

图3示出了本发明的一个实施例提供的界面构建方法的又一个流程示意图；

图4示出了本发明的一个实施例提供的界面构建方法的又一个流程示意图；

图5示出了本发明的一个实施例提供的界面构建装置的一个结构示意图；

图6示出了本发明的一个实施例提供的界面构建方法的又一个流程示意图；

图7示出了本发明的一个实施例提供的界面构建方法中数据转换组件进行数据格式转化过程的示意图；

图8示出了本发明的一个实施例提供的界面构建方法的又一个流程示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

下面参照图1至图8来描述根据本发明的实施例提供的界面构建方法、界面构建装置及一种计算机可读存储介质。

图1示出了根据本发明的实施例的界面构建方法的流程示意图。

如图1所示，根据本发明的一个实施例的界面构建方法，包括：

s102，接收框架请求数据，将框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型；

s104，通过模板设计组件将元数据模型进行模板设置，以生成模板数据；

s106，将模板数据输入至界面渲染组件进行界面渲染以构建界面框架。

本发明提供的界面构建方法，首先会接收到框架请求数据，该框架请求数据为用户在修改构建界面时，对界面框架进行设计的请求数据，该数据反映出用户对界面的设计要求，随后将框架请求数据输入至元数据设计组件中，元数据设计组件为整个方案的核心，其主要功能为设计元数据模型，即将框架请求数据转化为与之相对应的元数据模型，具体地，元数据为描述数据的数据，将用户输入的框架请求数据通过元数据设计组件描述为包括各项元数据的元数据模型，使得该元数据模型可将框架请求数据通过至少一个元数据进行表述；将元数据模型输入至模板设计组件中，通过模板设计组件将设计好的元数据模型进行模板设计，以生成模板数据，该模板数据会将用户原始输入的框架请求数据形成相对应的模板，以使得模板数据会对框架请求数据中的字段是否显示、是否可编辑、字体颜色等信息进行模板化显示，以便后续将框架请求数据相对应的内容请求数据按照该模板数据在界面上进行便捷显示。最后再将模板数据输入至界面渲染组件，进行界面渲染以构建界面框架，界面渲染组件根据与后台约定好的数据格式渲染界面dom元素，以展示用户通过框架请求数据进行构建的界面，优选地，界面渲染组件最终会生成html5界面；本发明基于元数据模型驱动，可以方便地对元数据模型进行修改，不仅可以快速地生成html5界面，还能针对不同用户(包括不同角色和个人)输入的框架请求数据以生成个性化的界面，对原有的软件系统没有任何影响，既保证了原有软件系统的稳定性又可以最大程度上满足了用户对个性化界面的需求，模板数据的产生可批量快速生成风格一致的界面，极大程度上缩短了产品的交付周期，减少了研发和管理成本。

优选地，界面渲染组件可支持列表、卡片、枚举控件、字符型控件、时间日期控件等各种控件形式，并支持自由扩展。同时在界面渲染组件内预置了不同的css(cascadingstylesheets，层叠样式表)的样式，方便用户对界面风格进行切换，也可以用自定义css样式的形式对样式进行扩展。

图2示出了根据本发明的实施例的界面构建方法的流程示意图。

如图2所示，根据本发明的一个实施例的界面构建方法，包括：

s202，接收框架请求数据，将框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型；

s204，通过模板设计组件将元数据模型进行模板设置，以生成模板数据；

s206，将模板数据输入至界面渲染组件进行界面渲染以构建界面框架；

s208，获取内容请求数据，将内容请求数据发送至数据加载组件；

s210，在数据加载组件中查询与内容请求数据相对应的业务数据；

s212，将业务数据输入至界面渲染组件按照界面框架进行界面渲染。

在该实施例中，在将模板数据输送至界面渲染组件进行界面渲染以构建界面框架之后，即完成了用户在构建界面时的框架设计需求，随后会对界面的内容进行具体设计：获取内容请求数据，随后将内容请求数据发送至数据加载组件，并且在数据加载组件中查询与内容请求数据相对应的业务数据，比如采购系统需要将采购订单的数据查询到业务，即数据加载组件可以根据请求对照查询出用户需求的业务数据，无需用户手动输入；最终再将业务数据输入至界面渲染组件按照界面框架进行界面渲染，并且由于各项数据均根据元数据进行操作，因此其业务数据与生成界面框架的模板数据具有一一对应的关系，在对其进行界面渲染时，即可实现内容与模板的一一对应，以形成界面构建后的最终效果。

具体地，业务数据加载组件也同样需要根据元数据对数据进行操作，比如增加、删除和修改等，元数据是orm(objectrelationalmapping，对象关系映射)框架的基础。

如图6和图8所示为各个部件在进行界面构建方法时的流程示意图，其中，数据源组件包括元数据设计组件、模板设计组件、业务数据加载组件，数据源组件是本发明可以以插件形式运行或者独立运行的关键所在，数据源可以是本地数据源也可以是异构系统提供的数据源，数据源是指数据的来源，数据可以来源于一个系统也可以来源于多个系统，这样就可以将异构系统封装成为一个或者多个数据源。

图3示出了根据本发明的实施例的界面构建方法的流程示意图。

如图3所示，根据本发明的一个实施例的界面构建方法，包括：

s302，接收框架请求数据，将框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型；

s304，将框架请求数据进行数据格式转化；

s306，将转化格式后的框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型；

s308，将模板数据进行数据格式转化，将转化格式后的模板数据进行界面渲染以构建界面框架。

在该实施例中，提供了一种获取元数据模型的具体方案，首先在获取到框架请求数据后将框架请求数据通过数据转换组件进行数据格式转化，由于框架请求数据的数据格式可能为后台组件无法识别的格式，因此需转换成后台组件可以识别的数据格式，随后将转化格式后的框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型，此时即可保证元数据设计组件可以识别框架请求数据；相对应地，在将模板数据输入至界面渲染组件进行界面渲染以构建界面框架时，为了保证组件间的数据格式具有一致性，也会将模板数据通过数据转换组件进行数据格式转化，将转化格式后的模板数据进行界面渲染以构建界面框架，以保证渲染可顺利完成。

具体地，数据转换组件可以将元数据模型、模板数据、和业务数据信息转化为html5界面渲染组件可以识别的数据类型，如图7所示，比如可以将后台数据统一转化为一定格式的json数据，方便界面渲染组件进行渲染。同时也可以将界面渲染组件的请求json格式数据转化为其他组件可以识别的数据格式。

在本发明提供的一个实施例中，优选地，将内容请求数据发送至数据加载组件的步骤，包括：将内容请求数据进行数据格式转化；将转化格式后的内容请求数据发送至数据加载组件；将业务数据输入至界面渲染组件按照界面框架进行界面渲染的步骤，包括：将业务数据进行数据格式转化；将转化格式后的将业务数据输入至界面渲染组件按照界面框架进行界面渲染。

在该实施例中，在将内容请求数据发送至数据加载组件时，为了保证各个组件之间数据格式的统一，首先将内容请求数据通过数据转换组件进行数据格式转化，随后将转化格式后的内容请求数据发送至数据加载组件，以保证数据加载组件可顺利识别出内容请求数据；相对应地，将业务数据输入至界面渲染组件按照界面框架进行界面渲染时，为了保证组件间的数据格式具有一致性，也会将业务数据通过数据转换组件进行数据格式转化，将转化格式后的将业务数据输入至界面渲染组件按照界面框架进行界面渲染，以保证渲染可顺利完成。

具体地，数据转换组件可以将元数据模型、模板数据、和业务数据信息转化为html5界面渲染组件可以识别的数据类型，比如可以将后台数据统一转化为一定格式的json数据，方便界面渲染组件进行渲染。同时也可以将界面渲染组件的请求json格式数据转化为其他组件可以识别的数据格式。

图4示出了根据本发明的实施例的界面构建方法的流程示意图。

如图4所示，根据本发明的一个实施例的界面构建方法，包括：

s402，接收框架请求数据，读取框架请求数据中涉及到的元数据；

s404，按照元数据的种类在元数据设计组件中匹配并生成元数据模型；

s406，通过模板设计组件将元数据模型进行模板设置，以生成模板数据；

s408，将模板数据输入至界面渲染组件进行界面渲染以构建界面框架。

在该实施例中，提供了一种获取框架请求数据中对应的元数据模型的具体步骤，首先读取框架请求数据中涉及到的元数据，即将框架请求数据中所涉及到的各项数据均通过元数据进行表述，随后按照元数据的种类在元数据设计组件的数据库中进行匹配，以获取到此次框架请求数据对应的元数据模型，具体地，元数据设计组件中的数据库为包括各项元数据的一个总模型，各个框架请求数据或许并非包含了数据库中的各项元数据，因此会按照框架请求数据的元数据的种类在数据库中剔除不包括的元数据，使得将数据库中涉及到的元数据生成元数据模型。

在本发明提供的一个实施例中，优选地，通过模板设计组件将元数据模型进行模板设置，以生成模板数据的步骤，包括：通过模板设计组件获取元数据模板中的内容信息及板式信息，内容信息包括字段数据、字体数据、字号数据、颜色数据，板式信息为针对各项内容信息进行显示与否的数据；依照内容信息与板式信息在模板设计组件中生成模板数据，在模板数据中将各项内容信息依照相对应的板式信息进行模板展示。

在该实施例中，提供了一种生成模板数据的具体方案，首先通过模板设计组件获取元数据模板中的内容信息及板式信息，其中内容信息包括字段数据、字体数据、字号数据、颜色数据，板式信息为针对各项内容信息进行显示与否的数据，即可能为对内容信息中的一项进行展示，也可能对另一项进行隐藏；随后在模板设计组件中根据内容信息与板式信息生成模板数据，以使得在模板数据中将各项内容信息依照相对应的板式信息进行模板展示，优选地，模板属于业务数据的展示层。

在本发明提供的一个实施例中，优选地，元数据模型中包括框架请求数据的实体的类型与实现的接口、框架请求数据中字段的类型、框架请求数据中字段的精度、框架请求数据中字段的权限、框架请求数据中字段的序列化与否的信息、框架请求数据中字段的空缺与否的信息。

在该实施例中，将元数据模型中设置包括各项内容，具体有框架请求数据的实体的类型(聚合实体或单体)与框架请求数据的实现的接口、框架请求数据中字段的类型、框架请求数据中字段的精度、框架请求数据中字段的权限、框架请求数据中字段的序列化与否的信息、框架请求数据中字段的空缺与否的信息。

优选地，元数据是描述数据的数据，元数据模型包含了字段的类型(引用类型、数值型或者字符型等)、字段的精度、字段的权限、字段对应数据表字段的名称等，元数据是一切业务操作的基础；同时元数据中还可存储实体数据，如表1所示为元数据模型部分内容。

表1

如图5所示，本发明的又一方面提供了一种界面构建装置500，界面构建装置500包括：元数据设计组件502，用于接收框架请求数据，通过将输入的框架请求数据获取框架请求数据中对应的元数据模型；模板设计组件504，用于将元数据模型进行模板设置，以生成模板数据；界面渲染组件506，用于将模板数据进行界面渲染以构建界面框架。

本发明提供的界面构建装置500包括元数据设计组件502、模板设计组件504、界面渲染组件506，元数据设计组件会接收到框架请求数据，该框架请求数据为用户在修改构建界面时，对界面框架进行设计的请求数据，该数据反映出用户对界面的设计要求，随后将框架请求数据输入至元数据设计组件中，元数据设计组件为整个方案的核心，其主要功能为设计元数据模型，即将框架请求数据转化为与之相对应的元数据模型，具体地，元数据为描述数据的数据，将用户输入的框架请求数据通过元数据设计组件描述为包括各项元数据的元数据模型，使得该元数据模型可将框架请求数据通过至少一个元数据进行表述；将元数据模型输入至模板设计组件中，通过模板设计组件将设计好的元数据模型进行模板设计，以生成模板数据，该模板数据会将用户原始输入的框架请求数据形成相对应的模板，以使得模板数据会对框架请求数据中的字段是否显示、是否可编辑、字体颜色等信息进行模板化显示，以便后续将框架请求数据相对应的内容请求数据按照该模板数据在界面上进行便捷显示。最后再将模板数据输入至界面渲染组件，进行界面渲染以构建界面框架，界面渲染组件根据与后台约定好的数据格式渲染界面dom元素，以展示用户通过框架请求数据进行构建的界面，优选地，界面渲染组件最终会生成html5界面；本发明基于元数据模型驱动，可以方便的对元数据模型进行修改，不仅可以快速的生成html5界面，还能针对不同用户(包括不同角色和个人)输入的框架请求数据以生成个性化的界面，对原有的软件系统没有任何影响，既保证了原有软件系统的稳定性又可以最大程度上满足了用户对个性化界面的需求，模板数据的产生可批量快速生成风格一致的界面，极大程度上缩短了产品的交付周期，减少了研发和管理成本。

优选地，界面渲染组件可支持列表、卡片、枚举控件、字符型控件、时间日期控件等各种控件形式，并支持自由扩展。同时在界面渲染组件内预置了不同的css(cascadingstylesheets，层叠样式表)的样式，方便用户对界面风格进行切换，也可以用自定义css样式的形式对样式进行扩展。

在本发明提供的一个实施例中，优选地，界面构建装置500还包括：数据加载组件508，用于接收内容请求数据，查询与内容请求数据相对应的业务数据；界面渲染组件还用于将业务数据按照界面框架进行界面渲染。

在该实施例中，在将模板数据输入至界面渲染组件进行界面渲染以构建界面框架之后，即完成了用户在构建界面时的框架设计需求，随后会对界面的内容进行具体设计：获取内容请求数据，随后将内容请求数据发送至数据加载组件508，并且在数据加载组件508中查询与内容请求数据相对应的业务数据，比如采购系统需要将采购订单的数据查询到业务，即数据加载组件508可以根据请求对照查询出用户需求的业务数据，无需用户手动输入；最终再将业务数据输入至界面渲染组件按照界面框架进行界面渲染，并且由于各项数据均根据元数据进行操作，因此其业务数据与生成界面框架的模板数据具有一一对应的关系，在对其进行界面渲染时，即可实现内容与模板的一一对应，以形成界面构建后的最终效果。

具体地，业务数据加载组件508也同样需要根据元数据对数据进行操作，比如增加、删除和修改等，元数据是orm(objectrelationalmapping，对象关系映射)框架的基础。

在本发明提供的一个实施例中，优选地，界面构建装置500还包括：数据转换组件510，数据转换组件510用于将框架请求数据进行数据格式转化，将转化格式后的框架请求数据输入至元数据设计组件；数据转换组件510还用于将框架请求数据输入至元数据设计组件；数据转换组件510还用于将模板数据进行数据格式转化，将转化格式后的模板数据发送至界面渲染组件。

在该实施例中，提供了一种获取元数据模型的具体方案，界面构建装置还包括数据转换组件510，在获取到框架请求数据后将框架请求数据通过数据转换组件510进行数据格式转化，由于框架请求数据的数据格式可能为后台组件无法识别的格式，因此需转换成后台组件可以识别的数据格式，随后将转化格式后的框架请求数据输入至元数据设计组件，以获取框架请求数据中对应的元数据模型，此时即可保证元数据设计组件可以识别框架请求数据；相对应地，在将模板数据输入至界面渲染组件进行界面渲染以构建界面框架时，为了保证组件间的数据格式具有一致性，也会将模板数据通过数据转换组件510进行数据格式转化，将转化格式后的模板数据进行界面渲染以构建界面框架，以保证渲染可顺利完成。

具体地，数据转换组件510可以将元数据模型、模板数据、和业务数据信息转化为html5界面渲染组件可以识别的数据类型，比如可以将后台数据统一转化为一定格式的json数据，方便界面渲染组件进行渲染。同时也可以将界面渲染组件的请求json格式数据转化为其他组件可以识别的数据格式。

在本发明提供的一个实施例中，优选地，数据转换组件还用于将内容请求数据进行数据格式转化，将转化格式后的内容请求数据发送至数据加载组件；数据转换组件还用于将业务数据进行数据格式转化，将转化格式后的将业务数据输入至界面渲染组件按照界面框架进行界面渲染。

在该实施例中，在将内容请求数据发送至数据加载组件时，为了保证各个组件之间数据格式的统一，首先将内容请求数据通过数据转换组件进行数据格式转化，随后将转化格式后的内容请求数据发送至数据加载组件，以保证数据加载组件可顺利识别出内容请求数据；相对应地，将业务数据输入至界面渲染组件按照界面框架进行界面渲染时，为了保证组件间的数据格式具有一致性，也会将业务数据通过数据转换组件进行数据格式转化，将转化格式后的将业务数据输入至界面渲染组件按照界面框架进行界面渲染，以保证渲染可顺利完成。

具体地，数据转换组件可以将元数据模型、模板数据、和业务数据信息转化为html5界面渲染组件可以识别的数据类型，比如可以将后台数据统一转化为一定格式的json数据，方便界面渲染组件进行渲染。同时也可以将界面渲染组件的请求json格式数据转化为其他组件可以识别的数据格式。

在本发明提供的一个实施例中，优选地，元数据设计组件还用于读取框架请求数据中涉及到的元数据，按照元数据的种类在元数据设计组件中匹配并生成元数据模型。

在该实施例中，提供了一种获取框架请求数据中对应的元数据模型的具体步骤，首先读取框架请求数据中涉及到的元数据，即将框架请求数据中所涉及到的各项数据均通过元数据进行表述，随后按照元数据的种类在元数据设计组件的数据库中进行匹配，以获取到此次框架请求数据对应的元数据模型，具体地，元数据设计组件中的数据库为包括各项元数据的一个总模型，各个框架请求数据或许并非包含了数据库中的各项元数据，因此会按照框架请求数据的元数据的种类在数据库中剔除不包括的元数据，使得将数据库中涉及到的元数据生成元数据模型。

在本发明提供的一个实施例中，优选地，模板设计组件还用于通过模板设计组件获取元数据模板中的内容信息及板式信息，内容信息包括字段数据、字体数据、字号数据、颜色数据，板式信息为针对各项内容信息进行显示与否的数据；依照内容信息与板式信息在模板设计组件中生成模板数据，在模板数据中将各项内容信息依照相对应的板式信息进行模板展示。

在该实施例中，提供了一种生成模板数据的具体方案，首先通过模板设计组件获取元数据模板中的内容信息及板式信息，其中内容信息包括字段数据、字体数据、字号数据、颜色数据，板式信息为针对各项内容信息进行显示与否的数据，即可能为对内容信息中的一项进行展示，也可能对另一项进行隐藏；随后在模板设计组件中根据内容信息与板式信息生成模板数据，以使得在模板数据中将各项内容信息依照相对应的板式信息进行模板展示，优选地，模板属于业务数据的展示层。

在本发明提供的一个实施例中，优选地，元数据模型中包括框架请求数据的实体的类型与实现的接口、框架请求数据中字段的类型、框架请求数据中字段的精度、框架请求数据中字段的权限、框架请求数据中字段的序列化与否的信息、框架请求数据中字段的空缺与否的信息。

在该实施例中，将元数据模型中设置包括各项内容，具体有框架请求数据的实体的类型(聚合实体或单体)与框架请求数据的实现的接口、框架请求数据中字段的类型、框架请求数据中字段的精度、框架请求数据中字段的权限、框架请求数据中字段的序列化与否的信息和框架请求数据中字段的空缺与否的信息。

优选地，元数据是描述数据的数据，元数据模型包含了字段的类型(引用类型、数值型或者字符型等)、字段的精度、字段的权限、字段对应数据表字段的名称等，元数据是一切业务操作的基础；同时元数据中还可存储实体数据。

如图8为本发明提供的界面构建方法的一个流程图，具体包括：

(1)html5界面渲染组件向元数据设计组件请求模板数据，首先要经过数据转换组件对请求的数据进行数据转换，转换成后台组件可以识别的数据格式。

(2)业务领域首先要在元数据设计组件设计元数据，完成元数据设计后将元数据模型作为参数传递给模板设计组件。

(3)模板设计组件根据传递过来的元数据模型进行模板设置，界面中需要哪些字段，可以在模板设计组件进行设计，然后将模板信息传递到数据转换组件。

(4)数据转换组件将模板数据从后台可以设别的格式转化为html5界面渲染组件可以识别的格式，然后将转换后的数据返回给界面渲染组件。

(5)界面渲染组件在接收到数据后根据模板数据渲染html5界面dom元素，渲染完毕后发送请求到数据转换组件。

(6)数据转换组件将请求转换为数据加载组件可以识别的数据格式，然后发送请求给数据加载组件。

(7)数据加载组件根据接收到的请求查询业务数据，比如采购系统需要将采购订单的数据查询到业务，然后返回到数据转换组件。

(8)数据转换组件将业务数据转换为界面渲染组件可以识别的数据格式，返回给html5界面渲染组件进行业务数据渲染。

本发明对于业务实体多、需要灵活的展现在html5界面中并需要有优秀的交互模式的erp行业有着广泛的应用场景。应用本发明可以快速高效的进行系统构建，适用于复杂业务场景下的个性化展现交互界面的系统，在保证原有软件系统稳定的前提下，快速、灵活的生成html5界面的需求。同时，本发明可以按照角色和用户对模板进行自由分配，并且动态加载，最后，根据业务数据、单据模板信息和元数据模型动态渲染生成html5界面。

界面构建装置可以以插件的形式嵌入各类系统，也可以独立运行，连接各个不同的异构系统。

本发明的一个方面提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现如上述任一项界面构建方法的步骤，因此具有上述任一项界面构建方法的全部有益效果，在此不再赘述。

在本说明书的描述中，术语“上”、“下”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制；术语“连接”、“安装”、“固定”等均应做广义理解，例如，“连接”可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是直接相连，也可以通过中间媒介间接相连。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

在本说明书的描述中，术语“一个实施例”、“一些实施例”、“具体实施例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或实例。而且，描述的具体特征、结构、材料或特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。