CN117389540A - 基于cms的门户管理方法 - Google Patents

Abstract

本发明提供一种基于CMS的门户管理方法，包括：创建并管理栏目；对门户页面进行可视化配置和渲染；门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联。通过后台搭建的栏目体系，在菜单管理和动态组件的数据关联中，动态获取栏目的内容数据，使在门户的可视化配置中，除了基础的组件配置之外，还可通过后台配置的栏目内容进行数据联动，不仅降低运营内容维护工作量，而且提高了配置的灵活度，在降低运营成本的同时能够对复杂内容进行有效管理，解决了现有CMS在页面门户管理过程中配置不够灵活、无法对复杂内容进行管理的问题。

Description

基于CMS的门户管理方法

技术领域

本发明涉及网页门户管理技术领域，特别涉及一种基于CMS的门户管理方法。

背景技术

随着网络应用的丰富和发展，很多网站往往不能迅速跟进大量信息衍生及业务模式变革的脚步，常常需要花费许多时间、人力和物力来处理信息更新和维护工作。遇到网站扩充的时候，整合内外网及分支网站的工作就变得更加复杂，甚至还需重新建设网站。如此下去，Web开发者始终在一个高成本、低效率的循环中升级、整合，既浪费了时间，又浪费了人力、物力。

目前Web网页门户的内容配置和数据集成，除了由前端代码完成内容配置与样式装修外，也支持利用CMS体系进行内容的搭建与填充。CMS(Content Management System，内容管理系统)，是一种位于Web前端(Web服务器)和后端办公系统或流程(内容创作、编辑)之间的软件系统。内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切想要发布到Internet、Intranet以及Extranet网站的信息。

虽然CMS对于强运营类网站在网站建设上能够提供灵活的内容部署和样式配置调整，但可视化的拖拽仅实现了页面展示内容的自由配置，对于动态数据的联动和页面层级管理上尚缺乏较好的实现模式。此外，虽然CMS的内容管理配置中的富文本编辑器功能上基本能满足文字、图片、链接等大部分基础编辑功能，但基于富文本编辑器的编辑还没能很好地实现更加丰富样式的配置，需要更好地均衡便捷的图文编辑和丰富的样式编辑与扩展。

发明内容

本发明的目的在于提供一种基于CMS的门户管理方法，以解决现有CMS在页面门户管理过程中配置不够灵活、无法对复杂内容进行管理的问题。

为解决上述技术问题，本发明提供一种基于CMS的门户管理方法，包括：

创建并管理栏目；

对门户页面进行可视化配置和渲染；

门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联。

可选的，在所述的基于CMS的门户管理方法中，所述创建并管理栏目的方法包括：

创建栏目；

通过定义栏目内容，将栏目划分为不同的栏目类型；

对不同栏目类型的栏目进行层级管理和内容管理。

可选的，在所述的基于CMS的门户管理方法中，所述对不同栏目类型的栏目进行层级管理和内容管理的方法包括：

将栏目划分为列表类型栏目、内容类型栏目和链接类型栏目；

采用树形结构构建栏目层级，内容类型栏目可挂载多个内容；

设定栏目映射到门户的路由，并将其作为栏目的唯一路径；

在栏目映射到门户的路由中设定具体内容的路由。

可选的，在所述的基于CMS的门户管理方法中，所述对门户页面进行可视化配置和渲染的方法包括：

定义动态组件；

通过动态组件可视化配置门户页面的数据；

采用中心数据管理模式，动态组件获取数据渲染；

基于富文本编辑器元件开发静态组件。

可选的，在所述的基于CMS的门户管理方法中，所述定义动态组件的方法包括：

定义动态组件的表现形式为JSON，具有不同的属性字段，包括操作面板配置和组件渲染的方法。

可选的，在所述的基于CMS的门户管理方法中，所述通过动态组件可视化配置门户页面的数据的方法包括：

将组件数据和全局数据保存至数据库，其中组件数据的形式为JSON schema，全局数据包括主要颜色、顶部菜单和页面路径；

门户页面通过页面路径请求服务器数据，以使动态组件可视化配置门户页面。

可选的，在所述的基于CMS的门户管理方法中，所述采用中心数据管理模式，动态组件获取数据渲染的方法包括：

数据包括基础数据和其他数据；

当获取基础数据时，由中心数据管理提供方法获取；

当获取其他数据时，通过数据获取钩子使动态组件配置数据获取的方法，再由中心数据管理按照动态组件配置的数据获取的方法获取。

可选的，在所述的基于CMS的门户管理方法中，所述基于富文本编辑器元件开发静态组件的方法包括：

判断输入的.vue文件有无特殊标志，若有特殊标志，则将文件通过htmlparser2解析成AST语法树得到template模板与style标签；

对style标签进行预处理，插入到template模板中，并渲染到文件中；

获取此dom下的innerHTML字符串，以得到包含样式的静态组件。

可选的，在所述的基于CMS的门户管理方法中，所述对门户页面进行可视化配置和渲染的方法还包括：

对栏目进行SEO优化，包括配置SEO关键词和标签，以实现门户页面的独立优化。

可选的，在所述的基于CMS的门户管理方法中，所述门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联的方法包括：

Node服务端向后端服务请求查询数据；

根据门户页面的UA标识，得出门户页面的视口宽高；

利用门户页面的视口宽高计算出需要渲染的动态组件，并对不需要渲染的动态组件打上客户端渲染标志，将html代码返回至门户页面；

门户页面根据html代码进行渲染，有客户端渲染标志的动态组件经过js生成代码后展示。

本发明提供的基于CMS的门户管理方法，包括：创建并管理栏目；对门户页面进行可视化配置和渲染；门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联。通过后台搭建的栏目体系，在菜单管理和动态组件的数据关联中，动态获取栏目的内容数据，使在门户的可视化配置中，除了基础的组件配置之外，还可通过后台配置的栏目内容进行数据联动，不仅降低运营内容维护工作量，而且提高了配置的灵活度，在降低运营成本的同时能够对复杂内容进行有效管理，解决了现有CMS在页面门户管理过程中配置不够灵活、无法对复杂内容进行管理的问题。

附图说明

图1为本实施例提供的基于CMS的门户管理方法的流程图；

图2为本实施例提供的基于CMS的门户管理方法的结构框图；

图3为本实施例提供的栏目与门户页面的结构映射示意图；

图4为本实施例提供的中心数据管理模式进行数据获取的方法示意图；

图5为本实施例提供的基于富文本编辑器元件开发静态组件的方法示意图；

图6为本实施例提供的门户页面渲染流程示意图。

具体实施方式

以下结合附图和具体实施例对本发明提出的基于CMS的门户管理方法作进一步详细说明。需说明的是，附图均采用非常简化的形式且均使用非精准的比例，仅用以方便、明晰地辅助说明本发明实施例的目的。此外，附图所展示的结构往往是实际结构的一部分。特别的，各附图需要展示的侧重点不同，有时会采用不同的比例。

需要说明的是，本发明的说明书和权利要求书及附图说明中的“第一”、“第二”等是用于区别类似的对象，以便描述本发明的实施例，而不用于描述特定的顺序或先后次序，应该理解这样使用的结构在适当情况下可以互换。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

本实施例提供一种基于CMS的门户管理方法，如图1所示，包括：

S1，创建并管理栏目；

S2，对门户页面进行可视化配置和渲染；

S3，门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联。

本实施例提供的基于CMS的门户管理方法，通过后台搭建的栏目体系，在菜单管理和动态组件的数据关联中，动态获取栏目的内容数据，使在门户的可视化配置中，除了基础的组件配置之外，还可通过后台配置的栏目内容进行数据联动，不仅降低运营内容维护工作量，而且提高了配置的灵活度，在降低运营成本的同时能够对复杂内容进行有效管理，解决了现有CMS在页面门户管理过程中配置不够灵活、无法对复杂内容进行管理的问题。

其中，栏目是一种后台管理的内容结构形式，其可以配置多层，栏目样式根据定义的样式展示。在实际应用中，栏目数据可被关联到动态组件，门户渲染可根据栏目层级和内容实现多种预设样式的渲染展示。以及，在本实施例中，动态组件是由前端框架渲染成HTML代码片断的一种代码组织形式，其数据不是一成不变的，展示的数据会根据数据库数据的更改而变化。

需要说明的是，本申请提出的门户管理方法涉及的相关名词均为本领域常规使用的名词，其含义和具体实现方式均为本领域技术人员所公知的，例如栏目设置在后台、部分情形下数据保存在数据库中等。本申请只针对与现有技术的不同之处进行重点说明，本领域的公知常识部分本申请不做过多描述，但并不能因此而认定本申请技术方案公开不充分。

在本实施例中，如图2所示，可以在门户页面建立门户页面日常管理模块来实现对门户页面的配置，以及可以在后台建立后台栏目日常管理模块来实现对栏目内容的管理；通过在门户页面日常管理模块和后台栏目日常管理模块之间建立数据联动，能够实现两者之间的动态数据关联。

具体的，门户页面包括可视化配置、动态组件和菜单导航。其中，本实施例中，门户页面配置采用所见即所得的可视化配置，拖拽调整搭载着栏目数据的动态组件进行页面内容拼接；菜单导航基于CMS系统实现。

以及，栏目内容包括栏目层级列表管理和栏目内容管理。使用管理后台对栏目的具体内容和层级关系进行管理，完成门户动态组件和菜单数据的关联。

在具体应用时，通过对门户页面(动态组件和菜单导航配置)和栏目内容(栏目列表与对应栏目的内容)的日常管理，实现门户可视化内容配置与动态数据关联。业务人员可以在日常管理中修改门户组件搭配，或者维护后台栏目内容，均可实现门户页面内容的更新。

在本实施例中，门户的页面结构渲染使用「栏目头+页面内容」的形式，通过对后台栏目层级结构的解析，映射成为页面的层级内容，直接实现详情页面、内容列表、多层内容列表等多种内容形态，从而直接通过后台栏目的层级、样式和内容管理完成多种状态的内容管理。

以下，对于本实施例提出的基于CMS的门户管理方法中的每一步骤进行详细说明。

在本实施例中，步骤S1，创建并管理栏目的方法包括：

S11，创建栏目。创建栏目的过程可以基于CMS的系统功能实现，其为本领域技术人员所熟知的，此处不再赘述。

S12，通过定义栏目内容，将栏目划分为不同的栏目类型。具体的，在本实施例中，栏目可以被划分为列表类型栏目、内容类型栏目和链接类型栏目。

S13，对不同栏目类型的栏目进行层级管理和内容管理。具体的，在本实施例中，如图3所示，采用树形结构构建栏目层级，内容类型栏目可挂载多个内容，一个顶级栏目下可以挂载多个子栏目；设定栏目映射到门户的路由，并将其作为栏目的唯一路径，在一具体实施例中，映射到门户的路由定义为：

/page/:columnUrl，其中，columnUrl是栏目的唯一路径；在栏目映射到门户的路由中设定具体内容的路由，在一具体实施例中，具体内容的路由定义为：

/page/:columnUrl/:contentId，其中，contentId是内容的Id。通过对栏目的层级管理和内容管理，形成嵌套组成模式的路由，有利于后期的SEO优化。

进一步的，在本实施例中，步骤S2，对门户页面进行可视化配置和渲染的方法包括：

S21，定义动态组件。

具体的，在本实施例中，定义动态组件的表现形式为JSON，具有不同的属性字段，包括操作面板配置和组件渲染的方法。

JSON(JavaScript Object Notation，JS对象简谱)是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

S22，通过动态组件可视化配置门户页面的数据。

具体的，在本实施例中，首先，将组件数据和全局数据保存至数据库，其中组件数据的形式为JSON schema，全局数据包括主要颜色、顶部菜单和页面路径等；页面路径具有唯一性，如此，当用户访问门户页面时，门户端(门户页面)通过页面路径请求服务器数据，以使动态组件可视化配置门户页面，从而实现了由后台运营系统通过动态组件与菜单数据可视化配置页面的数据。

其中，JSON Schem是JSON数据模式，应用程序可以使用JSON模式来构建用户界面使互动的内容生成除了用户输入检查或验证各种来源获取的数据。

S23，采用中心数据管理模式，动态组件获取数据渲染。

具体的，在本实施例中，获取的数据(数据源)包括基础数据(包括栏目类型的数据、商品的数据等)和其他数据。如图4所示，针对不同的数据，本实施例给出了不同的获取方法：

当获取基础数据时，由于基础数据存储在数据库中，则可以由中心数据管理提供方法获取；

当获取其他数据时，由于其他数据的获取方式中心数据管理并未预先设置，因此，需要提前提供数据获取钩子的方式，通过数据获取钩子使动态组件配置数据获取的方法，再由中心数据管理按照动态组件配置的数据获取的方法获取。

由中心数据管理统一向服务器请求获取数据，再统一下发到各个动态数据组件中。

本实施例利用中心数据管理的模式有利于提高门户管理的性能，且开放数据钩子又提高了门户管理的可扩展性。

S24，基于富文本编辑器元件开发静态组件。

静态组件的开发原理是由通过Vue模板渲染为HTML代码，然后在富文本编辑器元件中添加对应的HTML代码就可以实现，然而目前的静态组件无法实现CSS(CascadingStyle Sheets，层叠样式表)样式的共享与开发。为解决该问题，本实施例通过自定义Webpack插件的方式来实现CSS样式的共享与开发。具体的，在本实施例中，如图5所示，首先判断输入的.vue文件有无特殊标志，若无，则跳过；若有特殊标志，则进入到模板分析中，将文件通过htmlparser2解析成AST语法树得到template模板与style标签；然后对style标签进行预处理，通过Vue的component动态组件插入到template模板中，并渲染到文件中；再获取此dom下的innerHTML字符串，以得到包含样式的静态组件。

本实施例提供的基于富文本编辑器元件开发静态组件，可以更好地满足无数据关联要求的门户详情页的页面配置需求。

较佳的，在本实施例中，步骤S2，对门户页面进行可视化配置和渲染的方法还包括：

S25，对栏目进行SEO优化，包括配置SEO关键词和标签，以实现门户页面的独立优化。

SEO(Search Engine Optimization，搜索引擎优化)，是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。本实施例通过SEO优化，有利于优化门户网站对应每个栏目页面的搜索排名，可极大提高门户网站整体的搜索曝光度。

进一步的，在本实施例中，步骤S3，门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联的方法包括：

S31，Node服务端向后端服务请求查询数据；

S32，根据门户页面的UA标识，得出门户页面的视口宽高；

S33，利用门户页面的视口宽高计算出需要渲染的动态组件，并对不需要渲染的动态组件打上客户端渲染标志，将html代码返回至门户页面；

S34，门户页面根据html代码进行渲染，有客户端渲染标志的动态组件经过js生成代码后展示。

如图6所示，在一具体实施过程中，步骤S3，门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联的方法具体包括：首先，浏览器(门户页面)向node服务端发送请求文档，node服务端根据请求文档向后端服务发送API请求查询数据；后端服务根据API请求将查询的数据返回至node服务端；node服务端根据浏览器的UA信息查询出客户端浏览器的视口宽高，并根据高度确认组装的html内容，进而生成html文档(内含html代码)；node服务端将html文档返回至浏览器；浏览器根据html文档中的代码进行渲染；其中未返回的部分html(打有客户端渲染标志的部分)有浏览器自身渲染，即经过js生成代码后展示出来。

本实施例提供的渲染模式，既有利于搜索SEO优化，又有利于提高门户页面管理的性能。

需要说明的是，本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可，此外，各个实施例之间不同的部分也可互相组合使用，本发明对此不作限定。

本实施例提供的基于CMS的门户管理方法，包括：创建并管理栏目；对门户页面进行可视化配置和渲染；门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联。通过后台搭建的栏目体系，在菜单管理和动态组件的数据关联中，动态获取栏目的内容数据，使在门户的可视化配置中，除了基础的组件配置之外，还可通过后台配置的栏目内容进行数据联动，不仅降低运营内容维护工作量，而且提高了配置的灵活度，在降低运营成本的同时能够对复杂内容进行有效管理，解决了现有CMS在页面门户管理过程中配置不够灵活、无法对复杂内容进行管理的问题。

上述描述仅是对本发明较佳实施例的描述，并非对本发明范围的任何限定，本发明领域的普通技术人员根据上述揭示内容做的任何变更、修饰，均属于权利要求书的保护范围。

Claims (10)

1.一种基于CMS的门户管理方法，其特征在于，包括：

创建并管理栏目；

对门户页面进行可视化配置和渲染；

门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联。

2.根据权利要求1所述的基于CMS的门户管理方法，其特征在于，所述创建并管理栏目的方法包括：

创建栏目；

通过定义栏目内容，将栏目划分为不同的栏目类型；

对不同栏目类型的栏目进行层级管理和内容管理。

3.根据权利要求2所述的基于CMS的门户管理方法，其特征在于，所述对不同栏目类型的栏目进行层级管理和内容管理的方法包括：

将栏目划分为列表类型栏目、内容类型栏目和链接类型栏目；

采用树形结构构建栏目层级，内容类型栏目可挂载多个内容；

设定栏目映射到门户的路由，并将其作为栏目的唯一路径；

在栏目映射到门户的路由中设定具体内容的路由。

4.根据权利要求1所述的基于CMS的门户管理方法，其特征在于，所述对门户页面进行可视化配置和渲染的方法包括：

定义动态组件；

通过动态组件可视化配置门户页面的数据；

采用中心数据管理模式，动态组件获取数据渲染；

基于富文本编辑器元件开发静态组件。

5.根据权利要求4所述的基于CMS的门户管理方法，其特征在于，所述定义动态组件的方法包括：

定义动态组件的表现形式为JSON，具有不同的属性字段，包括操作面板配置和组件渲染的方法。

6.根据权利要求4所述的基于CMS的门户管理方法，其特征在于，所述通过动态组件可视化配置门户页面的数据的方法包括：

将组件数据和全局数据保存至数据库，其中组件数据的形式为JSON schema，全局数据包括主要颜色、顶部菜单和页面路径；

门户页面通过页面路径请求服务器数据，以使动态组件可视化配置门户页面。

7.根据权利要求4所述的基于CMS的门户管理方法，其特征在于，所述采用中心数据管理模式，动态组件获取数据渲染的方法包括：

数据包括基础数据和其他数据；

当获取基础数据时，由中心数据管理提供方法获取；

当获取其他数据时，通过数据获取钩子使动态组件配置数据获取的方法，再由中心数据管理按照动态组件配置的数据获取的方法获取。

8.根据权利要求4所述的基于CMS的门户管理方法，其特征在于，所述基于富文本编辑器元件开发静态组件的方法包括：

判断输入的.vue文件有无特殊标志，若有特殊标志，则将文件通过htmlparser2解析成AST语法树得到template模板与style标签；

对style标签进行预处理，插入到template模板中，并渲染到文件中；

获取此dom下的innerHTML字符串，以得到包含样式的静态组件。

9.根据权利要求4所述的基于CMS的门户管理方法，其特征在于，所述对门户页面进行可视化配置和渲染的方法还包括：

对栏目进行SEO优化，包括配置SEO关键词和标签，以实现门户页面的独立优化。

10.根据权利要求1所述的基于CMS的门户管理方法，其特征在于，所述门户页面引用栏目数据，以实现门户页面与栏目之间的动态数据关联的方法包括：

Node服务端向后端服务请求查询数据；

根据门户页面的UA标识，得出门户页面的视口宽高；

利用门户页面的视口宽高计算出需要渲染的动态组件，并对不需要渲染的动态组件打上客户端渲染标志，将html代码返回至门户页面；

门户页面根据html代码进行渲染，有客户端渲染标志的动态组件经过js生成代码后展示。