CN113672214A - 一种模板共享方法和装置 - Google Patents

Abstract

本发明实施例提供一种模板共享方法和装置，通过在前端部署预先创建的至少一个页面模板以及属性模板关系记录，在后端部署属性页面地址关系记录和配置页面地址关系记录，实现了通过修改后端数据而不是修改前端或后端代码生成所需的前端展示页面，达到了多个业务方共享前端以及在生成新展示页面时无需重新上线无需回归测试，可实时预览新展示页面的效果。

Description

一种模板共享方法和装置

技术领域

本发明涉及网页开发领域，尤其涉及一种模板共享方法和装置。

背景技术

现有的前端技术在创建一个新的页面时需要多方协调，比如页面代码编写，页面图案的设计，文字的描述等。可见现有技术页面生成繁琐且需要多方人员进行配合才能完成。现有的前端技术在具体应用时，每个业务方都需要独自的前端服务，当不同的业务需要相似的前端展示效果时只能各自开发，重复造车，造成资源的巨大浪费。现有的前端技术主要关注页面的展示，增加一个页面就需要前端新建一个HTML页面，且每次对页面元素的修改都要靠一次上线来完成，造成发版频繁，即使一次很小的修改都要对项目整体进行一次回归测试，造成大量的人力资源消耗。现有的前端技术在实现页面效果时，从后端接口获取关键信息，前端负责主体页面结构的构建，但是后端依然要为每一个页面以编写代码的方式做适配，当页面有改动时即使前端代码不用上线也需要后端上线。现有前端技术在用到模板的时候只是做了简单的数据绑定，将后端的数据替换到前端页面，但是面对复杂的使用场景以及样式修改问题时就有些力有不逮。现有的前端技术在页面开发完成之后需要在测试环境或者上线部署之后才能看到页面的效果。

在实现本发明过程中，申请人发现现有技术中至少存在如下问题：

无法动态生成前端页面，当增加或修改前端页面时，不得不重新上线，重新测试。

发明内容

本发明实施例提供一种模板共享方法和装置，通过预先创建多个页面模板并通过页面地址、模板名称、页面模板、配置信息之间的对应关系将页面地址与展示页面解耦，通过得到与展示页面对应的页面模板和配置信息动态生成展示页面，解决了增加或修改前端页面需要重新上线以及回归测试的问题。

为达上述目的，一方面，本发明实施例提供一种模板共享方法，包括：

当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址；其中，页面地址用于通过互联网访问展示页面；

根据解析出的页面地址通过查询预先建立的属性页面地址关系记录得到与所述特定展示页面对应的页面模板的模板属性；

根据所述特定展示页面对应的页面模板的模板属性通过查询预先建立的属性模板关系记录得到与所述特定展示页面对应的页面模板；其中，与所述特定展示页面对应的页面模板是预先创建的至少一个页面模板中的一个；

根据解析出的页面地址通过查询预先建立的配置页面地址关系记录得到与所述特定展示页面对应的配置信息；

根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面；

其中，所述至少一个页面模板中的各页面模板分别具有不同的模板属性；各页面模板由组件组成，用于生成展示页面。

进一步地，在所述当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出页面地址之前，还包括：

创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性；

将每个页面模板各自的模板属性与各自的存储位置按一一对应的关系存储在属性模板关系记录中。

进一步地，所述创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性，包括：

将用于页面展示的各种页面元素开发为组件；

根据指定的至少一个展示需求使用组件构建与各展示需求相应的页面模板并为每个页面模板的设定各自唯一的模板属性。

进一步地，在所述当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出页面地址之前，还包括：

获取各展示页面对应的页面地址、配置信息和模板属性；

将获取到的各展示页面的页面地址与模板属性按一一对应的关系添加到所述属性页面地址关系记录中；

将获取到的各展示页面的页面地址与配置信息按一一对应的关系添加到所述配置页面地址关系记录中。

进一步地，所述根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面，包括：

获得所述配置信息中记录的组件与所述页面模板中记录的组件的交集作为展示组件集；

根据所述展示组件集在所述页面模板中的布局和样式生成所述特定展示页面；

根据所述配置信息中记录的所述展示组件集中的全部或部分组件的布局和样式更新所述特定展示页面中相应的组件的布局和样式；

根据所述配置信息中记录的所述展示组件集中的各组件与各待展示数据之间的绑定关系，将各待展示数据显示在所述特定展示页面中的对应组件中。

另一方面，本发明实施例提供一种模板共享装置，包括：

页面获取命令接收单元，用于当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址；其中，页面地址用于通过互联网访问展示页面；

模板属性查询单元，用于根据解析出的页面地址通过查询预先建立的属性页面地址关系记录得到与所述特定展示页面对应的页面模板的模板属性；

页面模板获取单元，用于根据所述特定展示页面对应的页面模板的模板属性通过查询预先建立的属性模板关系记录得到与所述特定展示页面对应的页面模板；其中，与所述特定展示页面对应的页面模板是预先创建的至少一个页面模板中的一个；

配置信息获取单元，用于根据解析出的页面地址通过查询预先建立的配置页面地址关系记录得到与所述特定展示页面对应的配置信息；

展示页面生成单元，用于根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面；

其中，所述至少一个页面模板中的各页面模板分别具有不同的模板属性；各页面模板由组件组成，用于生成展示页面。

进一步地，还包括：

页面模板创建单元，用于创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性；

属性模板位置关系构建单元，用于将每个页面模板各自的模板属性与各自的存储位置按一一对应的关系存储在属性模板关系记录中。

进一步地，所述页面模板创建单元，包括：

组件模块化模块，用于将用于页面展示的各种页面元素开发为组件；

页面模板创建模块，用于根据指定的至少一个展示需求使用组件构建与各展示需求相应的页面模板并为每个页面模板的设定各自唯一的模板属性。

进一步地，还包括：

展示页面信息接收单元，用于获取各展示页面对应的页面地址、配置信息和模板属性；

属性页面地址关系构建单元，用于将获取到的各展示页面的页面地址与模板属性按一一对应的关系添加到所述属性页面地址关系记录中；

配置页面地址关系构建单元，用于将获取到的各展示页面的页面地址与配置信息按一一对应的关系添加到所述配置页面地址关系记录中。

进一步地，所述展示页面生成单元，包括：

有效组件确定模块，用于获得所述配置信息中记录的组件与所述页面模板中记录的组件的交集作为展示组件集；

展示页面生成模块，用于根据所述展示组件集在所述页面模板中的布局和样式生成所述特定展示页面；

展示页面调整模块，用于根据所述配置信息中记录的所述展示组件集中的全部或部分组件的布局和样式更新所述特定展示页面中相应的组件的布局和样式；

数据填充模块，用于根据所述配置信息中记录的所述展示组件集中的各组件与各待展示数据之间的绑定关系，将各待展示数据显示在所述特定展示页面中的对应组件中。

上述技术方案具有如下有益效果：通过针对可能的各种需求，预先创建多个页面模板，并通过建立页面地址与第一模板属性的映射关系、页面地址与配置信息的映射关系、第一模板属性与页面模板的映射关系，以及通过针对指定需求编辑的配置信息与预置的页面模板相结合在运行时动态地生成用于指定需求的展示页面，实现通过修改后端数据生成针对指定需求的展示页面，而不是通过添加静态代码生成针对指定需求的展示页面，达到了服务端无需重新上线测试的情况下提供指定需求的展示页面，避免重新上线，重新测试，导致的低效，以及避免了修改代码可能导致的系统不稳定。进一步地，每一个页面模板的布局进行结构化，一个页面对应多个组件，一个组件对应多个页面单元，每一个展示页面都有一个配置信息和页面模板之对应，配置信息与展示页面中的组件进行数据绑定，这样修改配置信息就相当于在对展示页面进行调整。将配置信息在数据库中进行落地，都过一个专门的后台页对数据库的配置信息进行增删查改，从而实现页面的后台不上线改动；提供标准化的页面组件外，通过设置配置信息，展示页面中的组件的部分样式交由后端控制，例如card的宽高、背景颜色等，后端可以控制前端的样式，满足用户个性化的需求；提供页面后台配置功能，填写完配置项后根据适配规则，业务接入方可以在提交之前预览展示页面的样式，并根据所需实时修改，避免填写失误带来的后续问题。进一步地，至少一个页面模板和属性模板关系记录部署于前端；属性页面地址关系记录、配置页面地址关系记录以及配置信息部署于后端；前端通过后端提供的访问接口针对所述属性页面地址关系记录、配置页面地址关系记录以及配置信息进行增加、删除、修改、查询等操作；多个业务方的后台可以接入后端，通过配置后端的数据创建所需的展示页面，实现了前端的页面模板对多个业务方的各种需求的共享，避免了对每个业务方的需求单独开发前端页面的代码，从而避免了因前端页面的增、删、改等操作导致的重新上线和回归测试，提高了整个系统提供服务的效率和稳定性。

附图说明

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

图1是一种模板共享方法的一种流程图；

图2是一种模板共享装置的一种结构图；

图3是一种模板共享装置的另一种结构图。

具体实施方式

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

一方面，如图1所示，本发明实施例提供一种模板共享方法，包括：

S100，当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址；其中，页面地址用于通过互联网访问展示页面；

S101，根据解析出的页面地址通过查询预先建立的属性页面地址关系记录得到与所述特定展示页面对应的页面模板的模板属性；

S102，根据所述特定展示页面对应的页面模板的模板属性通过查询预先建立的属性模板关系记录得到与所述特定展示页面对应的页面模板；其中，与所述特定展示页面对应的页面模板是预先创建的至少一个页面模板中的一个；

S103，根据解析出的页面地址通过查询预先建立的配置页面地址关系记录得到与所述特定展示页面对应的配置信息；

S104，根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面；

其中，所述至少一个页面模板中的各页面模板分别具有不同的模板属性；各页面模板由组件组成，用于生成展示页面。

在一个实施例中，页面获取命令中至少包含与特定展示页面对应的页面地址即URL地址，页面地址可以是包含完整服务器域名的绝对地址，优选地，也可以是不包含服务器域名的相对地址；

针对各种页面展示需求预先创建的至少一个页面模板；每个页面模板分别具有不同的模板属性，通过模板属性可以唯一的确定相应的页面模板；

特定展示页面是业务方创建的各种展示页面之一，每个展示页面都有对应的页面地址、配置信息和页面模板；在创建每一个展示页面时至少需要提供该展示页面对应的页面地址、配置信息和页面模板的模板属性；不同的展示页面相应的有不同的页面地址，通过页面地址可以访问相应的展示页面；每个展示页面都由相应的页面模板和相应的配置信息一起生成；配置信息包括待展示数据与页面模板中的组件之间的绑定关系；配置信息还包括展示页面上全部或部分组件的布局和样式；待展示数据是期望通过展示页面展示的数据。

预先将每个展示页面对应的页面模板的模板属性与相应的页面地址一一对应地保存在属性页面地址关系记录中；属性页面地址关系记录的具体实现包括但不限于数据库中的表或保存在指定文件中的路由表。

属性模板关系记录的具体实现包括但不限于数据库中的表或保存在指定文件中的路由表。在一些实施例中，属性模板关系记录可以是记录每个页面模板的模板属性与该页面模板的存储位置的一一对应关系，通过页面模板的存储位置获得该页面模板本身；在另一些实施例中，属性模板关系记录还可以是一一对应地记录每个页面模板的模板属性与该页面模板本身；例如在数据库中的表中定义一个数据列用于记录每个页面模板的模板属性，定义另一个数据列用于记录该页面模板本身，每个页面模板的模板属性与该页面模板本身存储在表的同一行中。可通过查询该页面模板的模板属性来从数据库的表中直接获取该页面模板本身。

根据特定展示页面对应的页面模板的模板属性通过查询预先建立的属性模板关系记录得到与特定展示页面对应的页面模板，优选地还可以是，根据特定展示页面对应的页面模板的模板属性通过查询预先建立的属性模板关系记录得到与特定展示页面对应的页面模板的存储位置，并根据页面模板的存储位置获取特定展示页面对应的页面模板；预先将每个页面模板的模板属性与各页面模板各自的存储位置一一对应地保存在属性模板关系记录中；页面模板的模板属性可以但不限于模板名，例如还可以是模板ID值等；各页面模板有各自的存储位置，例如可以保存在不同的文件目录中，也可以保存在同一个文件目录中，通过文件名区分；属性模板关系记录的具体实现包括但不限于数据库中的表或保存在指定文件中的路由表；

预先将每个展示页面相应的页面地址与相应的配置信息一一对应的保存在配置页面地址关系记录中；配置页面地址关系记录的具体实现包括但不限于数据库中的表或保存在指定文件中的路由表；

预先创建的至少一个页面模板、属性页面地址关系记录、属性模板关系记录和配置页面地址关系记录可以部署存储在同一个物理服务器或不同的物理服务器上，还可以部署存储在同一个或不同的模块中。优选地，将预先创建的至少一个页面模板以及属性模板关系记录部署存储在前端模块中，将属性页面地址关系记录和配置页面地址关系记录部署存储在后端模块中，前端模块通过后端模块提供的后端接口访问属性页面地址关系记录和配置页面地址关系记录；前端模块和后端模块可以部署在同一个硬件服务器上，也可以部署在不同的硬件服务器上。

在一个实施例中，用户希望访问特定展示页面；用户在浏览器地址栏中输入特定展示页面对应的页面地址，或者用户点击了当前显示页面中的一个链接，此链接的地址被设定为特定展示页面对应的页面地址，此时浏览器或当前显示页面将想前端发送针对特定展示页面的页面获取命令，前端从接收到的页面获取命令中得到特定展示页面对应的页面地址，根据该页面地址通过访问后端接口，从后端的属性页面地址关系记录中查询得到与该页面地址相应的(即与特定展示页面相应的)页面模板的模板属性；再使用该模板属性查询前端的属性模板关系记录，得到由该模板属性唯一标识的页面模板的存储位置；从该页面模板的存储位置处读取该页面模板；前端继续根据该页面地址通过后端接口查询后端的配置页面地址关系记录得到与特定展示页面相关的配置信息；每一页面模板通过与多种配置信息结合提供与各配置信息相对应的多种展示页面；特定展示页面对应的页面模板和配置信息一起生成特定展示页面；例如在一个页面模板中包含各类card的展示、table的增删查改、echarts图的展示、任务展示、微博流展示等组件，在配置信息中仅包含各类card的展示、table的增删查改、echarts图的展示，则根据该页面模板和该配置信息生成的展示页面中将包含各类card的展示、table的增删查改、echarts图的展示组件，而不包含任务展示、微博流展示等组件；并且在配置信息中还可以指定部分或全部组件的布局和样式，以便在页面模板上各组件的布局和样式的基础上按配置信息中的布局和样式重新定义展示页面。通过针对指定需求对配置信息进行编辑，并将编辑得到的配置信息应用在指定的页面模板上，可以在运行时通过修改后端数据动态生成满足指定需求的展示页面，而不需要修改任何前端或后端代码。在生成所述特定展示页面后，将所述特定展示页面返回给所述页面获取命令的发送端，以使所述特定展示页面显示于所述发送端，所述发送端包括处理模块和显示模块；所述处理模块可以包括能完成计算操作的处理器，所述显示模块用于显示包括但不限于所述特定展示页面。

本发明实施例具有如下技术效果：通过针对可能的各种需求，预先创建多个页面模板，并通过建立页面地址与模板属性的映射关系、页面地址与配置信息的映射关系、模板属性与页面模板的映射关系，以及通过针对指定需求编辑的配置信息与预置的页面模板相结合在运行时动态地生成用于指定需求的展示页面，实现通过修改后端数据生成针对指定需求的展示页面，而不是通过添加静态代码生成针对指定需求的展示页面，达到了服务端无需重新上线测试的情况下提供指定需求的展示页面，避免重新上线，重新测试，导致的低效，以及避免了修改代码可能导致的系统不稳定。由于展示页面不是通过新增代码生成，而是通过配置后端数据生成，通过动态的为每个业务接入方生成展示页面，同一个前端服务可以为多个业务接入方提供服务。

优选地，所述至少一个页面模板和所述属性模板关系记录部署于前端；所述属性页面地址关系记录、所述配置页面地址关系记录以及所述配置信息部署于后端；前端通过后端提供的访问接口针对所述属性页面地址关系记录、所述配置页面地址关系记录以及所述配置信息进行增加、删除、修改、查询等操作。

在一个实施例中，将预先创建的至少一个页面模板以及属性模板关系记录部署于前端中，通常情况下，会预先估计各种可能的展示需求，并根据各种展示需求创建对应的页面模板，并对每个页面模板设置作为唯一标识的模板属性，以及创建属性模板关系记录；通常情况下，预先创建的页面模板可以满足新的展示需求，所以通常情况下，在系统提供服务期间一般不需要频繁更新或添加前端的页面模板；即使在遇到新展示需求必须添加新的页面模板时，也可以直接向前端添加新的页面模板以及修改属性模板关系记录，不会对已有的展示页面造成影响，由于页面模板和属性模板关系记录是以数据的形式部署在前端，由前端代码读取并使用，添加新页面模板不涉及前端代码的更改，所以也不需要将整个系统的服务重新上线，也不需要针对整个系统的服务回归测试。在本发明的技术方案中，实现了将前端的页面模板与后端的数据分离的效果，从而增加新展示页面时，只需要增加或修改后端的所述属性页面地址关系记录、所述配置页面地址关系记录以及所述配置信息数据，无需修改前端代码和数据，也无需修改后端代码。在此基础之上，多个业务方的后台可以接入前端和后端，通过配置后端的数据创建所需的展示页面，实现了前端的页面模板对多个业务方的各种需求的共享，避免了对每个业务方的需求单独开发前端页面的代码，从而避免了因前端页面的增、删、改等操作导致的重新上线和回归测试，提高了整个系统提供服务的效率和稳定性。

进一步地，在所述当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址之前，还包括：

创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性；

将每个页面模板各自的模板属性与各自的存储位置按一一对应的关系存储在属性模板关系记录中。

在一个实施例中，将展示页面用到的各种常用功能，将常用功能，例如各类card的展示、table的增删查改、echarts图的展示、任务展示、微博流展示等功能都开发成组件；各种的页面展示需求需要各种页面组件以及各种的布局和样式，预先根据指定的各种页面展示需求对应创建多个页面模板，并且为每个页面模板指定可唯一标识该页面模板的模板属性，优选地，模板属性可以但不限于使用模板名、模板文件名、为每个页面模板指定的唯一的ID值等可分别唯一标识各页面模板的模板属性等；将所有预先创建的页面模板根据各自模板属性与各自的存储位置按一一对应的关系存储在属性模板关系记录中；属性模板关系记录用于根据模板属性查询模板属性所唯一标识的页面模板的存储位置，进一步可以根据得到的存储位置得到模板属性所唯一标识的页面模板本身。

进一步地，所述创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性，包括：

将用于页面展示的各种页面元素开发为组件；

根据指定的至少一个展示需求使用组件构建与各展示需求相应的页面模板并为每个页面模板的设定各自唯一的模板属性。

在一个实施例中，提供了丰富的页面模板；将展示页面中的常用功能，例如各类card的展示、table的增删查改、echarts图的展示、任务展示、微博流展示等功能都开发成组件，整理业务所需，结合页面布局、样式等各方面因素，将这些组件组合成一个个常用的页面模板；将每一个页面模板的布局进行结构化，一个页面模板对应多个组件，一个组件对应多个页面单元，根据各种指定的展示需求创建对应的页面模板，并指定该页面模板对应的唯一的模板属性；在各种页面展示需求中，会用到大量重复的页面组件，对这些页面元素开发为组件，在面对新的展示需求时，可以快速利用组件构建新的页面模板，方便重复利用已有的组件拼装得到针对各种展示需求的页面模板，显著提高效率，避免重复编码导致错误。

进一步地，在所述当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址之前，还包括：

获取各展示页面对应的页面地址、配置信息和模板属性；

将获取到的各展示页面的页面地址与模板属性按一一对应的关系添加到所述属性页面地址关系记录中；

将获取到的各展示页面的页面地址与配置信息按一一对应的关系添加到所述配置页面地址关系记录中。

根据各展示页面对应的页面地址、配置信息和模板属性，生成各展示页面的预览页面。

其中，各展示页面对应的配置信息中包括各展示页面中所包含的组件；各展示页面对应的配置信息中还包括各展示页面中所包含的组件中的全部或部分组件的布局和样式；各展示页面对应的配置信息中还包括各展示页面中所包含的组件与各展示页面所要展示的待展示数据的绑定关系；

在一个实施例中，针对各种展示需求预先创建了所需要的各种页面模板后，业务接入方申请接入系统，系统为业务方分配业务号，并生成管理员账户，业务接入方登录系统后在页面配置后台新建展示页面，具体地包括填写必要的页面配置信息，例如页面名称、页面地址(即页面URL)、页面位置、页面模板的模板属性(优选地，模板属性可以具体为模板名)、访问页面所需权限等，并按模板要求填写数据接口地址(即用于指明待展示数据的来源)，通过配置信息将待展示数据与展示页面中的组件之间进行绑定；还可以根据各展示页面对应的页面地址、配置信息和模板属性生成预览页面实时预览各展示页面，实现实时预览页面效果，满意后提交配置信息；在一些实施例中，配置信息、页面地址、页面模板的模板属性之间的对应关系都会以可读写数据的形式存储在系统后端，优选地以属性页面地址关系记录和配置页面地址关系记录的形式保存在后端，这样就为新业务的前端生成了一个新的展示页面。而在生成新展示页面的过程中，并没有更改前端或后端的代码，仅是新增或修改了后端记录的与新展示页面有关的数据。

本发明实施例具有如下技术效果：通过新增或修改与展示页面有关的后端数据，实现在不修改前后端代码的情况下新增或修改展示页面，仅需要业务接入方通过页面配置后台自行增加或修改展示页面的相关信息，不需要开发人员修改前后端代码，实现无需重新上线以及无需回归测试，即可新增或修改展示页面，且在生成展示页面期间，可以实时查看展示页面的效果，无需等待上线后才验证效果，显著提高了业务方创建展示页面的效率。

进一步地，所述根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面，包括：

获得所述配置信息中记录的组件与所述页面模板中记录的组件的交集作为展示组件集；

根据所述展示组件集在所述页面模板中的布局和样式生成所述特定展示页面；

根据所述配置信息中记录的所述展示组件集中的全部或部分组件的布局和样式更新所述特定展示页面中相应的组件的布局和样式；

根据所述配置信息中记录的所述展示组件集中的各组件与各待展示数据之间的绑定关系，将各待展示数据显示在所述特定展示页面中的对应组件中。

在一个实施例中，一个页面模板配合多个不同的配置文件，可以得到多个不同的展示页面。通常，当需要针对一个指定展示需求创建展示页面时，首先从至少一个页面模板中选择出一个能满足指定展示需求的页面模板，再根据指定展示需求以及该页面模板提供的组件，在配置信息中将展示页面中需要的组件与指定展示需求中指定的待展示数据一一对应的绑定。展示页面中需要的组件(与配置信息中包含的组件相同)可以是该页面模板中所包含的组件的子集或全部；例如对于配置信息中不存在的组件，而在该页面模板中存在的组件，则不会出现在最终的展示页面中；还可以根据配置信息记录的部分或全部组件的布局和样式控制所生成的展示页面中对应的组件的布局和样式。

本发明实施例具有如下技术效果：每一个页面模板的布局进行结构化，一个页面对应多个组件，一个组件对应多个页面单元，每一个展示页面都有一个配置信息和页面模板之对应，配置信息与展示页面中的组件进行数据绑定，这样修改配置信息就相当于在对展示页面进行调整。将配置信息在数据库中进行落地，都过一个专门的后台页对数据库的配置信息进行增删查改，从而实现页面的后台不上线改动；提供标准化的页面组件外，通过设置配置信息，展示页面中的组件的部分样式交由后端控制，例如card的宽高、背景颜色等，后端可以控制前端的样式，满足用户个性化的需求；提供页面后台配置功能，填写完配置项后根据适配规则，业务接入方可以在提交之前预览展示页面的样式，并根据所需实时修改，避免填写失误带来的后续问题。

另一方面，如图2所示，本发明实施例还提供一种模板共享装置，包括：

页面获取命令接收单元200，用于当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址；其中，页面地址用于通过互联网访问展示页面；

模板属性查询单元201，用于根据解析出的页面地址通过查询预先建立的属性页面地址关系记录得到与所述特定展示页面对应的页面模板的模板属性；

页面模板获取单元202，用于根据所述特定展示页面对应的页面模板的模板属性通过查询预先建立的属性模板关系记录得到与所述特定展示页面对应的页面模板；其中，与所述特定展示页面对应的页面模板是预先创建的至少一个页面模板中的一个；

配置信息获取单元203，用于根据解析出的页面地址通过查询预先建立的配置页面地址关系记录得到与所述特定展示页面对应的配置信息；

展示页面生成单元204，用于根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面；

其中，所述至少一个页面模板中的各页面模板分别具有不同的模板属性；各页面模板由组件组成，用于生成展示页面。

进一步地，还包括：

页面模板创建单元，用于创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性；

属性模板位置关系构建单元，用于将每个页面模板各自的模板属性与各自的存储位置按一一对应的关系存储在属性模板关系记录中。

进一步地，所述页面模板创建单元，包括：

组件模块化模块，用于将用于页面展示的各种页面元素开发为组件；

页面模板创建模块，用于根据指定的至少一个展示需求使用组件构建与各展示需求相应的页面模板并为每个页面模板的设定各自唯一的模板属性。

进一步地，还包括：

展示页面信息接收单元，用于获取各展示页面对应的页面地址、配置信息和模板属性；

属性页面地址关系构建单元，用于将获取到的各展示页面的页面地址与模板属性按一一对应的关系添加到所述属性页面地址关系记录中；

配置页面地址关系构建单元，用于将获取到的各展示页面的页面地址与配置信息按一一对应的关系添加到所述配置页面地址关系记录中。

进一步地，所述展示页面生成单元204，包括：

有效组件确定模块，用于获得所述配置信息中记录的组件与所述页面模板中记录的组件的交集作为展示组件集；

展示页面生成模块，用于根据所述展示组件集在所述页面模板中的布局和样式生成所述特定展示页面；

展示页面调整模块，用于根据所述配置信息中记录的所述展示组件集中的全部或部分组件的布局和样式更新所述特定展示页面中相应的组件的布局和样式；

数据填充模块，用于根据所述配置信息中记录的所述展示组件集中的各组件与各待展示数据之间的绑定关系，将各待展示数据显示在所述特定展示页面中的对应组件中。

本发明实施例提供的一种模板共享装置是与前述实施例提供的一种模板共享方法一一对应的，本领域技术人员可以根据前述的一种模板共享方法中的实施例毫无异议的理解一种模板共享装置中的实施例，在此不再赘述。

下面结合具体的应用实例对本发明实施例上述技术方案进行详细说明，实施过程中没有介绍到的技术细节，可以参考前文的相关描述。

对本发明实施例中使用到的技术术语介绍如下：

前端模板引擎：前端模板引擎就是当我们需要根据不同的数据重复生成结构相同的html页面时，模板可以大大节省代码量，以及提高可维护性。模板引擎起到数据和视图分离的作用，模板对应视图，关注如何展示数据，为模板准备的数据，关注哪些数据可以被展示。

数据绑定：数据绑定是指前端View层和Model层之间的映射关系，分为单向数据绑定和双向数据绑定。

组件：展示页面的组成部分。

展示页面：一个展示页面对应一份配置信息。

单元：逻辑上最细粒度的组件，将不可再被拆分。

VUE：VUE是一种构建用户界面的渐进式JavaScript框架，只关注视图层，采用自底向上增量开发的设计，通过尽可能简单的API实现响应的数据绑定和组合的视图组件，使得MVVM更简单。

MVVM：MVVM是Model-View-ViewModel的简写，一种软件架构模式。MVVM就是将其中的View的状态和行为抽象化，将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来。

NGINX：NGINX是一种高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务，NGINX具有轻量级、高扩展性、高可靠性低内存消耗等优点。

前端路由：前端路由就是把不同路由对应的不同内容或者页面的任务交给前端来做，之前是通过服务端根据页面URL不同返回不同的页面来实现的。

模板化：模板化是一种整体化的思想。简单来说模板就是将一段UI样式和其对应的功能作为独立的整体去看待，无论这个整体放在哪里去使用，它都具有一样的功能和样式，从而实现代码的复用，这种整体化的思想就是模板化。模板化可以增加复用性，灵活性，提高系统设计，从而提高开发效率。

共享前端：共享前端就是多个微服务后台共用一个前端，减少开发量，提升工作效率。微服务后台包括但不限于业务接入方用于维护展示页面的后台。

下面以如图3所示的本发明实施例的技术方案的架构图为例对本发明实施例进行说明，本发明实施例主要由前端路由模块、模板模块、状态管理模块以及服务端统一接口模块、模板适配模块、业务处理模块、权限管理模块、数据存储模块组成。

前端路由模块：存储模板名(即模板属性)与页面模板的对应关系，从服务端(即图3中的Server端)获得页面地址与模板名的对应关系，从而得到页面地址与页面模板的对应关系；本发明实施例的展示页面与URL(即页面地址)的对应关系并不是直接在前端定义好的，前端(即图3中的Web端)定义了页面模板的路径与模板名的对应关系(即属性模板关系记录)，后端(即图3中的Server端)定义了URL(即页面地址)与模板名的对应关系，这样前端从后端获取到数据后就可以解析出URL(即页面地址)与模板路径(即模板存储位置)的对应关系。后端的URL(即页面地址)与模板名的对应关系(即属性页面地址关系记录)存储在数据库中，方便动态的增删和修改，从而实现展示页面的动态增删修改。

模板模块：包含前端所有的页面模板、组件等，只需要提供数据就可以渲染出真实的页面。本发明实施例提供了丰富的前端模板，将常用功能，例如各类card的展示、table的增删查改、echarts图的展示、任务展示、微博流展示等功能都开发成组件，整理业务所需，结合页面布局、样式等各方面因素，将这些组件组合成一个个常用的模板。

状态管理模块：每一个页面模板都有多个不同的组件组成，不同组件之间数据的传递需要靠状态管理模块，该模块集中存储管理所有组件的状态值，并以相应的规则保证状态以一种可预测的方式发生变化，方便不同组件之间数据的传递。

统一接口模块：主要为前端提供统一的接口服务，包括认证接口、数据接口、配置接口等，认证接口通过用户名、业务号和URL判断权限，数据接口通过判断URL和用户名返回数据。

模板适配模块：每一个前端页面模板都对应一个配置信息，每一个类型的配置信息都对应了数据库里的一张表。为了方便配置的生成，后端为每一个前端页面模板制定了对应的后端模板类，以URL为主键从数据库获取展示页面对应的配置信息，返回给前端进行页面渲染。

业务处理模块：负责处理外部数据、日志上报、监控报警、大数据计算等与业务相关的事务。

权限管理模块：负责用户管理、页面权限管理、用户鉴权等功能。

数据存储模块：存储系统的整体数据，包括用户数据、页面数据、接入业务数据、配置信息和权限信息等。

首先业务接入方申请接入系统，系统为业务方分配业务号，并生成管理员账户，接入方登录系统后在页面配置后台新建页面，填写必要的页面配置信息，例如页面名称、页面URL、页面位置、页面模板、访问页面所需权限等，并按模板要求填写数据接口地址，预览页面效果，满意后提交配置信息，这些信息都会存储在系统后台，这样就为新业务的前端生成了一个新的页面，管理员还可以在后台为该业务添加新用户，当有用户访问新建的页面时，系统就会鉴别登陆用户的权限，判断是否拥有该业务及该页面的权限，鉴权通过后从数据库获取该页面URL对应的配置信息，由统一接口模块提供给前端服务，前端通过本地定义的模板名称与模板路径的对应关系以及接口返回的URL与模板名称的对应关系解析出页面地址对应的前端页面模板路径，根据配置信息和页面模板渲染出完整的可视化展示页面。

本发明实施例的技术效果：

本发明实施例利用丰富的前端模板(即页面模板)，开发人员只需要在接口层提供适配前端模板的数据就能完成页面的添加，省时省力。

本发明实施例可以允许不同业务方接入前端系统，只需按照规则提供相应的数据接口并在后台通过设置配置信息配置权限就能拥有属于自己的前端服务，减少了资源的浪费；

本发明实施例利用Vue.js的Router路由管理器的思想，不同于传统技术的将页面地址URL与页面模板路径的对应关系定义在前端，本发明实施例将将路由信息交给后端存储，这样增加展示页面只需要往后端数据库里添加一条记录就可以实现了，减少上线带来的风险；

本发明实施例将每一个页面模板的布局进行结构化，一个页面模板对应多个组件，一个组件对应多个单元，每一个展示页面都有一个配置信息和页面模板与之对应，配置信息与展示页面中的组件进行数据绑定，这样修改配置信息就相当于在对展示页面进行调整。将配置信息在数据库中进行落地，都过一个专门的后台页对数据库的配置信息进行增删查改，从而实现页面的后台不上线改动；

本发明实施例将除了提供标准化的页面组件外，部分样式交由后端控制，例如card的宽高、背景颜色等，后端可以控制前端的样式，满足用户个性化的需求。

本发明实施例提供页面后台配置功能，填写完配置信息中的配置项后根据适配规则，用户可以在提交之前预览页面的样式，并根据所需实时修改，避免填写失误带来的后续问题。

综上，本发明实施例使用基于模板和后台配置的前端共享方案，将所有页面模板化，页面模板与配置信息一一对应的生成展示页面，将配置信息结构化并统一存储于后端，方便对配置信息进行管理，解决了前端频繁上线带来的巨大成本。提供多业务方接入的方式，共享前端服务，自动实现业务之间权限分离，极大的方便了业务方的使用，避免了重复造轮子。本发明实施例提供了大量的前端适配模板与组件，支持echarts图表、table、视频、音频以及各类card的随意组合页面，节省了前端开发的时间。本发明实施例提供前端页面预览功能，无需部署提前查看页面效果，实时修改页面效果。本发明实施例实现了前端服务的共享、页面后台可配、权限自动隔离。

应该明白，公开的过程中的步骤的特定顺序或层次是示例性方法的实例。基于设计偏好，应该理解，过程中的步骤的特定顺序或层次可以在不脱离本公开的保护范围的情况下得到重新安排。所附的方法权利要求以示例性的顺序给出了各种步骤的要素，并且不是要限于所述的特定顺序或层次。

在上述的详细描述中，各种特征一起组合在单个的实施方案中，以简化本公开。不应该将这种公开方法解释为反映了这样的意图，即，所要求保护的主题的实施方案需要比清楚地在每个权利要求中所陈述的特征更多的特征。相反，如所附的权利要求书所反映的那样，本发明处于比所公开的单个实施方案的全部特征少的状态。因此，所附的权利要求书特此清楚地被并入详细描述中，其中每项权利要求独自作为本发明单独的优选实施方案。

为使本领域内的任何技术人员能够实现或者使用本发明，上面对所公开实施例进行了描述。对于本领域技术人员来说；这些实施例的各种修改方式都是显而易见的，并且本文定义的一般原理也可以在不脱离本公开的精神和保护范围的基础上适用于其它实施例。因此，本公开并不限于本文给出的实施例，而是与本申请公开的原理和新颖性特征的最广范围相一致。

上文的描述包括一个或多个实施例的举例。当然，为了描述上述实施例而描述部件或方法的所有可能的结合是不可能的，但是本领域普通技术人员应该认识到，各个实施例可以做进一步的组合和排列。因此，本文中描述的实施例旨在涵盖落入所附权利要求书的保护范围内的所有这样的改变、修改和变型。此外，就说明书或权利要求书中使用的术语“包含”，该词的涵盖方式类似于术语“包括”，就如同“包括，”在权利要求中用作衔接词所解释的那样。此外，使用在权利要求书的说明书中的任何一个术语“或者”是要表示“非排它性的或者”。

本领域技术人员还可以了解到本发明实施例列出的各种说明性逻辑块(illustrative logical block)，单元，和步骤可以通过电子硬件、电脑软件，或两者的结合进行实现。为清楚展示硬件和软件的可替换性(interchangeability)，上述的各种说明性部件(illustrative components)，单元和步骤已经通用地描述了它们的功能。这样的功能是通过硬件还是软件来实现取决于特定的应用和整个系统的设计要求。本领域技术人员可以对于每种特定的应用，可以使用各种方法实现所述的功能，但这种实现不应被理解为超出本发明实施例保护的范围。

本发明实施例中所描述的各种说明性的逻辑块，或单元都可以通过通用处理器，数字信号处理器，专用集成电路(ASIC)，现场可编程门阵列或其它可编程逻辑装置，离散门或晶体管逻辑，离散硬件部件，或上述任何组合的设计来实现或操作所描述的功能。通用处理器可以为微处理器，可选地，该通用处理器也可以为任何传统的处理器、控制器、微控制器或状态机。处理器也可以通过计算装置的组合来实现，例如数字信号处理器和微处理器，多个微处理器，一个或多个微处理器联合一个数字信号处理器核，或任何其它类似的配置来实现。

本发明实施例中所描述的方法或算法的步骤可以直接嵌入硬件、处理器执行的软件模块、或者这两者的结合。软件模块可以存储于RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动磁盘、CD-ROM或本领域中其它任意形式的存储媒介中。示例性地，存储媒介可以与处理器连接，以使得处理器可以从存储媒介中读取信息，并可以向存储媒介存写信息。可选地，存储媒介还可以集成到处理器中。处理器和存储媒介可以设置于ASIC中，ASIC可以设置于用户终端中。可选地，处理器和存储媒介也可以设置于用户终端中的不同的部件中。

在一个或多个示例性的设计中，本发明实施例所描述的上述功能可以在硬件、软件、固件或这三者的任意组合来实现。如果在软件中实现，这些功能可以存储与电脑可读的媒介上，或以一个或多个指令或代码形式传输于电脑可读的媒介上。电脑可读媒介包括电脑存储媒介和便于使得让电脑程序从一个地方转移到其它地方的通信媒介。存储媒介可以是任何通用或特殊电脑可以接入访问的可用媒体。例如，这样的电脑可读媒体可以包括但不限于RAM、ROM、EEPROM、CD-ROM或其它光盘存储、磁盘存储或其它磁性存储装置，或其它任何可以用于承载或存储以指令或数据结构和其它可被通用或特殊电脑、或通用或特殊处理器读取形式的程序代码的媒介。此外，任何连接都可以被适当地定义为电脑可读媒介，例如，如果软件是从一个网站站点、服务器或其它远程资源通过一个同轴电缆、光纤电缆、双绞线、数字用户线(DSL)或以例如红外、无线和微波等无线方式传输的也被包含在所定义的电脑可读媒介中。所述的碟片(disk)和磁盘(disc)包括压缩磁盘、镭射盘、光盘、DVD、软盘和蓝光光盘，磁盘通常以磁性复制数据，而碟片通常以激光进行光学复制数据。上述的组合也可以包含在电脑可读媒介中。

以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种模板共享方法，其特征在于，包括：

当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址；其中，页面地址用于通过互联网访问展示页面；

根据解析出的页面地址通过查询预先建立的属性页面地址关系记录得到与所述特定展示页面对应的页面模板的模板属性；

根据所述特定展示页面对应的页面模板的模板属性通过查询预先建立的属性模板关系记录得到与所述特定展示页面对应的页面模板；其中，与所述特定展示页面对应的页面模板是预先创建的至少一个页面模板中的一个；

根据解析出的页面地址通过查询预先建立的配置页面地址关系记录得到与所述特定展示页面对应的配置信息；

根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面；

其中，所述至少一个页面模板中的各页面模板分别具有不同的模板属性；各页面模板由组件组成，用于生成展示页面。

2.如权利要求1所述的模板共享方法，其特征在于，在所述当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址之前，还包括：

创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性；

将每个页面模板各自的模板属性与各自的存储位置按一一对应的关系存储在属性模板关系记录中。

3.如权利要求2所述的模板共享方法，其特征在于，所述创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性，包括：

将用于页面展示的各种页面元素开发为组件；

根据指定的至少一个展示需求使用组件构建与各展示需求相应的页面模板并为每个页面模板的设定各自唯一的模板属性。

4.如权利要求1所述的模板共享方法，其特征在于，在所述当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址之前，还包括：

获取各展示页面对应的页面地址、配置信息和模板属性；

将获取到的各展示页面的页面地址与模板属性按一一对应的关系添加到所述属性页面地址关系记录中；

将获取到的各展示页面的页面地址与配置信息按一一对应的关系添加到所述配置页面地址关系记录中。

5.如权利要求1所述的模板共享方法，其特征在于，所述根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面，包括：

获得所述配置信息中记录的组件与所述页面模板中记录的组件的交集作为展示组件集；

根据所述展示组件集在所述页面模板中的布局和样式生成所述特定展示页面；

根据所述配置信息中记录的所述展示组件集中的全部或部分组件的布局和样式更新所述特定展示页面中相应的组件的布局和样式；

根据所述配置信息中记录的所述展示组件集中的各组件与各待展示数据之间的绑定关系，将各待展示数据显示在所述特定展示页面中的对应组件中。

6.一种模板共享装置，其特征在于，包括：

页面获取命令接收单元，用于当接收到针对特定展示页面的页面获取命令时，从所述页面获取命令中解析出所述特定展示页面的页面地址；其中，页面地址用于通过互联网访问展示页面；

模板属性查询单元，用于根据解析出的页面地址通过查询预先建立的属性页面地址关系记录得到与所述特定展示页面对应的页面模板的模板属性；

页面模板获取单元，用于根据所述特定展示页面对应的页面模板的模板属性通过查询预先建立的属性模板关系记录得到与所述特定展示页面对应的页面模板；其中，与所述特定展示页面对应的页面模板是预先创建的至少一个页面模板中的一个；

配置信息获取单元，用于根据解析出的页面地址通过查询预先建立的配置页面地址关系记录得到与所述特定展示页面对应的配置信息；

展示页面生成单元，用于根据与所述特定展示页面对应的页面模板和配置信息生成所述特定展示页面；

其中，所述至少一个页面模板中的各页面模板分别具有不同的模板属性；各页面模板由组件组成，用于生成展示页面。

7.如权利要求6所述的模板共享装置，其特征在于，还包括：

页面模板创建单元，用于创建至少一个页面模板，并为每个页面模板设定各自唯一的模板属性；

属性模板位置关系构建单元，用于将每个页面模板各自的模板属性与各自的存储位置按一一对应的关系存储在属性模板关系记录中。

8.如权利要求7所述的模板共享装置，其特征在于，所述页面模板创建单元，包括：

组件模块化模块，用于将用于页面展示的各种页面元素开发为组件；

页面模板创建模块，用于根据指定的至少一个展示需求使用组件构建与各展示需求相应的页面模板并为每个页面模板的设定各自唯一的模板属性。

9.如权利要求6所述的模板共享装置，其特征在于，还包括：

展示页面信息接收单元，用于获取各展示页面对应的页面地址、配置信息和模板属性；

属性页面地址关系构建单元，用于将获取到的各展示页面的页面地址与模板属性按一一对应的关系添加到所述属性页面地址关系记录中；

配置页面地址关系构建单元，用于将获取到的各展示页面的页面地址与配置信息按一一对应的关系添加到所述配置页面地址关系记录中。

10.如权利要求6所述的模板共享装置，其特征在于，所述展示页面生成单元，包括：

有效组件确定模块，用于获得所述配置信息中记录的组件与所述页面模板中记录的组件的交集作为展示组件集；

展示页面生成模块，用于根据所述展示组件集在所述页面模板中的布局和样式生成所述特定展示页面；

展示页面调整模块，用于根据所述配置信息中记录的所述展示组件集中的全部或部分组件的布局和样式更新所述特定展示页面中相应的组件的布局和样式；

数据填充模块，用于根据所述配置信息中记录的所述展示组件集中的各组件与各待展示数据之间的绑定关系，将各待展示数据显示在所述特定展示页面中的对应组件中。

Images