CN114595413A - 网页布局方法、系统及计算机设备 - Google Patents

Abstract

本发明公开了一种网页布局方法、系统及计算机设备，方法包括：接收用户访问请求，用户访问请求至少包括设备ID；判断配置数据缓存中是否存在于设备ID对应的历史配置数据；若是，则获取历史配置数据并基于历史配置数据动态渲染网页；若否，则基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；基于配置指令生成配置数据；基于配置数据渲染网页，并保存配置数据至配置数据缓存中；根据用户的配送指令生成对应的配置数据渲染网页，能够针对不同用户合理进行差异化布局，并存储配置数据以便用户再次登录时直接对应渲染网页，不必重新布局，提高页面渲染效率。

Description

网页布局方法、系统及计算机设备

技术领域

本发明涉及浏览器处理领域，具体涉及一种网页布局方法、系统及计算机设备。

背景技术

在数字化与智能化转型的浪潮下，中后台管理系统逐渐成为支撑企业数字化转型的基本工具。由于基于网页端的中后台系统应用的时间跨度周期远超toC网页端场景的应用，目前中后台管理系统往往只注重toC系统开发，而忽视对中后台系统的可视页面与信息进行设计与交互优化。

目前对于基于网页端的中后台系统应用，一般都是只满足用户对于业务的流程诉求，甚少针对网页页面布局进行优化调整，用户浏览网页时，常常需要上下左右多方位滚动页面来定位自己在页面上所关注的关键信息，且容易有异常跳出的情况，浏览器端提供的缩放只能对网页页面进行比例缩放，关键的信息会因缩放而不够凸出的问题。

用户的体验诉求不一，再反馈到研发侧进行合理公共诉求的落地，通常时间周期过长，研发成本高，无法满足用户的部分定制化需要。

发明内容

本发明目的是：提供一种能够根据用户诉求精确定制的网页布局方法、系统及计算机设备。

本发明的技术方案是：第一方面，本申请提供一种网页布局方法，所述方法包括：

接收用户访问请求，所述用户访问请求至少包括设备ID；

判断配置数据缓存中是否存在于所述设备ID对应的历史配置数据；

若是，则获取所述历史配置数据并基于所述历史配置数据动态渲染网页；

若否，则基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，所述配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；

基于所述配置指令生成配置数据；

基于所述配置数据渲染网页，并保存所述配置数据至所述配置数据缓存中。

在一种较佳的实施方式中，所述基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令之前，所述方法还包括：

判断是否使用预设配置工具；

若是，则基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令；

若否，则读取预设初始化默认配置数据并基于所述预设初始化默认配置数据动态渲染网页。

在一种较佳的实施方式中，所述基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令之前，所述方法还包括：

基于浏览器对于css3变量的支持抽取设计变量，所述设计变量包括颜色变量、圆角变量、文字变量和间距变量和表单对齐方式变量；

基于所述设计变量生成预设配置工具。

在一种较佳的实施方式中，所述保存所述配置数据至所述配置数据缓存中包括：

关联所述配置数据与所述设备ID；

基于所述设备ID分区存储所述配置数据至所述配置数据缓存中。

在一种较佳的实施方式中，所述用户访问请求还包括用户标识；所述保存所述配置数据至配置数据缓存中还包括：

关联所述配置数据、所述设备ID以及所述用户标识；

基于所述设备ID和所述用户标识分区保存至所述配置数据缓存。

在一种较佳的实施方式中，所述保存所述配置数据至所述配置数据缓存中之后，所述方法还包括：

获取预设保存策略；

基于所述预设保存策略保存所述配置数据至所述配置数据缓存中，并更新所述配置数据缓存。

在一种较佳的实施方式中，所述预设保存策略包括：存储策略与失效时间策略；

所述基于所述预设保存策略保存所述配置数据至所述配置数据缓存中，并更新所述配置数据缓存包括：

基于所述存储策略保存所述配置数据至所述配置数据缓存中；

基于所述失效时间策略定时删除所述配置数据缓存中对应的配置数据。

在一种较佳的实施方式中，所述基于所述配置数据渲染网页之后、所述保存所述配置数据至所述配置数据缓存中之前，所述方法还包括：

向所述用户页面发送确认提示信息；

接收用户基于所述确认提示信息发送的选择指令，所述选择指令包括确认指令或修改指令；

若所述选择指令为确认指令，则保存所述配置数据至所述配置数据缓存中；

若所述选择指令为修改指令，则基于预设配置工具向用户页面发送配置信息。

第二方面，本申请还提供一种网页布局系统，所述系统包括：

接收模块，用于接收用户访问请求，所述用户访问请求至少包括设备ID；

第一判断模块，用于判断配置数据缓存中是否存在于所述设备ID对应的历史配置数据；

渲染模块，用于在所述第一判断模块判断结果为是后，获取所述历史配置数据并基于所述历史配置数据动态渲染网页；

发送获取模块，用于在所述第一判断模块判断结果为否后，基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，所述配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；

第一生成模块，用于基于所述配置指令生成配置数据；

渲染保存模块，用于基于所述配置数据渲染网页，并保存所述配置数据至所述配置数据缓存中。

第三方面，本申请还提供一种计算机设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行第一方面中任一所述的方法。

与现有技术相比，本发明的优点是：提供一种网页布局方法、系统及计算机设备，方法包括：接收用户访问请求，用户访问请求至少包括设备ID；判断配置数据缓存中是否存在于设备ID对应的历史配置数据；若是，则获取历史配置数据并基于历史配置数据动态渲染网页；若否，则基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；基于配置指令生成配置数据；基于配置数据渲染网页，并保存配置数据至配置数据缓存中；根据用户的配送指令生成对应的配置数据渲染网页，从而能够针对不同用户合理进行差异化布局，并存储配置数据以便用户再次登录时直接对应渲染网页，不必重新布局，有效提高页面渲染效率。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请所提供的网页布局方法所使用的架构图；

图2本申请所提供的网页布局方法流程图；

图3为本申请所提供的网页布局方法操作流程图；

图4为本申请所提供的网页布局系统结构图；

图5为本申请所提供的计算机设备的架构图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

如背景技术所述，目前中后台系统应用对于网页端的设计仅满足用户对于业务的流程需求，不关注网页页面布局的设计，当用户浏览网页时不能针对不同用户进行差异化布局，导致用户在浏览网页时使用不便。

为解决上述问题，本申请创造性地提出了一种网页布局方法、系统及计算机设备，利用预设配置工具根据用户需求对网页进行布局，并收集存储用户决定的配置数据后续继续使用，能够实现对不同用户使用的网页页面精准差异化定制，并有效提高网页布局的速度和效率，降低人工操作工作量。下面将结合具体实施例对本申请所提出的网页布局方法、系统及计算机设备进行介绍。

实施例一：本实施例对本申请中进行网页布局的架构进行介绍。

参照图1所示，该架构包括配置工具SDK(Software Development Kit软件开发工具包)，其中设置主题色、字体颜色、字体大小、表单对齐方式、密度和其他设计变量(阴影、圆角等)的可配置数据模块，以及缓存模块，另外，该架构还包括配置缓存数据读取模块，浏览器默认重置模块与浏览器动态渲染模块。配置工具SDK根据用户需求(用户指令)配置数据并缓存，后续该设备再次登录访问网页时，配置缓存数据读取模块从缓存模块中读取对应的缓存历史配置数据，浏览器动态渲染模块根据缓存历史配置数据动态渲染网页，而当配置缓存数据读取模块未能从缓存模块中读取到对应的缓存历史配置数据且不使用配置工具进行配置时，浏览器默认重置模块读取初始化默认配置数据对网页进行动态渲染。

配置工具的esmodule与sdk方式的引入，方便开发快速的进行集成，具体来说是将该方案的代码，通过webpack打包成npm与umd的方式。

实施例二：基于上述实施例一所介绍的进行网页布局的架构，本实施例介绍一种网页布局方法，参照图2与图3所示，该方法包括：

S110、接收用户访问请求，用户访问请求至少包括设备ID。

具体的，用户打开网页时发起网页登录访问请求，该网页登录访问请求中携带有用户所使用的登录设备的设备ID。

优选的，当用户打开网页时发起的网页登录访问请求，还可以包括用户ID。具体的，用户打开网页时登录自己的个人信息，上传用户ID。

S120、判断配置数据缓存中是否存在于设备ID对应的历史配置数据；

若是，则进入S130；若否，则进入S140。

配置缓存数据于本地存储，配置缓存数据分为N个模块(N为大于等于1的整数)，配置缓存数据所分的模块按照设备ID进行唯一绑定，即一个设备ID对应一个配置缓存数据模块，该配置缓存数据模块仅对该设备ID对应的历史配置数据进行存储。根据设备ID在配置数据缓存中查找是否具有对应的配置缓存数据模块，若有，则进入S130。

S130、获取历史配置数据并基于历史配置数据动态渲染网页。

读取该配置缓存数据模块中的历史配置数据并以历史配置数据动态渲染网页。具体的，配置缓存数据模块中可能只存储有一组历史配置数据，也可能存储有多组即不同时间、不同批次的历史配置数据，优选的，当配置缓存数据模块中存储有多组历史配置数据时，读取其中最近时间的历史配置数据。

优选的，在S140之前，该方法还包括：

SA1、基于浏览器对于css3变量的支持抽取设计变量，设计变量包括颜色变量、圆角变量、文字变量和间距变量和表单对齐方式变量，其中，文字变量包括字体颜色变量、字体大小变量。当然，设计变量还可以抽取其他变量，如文字阴影变量等。

具体的，基于浏览器对于原生css3变量(可以实现样式的继承)的支持，对中后台系统中用户对于颜色、圆角、文字、间距、表单对齐方式等层面进行变量的抽象，定义基础token(标记)57个，也可针对业务场景扩展token。

从颜色、圆角、文字、间距的角度，抽离出主题色、字体颜色、字体大小、密度的常用主要变量与次要的若干变量值，定义好默认值，次要的变量值包括表单对齐变量值以及阴影变量值。

主题色即系统主题颜色；字体颜色即系统所有页面主要字体颜色；字体大小即系统所有页面字体大小；密度即间距的阶梯(4px,8px,16px,32px,64px),所有页面的间距通过此阶梯调配。

其中，css(Cascading Style Sheets)为层叠样式表，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。因此，得以保证后续配置数据的成功以及存储。

SA2、基于设计变量生成预设配置工具。

基于上述设计变量生成预设配置工具，预设配置工具包含主题色、字体颜色、字体大小、密度主要的配置、次要变量的样式文件,次要变量的样式文件包括表单对齐方式文件与阴影样式文件，表单描述是左对齐还是右对齐。

SA1、判断是否使用预设配置工具；

若是，则进入S140；若否，则进入SA2。

具体的，根据用户输入指令判断是否使用预设配置工具，或者预先存储有工具使用权限设备ID列表，判断用户访问请求中所携带的设备ID是凑在工具使用权限设备列表中，若用户访问请求中所携带的设备ID在工具使用权限设备列表中，怎判断使用预设配置工具，否则判断为不使用预设配置个工具。

SA2、读取预设初始化默认配置数据并基于所述预设初始化默认配置数据动态渲染网页。

具体的，配置数据缓存中存储有初始化配置数据模块，初始化配置数据模块中存储初始化默认配置数据，初始化默认数据包括颜色、圆角、文字、间距的角度、主题色、字体颜色、字体大小、密度的常用主要变量以及次要的变量值的默认值，次要的变量值的默认值指向表单对齐方式和阴影深浅、大小值。

S140、基于预设配置工具向用户页面发送配置信息并接收用户根据配置信息发送的配置指令，配置指令至少包括颜色指令、圆角指令、文字指令和间距指令。

具体的，根据预设配置工具的配置选项向用户页面发送对应的配置选项弹窗，用户根据配置选项弹窗内容选择所需的配置，确认后生成配置指令。优选的，配置指令还包括表单对齐方式。

S150、基于配置指令生成配置数据。

在一种较佳的实施方式中，在S160之前，该方法还包括：

SA3、向用户页面发送确认提示信息。

具体的，向用户页面发送“确认”或“返回修改”选项信息供用户选择。

SA4、接收用户基于所述确认提示信息发送的选择指令，所述选择指令包括确认指令或修改指令；

若选择指令为确认指令，则进入S160；

若选择指令为修改指令，则进入S140基于预设配置工具向用户页面发送配置信息。

S160、基于配置数据渲染网页，并保存配置数据至配置数据缓存中。

优选的，保存所述配置数据至配置数据缓存中包括：

S161、关联配置数据与设备ID。

将配置数据与设备ID关联以便后续根据设备ID查找对应的配置数据。

更优选的，用户访问请求还包括用户标识；则关联配置数据、设备ID以及用户标识。更细化地将配置数据与设备ID、用户ID关联对应，即使使用同一设备访问，也能对不同的用户进行不同的配置，后续根据用户ID准确获取该用户的历史配置数据。

更优选的，在S162之前，该方法还包括：

S16A、获取预设保存策略。

优选的，预设保存策略包括：存储策略与失效时间策略。

存储策略决定存储当前配置数据仅关联设备ID或关联设备ID与用户ID；失效时间策略决定当前配置数据存储时长，这是由于本地缓存空间有限，无法无限制地对配置数据进行存储。

S162、基于设备ID分区存储配置数据至配置数据缓存中。

优选的，当用户访问请求还包括用户标识时，基于设备ID和用户标识分区保存至配置数据缓存，示例性地，基于设备ID和用户标识以字典式存储配置数据。

优选的，基于预设保存策略保存配置数据至配置数据缓存中，并更新配置数据缓存。具体的，根据存储策略将当前配置数据关联设备ID进行存储或将当前配置数据关联设备ID与用户ID进行存储，并设置配置数据存储时间。示例性的：预设保存策略中规定当前设备ID与用户ID对应的配置数据存储时需关联设备ID与用户ID进行存储，失效时间为一天，则将当前配置数据关联设备ID与用户ID关联后存储至配置数据缓存中，在存储一天后删除该配置数据。

本实施例所提供的网页布局方法，包括：接收用户访问请求，用户访问请求至少包括设备ID；判断配置数据缓存中是否存在于设备ID对应的历史配置数据；若是，则获取历史配置数据并基于历史配置数据动态渲染网页；若否，则基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；基于配置指令生成配置数据；基于配置数据渲染网页，并保存配置数据至配置数据缓存中；根据用户的配送指令生成对应的配置数据渲染网页，从而能够针对不同用户合理进行差异化布局，并存储配置数据以便用户再次登录时直接对应渲染网页，不必重新布局，有效提高页面渲染效率。

实施例三：与上述实施例一与实施例二相对应的，下面将结合图4，对于本申请提供的网页布局系统进行介绍。其中，该系统可以通过硬件或软件的方式实现，也可以通过软硬件结合的方式实现，本申请并不限定。

在一个示例中如图4所示，本申请提供了一种网页布局系统，该系统包括：

接收模块410，用于接收用户访问请求，所述用户访问请求至少包括设备ID；

第一判断模块420，用于判断配置数据缓存中是否存在于所述设备ID对应的历史配置数据；

渲染模块430，用于在所述第一判断模块判断结果为是后，获取所述历史配置数据并基于所述历史配置数据动态渲染网页；

发送获取模块440，用于在所述第一判断模块420判断结果为否后，基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，所述配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；

第一生成模块450，用于基于所述配置指令生成配置数据；

渲染保存模块460，用于基于所述配置数据渲染网页，并保存所述配置数据至所述配置数据缓存中。

在一种较佳的实施方式中，该系统还包括：

第二判断模块470，用于在发送获取模块440基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令之前，判断是否使用预设配置工具；若第二判断模块470的判断结果为是，则进入发送获取模块440；若第二判断模块470的判断结果为否，则进入读取初始化模块480，读取初始化模块480用于读取预设初始化默认配置数据并基于所述预设初始化默认配置数据动态渲染网页。

更优选的，该系统还包括抽取模块490，用于在发送获取模块440基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令之前，基于浏览器对于css3变量的支持抽取设计变量，所述设计变量包括颜色变量、圆角变量、文字变量和间距变量和表单对齐方式变量；

第二生成模块4100，用于基于所述设计变量生成预设配置工具。

更优选的，渲染保存模块460包括：

第一关联单元461，用于关联所述配置数据与所述设备ID；

第一存储单元462，用于基于所述设备ID分区存储所述配置数据至所述配置数据缓存中。

更优选的，所述用户访问请求还包括用户标识；渲染保存模块460还包括：

第二关联单元463，用于关联所述配置数据、所述设备ID以及所述用户标识；

第二存储单元464，用于基于所述设备ID和所述用户标识分区保存至所述配置数据缓存。

在一种较佳的实施方式中，该系统还包括：

获取模块4110，用于获取预设保存策略；

保存模块4120，用于基于所述预设保存策略保存所述配置数据至所述配置数据缓存中，并更新所述配置数据缓存。

更优选的，所述预设保存策略包括：存储策略与失效时间策略；

保存模块4120包括：

保存单元4121，用于基于所述存储策略保存所述配置数据至所述配置数据缓存中；

更新单元4122，用于基于所述失效时间策略定时删除所述配置数据缓存中对应的配置数据。

在一种较佳的实施方式中，该系统还包括：

确认模块4130，用于在渲染保存模块460基于所述配置数据渲染网页之后、保存所述配置数据至所述配置数据缓存中之前，向所述用户页面发送确认提示信息；

选择模块4140，用于接收用户基于所述确认提示信息发送的选择指令，所述选择指令包括确认指令或修改指令；

若所述选择指令为确认指令，则进入渲染保存模块460保存所述配置数据至所述配置数据缓存中；

若所述选择指令为修改指令，则进入发送获取模块440基于预设配置工具向用户页面发送配置信息。

实施例四：与上述实施例一至实施例三相对应的，下面将结合图5，对本申请提供的计算机设备进行介绍。在一个示例如图5所示，本申请提供了一种计算机设备，该计算机设备包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行如下操作：

接收用户访问请求，所述用户访问请求至少包括设备ID；

判断配置数据缓存中是否存在于所述设备ID对应的历史配置数据；

若是，则获取所述历史配置数据并基于所述历史配置数据动态渲染网页；

若否，则基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，所述配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；

基于所述配置指令生成配置数据；

基于所述配置数据渲染网页，并保存所述配置数据至所述配置数据缓存中。

其中，图5示例性的展示出了计算机设备的架构，具体可以包括处理器510，视频显示适配器511，磁盘驱动器512，输入/输出接口513，网络接口514，以及存储器520。上述处理器510、视频显示适配器511、磁盘驱动器512、输入/输出接口513、网络接口514，与存储器520之间可以通过通信总线530进行通信连接。

其中，处理器510可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本申请所提供的技术方案。

存储器520可以采用ROM(Read Only Memory，只读存储器)、RAM(Random AccessMemory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器520可以存储用于控制计算机设备500运行的操作系统521，用于控制计算机设备500的低级别操作的基本输入输出系统(BIOS)522。另外，还可以存储网页浏览器523，数据存储管理524，以及图标字体处理系统525等等。上述图标字体处理系统525就可以是本申请实施例中具体实现前述各步骤操作的应用程序。总之，在通过软件或者固件来实现本申请所提供的技术方案时，相关的程序代码保存在存储器520中，并由处理器510来调用执行。

输入/输出接口513用于连接输入/输出模块，以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。

网络接口514用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。

总线530包括一通路，在设备的各个组件(例如处理器510、视频显示适配器511、磁盘驱动器512、输入/输出接口513、网络接口514，与存储器520)之间传输信息。

另外，该计算机设备500还可以从虚拟资源对象领取条件信息数据库541中获得具体领取条件的信息，以用于进行条件判断，等等。

需要说明的是，尽管上述计算机设备500仅示出了处理器510、视频显示适配器511、磁盘驱动器512、输入/输出接口513、网络接口514，存储器520，总线530等，但是在具体实施过程中，该计算机设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本申请方案所必需的组件，而不必包含图中所示的全部组件。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，云服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

另外需要说明的是：本申请中术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。

当然上述实施例只为说明本发明的技术构思及特点，其目的在于让熟悉此项技术的人能够了解本发明的内容并据以实施，并不能以此限制本发明的保护范围。凡根据本发明主要技术方案的精神实质所做的修饰，都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种网页布局方法，其特征在于，所述方法包括：

接收用户访问请求，所述用户访问请求至少包括设备ID；

判断配置数据缓存中是否存在于所述设备ID对应的历史配置数据；

若是，则获取所述历史配置数据并基于所述历史配置数据动态渲染网页；

若否，则基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，所述配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；

基于所述配置指令生成配置数据；

基于所述配置数据渲染网页，并保存所述配置数据至所述配置数据缓存中。

2.根据权利要求1所述的网页布局方法，其特征在于，所述基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令之前，所述方法还包括：

判断是否使用预设配置工具；

若是，则基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令；

若否，则读取预设初始化默认配置数据并基于所述预设初始化默认配置数据动态渲染网页。

3.根据权利要求1或2所述的网页布局方法，其特征在于，所述基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令之前，所述方法还包括：

基于浏览器对于css3变量的支持抽取设计变量，所述设计变量包括颜色变量、圆角变量、文字变量和间距变量和表单对齐方式变量；

基于所述设计变量生成预设配置工具。

4.根据权利要求3所述的网页布局方法，其特征在于，所述保存所述配置数据至所述配置数据缓存中包括：

关联所述配置数据与所述设备ID；

基于所述设备ID分区存储所述配置数据至所述配置数据缓存中。

5.根据权利要求4所述的网页布局方法，其特征在于，所述用户访问请求还包括用户标识；所述保存所述配置数据至配置数据缓存中还包括：

关联所述配置数据、所述设备ID以及所述用户标识；

基于所述设备ID和所述用户标识分区保存至所述配置数据缓存。

6.根据权利要求1所述的网页布局方法，其特征在于，所述保存所述配置数据至所述配置数据缓存中之后，所述方法还包括：

获取预设保存策略；

基于所述预设保存策略保存所述配置数据至所述配置数据缓存中，并更新所述配置数据缓存。

7.根据权利要求6所述的网页布局方法，其特征在于，所述预设保存策略包括：存储策略与失效时间策略；

所述基于所述预设保存策略保存所述配置数据至所述配置数据缓存中，并更新所述配置数据缓存包括：

基于所述存储策略保存所述配置数据至所述配置数据缓存中；

基于所述失效时间策略定时删除所述配置数据缓存中对应的配置数据。

8.根据权利要求1所述的网页布局方法，其特征在于，所述基于所述配置数据渲染网页之后、所述保存所述配置数据至所述配置数据缓存中之前，所述方法还包括：

向所述用户页面发送确认提示信息；

接收用户基于所述确认提示信息发送的选择指令，所述选择指令包括确认指令或修改指令；

若所述选择指令为确认指令，则保存所述配置数据至所述配置数据缓存中；

若所述选择指令为修改指令，则基于预设配置工具向用户页面发送配置信息。

9.一种网页布局系统，其特征在于，所述系统包括：

接收模块，用于接收用户访问请求，所述用户访问请求至少包括设备ID；

第一判断模块，用于判断配置数据缓存中是否存在于所述设备ID对应的历史配置数据；

渲染模块，用于在所述第一判断模块判断结果为是后，获取所述历史配置数据并基于所述历史配置数据动态渲染网页；

发送获取模块，用于在所述第一判断模块判断结果为否后，基于预设配置工具向用户页面发送配置信息并接收用户根据所述配置信息发送的配置指令，所述配置指令至少包括颜色指令、圆角指令、文字指令和间距指令；

第一生成模块，用于基于所述配置指令生成配置数据；

渲染保存模块，用于基于所述配置数据渲染网页，并保存所述配置数据至所述配置数据缓存中。

10.一种计算机设备，其特征在于，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行根据权利要求1-8中任一所述的方法。

Images