一种基于UI组件的页面显示方法、装置、设备及存储介质与流程

一种基于ui组件的页面显示方法、装置、设备及存储介质
技术领域
1.本技术涉及数据处理技术领域，尤其涉及一种基于ui组件的页面显示方法、装置、计算机设备及存储介质。


背景技术：

2.用户页面(user interface，ui)的渲染通常情况下需要经过应用的逻辑执行、框架层的逻辑执行以及布局等操作生成用户页面渲染命令，再通过渲染引擎执行用户页面渲染命令以对用户页面进行渲染。
3.现有一种ui组件库使用方法，首先，需要加载ui组件需要的数据，例如用户信息，其次，将该数据处理成ui组件需要的数据格式，最后，将处理后的数据传入ui组件，以完成任务实现的目的。
4.然而，申请人发现，传统的ui组件库使用方法普遍不智能，该传统的ui组件库使用方法需要用户不断的手动加载需要的数据以及对该数据进行数据处理，从而导致ui组件的复用性极低，由此可见，传统的ui组件库使用方法存在ui组件复用性较低的问题。


技术实现要素：

5.本技术实施例的目的在于提出一种基于ui组件的页面显示方法、装置、计算机设备及存储介质，以解决传统的ui组件库使用方法存在ui组件复用性较低的问题。
6.为了解决上述技术问题，本技术实施例提供一种基于ui组件的页面显示方法，采用了如下所述的技术方案：
7.通过数据提供层获取携带有原始数据类型的原始任务数据，其中，所述数据提供层包裹有ui组件库，所述数据提供层定义有n个数据类型以及与所述n个数据类型相对应的n个任务数据，所述n为正整数；
8.在所述数据提供层的n个数据类型中确认与所述原始数据类型相一致的数据类型为目标数据类型；
9.加载与所述目标数据类型相对应的目标任务数据，并将所述目标任务数据存储于数据操作层中；
10.根据所述数据操作层的数据操作方法在所述数据操作层中获取所述目标任务数据；
11.在所述ui组件库中获取与所述目标任务数据相匹配的目标ui组件；
12.根据所述目标ui组件渲染所述目标任务数据至ui页面。
13.进一步的，在所述根据所述目标ui组件渲染所述目标任务数据至ui页面的步骤之后，还包括下述步骤：
14.接收所述用户针对所述渲染的目标任务数据进行操作所发送的反馈数据；
15.调用所述数据操作层提供的重载方法对所述反馈数据进行数据重载操作，得到重载任务数据；
16.调用所述目标ui组件对所述数据操作层进行数据刷新操作，以获取所述重载任务数据；
17.根据所述目标ui组件渲染所述重载任务数据，以进行页面更新操作。
18.进一步的，所述调用所述数据操作层提供的重载方法对所述反馈数据进行数据重载操作，得到重载任务数据的步骤，具体包括下述步骤：
19.调用所述数据操作层的更新配置接口根据所述反馈数据更新所述数据提供层的配置数据；
20.调用所述数据提供层根据更新后的配置数据进行数据加载，得到所述重载任务数据。
21.进一步的，在所述通过数据提供层获取携带有原始数据类型的原始任务数据的步骤之前，还包括下述步骤：
22.创建初始ui组件库；
23.将预先编译生成的多个ui控件封装成相应的ui组件，所述目标ui组件为多个所述ui组件中的组件；
24.将多个所述ui组件添加至所述初始ui组件库，生成所述ui组件库。
25.进一步的，所述将多个所述ui组件添加至所述初始ui组件库，生成所述ui组件库的步骤，具体包括下述步骤：
26.根据每个所述ui控件的布局信息及至少两个所述ui控件之间的交互信息，确定每个所述ui组件的组件布局信息，及与至少两个所述ui控件对应的ui组件之间的组件交互信息；
27.将多个所述ui组件、每个所述ui组件的组件布局信息、及至少两个所述ui组件之间的组件交互信息添加至所述初始ui组件库，生成所述ui组件库。
28.进一步的，在所述根据所述目标ui组件渲染所述目标任务数据至ui页面的步骤之前，具体包括下述步骤：
29.获取所述目标ui组件对应的目标组件布局信息，及所述目标ui组件对应的目标组件交互信息；
30.基于所述目标ui组件、所述目标组件布局信息及所述目标组件交互信息，生成所述ui页面。
31.进一步的，在所述根据所述目标ui组件渲染所述目标任务数据至ui页面的步骤之后，还包括下述步骤：
32.保存所述ui页面；
33.在接收到针对所述ui页面的下一页面加载请求，且当前网络异常的情况下，渲染显示保存的所述ui页面。
34.为了解决上述技术问题，本技术实施例还提供一种基于ui组件的页面显示装置，采用了如下所述的技术方案：
35.任务数据获取模块，用于通过数据提供层获取携带有原始数据类型的原始任务数据，其中，所述数据提供层包裹有ui组件库，所述数据提供层定义有n个数据类型以及与所述n个数据类型相对应的n个任务数据，所述n为正整数；
36.数据类型确认模块，用于在所述数据提供层的n个数据类型中确认与所述原始数
据类型相一致的数据类型为目标数据类型；
37.目标数据加载模块，用于加载与所述目标数据类型相对应的目标任务数据，并将所述目标任务数据存储于数据操作层中；
38.目标数据获取模块，用于根据所述数据操作层的数据操作方法在所述数据操作层中获取所述目标任务数据；
39.目标组件获取模块，用于在所述ui组件库中获取与所述目标任务数据相匹配的目标ui组件；
40.渲染模块，用于根据所述目标ui组件渲染所述目标任务数据至ui页面。
41.为了解决上述技术问题，本技术实施例还提供一种计算机设备，采用了如下所述的技术方案：
42.包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的基于ui组件的页面显示方法的步骤。
43.为了解决上述技术问题，本技术实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：
44.所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的基于ui组件的页面显示方法的步骤。
45.本技术提供了一种基于ui组件的页面显示方法，包括：通过数据提供层获取携带有原始数据类型的原始任务数据，其中，所述数据提供层包裹有ui组件库，所述数据提供层定义有n个数据类型以及与所述n个数据类型相对应的n个任务数据，所述n为正整数；在所述数据提供层的n个数据类型中确认与所述原始数据类型相一致的数据类型为目标数据类型；加载与所述目标数据类型相对应的目标任务数据，并将所述目标任务数据存储于数据操作层中；根据所述数据操作层的数据操作方法在所述数据操作层中获取所述目标任务数据；在所述ui组件库中获取与所述目标任务数据相匹配的目标ui组件；根据所述目标ui组件渲染所述目标任务数据至ui页面。与现有技术相比，本技术将ui组件库包裹至数据提供层中，然后数据提供层自动加载任务数据到数据操作层中，ui组件从数据操作层中拿到任务数据，并使用这一部分数据进行渲染，来满足用户可以进行选择等任务，实现自动加载数据并注入到ui组件，使开发者不用关注数据获取细节，只需要使用获取到的数据即可，同时，由于数据操作层是全局的一个数据源，多个ui组件可以共用此数据源，使得多个ui组件可重用数据，避免反复多次重复加载，降低了浏览器的性能开销，同时提高了前端页面的渲染性能。
附图说明
46.为了更清楚地说明本技术中的方案，下面将对本技术实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
47.图1是本技术可以应用于其中的示例性系统架构图；
48.图2是本技术实施例一提供的基于ui组件的页面显示方法的实现流程图；
49.图3是图1中步骤s206之后的一种具体实施方式的流程图；
50.图4是图3中步骤s302的一种具体实施方式的流程图；
51.图5是图1中步骤s201之前的一种具体实施方式的流程图；
52.图6是图5中步骤s503的一种具体实施方式的流程图；
53.图7是图1中步骤s206之前的一种具体实施方式的流程图；
54.图8是图1中步骤s206之后的另一种具体实施方式的流程图；
55.图9本技术实施例二提供的基于ui组件的页面显示装置的结构示意图；
56.图10是根据本技术的计算机设备的一个实施例的结构示意图。
具体实施方式
57.除非另有定义，本文所使用的所有的技术和科学术语与属于本技术的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本技术；本技术的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本技术的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
58.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本技术的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
59.为了使本技术领域的人员更好地理解本技术方案，下面将结合附图，对本技术实施例中的技术方案进行清楚、完整地描述。
60.如图1所示，系统架构200可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
61.用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
62.终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、mp3播放器(moving picture experts group audio layer iii，动态影像专家压缩标准音频层面3)、mp4(moving picture experts group audio layer iv，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。
63.服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
64.需要说明的是，本技术实施例所提供的基于ui组件的页面显示方法一般由服务器/终端设备执行，相应地，基于ui组件的页面显示装置一般设置于服务器/终端设备中。
65.应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
66.实施例一
67.继续参考图2，示出了本技术实施例一提供的基于ui组件的页面显示方法的实现
流程图，为了便于说明，仅示出与本技术相关的部分。
68.上述的基于ui组件的页面显示方法，包括以下步骤：
69.步骤s201：通过数据提供层获取携带有原始数据类型的原始任务数据，其中，数据提供层包裹有ui组件库，数据提供层定义有n个数据类型以及与n个数据类型相对应的n个任务数据，n为正整数。
70.在本技术实施例中，数据提供层即dataprovider，不仅能够根据业务抽象的type获取对应的数据，同时也能使用自定义的加载过程处理数据。
71.在本技术实施例中，dataprovider(数据提供层)会内置不同业务数据抽象出来的类型，通过业务传入类型即可自动加载相应类型的业务数据。同时会将不同类型接口响应的业务数据抽象格式化，以统一格式存储在数据提供层中，作为示例，例如数据类型为task，模型为{uuid:string,name:string,type:number}，获取配置为{type:number}，获取方法为根据传入的数据类型task以及数据配置type，获取对应type的task数据，应当理解，此处对数据提供层定义的内容的举例仅为方便理解，不用于限定本技术。
72.在本技术实施例中，dataprovider(数据提供层)可以接收自定义的类型，并绑定自定义的加载过程。这种自定义的形式，能满足特殊，无法被内置的逻辑场景，同时这种特殊场景也能使用dataprovider(数据提供层)重用所有数据。
73.在本技术实施例中，dataprovider(数据提供层)可以接收符合业务模型的配置，来满足根据配置加载对应的数据。比如现在有2个用户分别为a，b。这时候业务模型配置可以灵活组装a或者b，去加载并重用对应的数据。
74.在本技术实施例中，业务人员需要在dataprovider(数据提供层)中预先定义数据的类型，模型、获取配置以及方法，作为示例，例如定义有一个数据类型为task，模型为{uuid:string,name:string,type:number}，获取配置为{type:number}，获取方法为根据传入的数据类型task以及数据配置type，获取对应type的task数据。
75.在本技术实施例中，原始任务数据task为具体的任务。里面包含主键uuid，任务名称name以及任务类型type。
76.在本技术实施例中，ui组件库为预先创建的，该ui组件库中包含有多个ui组件，其中，ui组件库中的ui组件是由研发人员将常用的ui控件进行封装得到的组件，ui组件库中的每个ui组件均是相互独立的，并且，在两个或多个组件之间可以预先建立相互关联，生成更高阶的组件。
77.步骤s202：在数据提供层的n个数据类型中确认与原始数据类型相一致的数据类型为目标数据类型。
78.步骤s203：加载与目标数据类型相对应的目标任务数据，并将目标任务数据存储于数据操作层中。
79.在本技术实施例中，根据dataprovider(数据提供层)中抽象的数据模型以及处理过程对task进行处理并注入datacontext。
80.步骤s204：根据数据操作层的数据操作方法在数据操作层中获取目标任务数据。
81.在本技术实施例中，数据操作层即上述datacontext，不仅能够从dataprovider(数据提供层)中获取需要的业务数据，同时还可以对内置的数据进行操作，例如重新加载(重载)，修改或者删除等。其中，datacontext是全局的一个数据源，多个ui组件可以共用此
数据源，那么一次修改即可达到所有ui组件同时生效，提高了处理数据的效率。
82.步骤s205：在ui组件库中获取与目标任务数据相匹配的目标ui组件。
83.在本技术实施例中，ui组件通过usedatacontext从datacontext获取到对应的task数据，并传入到ui组件进行渲染。
84.在本技术实施例中，ui组件即市面上通用的工具，例如下拉选择器，或者是单选框。但这些ui组件是不会带有业务数据的。
85.在本技术实施例中，usedatacontext是datacontext暴露的一个方法，用以提供task数据以及reload，updateconfig等常用的方法。
86.步骤s206：根据目标ui组件渲染目标任务数据至ui页面。
87.在本技术实施例中，提供了一种基于ui组件的页面显示方法，包括：通过数据提供层获取携带有原始数据类型的原始任务数据，其中，数据提供层包裹有ui组件库，数据提供层定义有n个数据类型以及与n个数据类型相对应的n个任务数据，n为正整数；在数据提供层的n个数据类型中确认与原始数据类型相一致的数据类型为目标数据类型；加载与目标数据类型相对应的目标任务数据，并将目标任务数据存储于数据操作层中；根据数据操作层的数据操作方法在数据操作层中获取目标任务数据；在ui组件库中获取与目标任务数据相匹配的目标ui组件；根据目标ui组件渲染目标任务数据至ui页面。与现有技术相比，本技术将ui组件库包裹至数据提供层中，然后数据提供层自动加载任务数据到数据操作层中，ui组件从数据操作层中拿到任务数据，并使用这一部分数据进行渲染，来满足用户可以进行选择等任务，实现自动加载数据并注入到ui组件，使开发者不用关注数据获取细节，只需要使用获取到的数据即可，同时，由于数据操作层是全局的一个数据源，多个ui组件可以共用此数据源，使得多个ui组件可重用数据，避免反复多次重复加载，降低了浏览器的性能开销，同时提高了前端页面的渲染性能。
88.继续参阅图3，示出了本技术实施例一提供的页面更新操作的一种具体实施方式的流程图，为了便于说明，仅示出与本技术相关的部分。
89.在本实施例的一些可选的实现方式中，在步骤s206之后，还包括：
90.步骤s301：接收用户针对渲染的目标任务数据进行操作所发送的反馈数据；
91.步骤s302：调用数据操作层提供的重载方法对反馈数据进行数据重载操作，得到重载任务数据；
92.步骤s303：调用目标ui组件对数据操作层进行数据刷新操作，以获取所述重载任务数据；
93.步骤s304：根据目标ui组件渲染重载任务数据，以进行页面更新操作。
94.在本技术实施例中，当ui组件操作后，可以根据操作结果，调用datacontext提供的方法重载数据，具体的，可以是调用数据操作层的updateconfig接口根据反馈数据更新数据提供层的配置数据，并调用数据提供层根据更新后的配置数据进行数据加载，得到重载任务数据。
95.在本技术实施例中，datacontext通过reload，使用dataprovider(数据源提供器)进行数据重载，重新从后端获取最新的业务数据，并注入到datacontext。
96.在本技术实施例中，datacontext拿到最新的数据之后，会通知ui组件进行数据刷新，来呈现前面步骤中的操作结果。
97.继续参阅图4，示出了图3中步骤s302的一种具体实施方式的流程图，为了便于说明，仅示出与本技术相关的部分。
98.在本实施例的一些可选的实现方式中，步骤s302具体包括：
99.步骤s401：调用数据操作层的更新配置接口根据反馈数据更新数据提供层的配置数据；
100.步骤s402：调用数据提供层根据更新后的配置数据进行数据加载，得到重载任务数据。
101.在本技术实施例中，usedatacontext是datacontext暴露的一个方法，用以提供task数据以及reload，updateconfig等常用的方法。可以做到重载数据以及去修改dataprovider(数据源提供器)的行为等。
102.继续参阅图5，示出了本技术实施例一提供的ui组件库生成方法的一种具体实施方式的流程图，为了便于说明，仅示出与本技术相关的部分。
103.在本实施例的一些可选的实现方式中，在步骤s201之前，还包括：
104.步骤s501：创建初始ui组件库。
105.在本技术实施例中，初始ui组件库是指预先创建的用于存储指定的ui组件的库，初始ui组件库是一个空库，即还未添加指定的ui组件的库。
106.在本技术实施例中，业务人员可以预先创建初始ui组件库，以用于后续过程中添加指定的ui组件。
107.步骤s502：将预先编译生成的多个ui控件封装成相应的ui组件，目标ui组件为多个ui组件中的组件。
108.在本技术实施例中，多个ui控件是指项目中常用的ui控件，作为示例，例如下拉选择器、单选框等等，应当理解，此处对ui控件的举例仅用于方便理解，不用于限定本技术。
109.在本技术实施例中，可以预先编译生成多个常用的ui控件，并将多个ui控件封装成一个个单独的ui组件，每个ui组件是相互独立的，即各个ui组件之间互不干扰，可以单独调用一个ui组件。
110.步骤s503：将多个ui组件添加至初始ui组件库，生成ui组件库。
111.在本技术实施例中，在将预先编译生成的多个ui组件添加至初始ui组件库之后，可以得到ui组件库。
112.继续参阅图6，示出了图5中步骤s503的一种具体实施方式的流程图，为了便于说明，仅示出与本技术相关的部分。
113.在本实施例的一些可选的实现方式中，步骤s503具体包括：
114.步骤s601：根据每个ui控件的布局信息及至少两个ui控件之间的交互信息，确定每个ui组件的组件布局信息以及与至少两个ui控件对应的ui组件之间的组件交互信息。
115.在本技术实施例中，组件交互信息是指组件之间的交互信息，如点击a组件对应的控件可以跳转至b组件对应的控件，点击b组件对应的控件可以跳转至c组件对应的控件，那么，a组件、b组件和c组件之间存在交互关系，可以确定a组件、b组件和c组件之间的组件交互信息。
116.在本技术实施例中，在获取多个ui组件之后，可以根据每个ui控件的布局信息及至少两个ui控件之间的交互信息，确定每个ui组件的组件布局信息，及与至少两个ui控件
对应的ui组件之间的组件交互信息。
117.步骤s602：将多个ui组件、每个ui组件的组件布局信息以及至少两个ui组件之间的组件交互信息添加至初始ui组件库，生成ui组件库。
118.在本技术实施例中，在确定出每个ui组件的组件布局信息，及与至少两个ui控件对应的ui组件之间的组件交互信息之后，可以将多个ui组件、每个ui组件的组件布局信息、及至少两个ui组件之间的组件交互信息添加至初始ui组件库，可以生成ui组件库。在客户端可以预先设置一个json-ui转换器，可以根据客户端常用的ui界面，得到常用的ui控件，并将这些ui控件添加至json-ui转换器，由json-ui转换器对这些ui控件进行单独封装，以封装成一个个单独的ui组件，并将ui组件添加至初始ui组件库，能够得到ui组件库。
119.继续参阅图7，示出了本技术实施例一提供的目标ui页面生成方法的一种具体实施方式的流程图，为了便于说明，仅示出与本技术相关的部分。
120.在本实施例的一些可选的实现方式中，在步骤s206之前，还包括：
121.步骤s701：获取目标ui组件对应的目标组件布局信息，及目标ui组件对应的目标组件交互信息。
122.在本技术实施例中，目标组件布局信息是指目标ui组件的布局信息。
123.在本技术实施例中，目标组件交互信息是指目标ui组件之间存在的交互信息，可以根据层次将目标ui组件一一添加到父视图中，添加完成之后再根据布局参数设置控件的布局方式。
124.步骤s702：基于目标ui组件、目标组件布局信息及目标组件交互信息，生成目标ui页面。
125.在本技术实施例中，在得到目标ui组件、目标组件布局信息和目标组件交互信息之后，可以结合这些信息，对初始ui界面进行更改，以得到目标ui界面。
126.继续参阅图8，示出了图1中步骤s206之后的的一种具体实施方式的流程图，为了便于说明，仅示出与本技术相关的部分。
127.在本实施例的一些可选的实现方式中，在步骤s206之后，还包括：
128.步骤s801：保存ui页面。
129.在本技术实施例中，在生成目标ui界面之后，可以将目标ui界面保存于客户端侧。
130.步骤s802：在接收到针对ui页面的下一页面加载请求，且当前网络异常的情况下，渲染显示保存的ui页面。
131.在本技术实施例中，下一界面加载请求是指客户端侧发起的用于请求加载ui界面的请求。
132.在本技术实施例中，为了避免有时候断网打开app(application，应用程序)不能正常显示页面，可以在本地保存目标ui界面，先加载本地保存的目标ui界面，然后请求成功后刷新页面，并保存最新的ui界面至本地。
133.在本技术实施例中，从而能够在下一次请求，且网络异常时，渲染显示保存的最新的ui界面。
134.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，
前述的存储介质可为磁碟、光盘、只读存储记忆体(read-only memory，rom)等非易失性存储介质，或随机存储记忆体(random access memory，ram)等。
135.应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
136.实施例二
137.进一步参考图9，作为对上述图2所示方法的实现，本技术提供了一种基于ui组件的页面显示装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
138.如图9所示，本实施例所述的基于ui组件的页面显示装置200包括：任务数据获取模块201、数据类型确认模块202、目标数据加载模块203、目标数据获取模块204、目标组件获取模块205以及渲染模块206。其中：
139.任务数据获取模块201，用于通过数据提供层获取携带有原始数据类型的原始任务数据，其中，所述数据提供层包裹有ui组件库，所述数据提供层定义有n个数据类型以及与所述n个数据类型相对应的n个任务数据，所述n为正整数；
140.数据类型确认模块202，用于在所述数据提供层的n个数据类型中确认与所述原始数据类型相一致的数据类型为目标数据类型；
141.目标数据加载模块203，用于加载与所述目标数据类型相对应的目标任务数据，并将所述目标任务数据存储于数据操作层中；
142.目标数据获取模块204，用于根据所述数据操作层的数据操作方法在所述数据操作层中获取所述目标任务数据；
143.目标组件获取模块205，用于在所述ui组件库中获取与所述目标任务数据相匹配的目标ui组件；
144.渲染模块206，用于根据所述目标ui组件渲染所述目标任务数据至ui页面。
145.在本技术实施例中，数据提供层即dataprovider，不仅能够根据业务抽象的type获取对应的数据，同时也能使用自定义的加载过程处理数据。
146.在本技术实施例中，dataprovider(数据提供层)会内置不同业务数据抽象出来的类型，通过业务传入类型即可自动加载相应类型的业务数据。同时会将不同类型接口响应的业务数据抽象格式化，以统一格式存储在数据提供层中，作为示例，例如数据类型为task，模型为{uuid:string,name:string,type:number}，获取配置为{type:number}，获取方法为根据传入的数据类型task以及数据配置type，获取对应type的task数据，应当理解，此处对数据提供层定义的内容的举例仅为方便理解，不用于限定本技术。
147.在本技术实施例中，dataprovider(数据提供层)可以接收自定义的类型，并绑定自定义的加载过程。这种自定义的形式，能满足特殊，无法被内置的逻辑场景，同时这种特殊场景也能使用dataprovider(数据提供层)重用所有数据。
148.在本技术实施例中，dataprovider(数据提供层)可以接收符合业务模型的配置，
来满足根据配置加载对应的数据。比如现在有2个用户分别为a，b。这时候业务模型配置可以灵活组装a或者b，去加载并重用对应的数据。
149.在本技术实施例中，业务人员需要在dataprovider(数据提供层)中预先定义数据的类型，模型、获取配置以及方法，作为示例，例如定义有一个数据类型为task，模型为{uuid:string,name:string,type:number}，获取配置为{type:number}，获取方法为根据传入的数据类型task以及数据配置type，获取对应type的task数据。
150.在本技术实施例中，原始任务数据task为具体的任务。里面包含主键uuid，任务名称name以及任务类型type。
151.在本技术实施例中，ui组件库为预先创建的，该ui组件库中包含有多个ui组件，其中，ui组件库中的ui组件是由研发人员将常用的ui控件进行封装得到的组件，ui组件库中的每个ui组件均是相互独立的，并且，在两个或多个组件之间可以预先建立相互关联，生成更高阶的组件。
152.在本技术实施例中，根据dataprovider(数据提供层)中抽象的数据模型以及处理过程对task进行处理并注入datacontext。
153.在本技术实施例中，数据操作层即上述datacontext，不仅能够从dataprovider(数据提供层)中获取需要的业务数据，同时还可以对内置的数据进行操作，例如重新加载，修改或者删除等。其中，datacontext是全局的一个数据源，多个ui组件可以共用此数据源，那么一次修改即可达到所有ui组件同时生效，提高了处理数据的效率。
154.在本技术实施例中，ui组件通过usedatacontext从datacontext获取到对应的task数据，并传入到ui组件进行渲染。
155.在本技术实施例中，ui组件即市面上通用的工具，例如下拉选择器，或者是单选框。但这些ui组件是不会带有业务数据的。
156.在本技术实施例中，usedatacontext是datacontext暴露的一个方法，用以提供task数据以及reload，updateconfig等常用的方法。
157.在本技术实施例中，提供了一种基于ui组件的页面显示装置200，包括：任务数据获取模块201，用于通过数据提供层获取携带有原始数据类型的原始任务数据，其中，所述数据提供层包裹有ui组件库，所述数据提供层定义有n个数据类型以及与所述n个数据类型相对应的n个任务数据，所述n为正整数；数据类型确认模块202，用于在所述数据提供层的n个数据类型中确认与所述原始数据类型相一致的数据类型为目标数据类型；目标数据加载模块203，用于加载与所述目标数据类型相对应的目标任务数据，并将所述目标任务数据存储于数据操作层中；目标数据获取模块204，用于根据所述数据操作层的数据操作方法在所述数据操作层中获取所述目标任务数据；目标组件获取模块205，用于在所述ui组件库中获取与所述目标任务数据相匹配的目标ui组件；渲染模块206，用于根据所述目标ui组件渲染所述目标任务数据至ui页面。与现有技术相比，本技术将ui组件库包裹至数据提供层中，然后数据提供层自动加载任务数据到数据操作层中，ui组件从数据操作层中拿到任务数据，并使用这一部分数据进行渲染，来满足用户可以进行选择等任务，实现自动加载数据并注入到ui组件，使开发者不用关注数据获取细节，只需要使用获取到的数据即可，同时，由于数据操作层是全局的一个数据源，多个ui组件可以共用此数据源，使得多个ui组件可重用数据，避免反复多次重复加载，降低了浏览器的性能开销，同时提高了前端页面的渲染性
能。
158.在本实施例的一些可选的实现方式中，上述基于ui组件的页面显示装置200还包括：反馈数据获取模块、重载模块、数据刷新模块以及页面更新模块，其中：
159.反馈数据获取模块，用于接收所述用户针对所述渲染的目标任务数据进行操作所发送的反馈数据；
160.重载模块，用于调用所述数据操作层提供的重载方法对所述反馈数据进行数据重载操作，得到重载任务数据；
161.数据刷新模块，用于调用所述目标ui组件对所述数据操作层进行数据刷新操作，以获取所述重载任务数据；
162.页面更新模块，用于根据所述目标ui组件渲染所述重载任务数据，以进行页面更新操作。
163.在本技术实施例中，当ui组件操作后，可以根据操作结果，调用datacontext提供的方法重载数据，具体的，可以是调用数据操作层的updateconfig接口根据反馈数据更新数据提供层的配置数据，并调用数据提供层根据更新后的配置数据进行数据加载，得到重载任务数据。
164.在本技术实施例中，datacontext通过reload，使用dataprovider(数据源提供器)进行数据重载，重新从后端获取最新的业务数据，并注入到datacontext。
165.在本技术实施例中，datacontext拿到最新的数据之后，会通知ui组件进行数据刷新，来呈现前面步骤中的操作结果。
166.在本实施例的一些可选的实现方式中，上述重载模块包括：配置数据更新子模块以及数据加载子模块，其中：
167.配置数据更新子模块，用于调用所述数据操作层的更新配置接口根据所述反馈数据更新所述数据提供层的配置数据；
168.数据加载子模块，用于调用所述数据提供层根据更新后的配置数据进行数据加载，得到所述重载任务数据。
169.在本技术实施例中，usedatacontext是datacontext暴露的一个方法，用以提供task数据以及reload，updateconfig等常用的方法。可以做到重载数据以及去修改dataprovider(数据源提供器)的行为等。
170.在本实施例的一些可选的实现方式中，上述基于ui组件的页面显示装置200还包括：组件库创建模块、封装模块以及组件库生成模块，其中：
171.组件库创建模块，用于创建初始ui组件库；
172.封装模块，用于将预先编译生成的多个ui控件封装成相应的ui组件，所述目标ui组件为多个所述ui组件中的组件；
173.组件库生成模块，用于将多个所述ui组件添加至所述初始ui组件库，生成所述ui组件库。
174.在本技术实施例中，初始ui组件库是指预先创建的用于存储指定的ui组件的库，初始ui组件库是一个空库，即还未添加指定的ui组件的库。
175.在本技术实施例中，业务人员可以预先创建初始ui组件库，以用于后续过程中添加指定的ui组件。
176.在本技术实施例中，多个ui控件是指项目中常用的ui控件，作为示例，例如下拉选择器、单选框等等，应当理解，此处对ui控件的举例仅用于方便理解，不用于限定本技术。
177.在本技术实施例中，可以预先编译生成多个常用的ui控件，并将多个ui控件封装成一个个单独的ui组件，每个ui组件是相互独立的，即各个ui组件之间互不干扰，可以单独调用一个ui组件。
178.在本技术实施例中，在将预先编译生成的多个ui组件添加至初始ui组件库之后，可以得到ui组件库。
179.在本实施例的一些可选的实现方式中，上述组件库生成模块包括：交互信息确定子模块以及组件库生成子模块，其中：
180.交互信息确定子模块，用于根据每个所述ui控件的布局信息及至少两个所述ui控件之间的交互信息，确定每个所述ui组件的组件布局信息以及与至少两个所述ui控件对应的ui组件之间的组件交互信息；
181.组件库生成子模块，用于将多个所述ui组件、每个所述ui组件的组件布局信息以及至少两个所述ui组件之间的组件交互信息添加至所述初始ui组件库，生成所述ui组件库。
182.在本技术实施例中，组件交互信息是指组件之间的交互信息，如点击a组件对应的控件可以跳转至b组件对应的控件，点击b组件对应的控件可以跳转至c组件对应的控件，那么，a组件、b组件和c组件之间存在交互关系，可以确定a组件、b组件和c组件之间的组件交互信息。
183.在本技术实施例中，在获取多个ui组件之后，可以根据每个ui控件的布局信息及至少两个ui控件之间的交互信息，确定每个ui组件的组件布局信息，及与至少两个ui控件对应的ui组件之间的组件交互信息。
184.在本技术实施例中，在确定出每个ui组件的组件布局信息，及与至少两个ui控件对应的ui组件之间的组件交互信息之后，可以将多个ui组件、每个ui组件的组件布局信息、及至少两个ui组件之间的组件交互信息添加至初始ui组件库，可以生成ui组件库。在客户端可以预先设置一个json-ui转换器，可以根据客户端常用的ui界面，得到常用的ui控件，并将这些ui控件添加至json-ui转换器，由json-ui转换器对这些ui控件进行单独封装，以封装成一个个单独的ui组件，并将ui组件添加至初始ui组件库，能够得到ui组件库。
185.在本实施例的一些可选的实现方式中，上述基于ui组件的页面显示装置200还包括：组件布局获取模块以及ui页面生成模块，其中：
186.组件布局获取模块，用于获取所述目标ui组件对应的目标组件布局信息，及所述目标ui组件对应的目标组件交互信息；
187.ui页面生成模块，用于基于所述目标ui组件、所述目标组件布局信息及所述目标组件交互信息，生成所述ui页面。
188.在本技术实施例中，目标组件布局信息是指目标ui组件的布局信息。
189.在本技术实施例中，目标组件交互信息是指目标ui组件之间存在的交互信息，可以根据层次将目标ui组件一一添加到父视图中，添加完成之后再根据布局参数设置控件的布局方式。
190.在本技术实施例中，在得到目标ui组件、目标组件布局信息和目标组件交互信息
之后，可以结合这些信息，对初始ui界面进行更改，以得到目标ui界面。
191.在本实施例的一些可选的实现方式中，上述基于ui组件的页面显示装置200还包括：ui页面保存模块以及ui页面渲染模块，其中：
192.ui页面保存模块，用于保存所述ui页面；
193.ui页面渲染模块，用于在接收到针对所述ui页面的下一页面加载请求，且当前网络异常的情况下，渲染显示保存的所述ui页面。
194.在本技术实施例中，在生成目标ui界面之后，可以将目标ui界面保存于客户端侧。
195.在本技术实施例中，下一界面加载请求是指客户端侧发起的用于请求加载ui界面的请求。
196.在本技术实施例中，为了避免有时候断网打开app(application，应用程序)不能正常显示页面，可以在本地保存目标ui界面，先加载本地保存的目标ui界面，然后请求成功后刷新页面，并保存最新的ui界面至本地。
197.在本技术实施例中，从而能够在下一次请求，且网络异常时，渲染显示保存的最新的ui界面。
198.为解决上述技术问题，本技术实施例还提供计算机设备。具体请参阅图10，图10为本实施例计算机设备基本结构框图。
199.所述计算机设备300包括通过系统总线相互通信连接存储器310、处理器320、网络接口330。需要指出的是，图中仅示出了具有组件310-330的计算机设备300，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(application specific integrated circuit，asic)、可编程门阵列(field－programmable gate array，fpga)、数字处理器(digital signal processor，dsp)、嵌入式设备等。
200.所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
201.所述存储器310至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器310可以是所述计算机设备300的内部存储单元，例如该计算机设备300的硬盘或内存。在另一些实施例中，所述存储器310也可以是所述计算机设备300的外部存储设备，例如该计算机设备300上配备的插接式硬盘，智能存储卡(smart media card,smc)，安全数字(secure digital,sd)卡，闪存卡(flash card)等。当然，所述存储器310还可以既包括所述计算机设备300的内部存储单元也包括其外部存储设备。本实施例中，所述存储器310通常用于存储安装于所述计算机设备300的操作系统和各类应用软件，例如基于ui组件的页面显示方法的计算机可读指令等。此外，所述存储器310还可以用于暂时地存储已经输出或者将要输出的各类数据。
202.所述处理器320在一些实施例中可以是中央处理器(central processing unit，
cpu)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器320通常用于控制所述计算机设备300的总体操作。本实施例中，所述处理器320用于运行所述存储器310中存储的计算机可读指令或者处理数据，例如运行所述基于ui组件的页面显示方法的计算机可读指令。
203.所述网络接口330可包括无线网络接口或有线网络接口，该网络接口330通常用于在所述计算机设备300与其他电子设备之间建立通信连接。
204.本技术提供的计算机设备，将ui组件库包裹至数据提供层中，然后数据提供层自动加载任务数据到数据操作层中，ui组件从数据操作层中拿到任务数据，并使用这一部分数据进行渲染，来满足用户可以进行选择等任务，实现自动加载数据并注入到ui组件，使开发者不用关注数据获取细节，只需要使用获取到的数据即可，同时，由于数据操作层是全局的一个数据源，多个ui组件可以共用此数据源，使得多个ui组件可重用数据，避免反复多次重复加载，降低了浏览器的性能开销，同时提高了前端页面的渲染性能。
205.本技术还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的基于ui组件的页面显示方法的步骤。
206.本技术提供的计算机可读存储介质，将ui组件库包裹至数据提供层中，然后数据提供层自动加载任务数据到数据操作层中，ui组件从数据操作层中拿到任务数据，并使用这一部分数据进行渲染，来满足用户可以进行选择等任务，实现自动加载数据并注入到ui组件，使开发者不用关注数据获取细节，只需要使用获取到的数据即可，同时，由于数据操作层是全局的一个数据源，多个ui组件可以共用此数据源，使得多个ui组件可重用数据，避免反复多次重复加载，降低了浏览器的性能开销，同时提高了前端页面的渲染性能。
207.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本技术各个实施例所述的方法。
208.显然，以上所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例，附图中给出了本技术的较佳实施例，但并不限制本技术的专利范围。本技术可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本技术的公开内容的理解更加透彻全面。尽管参照前述实施例对本技术进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本技术说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本技术专利保护范围之内。