CN111581565B

CN111581565B - 一种页面样式配置方法、系统、介质及设备

Info

Publication number: CN111581565B
Application number: CN202010387869.1A
Authority: CN
Inventors: 王明燕; 任彦兴
Original assignee: Beijing Si Tech Information Technology Co Ltd
Current assignee: Beijing Si Tech Information Technology Co Ltd
Priority date: 2020-05-09
Filing date: 2020-05-09
Publication date: 2023-12-05
Anticipated expiration: 2040-05-09
Also published as: CN111581565A

Abstract

本发明涉及一种页面样式配置方法、系统、介质及设备。方法包括：接收业务页面的可配置样式模板，接收触点对业务页面的可配置样式元素配置的实际样式属性信息，将实际样式属性信息与对应的可配置样式模板结合，生成页面样式文件；将页面样式文件存储在预设路径下，将预设路径设置为页面样式引用地址。本发明提供的实施例，只需抽离需要配置的样式元素，并配置成样式模板，不同触点可根据自身需求对可配置样式元素进行个性化配置，形成触点对应的样式文件，并调整样式文件的引用地址，按照规范引用样式文件即可，大大减少了业务平台的工作量，并且对于业务页面代码没有侵入性，能保证业务页面逻辑的完整性，有利于推广。

Description

一种页面样式配置方法、系统、介质及设备

技术领域

本发明涉及页面路由技术领域，尤其涉及一种页面样式配置方法、系统、介质及设备。

背景技术

当前常用的各触点配置不同的页面样式的配置路由技术都是由业务平台来完成，这样做的优点是业务页面可根据自己的需要实现多触点页面样式的配置，但是如果想在企业级推广就有很大的局限性，需要在每个业务页面的每个动态适配的页面元素都增加样式切换逻辑，带来的开发工作量和时间成本很大，并且代码入侵性太强，不利于推广。

发明内容

本发明所要解决的技术问题是针对现有技术存在的问题，提供一种页面样式配置方法、系统、介质及设备。

为解决上述技术问题，本发明实施例提供一种页面样式配置方法，包括：

接收业务页面的可配置样式模板，所述可配置样式模板为从业务页面抽离可配置样式元素配置形成的样式模板；

接收触点对所述业务页面的可配置样式元素配置的实际样式属性信息，将所述实际样式属性信息与对应的可配置样式模板结合，生成所述触点对应的所述业务页面的页面样式文件；

将所述触点对应的所述业务页面的页面样式文件存储在预设路径下，将所述预设路径设置为所述业务页面针对所述触点的页面样式引用地址。

为解决上述技术问题，本发明实施例还提供一种页面样式配置系统，包括：

可配置样式模板获取模块，用于接收业务页面的可配置样式模板，所述可配置样式模板为从业务页面抽离可配置样式元素配置形成的样式模板；

样式文件生成模块，用于接收触点对所述业务页面的可配置样式元素配置的实际样式属性信息，将所述实际样式属性信息与对应的可配置样式模板结合，生成所述触点对应的所述业务页面的页面样式文件；

样式文件引用地址调整模块，用于将所述触点对应的所述业务页面的页面样式文件存储在预设路径下，将所述预设路径设置为所述业务页面针对所述触点的页面样式引用地址。

为解决上述技术问题，本发明实施例还提供一种计算机可读存储介质，包括指令，当所述指令在计算机上运行时，使所述计算机执行上述技术方案所述的页面样式配置方法。

为解决上述技术问题，本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在所述存储器上的并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述技术方案所述的页面样式配置方法。

本发明的有益效果是：实现了非入侵式多触点页面样式配置，业务页面不需要做代码改造，只需要抽离需要配置的样式元素，并配置成样式模板，不同触点可根据自身需求对业务页面的可配置样式元素进行个性化配置，形成触点对应的样式文件，并调整样式文件的引用地址，按照规范引用样式文件即可，大大减少了业务平台的工作量，并且对于业务页面代码没有侵入性，能保证业务页面逻辑的完整性，有利于推广。

本发明附加的方面及其的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。

附图说明

图1为本发明实施例提供的页面样式配置方法流程图；

图2为本发明实施例提供的页面样式配置系统结构框图；

图3为本发明实施例提供的资源存放说明示意图；

图4为现有技术中的页面路由原理示意图；

图5为本发明实施例提供的页面路由原理示意图。

具体实施方式

以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。

图1为本发明实施例提供的页面样式配置方法流程图。如图1所示，该方法包括：

S10，接收业务页面的可配置样式模板，所述可配置样式模板为从业务页面抽离可配置样式元素配置形成的样式模板；

S20，接收触点对所述业务页面的可配置样式元素配置的实际样式属性信息，将所述实际样式属性信息与对应的可配置样式模板结合，生成所述触点对应的所述业务页面的页面样式文件；

S30，将所述触点对应的所述业务页面的页面样式文件存储在预设路径下，将所述预设路径设置为所述业务页面针对所述触点的页面样式引用地址。

上述实施例中，实现了非入侵式多触点页面样式配置，业务页面不需要做代码改造，只需要抽离需要配置的样式元素，并配置成样式模板，不同触点可根据自身需求对业务页面的可配置样式元素进行个性化配置，形成触点对应的样式文件，并调整样式文件的引用地址，按照规范引用样式文件即可，大大减少了业务平台的工作量，并且对于业务页面代码没有侵入性，能保证业务页面逻辑的完整性，有利于推广。

可选地，所述从业务页面抽离可配置样式元素配置形成样式模板，包括：根据配置需求从所述业务页面的页面样式元素中抽离可配置样式元素到css文件；将所述可配置样式元素对应的属性值替换成变量，形成css样式模板。

上述实施例中，根据配置需求抽离可配置样式元素到css文件；将可配置样式元素对应的属性值替换成变量，形成样式模板，不同触点可根据自身需求对业务页面的可配置样式元素进行个性化配置，形成触点对应的样式文件，这样对于业务页面代码没有侵入性，能保证业务页面逻辑的完整性，有利于推广。

可选地，所述将所述可配置样式元素的属性值替换成变量时，变量命名规范包括元素编号和变量。

上述实施例中，将可配置样式元素的属性值替换成变量，通过元素编号进行区分，触点进行个性化配置时，可以快速对可配置样式元素进行配置。

可选地，所述可配置样式元素包括插拔元素和颜色元素，所述颜色元素包括背景颜色和字体颜色。插拔元素为可配置展示或隐藏的页面元素，具体可以包括：元素编号、元素名称和预览图；颜色元素包括：元素编号、元素名称和元素类型，元素类型包括：背景颜色和字体颜色。

具体地，插拔元素display的值在模板中定义成变量，变量命名规范：${#元素编号#_display}

背景颜色的值在模板中定义成变量，变量命名规范：${#元素编号#_background}

字体颜色的值在模板中定义成变量，变量命名规范：${#元素编号#_color}

0例如：

可选地，所述可配置样式元素包括平台级可配置样式元素和页面级可配置样式元素。

平台级可配置样式元素指的是样式调整后整个业务平台的元素均会调整，要求文件名为cop_common*.css，例如：/demo/css/cop_common20200413.css。

页面级可配置样式元素指的是样式调整后只有本页面的元素会调整，要求文件名为cop_busi*.css例如：/demo/css/page1/cop_busi20200413.css。

需要说明的是，一个业务平台在发布第一个业务页面的相关信息时，会生成一个平台级CSS文件，存储平台级可配置样式元素配置形成的可配置样式模板，同时生成一个对应当前业务页面的页面级CSS文件，存储页面级可配置样式元素配置形成的可配置样式模板。如同一业务平台再发布其他业务页面的相关信息时，则生成当前业务页面的页面级CSS文件，同时可对之前存储的平台级CSS文件进行修改以修改平台级的可配置样式模板，也可以不进行修改，保留最初的平台级的可配置样式模板。

上述实施例中，将可配置样式元素划分为平台级和页面级，对于平台级可配置样式元素，触点进行一次配置，整个业务平台的所有页面均对应变换样式，而页面级可配置样式元素，仅对当前业务页面适用。上述元素类型的划分，有利于高效准确配置页面样式。

可选地，通过图形化交互界面接收业务页面的可配置样式模板，以及触点对所述业务页面的可配置样式元素配置的实际样式属性信息。

上述实施例中，通过图形化界面录入可配置样式模板以及实际样式属性信息等，便于高效快捷实现页面样式配置。

可选地，页面样式配置方法还包括，生成所述触点对应的所述业务页面的页面样式文件时，生成所述触点的业务使用申请标识，将所述触点的页面样式引用地址、业务使用申请标识和触点信息关联存储。

当接收到触点浏览器发送的页面访问请求时，根据所述页面访问请求中携带的业务使用申请标识获取对应的页面样式引用地址；根据所述页面样式引用地址路由到对应的页面样式文件，将所述页面样式文件反馈给所述触点浏览器；并且，将所述页面访问请求转发给所述业务页面所属的业务平台，所述业务平台根据所述页面访问请求获取对应的业务页面，将所述业务页面返回至所述浏览器；所述浏览器根据所述页面样式文件对所述业务页面进行页面渲染。

上述实施例中，生成触点对应的业务页面的页面样式文件时，还生成触点的业务使用申请标识，并将触点的页面样式引用地址、业务使用申请标识和触点信息关联存储。这样用户在访问业务页面时，可以准确路由到业务页面以及对应的样式文件，从而实现不同触点对同一业务页面的不同展示效果。

上文结合图1详细描述了根据本发明实施例提供的页面样式配置方法方法。下面结合图2至5，详细描述本发明实施例提供的页面样式配置系统。

如图2所示，本发明实施例还提供一种页面样式配置系统，包括：可配置样式模板获取模块100、样式文件生成模块200和样式文件引用地址调整模块300。

可配置样式模板获取模块100，用于接收业务页面的可配置样式模板，所述可配置样式模板为从业务页面抽离可配置样式元素配置形成的样式模板；

样式文件生成模块200，用于接收触点对所述业务页面的可配置样式元素配置的实际样式属性信息，将所述实际样式属性信息与对应的可配置样式模板结合，生成所述触点对应的所述业务页面的页面样式文件；

样式文件引用地址调整模块300，用于将所述触点对应的所述业务页面的页面样式文件存储在预设路径下，将所述预设路径设置为所述业务页面针对所述触点的页面样式引用地址。

需要说明的是，本发明实施例提供页面样式配置系统可涉及到多个角色，具体可以包括业务页面开发者、触点运营者和审批人员。

业务页面开发者：按照规范配置页面样式元素信息，并调整业务平台样式文件的引用地址；

触点运营者：配置可配置样式元素的实际样式属性信息；

审批人员：对于业务页面开发者的页面发布申请和触点运营者的使用申请进行审批。

需要说明的是，本发明实施例中，业务页面开发人员在业务平台将业务页面的可配置样式元素抽离，形成模板单独存放在一个文件中，并上传到本系统；不同触点对于同一业务页面可进行个性化配置，即对其中的可配置样式元素进行配置，形成触点对应该业务页面的样式文件，触点要访问该业务页面时，则调用该触点对应的样式文件对该业务页面进行渲染，实现不同触点对同一业务页面的不同展示效果。

上述实施例中，实现了非入侵式多触点页面样式配置，业务页面不需要做代码改造，只需要抽离需要配置的样式元素，并配置成样式模板，不同触点可根据自身需求对业务页面的可配置样式元素进行个性化配置，形成触点对应的样式文件，并调整样式文件的引用地址，按照规范引用样式文件即可，这样业务平台只有很少的样式文件整理工作量，大大减少了业务平台的工作量，并且对于业务页面代码没有侵入性，能保证业务页面逻辑的完整性，有利于推广。

首先，业务页面开发者预先将业务平台信息、页面信息和页面样式元素信息录入到页面样式配置系统，再通过图形化交互界面展示上述信息。当业务页面开发者选择其中一个业务平台的一个业务页面时，则调整至该业务页面的配置界面。

其中，业务平台信息可以包括业务平台基本信息、业务平台联系信息和业务平台服务器信息等。

业务平台基本信息可以包括：

1.平台类型：业务平台的技术类型：小程序、h5等。

2.平台名称：业务平台的管理名称。

3.平台域名：目前业务平台访问的域名，例如：http://www.demo.com。

4.平台简介：业务平台的功能介绍。

业务平台联系信息包括：

1.联系人姓名：平台支撑接口人姓名。

2.联系人电话：平台支撑接口人电话。

3.联系人邮箱：平台支撑接口人邮箱。

业务平台服务器信息，用来做路由配置，可以包括：

1.服务器内网协议：http、https。

2.服务器列表：业务平台服务器的ip(内网)和端口(内网)清单，可以多个,例如：192.168.0.1：9001、：192.168.0.2：9001。

页面信息可以包括页面基本信息、页面可插拔元素信息和页面可设置颜色元素信息。

页面基本信息可以包括：

1.业务名称：业务页面的管理名称。

2.页面URL：目前访问页面时，在浏览器上输入的URL(页面发布后会根据这个url生成最终访问的url)，例如：http://132.90.194.107:20000/demo1/index.html。

3.页面功能简介：业务页面的功能介绍。

4.页面开放流量：业务平台页面能支持的最大每秒请求量(tps)。

5.token时长：2小时、永久，如果选择2小时，触点使用时，需要2小时动态从触点运营平台获取一次token。

页面可插拔元素信息可以包括：

编码：可插拔元素编码，用来定义样式模板用；

名称：可插拔元素名称，仅作管理之用；

示意图：可插拔模块在页面位置示意图；

页面可设置颜色元素信息可以包括：

编码：可设置颜色元素编码，用来定义样式模板用；

名称：可设置颜色元素名称，仅作管理之用；

示意图：可设置颜色模块在页面位置示意图；

可编辑颜色属性(可多选)：背景颜色、文字颜色。

其次，根据配置需求抽离可配置样式元素到独立的样式文件，并根据规范形成样式模板，通过上述选择的业务平台的业务页面的配置界面录入到本系统，样式模板信息可以包括：

编码：风格编码，仅作管理之用；

名称：风格名称，仅作管理之用；

示意图：风格效果图；

模板文件：风格对应的样式文件的模板，文件后缀为ftl；

介绍：风格设计理念说明。

可选地，所述可配置样式元素包括插拔元素和颜色元素，所述颜色元素包括背景颜色和字体颜色。

可选地，生成所述触点对应的所述业务页面的页面样式文件时，生成所述触点的业务使用申请标识，将所述触点的页面样式引用地址、业务使用申请标识和触点信息关联存储。

如图3所示，页面样式文件存储在本系统，业务页面程序在业务平台，业务页面不需要做代码改造，只需要抽离需要配置的样式元素，并配置成样式模板，不同触点可根据自身需求对业务页面的可配置样式元素进行个性化配置，生成对应的页面样式文件，并调整样式文件的引用地址，按照规范引用样式文件即可，这样大大减少了业务平台的工作量，并且对于业务页面代码没有侵入性，能保证业务页面逻辑的完整性。

现有技术中，页面路由方式如图4所示，即触点平台直接在业务平台获取业务页面，这种路由方式，如果想在企业级推广，需要在每个业务页面的每个动态适配的页面元素都增加样式切换逻辑，带来的开发工作量和时间成本很大，并且代码入侵性太强，不利于推广。

而本发明实施例提供的页面路由如图5所示，用户访问业务页面时，在触点浏览器输入URL，本系统解析URL，获取其携带的业务使用申请标识，本系统根据业务使用申请标识获取对应的页面样式引用地址；根据所述页面样式引用地址路由到对应的页面样式文件，将所述页面样式文件反馈给所述触点浏览器；其中，页面样式文件包括平台级样式文件和页面级样式文件；

同时，本系统将URL转发给业务页面所属的业务平台，业务平台根据URL获取对应的业务页面，将业务页面返回至触点浏览器；触点浏览器根据平台级页面样式文件和页面级样式文件对业务页面进行页面渲染。

由图5可以看出，本发明实施例中，平台级样式文件：路由到本系统的相应触点的静态资源；页面级样式文件：路由到本系统的相应触点的静态资源。

本发明实施例提供的页面样式配置系统，对业务平台的页面程序无侵入式逻辑，有利于推广；可以复用本系统对页面样式的已有配置页面和管控体系，效率高，降低开发难度系数和工作量；一个业务平台提出的需求落地后，其他业务平台都可复用；样式元素的配置运营工作可以通过平台配置完成，降低出错率，提升运营质量。

本发明实施例还提供一种计算机可读存储介质，包括指令，当所述指令在计算机上运行时，使所述计算机执行上述实施例提供的页面样式配置方法。

本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在所述存储器上的并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述实施例提供的页面样式配置方法。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种页面样式配置方法，其特征在于，包括：

所述从业务页面抽离可配置样式元素配置形成样式模板，包括：

根据配置需求从所述业务页面的页面样式元素中抽离可配置样式元素到css文件；

将所述可配置样式元素对应的属性值替换成变量，形成css样式模板；

一个业务平台在发布第一个业务页面的相关信息时，生成一个平台级CSS文件，存储平台级可配置样式元素配置形成的可配置样式模板，同时生成一个对应当前业务页面的页面级CSS文件，存储页面级可配置样式元素配置形成的可配置样式模板；如同一业务平台再发布其他业务页面的相关信息时，则生成当前业务页面的页面级CSS文件；

平台级可配置样式元素指的是样式调整后整个业务平台的元素均会调整，要求文件名为cop_common*.css；

页面级可配置样式元素指的是样式调整后只有本页面的元素会调整，要求文件名为cop_busi*.css；

2.根据权利要求1所述的方法，其特征在于，所述将所述可配置样式元素的属性值替换成变量时，变量命名规范包括元素编号和变量。

3.根据权利要求1至2任一项所述的方法，其特征在于，所述可配置样式元素包括插拔元素和颜色元素，所述颜色元素包括背景颜色和字体颜色。

4.根据权利要求1至2任一项所述的方法，其特征在于，所述可配置样式元素包括平台级可配置样式元素和页面级可配置样式元素。

5.根据权利要求1至2任一项所述的方法，其特征在于，通过图形化交互界面接收业务页面的可配置样式模板，以及触点对所述业务页面的可配置样式元素配置的实际样式属性信息。

6.根据权利要求1至2任一项所述的方法，其特征在于，还包括，生成所述触点对应的所述业务页面的页面样式文件时，生成所述触点的业务使用申请标识，将所述触点的页面样式引用地址、业务使用申请标识和触点信息关联存储；

当接收到触点浏览器发送的页面访问请求时，根据所述页面访问请求中携带的业务使用申请标识获取对应的页面样式引用地址；根据所述页面样式引用地址路由到对应的页面样式文件，将所述页面样式文件反馈给所述触点浏览器；

并且，将所述页面访问请求转发给所述业务页面所属的业务平台，所述业务平台根据所述页面访问请求获取对应的业务页面，将所述业务页面返回至所述触点浏览器；

所述触点浏览器根据所述页面样式文件对所述业务页面进行页面渲染。

7.一种页面样式配置系统，其特征在于，包括：

8.一种计算机可读存储介质，包括指令，其特征在于，当所述指令在计算机上运行时，使所述计算机执行根据权利要求1-6任一项所述的页面样式配置方法。

9.一种计算机设备，包括存储器、处理器及存储在所述存储器上的并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-6任一项所述的页面样式配置方法。