页面生成方法、系统、计算机设备及可读存储介质与流程

1.本发明涉及数据处理领域，尤其涉及页面生成方法、系统、计算机设备及可读存储介质。


背景技术：

2.随着流量越来越复杂，媒介渠道越来越多，广告的多渠道分化展示和推广方式就显得尤为重要，设备专区页面可视化配置是针对设备买卖、设备维修、设备商入驻等内容研发的活动广告配置、渠道分化平台。
3.多渠道分化展示主要根据用户的实际需求推送页面，而用户的需求多样化导致页面开发的要求越来越高，现有前端开发中，通常是通过javascript(简称“js”)代码来实现整体开发流程，开发流程复杂，开发工作量大，开发的成本较高。开发出来的服务程序页面也难以存储已开发完成的页面展示数据，容易导致大量重复代码编写工作，影响页面开发效率。


技术实现要素：

4.本发明的目的是提供一种页面生成方法、系统、计算机设备及可读存储介质，用于解决以下问题：页面开发效率低。
5.本发明实施例的一个方面提供了一种页面生成方法，所述方法包括：
6.根据页面生成请求，确定待生成页面需求；
7.根据所述待生成页面需求，通过vue框架将待生成页面拆分成多个组件；其中每个组件均与vue框架中的唯一标识绑定；每个组件均包括html元素、元素布局、样式以及业务逻辑封装；
8.根据所述业务逻辑封装以及所述各个组件的属性，在各个组件中配置待生成页面的字段信息；
9.调用配置后的各个组件，渲染并生成页面。
10.进一步的，通过vue框架将待生成页面拆分成多个组件的步骤，包括：通过vue框架生成组件关系树；其中所述组件关系树中的节点均对应组件，所述组件关系树用于反映各个组件之间的应用关系；根据所述各个组件之间的应用关系，在预设组件库中选取多个组件。
11.进一步的，在预设组件库中选取多个组件的步骤之后，包括：根据待生成页面需求，确定vue框架对应的页面参数信息；所述页面参数信息包括vue框架中的唯一标识、注册组件名称、组件注册数据函数、数据传递接口及事件对象的一种或者多种。
12.进一步的，调用配置后的各个组件，渲染并生成页面的步骤，包括：根据待生成页面需求，对多个组件进行组合排序；根据排序结果自定义拖拽组件组合插入到页面中，渲染并生成页面。
13.进一步的，渲染并生成页面的步骤，包括：根据所述页面参数信息，确定各个组件
的生成位置以及颜色；根据各个组件的生成位置以及颜色，在对应位置生成相应颜色的组件，以完成页面渲染。
14.进一步的，根据所述业务逻辑封装以及所述各个组件的属性，在各个组件中配置待生成页面的字段信息的步骤，包括：获取所述业务逻辑封装中的多个表单；根据各个组件的属性抽取所述多个表单中的表单数据；根据所述表单数据，对页面中展示的文字信息进行配置，以生成字段信息。
15.进一步的，通过vue框架将待生成页面拆分成多个组件的步骤之后，还包括：创建与待生成页面对应的json文件；其中所述json文件的各个节点分别携带有对应的vue框架的唯一标识。
16.本发明实施例的一个方面又提供了一种页面生成系统，所述页面生成系统包括：
17.请求模块，用于根据页面生成请求，确定待生成页面需求；
18.拆分模块，用于根据所述待生成页面需求，通过vue框架将待生成页面拆分成多个组件；其中每个组件均与vue框架中的唯一标识绑定；每个组件均包括html元素、元素布局、样式以及业务逻辑封装；
19.配置模块，用于根据所述业务逻辑封装以及所述各个组件的属性，在各个组件中配置待生成页面的字段信息；
20.渲染模块，用于调用配置后的各个组件，渲染并生成页面。
21.本发明实施例的一个方面又提供了一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述页面生成方法的步骤。
22.本发明实施例的一个方面又提供了一种计算机可读存储介质，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述页面生成方法的步骤。
23.本发明实施例提供的页面生成方法、系统、计算机设备及可读存储介质；通过将页面拆分成多个组件，对多个组件进行组合并生成页面，提升了页面生成效率；通过vue框架使得部分开发代码可重复利用，避免了二次开发，显著降低了开发成本。
附图说明
24.图1示意性示出了根据本发明实施例一的页面生成方法的流程图；
25.图2示意性示出了图1中的步骤s101的子步骤图；
26.图3示意性示出了根据本技术实施例二的页面生成系统的框图；及
27.图4示意性示出了根据本技术实施例三的适于实现页面生成方法的计算机设备的硬件架构示意图。
具体实施方式
28.为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
29.需要说明的是，在本发明实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。
30.在本发明的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本发明及区别每一步骤，因此不能理解为对本发明的限制。
31.名词解释：
32.json：(javascript object notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于javascript programming language,standard ecma-262 3rd edition-december 1999的一个子集。json采用完全独立于语言的文本格式，但是也使用了类似于c语言家族的习惯(包括c,c ,c#,java,javascript,perl,python等)。这些特性使json成为理想的数据交换语言。
33.vue框架：是一套用于构建用户界面的渐进式javascript框架。与其它大型框架不同的是，vue框架被设计为可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue也完全能够为复杂的单页应用(spa)提供驱动。不同的vue组件可以展示不同格式的数据内容，在页面中实现不同的功能，组件是可复用的vue实例。
34.实施例一
35.图1示意性示出了根据本发明实施例一的页面生成方法的流程图。
36.如图1所示，该页面生成方法可以包括步骤s100～s103，其中：
37.步骤s100：根据页面生成请求，确定待生成页面需求。
38.具体地，待生成页面为本实施例渲染出来的最终页面，该待生成页面中包含文字、图片、表格表单等多种格式属性的内容。实际应用中，待生成页面比如是服务程序中的活动页面或者是展示的层级页面。
39.页面生成方法的执行主体为计算机设备的前端开发程序，该前端开发程序中包括页面开发界面，在前端开发程序中导入页面的设计文件，页面的设计文件即为页面生成请求，页面设计文件可以包括但不限于流程图、产品原型图以及页面尺寸设计样式图等；前端开发程序通过解析页面设计文件，从而确定出待生成页面需求的信息(例如页面包括的板块、样式、布局方式等等)。
40.步骤s101：根据所述待生成页面需求，通过vue框架将待生成页面拆分成多个组件；其中每个组件均与vue框架中的唯一标识绑定；每个组件均包括html元素、元素布局、样式以及业务逻辑封装。
41.例如，例如待生成页面包括数字工厂、买新设备、淘旧设备、设备维保四个模块，可通过vue框架将上述四个模块组件化，其中每个组件均包括完整的业务逻辑封装，有助于快速生成页面；html元素包括：文本区域、列表框、文本输入框、密码输入框、单选输入框、复选输入框、重置按钮、提交按钮、隐藏域等；元素布局方式包括静态布局、流式布局、自适应布局、弹性布局以及响应式布局；本实施例优选采用铺满宽度，高度自适应的自适应布局策
略，针对不同尺寸和分辨率的设备设置不同的样式，就相当于创建了多个静态布局，每一个静态布局对应一个尺寸范围的屏幕；屏幕尺寸或分辨率变化时，页面元素会跟着变化；开发人员可通过内联样式、tag选择器、class选择器、id选择器进行页面样式的设置。
42.具体地，对于一个页面来说，组件可以是页面编辑代码中的某一部分，该部分代码可重复用于多个页面开发场景，为简化页面开发流程，可通过vue框架从页面编辑代码中提取出该部分代码，并构建对应的组件，极大的减少了页面开发的难度和时间。为了在vue框架中使用组件，首先需要对vue框架进行注册，注册类型包括全局注册和局部注册；其中全局注册是注册一次，在各个组件都可以使用；局部注册是在所在文件注册就只能在该文件上使用，各个组件之间并不通用；如图2所示，通过vue框架将待生成页面拆分成多个组件的步骤，包括：
43.步骤s101-1：通过vue框架生成组件关系树；其中所述组件关系树中的节点均对应组件，所述组件关系树用于反映各个组件之间的应用关系；
44.步骤s101-2：根据所述各个组件之间的应用关系，在预设组件库中选取多个组件。
45.具体地，页面包括页头、侧边栏、内容区域等组件，页头、侧边栏、内容区域还包含导航链接、图片、文字、表单等组件，这些组件之间形成嵌套关系的组件关系树；根据组件关系树中的嵌套关系，在预设组件库中选取组件，从而可快速获取页面的整体架构，提高了页面构建的效率；其中预设组件库包括开发基础组件库、工具类组件库、控件级业务组件库以及页面级组件库；根据实际的应用环境选择对应的组件库，上述预设组件库可通过npm或者github进行管理；在预设组件库选取多个组件的步骤之后，还包括：
46.步骤s101-3:根据待生成页面需求，确定vue框架对应的页面参数信息；所述页面参数信息包括vue框架中的唯一标识、注册组件名称、组件注册数据函数、数据传递接口及事件对象的一种或者多种。
47.根据在组件库中选择对应的组件并派生出默认业务页面，再对默认业务页面进行可视化编辑，默认业务页面在生成之前需要对页面参数信息进行配置，通过页面的参数信息可确定组件名称、组件的数据接口、以及传输对象，从而为页面生成之前做好了准备工作；页面采用宽度铺满，高度滚动的布局策略，将前端框架组件设置为铺满宽度，高度自适应，页面展示时组件只需在页面垂直方向上顺序排列，组合时不需要进行嵌套，且各个组件之间互为兄弟节点，没有层级关系。
48.通过vue框架将待生成页面拆分成多个组件的步骤之后，还包括：
49.步骤s101-4a:创建与待生成页面对应的json文件；其中所述json文件的各个节点分别携带有对应的vue框架的唯一标识；
50.根据待生成页面的query参数(即get请求时常用的携带参数方式)的id字段确定唯一标识。进而便于后续在对该页面进行更新时，可以根据该页面查询参数的id字段，快速地确定出与该页面所对应的json文件。
51.一般页面包括有文字展示区域、图片展示区域、视频展示区域、音频展示区域；从而使得vue框架中包括有图像vue组件、音频vue组件、文字vue组件、视频vue组件。为了便于分辨json文件中各节点与vue框架对应，其中可对图像vue组件、音频vue组件、文字vue组件、视频vue组件赋予id名a、b、c、d，将此id作为唯一标识，可通过此id寻找vue框架下对应的组件。
52.步骤s102：根据所述业务逻辑封装以及所述各个组件的属性，在各个组件中配置待生成页面的字段信息；
53.业务逻辑封装内包括用于展示数字工厂、买新设备、淘旧设备、设备维保组件的文字信息的多个表单，各个组件的属性名称可以是数字工厂、买新设备、淘旧设备、设备维保组件的一种；根据所述业务逻辑封装以及所述各个组件的属性，在各个组件中配置待生成页面的字段信息的步骤，包括：
54.步骤s102-1：获取所述业务逻辑封装中的多个表单；
55.步骤s102-2：根据各个组件的属性抽取所述多个表单中的表单数据；
56.步骤s102-3：根据所述表单数据，对页面中展示的文字信息进行配置，以生成字段信息。
57.具体地，可通过组件的属性名称匹配表单名，例如根据数字工厂在所述业务逻辑封装中寻找对应关于数字工厂的表单；然后将表单名对应的表单数据进行抽取，抽取方式可以是触发器方式、时间戳方式、全表删除插入方式、全表比对方式、日志表方式等；抽取后的表单数据通过数据清洗后，在页面上生成对应的字段信息。
58.步骤s103:调用配置后的各个组件，渲染并生成页面。
59.本实施例通过对各个组件进行拖拽和组合，从而生成对应的页面；其中调用配置后的各个组件，渲染并生成页面的具体步骤包括：
60.步骤s103-1：根据待生成页面需求，对多个组件进行组合排序，
61.步骤s103-2：根据排序结果自定义拖拽组件组合插入到页面中，渲染并生成页面。
62.具体地，运营人员通过点击、拖拽组件等方式进行页面可视化配置，根据投放的渠道，自定义模块的数量、顺序和ui展示情况，组合成目标业务页面。
63.本实施例的页面还可对投放的渠道进行配置，渠道标识由渠道平台platformsource 渠道来源channelsource 渠道名称channelname组合而成，将key加上述渠道标识拼接在主题链接的尾部，生成具有渠道标识的设备专区主题链接。每个主题可以分化多个主题链接，链接数据同步在统一主题下，从而可生成可视化报表，解决多渠道的数据统计分析难题；另外，生成的页面可支持配置banner、客服等常用周边功能。配置完成后，支持用户实时扫码预览页面编辑效果，使用后台渲染技术，实时快速渲染，即可获得搭建后的页面。
64.渲染并生成页面的步骤，包括：
65.步骤s103-2a:根据所述页面参数信息，确定各个组件的生成位置以及颜色；
66.步骤s103-2b:根据各个组件的生成位置以及颜色，在对应位置生成相应颜色的组件，以完成页面渲染。
67.还可以通过页面需求确定待生成页面中各个展示模块的位置、大小以及颜色等展示样式参数，进而可以将该些页面样式参数写入对应json文件中特定节点中，以便后续可以根据该些样式参数，使用vue框架进行页面渲染。仍以上文例子进行说明，假设根据页面需求确定待生成页面“图像展示区域”的页面参数信息为：“颜色：黑色；起始坐标：(x1,y1)；尺寸：17*18mm”，可以通过vue框架中的“图像vue组件”进行渲染；“视频展示区域”的页面参数信息为：“颜色：蓝色；起始坐标：(x2,y2)；尺寸：20*20mm”，可以通过vue框架中的“视频vue组件”进行渲染；“文字展示区域”的页面参数信息为：“颜色：灰色；起始坐标：(x3,y3)；
尺寸：30*30mm”，可以通过vue框架中“文字vue组件”进行渲染；“音频展示区域”的页面参数信息为：“颜色：红色；起始坐标：(x4,y4)；尺寸：10*10mm”，可以由“音频vue组件”渲染。假设开发平台所创建的json文件中可以包含的四个节点分别为：a、b、c、d，且节点a中包含页面参数信息为：“颜色：黑色；起始坐标：(x1,y1)”；节点b中包含页面参数信息为：“颜色：蓝色；起始坐标：(x2,y2)；尺寸：20*20mm”；节点c中包含页面参数信息为：“颜色：灰色；起始坐标：(x3,y3)；尺寸：30*30mm”；节点d中包含页面参数信息：“颜色：红色；起始坐标：(x4,y4)；尺寸：10*10mm”。
68.本实施例采用模块组件化和页面可视化实现页面生成效率的提升；采用不嵌套的组件层级简化数据流和样式布局；实现了不同渠道风格化的、精准的产品推送；通过vue框架使得部分开发代码可重复利用，避免了二次开发，解放人力，显著降低了开发成本。
69.实施例二
70.图3示意性示出了根据本发明的页面生成系统的框图，该生成系统可以被分割成程序模块，一个或者多个程序模块被存储于存储介质中，并由处理器所执行，以完成本发明实施例。本发明实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。
71.如图3所示，该页面生成系统130可以包括请求模块131、拆分模块132、配置模块133、渲染模块134。其中：
72.请求模块131，用于根据页面生成请求，确定待生成页面需求；
73.拆分模块132，用于根据所述待生成页面需求，通过vue框架将待生成页面拆分成多个组件；其中每个组件均与vue框架中的唯一标识绑定；每个组件均包括html元素、元素布局、样式以及业务逻辑封装；
74.配置模块133，用于根据所述业务逻辑封装以及所述各个组件的属性，在各个组件中配置待生成页面的字段信息；
75.渲染模块134，用于调用配置后的各个组件，渲染并生成页面。
76.所述拆分模块132还用于通过vue框架生成组件关系树；其中所述组件关系树中的节点均对应组件，所述组件关系树用于反映各个组件之间的应用关系；根据所述各个组件之间的应用关系，在预设组件库中选取多个组件。
77.所述拆分模块132还用于根据待生成页面需求，确定vue框架对应的页面参数信息；所述页面参数信息包括vue框架中的唯一标识、注册组件名称、组件注册数据函数、数据传递接口及事件对象的一种或者多种。
78.所述渲染模块134还用于根据待生成页面需求，对多个组件进行组合排序，根据排序结果自定义拖拽组件组合插入到页面中，渲染并生成页面。
79.所述渲染模块134还用于根据页面参数信息，确定各个组件的生成位置以及颜色；根据各个组件的生成位置以及颜色，在对应位置生成相应颜色的组件，以完成页面渲染。
80.所述配置模块133还用于获取所述业务逻辑封装中的多个表单；根据各个组件的属性抽取所述多个表单中的表单数据；根据所述表单数据，对页面中展示的文字信息进行配置，以生成字段信息。
81.所述拆分模块132还用于创建与待生成页面对应的json文件；其中所述json文件的各个节点分别携带有对应的vue框架的唯一标识。
82.实施例三
83.图4示意性示出了根据本发明实施例三的适于实现页面生成方法的计算机设备6的硬件架构示意图。本实施例中，计算机设备6是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，可以是智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)、网关等。如图4所示，计算机设备6至少包括但不限于：可通过系统总线相互通信链接存储器141、处理器142、网络接口143。其中：
84.存储器141至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器141可以是计算机设备6的内部存储模块，例如该计算机设备6的硬盘或内存。在另一些实施例中，存储器141也可以是计算机设备6的外部存储设备，例如该计算机设备6上配备的插接式硬盘，智能存储卡(smart media card，简称为smc)，安全数字(secure digital，简称为sd)卡，闪存卡(flash card)等。当然，存储器141还可以既包括计算机设备6的内部存储模块也包括其外部存储设备。本实施例中，存储器141通常用于存储安装于计算机设备6的操作系统和各类应用软件，例如页面生成方法的程序代码等。此外，存储器141还可以用于暂时地存储已经输出或者将要输出的各类数据。
85.处理器142在一些实施例中可以是中央处理器(central processing unit，简称为cpu)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器142通常用于控制计算机设备6的总体操作，例如执行与计算机设备6进行数据交互或者通信相关的控制和处理等。本实施例中，处理器142用于运行存储器141中存储的程序代码或者处理数据。
86.网络接口143可包括无线网络接口或有线网络接口，该网络接口143通常用于在计算机设备6与其他计算机设备之间建立通信链接。例如，网络接口143用于通过网络将计算机设备6与外部终端相连，在计算机设备6与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(intranet)、互联网(internet)、全球移动通讯系统(global system of mobile communication，简称为gsm)、宽带码分多址(wideband code division multiple access，简称为wcdma)、4g网络、5g网络、蓝牙(bluetooth)、wi-fi等无线或有线网络。
87.需要指出的是，图4仅示出了具有部件141-143的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
88.在本实施例中，存储于存储器141中的页面生成方法还可以被分割为一个或者多个程序模块，并由处理器(本实施例为处理器142)所执行，以完成本发明实施例。
89.实施例四
90.本发明还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的页面生成方法的步骤。
91.本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，sd或dx存储器等)、随机访问存储器(ram)、静态随机访问存储器(sram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、可编程只读存储器(prom)、磁性存储器、磁盘、光盘
等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(smart media card，简称为smc)，安全数字(secure digital，简称为sd)卡，闪存卡(flash card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中异常账号的识别方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
92.显然，本领域的技术人员应该明白，上述的本发明实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明实施例不限制于任何特定的硬件和软件结合。
93.以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。