CN116910410A - 一种动态官网页面布局和数据的配置方法 - Google Patents

Abstract

本发明提供的一种动态官网页面布局和数据的配置方法，所述配置方法包括：在后台管理系统配置模型、栏目；建立管网前端。让运营人员能够对官网的运营维护做到及时、灵活可配、动态删减页面，减少开发成本。

Description

一种动态官网页面布局和数据的配置方法

技术领域

本发明涉及数字化转型领域，尤其涉及一种动态官网页面布局和数据的配置方法。

背景技术

随着数字化转型的推进，越来越多的企业开始对自家系统进行重构或者新项目开发，很多企业在前端技术选型上会使用到vue框架，用其搭建后台管理系统、公司门户网站即企业官网。

一般来讲，企业运营人员会通过后台管理系统来对官网的内容进行维护、更新，那么当官网的页面想做到灵活删减并且页面样式较多时，相应的后台管理系统应该要做到支持这些功能，让运营人员更好的管理自家官网。

目前，大多数企业的官网在一开始设计之初都是固定的几个页面、几种样式，且已有页面的布局样式不可随时变换，只能重新开发，并且如果想给官网新增页面，也需要重新开发、测试、发版，增加了网站的运营维护成本。

现有技术方案在对网站进行运营维护时，会有以下缺点：

1、运营人员无法动态对网站页面进行删减，需要开发、测试、发版；

2、网站已有页面的布局样式无法动态调整，同需要开发、测试、发版；

大大增加了官网的运营维护成本以及运营维护周期，使得对官网的维护不太灵活。

发明内容

鉴于上述问题，提出了本发明以便提供克服上述问题或者至少部分地解决上述问题的一种动态官网页面布局和数据的配置方法。

根据本发明的一个方面，提供了一种动态官网页面布局和数据的配置方法，所述配置方法包括：

在后台管理系统配置模型、栏目；

建立管网前端。

可选的，所述在后台管理系统配置模型、栏目具体包括：

进入后台管理系统-模型管理，新建一个页面模型；

进入后台管理系统-栏目管理，配置整个官网的一、二、三等多级栏目的名称以及模型；

进入后台管理系统-内容管理，展示内容跟与栏目管理的内容相同。

可选的，所述页面模型的参数包括：模型名称、模型编码和模型URL。

可选的，所述建立管网前端具体包括：

通过在后台管理对栏目管理配置生成的数据；

使用vue的vueRouter路由拦截钩子beforeEach对路由表数据进行处理；

处理完成后再通过vueRouter的addRoutes方法动态生成页面，再生成首页的菜单。

可选的，所述通过在后台管理对栏目管理配置生成的数据具体包括：

生成一个符合vue技术栈所需格式的路由表，在访问官网时会优先请求接口获取到路由表数据。

可选的，所述使用vue的vueRouter路由拦截钩子beforeEach对路由表数据进行处理具体包括：处理栏目对应模型的模型编码与本地.vue文件的关联。

本发明提供的一种动态官网页面布局和数据的配置方法，所述配置方法包括：在后台管理系统配置模型、栏目；建立管网前端。让运营人员能够对官网的运营维护做到及时、灵活可配、动态删减页面，减少开发成本。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

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

图1为本发明实施例提供的一种动态官网页面布局和数据的配置方法的流程图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明的说明书实施例和权利要求书及附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元。

下面结合附图和实施例，对本发明的技术方案做进一步的详细描述。

如图1所示，一种动态官网页面布局和数据的配置方法，本发明用到了vue技术栈：

一、首先在后台管理系统配置模型、栏目：

进入后台管理系统-模型管理，新建一个页面模型，主要参数为：模型名称、模型编码，模型URL，例如运营人员新建了一个模型：模型名称为“单图片文字详情页”，模型编码为“singleImgAndText”，模型URL为“/singleDetail”；

进入后台管理系统-栏目管理，栏目管理的作用是配置整个官网的一、二、三等多级栏目的名称以及模型，

以“招商银行官网招商银行官方网站”为例，一级栏目主要分为了“个人业务、公司业务、信用卡等”，其中“个人业务”下又存在“一卡通、金葵花理财、私人银行”等二级栏目，

开发人员在后台管理系统里再创建一个“营销活动”的一级栏目，并设置此一级栏目的访问URL为“/activities”，运营人员在此栏目下在创建“亲子活动”的二级栏目，然后选择内容模型为在模型管理创建的“单图片文字详情页”；

栏目管理的页面是个树形结构，一级是“营销活动”，点击展开是“亲子活动”；

进入后台管理系统-内容管理，该页面左侧是树形结构，展示内容跟与栏目管理的内容相同，点击刚创建的“亲子活动”，右侧会出现对应改栏目模型的“单图片文字详情页”的表单编辑页，可上传单张图片和编辑文字，编辑完保存发布即可完成对二级栏目-亲子活动页面的维护。

二、官网前端工程部分：

1、通过在后台管理对栏目管理配置生成的数据，生成一个符合vue技术栈所需格式的路由表，在访问官网时会优先请求接口获取到路由表数据；

2、使用vue的vueRouter路由拦截钩子beforeEach对路由表数据进行处理，主要处理栏目对应模型的"模型编码"与本地.vue文件的关联；

3、处理完成后再通过vueRouter的addRoutes方法动态生成页面，再生成首页的菜单；

这时官网首页会出现“营销中心”一级菜单，鼠标悬浮会展示“亲子活动”，点击“亲子活动”会跳转到详情页，页面地址为“/activities/singleDetail”，页面展示内容是运营人员在后台管理系统配置的单个图片+文字，

如果想在“营销中心”下新增其他页面，只需在后台管理系统-栏目管理，新建子栏目并选择页面模型即可，

如果想调整“亲子活动”的页面样式，需要在后台管理系统-栏目管理，修改“内容模型”即可。

有益效果：基于vue框架实现对官网进行维护，不需要重新开发上线；

运营人员在后台管理系统可随时新增/减少官网页面，比如上新一个营销活动页，只需在后管系统发布即可，不需要重新开发上线；

运营人员在后台管理系统可随时调整官网已有页面的布局样式风格，不需要重新开发上线；

让运营人员对官网的运营维护做到及时、灵活可配、动态删减页面，减少开发成本。

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

Claims (6)

1.一种动态官网页面布局和数据的配置方法，其特征在于，所述配置方法包括：

在后台管理系统配置模型、栏目；

建立管网前端。

2.根据权利要求1所述的一种动态官网页面布局和数据的配置方法，其特征在于，所述在后台管理系统配置模型、栏目具体包括：

进入后台管理系统-模型管理，新建一个页面模型；

进入后台管理系统-栏目管理，配置整个官网的一、二、三等多级栏目的名称以及模型；

进入后台管理系统-内容管理，展示内容跟与栏目管理的内容相同。

3.根据权利要求2所述的一种动态官网页面布局和数据的配置方法，其特征在于，所述页面模型的参数包括：模型名称、模型编码和模型URL。

4.根据权利要求1所述的一种动态官网页面布局和数据的配置方法，其特征在于，所述建立管网前端具体包括：

通过在后台管理对栏目管理配置生成的数据；

使用vue的vueRouter路由拦截钩子beforeEach对路由表数据进行处理；

处理完成后再通过vueRouter的addRoutes方法动态生成页面，再生成首页的菜单。

5.根据权利要求4所述的一种动态官网页面布局和数据的配置方法，其特征在于，所述通过在后台管理对栏目管理配置生成的数据具体包括：

生成一个符合vue技术栈所需格式的路由表，在访问官网时会优先请求接口获取到路由表数据。

6.根据权利要求4所述的一种动态官网页面布局和数据的配置方法，其特征在于，所述使用vue的vueRouter路由拦截钩子beforeEach对路由表数据进行处理具体包括：处理栏目对应模型的模型编码与本地.vue文件的关联。