CN110990014B

CN110990014B - 骨架屏页面代码的生成方法、装置、服务器及存储介质

Info

Publication number: CN110990014B
Application number: CN201911273932.2A
Authority: CN
Inventors: 刘其深
Original assignee: Shenzhen Kaniu Technology Co ltd
Current assignee: Shenzhen Kaniu Technology Co ltd
Priority date: 2019-12-12
Filing date: 2019-12-12
Publication date: 2023-10-20
Anticipated expiration: 2039-12-12
Also published as: CN110990014A

Abstract

本发明实施例公开了一种骨架屏页面代码的生成方法、装置、服务器和存储介质。该骨架屏页面代码的生成方法包括：接收用户对预设绘图界面的操作生成的骨架屏画面，所述骨架屏画面包括多个占位元素；根据所述多个占位元素的参数生成目标骨架屏界面以供用户预览；根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码。本发明实施例实现了满足骨架屏页面开发的用户自定义需求。

Description

骨架屏页面代码的生成方法、装置、服务器及存储介质

技术领域

本发明实施例涉及骨架屏技术，尤其涉及一种骨架屏页面代码的生成方法、装置、服务器及存储介质。

背景技术

随着互联网时代的飞速发展，Web页面的开发也成为人们越来越重要的一项工作。

骨架屏，对应的英文为“skeleton”。它指的是现代Web页面开发过程中，为了增强用户体验，在页面没有完全把数据加载完成之前的一个由各种代表页面结构的占位符组成的简单页面。骨架屏既能避免不友好的白屏，又能在等待的过程中预先将页面结构展示给用户，很好地起到了一个预告的作用。

但是现有的骨架屏开发技术，例如以vue-skeleton-webpack-plugin为代表的半手工半自动化开发方案和以page-skeleton-webpack-plugin为代表的全自动化生成开发方案，无法满足用户自定义需求的问题，具体为：不能生成自己想要的颗粒度的骨架屏页面；不支持生成不同框架技术的骨架屏；不能支持骨架屏插入和替换逻辑的自定义。

发明内容

本发明实施例提供了一种骨架屏页面代码的生成方法、装置、服务器及存储介质，以实现满足骨架屏页面开发的用户自定义需求。

为达此目的，本发明实施例提供了一种骨架屏页面代码的生成方法，该骨架屏页面代码的生成方法包括：

接收用户对预设绘图界面的操作生成的骨架屏画面，所述骨架屏画面包括多个占位元素；

根据所述多个占位元素的参数生成目标骨架屏界面以供用户预览；

根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码。

进一步的，所述接收用户对预设绘图界面的操作生成的骨架屏画面之前包括：

根据用户发送的第二指令发送第三指令至服务器；

接收所述服务器根据所述第三指令发送的页面信息；

根据所述页面信息通过GUI生成预设绘图界面。

进一步的，所述多个占位元素的参数包括所述多个占位元素的坐标信息、长度信息、宽度信息或占位元素类型中的一种或多种。

进一步的，所述根据所述多个占位元素的参数生成目标骨架屏界面以供用户预览包括：

遍历所述骨架屏画面上的全部占位元素以获取其坐标信息、长度信息、宽度信息和占位元素类型；

根据所述占位元素类型计算所述坐标信息、长度信息和宽度信息以得到映射数据；

对所述映射数据渲染以生成目标骨架屏界面以供用户预览。

进一步的，所述根据所述占位元素类型计算所述坐标信息、长度信息和宽度信息以得到映射数据包括：

确定渲染接口的需求数据类型；

根据所述占位元素类型计算所述坐标信息、长度信息和宽度信息以得到映射数据，所述映射数据的数据类型为所述需求数据类型。

进一步的，所述根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码包括：

根据用户发送的第一指令确认框架类型；

发送所述框架类型和目标骨架屏界面的映射数据至服务器以生成对应的骨架屏页面代码。

进一步的，所述发送所述框架类型和目标骨架屏界面的映射数据至服务器以生成对应的骨架屏页面代码包括：

发送所述框架类型和目标骨架屏界面的映射数据至服务器以采用javascript的AST技术生成对应的骨架屏页面代码。

一方面，本发明实施例还提供了一种骨架屏页面代码的生成装置，该骨架屏页面代码的生成装置包括：

画面接收模块，用于接收用户对预设绘图界面的操作生成的骨架屏画面，所述骨架屏画面包括多个占位元素；

界面生成模块，用于根据所述多个占位元素的参数生成目标骨架屏界面以供用户预览；

代码生成模块，用于根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码。

另一方面，本发明实施例还提供了一种服务器，该服务器包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明任一实施例提供的生成方法。

又一方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任一实施例提供的生成方法。

本发明实施例通过接收用户对预设绘图界面的操作生成的骨架屏画面，所述骨架屏画面包括多个占位元素；根据所述多个占位元素的参数生成目标骨架屏界面以供用户预览；根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码，解决了现有的骨架屏开发技术无法满足用户自定义需求的问题，实现了满足骨架屏页面开发的用户自定义需求的效果。

附图说明

图1是本发明实施例一提供的骨架屏页面代码的生成方法的流程示意图；

图2是本发明实施例一提供的预设绘图界面的结构示意图；

图3是本发明实施例二提供的骨架屏页面代码的生成方法的流程示意图；

图4是本发明实施例三提供的骨架屏页面代码的生成装置的结构示意图；

图5为本发明实施例四提供的一种服务器的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，各步骤的顺序可以被重新安排。当其操作完成时处理可以被终止，但是还可以具有未包括在附图中的附加步骤。处理可以对应于方法、函数、规程、子例程、子程序等等。

此外，术语“第一”、“第二”等可在本文中用于描述各种方向、动作、步骤或元件等，但这些方向、动作、步骤或元件不受这些术语限制。这些术语仅用于将第一个方向、动作、步骤或元件与另一个方向、动作、步骤或元件区分。举例来说，在不脱离本申请的范围的情况下，可以将第一模块称为第二模块，且类似地，可将第二模块称为第一模块。第一模块和第二模块两者都是模块，但其不是同一模块。术语“第一”、“第二”等不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本发明实施例的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

实施例一

如图1所示，本发明实施例一提供了一种骨架屏页面代码的生成方法，该生成方法包括：

S110、接收用户对预设绘图界面的操作生成的骨架屏画面，所述骨架屏画面包括多个占位元素。

本实施例中，用户可以在预设的绘图界面中进行绘图操作，具体可以为用户通过点击鼠标、拖曳鼠标和释放鼠标的操作在绘图界面限定的范围内画出占位图形以形成骨架屏画面，其中占位图形可以为矩形、圆形和三角形等其他形状，对于用户操作生成的每一个占位图形，用户还可以对其进行移动、删除、批量复制、批量移动或其他任何提高画图效率的操作，其中每一个占位图形就是一个占位元素。如图2所示的预设的绘图界面中，占位元素可以为矩形101或圆形102。

S120、根据所述多个占位元素的参数生成目标骨架屏界面以供用户预览。

本实施例中，用户在预设绘图界面确定好自己绘制的骨架屏画面后，可以点击预览按钮，系统将获取用户绘制的骨架屏画面中的多个占位元素的参数，并根据这些参数生成真实可用的目标骨架屏界面供用户预览，若用户对该目标骨架屏界面不满意，可以返回继续修改，重新绘制目标骨架屏界面，并通过预览按钮继续生成新的目标骨架屏界面，直至用户满意。

S130、根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码。

本实施例中，若用户对预览的骨架屏界面满意，可以发送第一指令，即点击生成代码的按钮，服务器将接收到目标骨架屏界面的多个占位元素的参数，并根据这些参数生成对应的骨架屏页面代码。用户可以直接复制该骨架屏页面代码以使用。

实施例二

如图2所示，本发明实施例二提供了一种骨架屏页面代码的生成方法，本发明实施例二是在本发明实施例一的基础上进一步的优化，该生成方法包括：

S210、根据用户发送的第二指令发送第三指令至服务器。

S220、接收所述服务器根据所述第三指令发送的页面信息。

S230、根据所述页面信息通过GUI生成预设绘图界面。

S240、接收用户对预设绘图界面的操作生成的骨架屏画面，所述骨架屏画面包括多个占位元素。

本实施例中，当用户需要生成骨架屏页面代码时，可以发送第二指令，即点击开始设计的按钮，系统接收到第二指令后将发送第三指令至服务器，具体可以为通过Node.js平台启动webpack-dev-server工具，即前端静态资源打包工具，webpack-dev-server工具将启动一个服务器，该服务器将根据第三指令返回一个页面信息，系统就通过GUI(GraphicalUser Interface，图形用户界面)的方式，根据该页面信息生成预设绘图界面。然后用户可以在预设的绘图界面中进行绘图操作，具体可以为用户通过点击鼠标、拖曳鼠标和释放鼠标的操作在绘图界面限定的范围内画出占位图形以形成骨架屏画面，其中占位图形可以为矩形、圆形和三角形等其他形状，对于用户操作生成的每一个占位图形，用户还可以对其进行移动、删除、批量复制、批量移动或其他任何提高画图效率的操作，其中每一个占位图形就是一个占位元素。

S250、遍历所述骨架屏画面上的全部占位元素以获取其坐标信息、长度信息、宽度信息和占位元素类型。

S260、确定渲染接口的需求数据类型。

S270、根据所述占位元素类型计算所述坐标信息、长度信息和宽度信息以得到映射数据，所述映射数据的数据类型为所述需求数据类型。

S280、对所述映射数据渲染以生成目标骨架屏界面以供用户预览。

本实施例中，用户在预设绘图界面确定好自己绘制的骨架屏画面后，可以点击预览按钮，系统将获取用户绘制的骨架屏画面中的多个占位元素的参数，其中多个占位元素的参数包括所述多个占位元素的坐标信息、长度信息、宽度信息或占位元素类型中的一种或多种。此外系统还会确定渲染接口的需求数据类型，例如render组件接口(react-content-loader或vue-content-loader)的需求数据类型。之后系统将根据占位元素类型，计算占位元素的坐标信息、长度信息和宽度信息，得到符合render组件接口需求数据类型的映射数据，并对该映射数据渲染，生成真实可用的目标骨架屏界面供用户预览，若用户对该目标骨架屏界面不满意，可以返回继续修改，重新绘制目标骨架屏界面，并通过预览按钮继续生成新的目标骨架屏界面，直至用户满意。

S290、根据用户发送的第一指令确认框架类型。

S300、发送所述框架类型和目标骨架屏界面的映射数据至服务器以采用javascript的AST技术生成对应的骨架屏页面代码。

本实施例中，若用户对预览的骨架屏界面满意，可以发送第一指令，即点击生成代码的按钮，其中用户还可以在第一指令中输入自己需求的框架类型，例如vue、react或angular等框架类型，服务器将接收到框架类型和目标骨架屏界面的映射数据，并采用javascript的AST(Abstract Syntax Tree，抽象语法树)技术生成对应的骨架屏页面代码，javascript是一种高级的、多范式、解释型的编程语言。用户可以直接复制该骨架屏页面代码以使用，例如，用户则可以根据自己的意愿来实现骨架屏插入和替换逻辑。

实施例三

如图3所示，本发明实施例三提供了一种骨架屏页面代码的生成装置100，本发明实施例三所提供的骨架屏页面代码的生成装置100可执行本发明任意实施例所提供的骨架屏页面代码的生成方法，具备执行方法相应的功能模块和有益效果。该骨架屏页面代码的生成装置100包括画面接收模块200、界面生成模块300和代码生成模块400。

具体的，画面接收模块200用于接收用户对预设绘图界面的操作生成的骨架屏画面，所述骨架屏画面包括多个占位元素；界面生成模块300用于根据所述多个占位元素的参数生成目标骨架屏界面以供用户预览；代码生成模块400用于根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码。

本实施例中，该骨架屏页面代码的生成装置100还包括指令发送模块500，该指令发送模块500用于根据用户发送的第二指令发送第三指令至服务器；接收所述服务器根据所述第三指令发送的页面信息；根据所述页面信息通过GUI生成预设绘图界面。

所述多个占位元素的参数包括所述多个占位元素的坐标信息、长度信息、宽度信息或占位元素类型中的一种或多种。

界面生成模块300具体用于遍历所述骨架屏画面上的全部占位元素以获取其坐标信息、长度信息、宽度信息和占位元素类型；根据所述占位元素类型计算所述坐标信息、长度信息和宽度信息以得到映射数据；对所述映射数据渲染以生成目标骨架屏界面以供用户预览。

界面生成模块300具体还用于确定渲染接口的需求数据类型；根据所述占位元素类型计算所述坐标信息、长度信息和宽度信息以得到映射数据，所述映射数据的数据类型为所述需求数据类型。

代码生成模块400具体用于根据用户发送的第一指令确认框架类型；发送所述框架类型和目标骨架屏界面的映射数据至服务器以生成对应的骨架屏页面代码。

代码生成模块400具体还用于发送所述框架类型和目标骨架屏界面的映射数据至服务器以采用javascript的AST技术生成对应的骨架屏页面代码。

实施例四

图4为本发明实施例四提供的一种服务器的结构示意图。图4示出了适于用来实现本发明实施方式的示例性计算机设备12的框图。图4显示的计算机设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，计算机设备12以通用计算设备的形式表现。计算机设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

计算机设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算机设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。计算机设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该计算机设备12交互的设备通信，和/或与使得该计算机设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，计算机设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与计算机设备12的其它模块通信。应当明白，尽管图中未示出，可以结合计算机设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的生成方法：

实施例五

本发明实施例五还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请所有发明实施例提供的生成方法：

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims

1.一种骨架屏页面代码的生成方法，其特征在于，包括：

根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码；

所述根据所述多个占位元素的参数生成目标骨架屏界面以供用户预览包括：

对所述映射数据渲染以生成目标骨架屏界面以供用户预览。

2.根据权利要求1所述的生成方法，其特征在于，所述接收用户对预设绘图界面的操作生成的骨架屏画面之前包括：

根据用户发送的第二指令发送第三指令至服务器；

接收所述服务器根据所述第三指令发送的页面信息；

根据所述页面信息通过GUI生成预设绘图界面。

3.根据权利要求1所述的生成方法，其特征在于，所述多个占位元素的参数至少包括所述多个占位元素的坐标信息、长度信息、宽度信息或占位元素类型中的一种或多种。

4.根据权利要求1所述的生成方法，其特征在于，所述根据所述占位元素类型计算所述坐标信息、长度信息和宽度信息以得到映射数据包括：

确定渲染接口的需求数据类型；

5.根据权利要求1所述的生成方法，其特征在于，所述根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码包括：

根据用户发送的第一指令确认框架类型；

6.根据权利要求5所述的生成方法，其特征在于，所述发送所述框架类型和目标骨架屏界面的映射数据至服务器以生成对应的骨架屏页面代码包括：

7.一种页面骨架屏页面代码的生成装置，其特征在于，包括：

代码生成模块，用于根据用户发送的第一指令发送所述目标骨架屏界面的多个占位元素的参数至服务器以生成对应的骨架屏页面代码；

所述界面生成模块，具体用于遍历所述骨架屏画面上的全部占位元素以获取其坐标信息、长度信息、宽度信息和占位元素类型；根据所述占位元素类型计算所述坐标信息、长度信息和宽度信息以得到映射数据；对所述映射数据渲染以生成目标骨架屏界面以供用户预览。

8.一种服务器，其特征在于，所述服务器包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6中任一所述的生成方法。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-6中任一所述的生成方法。