一种应用框架的设计方法、系统、设备及介质与流程

1.本技术涉及计算机技术领域，尤其涉及一种应用框架的设计方法、系统、设备及介质。


背景技术：

2.目前市面上的移动端网页应用开发的发展，越来越趋向于敏捷开发方向，然而传统h5应用的独立开发过程太过漫长，已经不适应现在快节奏的开发趋势。另外，在遇到需要修复的问题时，传统开发需要对开发过的每个应用都进行单独修改。移动端的使用环境和设备闲置，使之容易受到网络波动影响，造成用户体验不好；移动设备在进行页面计算和渲染时，尤其是加载vue、angular或react这种应用时，部分中低端设备运算和渲染过慢，导致用户等待时间过长。


技术实现要素：

3.为了解决上述问题，本技术提出了一种应用框架的设计方法，包括：通过服务层确定协议接口，并确定所述协议接口传送的数据格式，根据所述协议接口和所述数据格式确定通信通道；通过所述服务层访问数据库，以对数据进行存取，并将获取的所述数据通过所述通信通道与应用管理编辑层进行传送；通过所述应用管理编辑层与移动端进行对接，获取所述移动端的应用，并根据应用需求对所述应用的应用属性进行编辑；通过所述移动端访问应用浏览层，通过所述应用浏览层获取所述数据，根据所述数据和所述应用属性确定所述应用的页面，并将所述页面发送至所述移动端。
4.在一个示例中，确定所述协议接口传送的数据格式，根据所述协议接口和所述数据格式确定通信通道，具体包括：确定所述协议接口的设计风格，根据所述设计风格确定所述设计风格对应的数据格式；通过所述服务层的应用程序编程接口api，为所述设计风格和所述数据格式提供对应的所述通信通道，以通过所述通信通道访问数据库和文件存储系统。
5.在一个示例中，所述方法还包括：通过所述通信通道在所述数据库中获取所述数据的特性，并根据所述特性对所述数据进行更改，以对所述应用属性进行编辑，其中所述应用属性包括所述页面和所述页面对应的页面元素；通过所述通信通道在所述文件存储系统中获取存储的应用文件，并将对所述应用属性进行编辑后的所述应用文件存储到所述文件存储系统中。
6.在一个示例中，根据应用需求对所述应用的应用属性进行编辑之前，所述方法还包括：确定所述应用的多个页面，并确定每个所述页面对应的页面元素，以确定所述应用属性；根据所述应用属性确定所述应用的层级，并根据所述层级确定应用层级数据，其中，所述应用层级数据至少包括背景音乐；根据所述页面元素确定页面层级数据，其中，所述页面层级数据至少包括页面类型、逻辑宽度、逻辑高度、背景图。
7.在一个示例中，所述方法还包括：通过所述页面元素对所述页面层级数据进行编
辑，其中，所述页面元素包括基本属性和扩展属性，所述基本属性至少包括宽度、高度、x轴坐标、y轴坐标、旋转角度；根据元素类型将所述页面元素分为文本元素、图片元素和其他元素，通过所述扩展属性对所述文本元素和所述图片元素进行编辑。
8.在一个示例中，通过所述应用浏览层获取所述数据，根据所述数据和所述应用属性确定所述应用的页面，具体包括：获取所述数据库中的所述数据，并根据所述应用属性确定页面元素；确定应用框架nuxt的api，通过所述api将所述数据和所述页面元素进行拼装，以得到所述页面。
9.另一方面，本技术还提出了一种应用框架的设计系统，包括：服务层，提供协议接口，并根据所述协议接口确定数据格式，根据所述协议接口和所述数据格式提供通信通道；应用管理层，通过所述通信通道与所述服务层连接，获取移动端的应用，并根据应用需求对所述应用的应用属性进行编辑；应用浏览层，通过所述通信通道与所述服务层连接，获取数据库的数据，根据所述数据和所述应用属性确定所述应用的页面，并将所述页面发送至所述移动端。
10.在一个示例中，所述系统还包括：基础服务层，包括所述数据库，通过所述通信通道将所述服务层与所述数据库进行连接，以对所述数据进行存取。
11.另一方面，本技术还提出了一种应用框架的设计设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述一种应用框架的设计设备能够执行：如上述任意一个示例所述的方法。
12.另一方面，本技术还提出了一种非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：如上述任意一个示例所述的方法。
13.本技术通过移动端应用框架直接生成h5移动端页面，利用设计的元素坐标定位功能，可实现对ui效果图的一比一还原，能够为业务人员提供极大的灵活性。并通过框架设计，解决了图片过大、终端渲染等情况引起的页面加载慢的情况，提高移动终端页面加载效率。
附图说明
14.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
15.图1为本技术实施例中一种应用框架的设计方法的流程示意图；
16.图2为本技术实施例中一种应用框架的设计系统的结构示意图；
17.图3为本技术实施例中移动端应用框架的示意图；
18.图4为本技术实施例中一种应用框架的设计系统的流程示意图；
19.图5为本技术实施例中一种应用框架的设计设备的示意图。
具体实施方式
20.为使本技术的目的、技术方案和优点更加清楚，下面将结合本技术具体实施例及相应的附图对本技术技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做
出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
21.以下结合附图，详细说明本技术各实施例提供的技术方案。
22.当前因为敏捷开发过程的流行，所以开发过程的每个角色都很明确，过程中的参与者中间的解耦性越高越好。行业中也出现了一些h5移动端应用开发框架，但是当前框架只是简单的对页面元素进行简单罗列，不能让实施人员直接很好的复现设计师设计的效果页面，且项目实施者使用效果不佳。此外，这些框架没有考虑到真实的复杂使用环境下，各种外界因素的叠加情况，例如，网络情况、移动设备性能等，上述情况会导致一部分用户体验很差。
23.技术至少存在如下问题：由于移动应用框架限制，实施人员无法百分百复现效果图，难以达到预期效果。移动终端用户在真实的使用场景中，页面内容加载时间过长或加载失败，让用户产生焦虑情绪。
24.如图1所示，为了解决上述问题，本技术实施例提供的一种应用框架的设计方法，应用在一种应用框架的设计系统中，该应用框架的设计系统包括服务层、应用管理编辑层和应用浏览层。方法包括：
25.s101：通过服务层确定协议接口，并确定所述协议接口传送的数据格式，根据所述协议接口和所述数据格式确定通信通道。
26.如图2所示，该应用框架的设计系统还附加有基础服务层，通过该基础服务层为服务层提供硬件环境作为基础支持，其中基础服务层中包括基于分布式文件存储的mongodb数据库，以及文件存储系统——对象存储服务(object storage service，oss)。通过服务层的应用程序接口(application programming interface，api)提供http协议接口，并确定该http协议接口传送的数据格式，根据协议接口和数据格式建立通信通道，将mongodb数据库中的数据通过通信通道进行传递。
27.s102：通过所述服务层访问数据库，以对数据进行存取，并将获取的所述数据通过所述通信通道与应用管理编辑层进行传送。
28.通过服务层向上为应用浏览层和应用管理编辑层提供通信通道，向下连接mongodb数据库，以为应用浏览层和应用管理编辑层提供访问数据库的能力。
29.在一个实施例中，确定http协议接口的设计风格，如restful风格，根据restful风格确定该风格对应的数据格式，例如：通过服务层提供restful风格的http协议接口，数据格式为标准json格式。通过服务层的api，为restful风格和json格式提供对应的通信通道，以通过该通信通道访问数据库和oss系统。
30.在一个实施例中，通过mongodb数据库可直接存取json格式数据的特性，根据该特性能够极其方便地对应用属性进行增加、删除、修改和查询等更改操作，还可对图片、音频等应用文件提供统一的存取方法，保存至oss系统中，oss系统提供的分布式系统云存储服务，以减少大文件对服务层服务器带来的带宽和流量压力。例如：将a.png文件从自身服务器中切换保存至oss系统，前端页面修改后，可以在终端访问a.png文件时直接访问云存储中的a.png文件，而不从自身服务器中下载，从而减小自身服务器的带宽和流量压力。
31.s103：通过所述应用管理编辑层与移动端进行对接，获取所述移动端的应用，并根据应用需求对所述应用的应用属性进行编辑。
32.如图4所示，移动端可根据功能分为移动设备终端和应用编辑终端。在进行应用属
性的编辑时，应用编辑终端通过nginx服务器与管理编辑层进行连接，通过nginx服务器进行前端页面的负载均衡，将编辑请求发送至应用管理编辑层的服务器。该应用管理编辑层的服务器向oss系统进行文件服务的访问，获取静态元素；向api服务层的服务器进行访问，获取数据，并对数据和元素进行编辑，以完成对应用属性的编辑，并将编辑后的应用属性保存至mongodb数据库。
33.在一个实施例中，应用管理编辑层子系统提供对移动端应用的管理，如图3所示，每个应用对应一个或多个页面，每个页面对应多个页面元素，该页面元素包括文本元素、图片元素等。多个页面和页面元素组成应用属性，从应用到页面，在不同物理层级有对应的属性。在应用的层级中，设置有应用层级数据，以应用1为例，整个应用1的应用层次上的属性描述为该应用1的应用层级数据。通过对应用层级数据进行修改，可以对应用页面进行修改，例如：通过对应用层级数据进行修改从而改变背景音乐的相关信息。在页面的层级中，设置有页面层级数据。页面层级数据中包含对页面的基本属性描述，例如：页面类型、逻辑宽度、逻辑高度、背景图等属性。
34.在一个实施例中，页面层级中包含多个页面元素定义，每个页面元素由基本属性和扩展属性组成，基本属性包括宽度、高度、x轴坐标、y轴坐标、旋转角度等。根据元素类型将页面元素分为文本元素、图片元素和其他元素，扩展属性为每种页面元素的特有属性，如文本元素的文字颜色，图片元素的图片地址等。每个页面元素都通过vuedraggable组件实现了可以在页面中自由拖拽编辑。
35.s104：通过所述移动端访问应用浏览层，通过所述应用浏览层获取所述数据，根据所述数据和所述应用属性确定所述应用的页面，并将所述页面发送至所述移动端。
36.如图4所示，在进行应用页面的访问时，移动设备终端通过nginx服务器与管理编辑层进行连接，通过nginx服务器进行前端预载页面的负载均衡，将访问请求发送至应用浏览层的服务器。该应用浏览层的服务器向oss系统进行文件服务的访问，获取静态元素；向api服务层的服务器进行访问，获取数据，并对数据和元素进行编辑，以从mongodb数据库中对应用页面进行读取，并将读取的应用页面发送至移动设备终端。
37.应用浏览层提供了单独解析h5移动端应用的功能。传统vue应用需要在客户端进行数据渲染，对于移动终端来说，客户端渲染这种形式的等待时间长，使移动终端耗电量增加。本技术利用nuxt进行服务端渲染的功能，通过移动端访问应用浏览层，通过应用浏览层获取数据，根据数据和应用属性确定应用的页面，并将页面发送至移动端。
38.在一个实施例中，获取数据库中的数据，并根据应用属性确定页面元素。应用框架nuxt调用服务层api，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给移动端浏览器，以便用户浏览。从而能够减轻客户端渲染压力，减少用户等待时间，提高用户体验。应用浏览层对图片文件等大文件，可以直接使用oss文件地址，减少应用服务器和api服务层服务器的压力。
39.在一个实施例中，每一层服务器都可以单独进行负载均衡。通过数据库服务器和api服务的负载均衡，可以快速处理请求，减少数据和接口等待。通过oss文件服务器的负载均衡可以使不同地域编辑应用或浏览应用中大文件时快速下载浏览。通过应用浏览层服务端渲染的负载均衡，可以使浏览者，减少渲染压力，快速解析页面展现。
40.如图2所示，本技术实施例还提供的一种应用框架的设计系统，包括：
41.服务层，包括api和日志系统，服务层提供协议接口，并根据协议接口确定数据格式，根据协议接口和数据格式提供通信通道。
42.应用管理层，为多层级结构构建形式，支持部件扩展、设置有vuedraggable组件实现在页面中自由拖拽。应用管理层通过通信通道与服务层连接，获取移动端的应用，并根据应用需求对应用的应用属性进行编辑。
43.应用浏览层，为多层级结构构建形式，设置有nuxt进行服务端渲染的功能。应用浏览层通过通信通道与服务层连接，获取数据库的数据，根据数据和应用属性确定应用的页面，并将页面发送至移动端。
44.该应用框架的设计系统还附加有基础服务层，包括mongodb数据库、云服务器和oss系统，通过通信通道将服务层与数据库进行连接，以对数据进行存取。通过oss系统进行文件存储服务。
45.如图5所示，本技术实施例还提供了一种应用框架的设计设备，包括：
46.至少一个处理器；以及，
47.与所述至少一个处理器通信连接的存储器；其中，
48.所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述一种应用框架的设计设备能够执行如上述任意一个实施例所述的方法。
49.本技术实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：如上述任意一个实施例所述的方法。
50.本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
51.本技术实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。
52.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
53.本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
54.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指
令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
55.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
56.在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
57.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
58.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
59.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
60.以上所述仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。