CN114329297A - 内容管理系统、静态页面的管理方法、装置及存储介质 - Google Patents

Abstract

本申请公开了一种内容管理系统、静态页面的管理方法、装置及存储介质。该系统包括：页面编辑器，用于获取源码文件，展示由源码文件生成的静态页面，并响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面以及更新后的源码文件；版本管理系统，用于从代码仓库获取源码文件，并将源码文件发送至页面编辑器，还用于从页面编辑器获取更新后的源码文件，并将更新后的源码文件发送至代码仓库；前端开发脚手架工具，用于将页面编辑器获取的源码文件生成为静态页面；静态资源服务器，用于存储更新后的静态页面。通过本申请，解决了相关技术中对静态页面的内容进行管理时对数据模型依赖过高的问题。

Description

内容管理系统、静态页面的管理方法、装置及存储介质

技术领域

本申请涉及页面管理技术领域，具体而言，涉及一种内容管理系统、静态页面的管理方法、装置及存储介质。

背景技术

目前主流的CMS(Content Management System，内容管理系统)都是通过数据驱动的，也即通过动态页面实现内容管理，具体地，开发者使用模板语法，针对静态页面中的内容进行有变量替换和重写，在服务器端程序中编写对应的数据模型，同时在数据库中建表以存储对应的数据，当访问者访问对应的网站时，服务器端从数据库中读取对应的数据，将页面动态渲染并返回客户端。

相关技术中的CMS有：Django-CMS、ThinkPhp、Strapi，以及其他基于不同的语言开发的内容管理系统的框架，上述通过数据驱动的CMS系统的特点是：数据驱动，需要提前设计好数据模型和数据库；页面动态渲染，在有用户访问时，服务器动态渲染页面。

因而，相关技术中的CMS存在以下问题：问题一，在对静态页面的内容进行管理时对数据模型依赖过高，在使用CMS时，首先需要开发出一套成型的静态页面，然后根据CMS框架的设定，针对静态页面上部分或者全部的内容预先在程序中建立相应的数据模型并在数据库中建表，最后对静态页面进行模板替换和重构。需要说明的是，在静态页面越来越复杂的今天，前期的页面重构、数据模型的设计和开发，会带来维护上巨大的时间投入。问题二，动态页面不利于SEO(Search Engine Optimization，搜索引擎优化)，动态链接对SEO的优化更多的是便于页面的调整和管理，动态页面链接对服务器负载产生较大的压力，网站访问速度慢，路径准确不清晰，页面异常率高，存在虚假的路径文件，不利于SEO优化效果。

针对相关技术中对静态页面的内容进行管理时对数据模型依赖过高的问题，目前尚未提出有效的解决方案。

发明内容

本申请提供一种内容管理系统、静态页面的管理方法、装置及存储介质，以解决相关技术中对静态页面的内容进行管理时对数据模型依赖过高的问题。

根据本申请的一个方面，提供了内容管理系统。该系统包括：页面编辑器，用于获取源码文件，展示由源码文件生成的静态页面，并响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面以及更新后的源码文件，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集；版本管理系统，用于从代码仓库获取源码文件，并将源码文件发送至页面编辑器，还用于从页面编辑器获取更新后的源码文件，并将更新后的源码文件发送至代码仓库；前端开发脚手架工具，用于将页面编辑器获取的源码文件生成为静态页面；静态资源服务器，用于从页面编辑器获取更新后的静态页面，存储更新后的静态页面，并生成更新后的静态页面对应的访问链接。

可选地，静态资源服务器为云服务器，云服务器存储更新后的静态页面，并生成更新后的静态页面对应的访问路径。

可选地，前端开发脚手架工具对源码文件进行以下至少之一处理，得到静态页面：打包处理、压缩处理、页面内容注入处理；其中，打包处理用于检测源码文件对应的公共代码，并将公共代码对应的可视化数据注入到静态页面的标记位置；压缩处理用于压缩源码文件中的空格数据和换行数据，并将大于预设长度的变量替换为目标长度的变量；页面内容注入处理用于将源码文件中的数据注入预设页面模板中。

根据本申请的另一个方面，提供了一种静态页面的管理方法。该方法包括：获取源码文件，通过前端开发脚手架工具将源码文件生成为静态页面，并展示静态页面，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集；响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面；根据更新后的静态页面更新源码文件，得到更新后的源码文件。

可选地，在根据更新后的静态页面更新源码文件，得到更新后的源码文件之后，该方法还包括：检测是否接收到针对更新后的静态页面的发布指令；在接收到发布指令的情况下，将更新后的静态页面同步至静态资源服务器。

可选地，在接收到发布指令的情况下，将更新后的静态页面同步至静态资源服务器之后，该方法还包括：接收发布指令对应的反馈信息，并根据反馈信息判断更新后的静态页面是否发布成功；在发布失败的情况下，通过版本管理系统获取更新后的静态页面的上一版本的源码文件，得到目标源码文件；通过前端开发脚手架工具生成目标源码文件对应的静态页面，得到待检测的静态页面；响应对待检测的静态页面的编辑操作，修改待检测的静态页面关联的内容数据，得到目标静态页面，并根据目标静态页面更新目标源码文件。

可选地，在根据更新后的静态页面更新源码文件，得到更新后的源码文件之前，该方法还包括：判断是否接收到对更新后的静态页面的确认指令，在接收到确认指令的情况下，执行根据更新后的静态页面更新源码文件，得到更新后的源码文件的步骤。

根据本申请的另一方面，提供了一种静态页面的管理装置。该装置包括：第一获取单元，用于获取源码文件，通过前端开发脚手架工具将源码文件生成为静态页面，并展示静态页面，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集；第一响应单元，用于响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面；更新单元，用于根据更新后的静态页面更新源码文件，得到更新后的源码文件。

可选地，该装置还包括：检测单元，用于在更新单元根据更新后的静态页面更新源码文件，得到更新后的源码文件之后，检测是否接收到针对更新后的静态页面的发布指令；同步单元，用于在检测单元检测出接收到发布指令的情况下，将更新后的静态页面同步至静态资源服务器。

可选地，该装置还包括：接收单元，用于在同步单元将更新后的静态页面同步至静态资源服务器之后，接收发布指令对应的反馈信息，并根据反馈信息判断更新后的静态页面是否发布成功；第二获取单元，用于在发布失败的情况下，通过版本管理系统获取更新后的静态页面的上一版本的源码文件，得到目标源码文件；生成单元，用于通过前端开发脚手架工具生成目标源码文件对应的静态页面，得到待检测的静态页面；第二响应单元，用于响应对待检测的静态页面的编辑操作，修改待检测的静态页面关联的内容数据，得到目标静态页面，并根据目标静态页面更新目标源码文件。

可选地，该装置还包括：判断单元，用于在更新单元根据更新后的静态页面更新源码文件，得到更新后的源码文件之前，判断是否接收到对更新后的静态页面的确认指令；执行单元，用于在接收到确认指令的情况下，执行根据更新后的静态页面更新源码文件，得到更新后的源码文件的步骤。

根据本发明实施例的另一方面，还提供了一种非易失性存储介质，非易失性存储介质包括存储的程序，其中，程序运行时控制非易失性存储介质所在的设备执行一种静态页面的管理方法。

根据本发明实施例的另一方面，还提供了一种电子装置，包含处理器和存储器；存储器中存储有计算机可读指令，处理器用于运行计算机可读指令，其中，计算机可读指令运行时执行一种静态页面的管理方法。

通过本申请，采用页面编辑器，用于获取源码文件，展示由源码文件生成的静态页面，并响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面以及更新后的源码文件，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集；版本管理系统，用于从代码仓库获取源码文件，并将源码文件发送至页面编辑器，还用于从页面编辑器获取更新后的源码文件，并将更新后的源码文件发送至代码仓库；前端开发脚手架工具，用于将页面编辑器获取的源码文件生成为静态页面；静态资源服务器，用于从页面编辑器获取更新后的静态页面，存储更新后的静态页面，并生成更新后的静态页面对应的访问链接，解决了相关技术中对静态页面的内容进行管理时对数据模型依赖过高的问题。通过节点标志符关联节点内容数据的方式存储静态资源，可以对静态页面中的节点关联的节点内容数据进行修改达到修改静态页面的目的，进而达到了提高管理静态页面的灵活性、降低对数据模型依赖性的效果。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例提供的内容管理系统的示意图；

图2是根据本申请实施例提供的可选的内容管理系统的示意图；

图3是根据本申请实施例提供的静态页面的管理方法的流程图；

图4是根据本申请实施例提供的静态页面的管理方法中进行页面代码的回滚操作流程图；

图5是根据本申请实施例提供的静态页面的管理装置的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

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

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

为了便于描述，以下对本申请实施例涉及的部分名词或术语进行说明：

CMS(英文全称：content management system，中文：内容管理系统)是帮助用户在网站上创建，管理修改内容而无需专业技术知识的软件动态页面是一对多访问，通过一个页面，可以通过若干参数返回其不同的数据。静态页面是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来的页面。

SEO：(英文全称：Search Engine Optimization，中文：搜索引擎优化)，搜索引擎优化是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。

根据本申请的实施例，提供了一种内容管理系统，如图1所示，该系统包括：

页面编辑器101，用于获取源码文件，展示由源码文件生成的静态页面，并响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面以及更新后的源码文件，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集。

具体地，页面编辑器101是一套预览静态页面和编辑静态页面内容的浏览器端的web应用，可以拉取本地已经打包好的静态页面，还可以通过版本管理系统102获取项目仓库的提交记录、切换项目至不同的提交版本，从代码仓库获取源码文件，并通过前端开发脚手架工具103将源码文件打包成静态页面，同时生成静态页面的多个节点对应的节点标志符和节点内容数据，多对节点标志符和节点内容数据构成键值对数据。

在生成静态页面之后，用户可以编辑静态页面的内容，可视化的点选页面内的节点，动态的修改键值对数据的节点内容，在修改完成节点内容之后，根据当前静态页面和对应的键值对数据生成一份新的静态页面，在修改并保存预览页面时，逆向的定位到修改节点的源码文件路径和位置，更新源码文件，实现修改源码文件内容的目的，达到了脱离数据库实现静态页面的内容管理的目的。

在一种可选的实施例中，页面编辑器101进行页面预览时，可以引入项目对应目录下的打包好的静态页面，点选对应的页面会进行URL的跳转，同时载入对应的页面数据，在保存时进行内容数据的更新，页面编辑器101中可以使用NodeGit第三方工具库，该工具库可实现了对版本管理系统102底层操作的封装，并提供了javascript对象的API接口。

版本管理系统102，用于从代码仓库获取源码文件，并将源码文件发送至页面编辑器101，还用于从页面编辑器101获取更新后的源码文件，并将更新后的源码文件发送至代码仓库。

需要说明的是，版本管理系统102指的是代码仓库的管理工具，可以是Git和SVN，本实例中利用第三方工具库NodeGit，控制Git对代码仓库进行代码版本的切换、代码的回滚、代码的拉去和提交等一系列的操作。

具体地，在页面编辑器101上点击保存后，页面编辑器101会根据当前已经更新过的节点-节点内容的映射关系，去寻找源码对应的文件，在匹配到对应的文件后，版本管理系统102会根据最新的节点内容更新源码文件。

前端开发脚手架工具103，用于将页面编辑器101获取的源码文件生成为静态页面。

具体地，静态资源服务器104可以将计算机本地存储的静态资源文件导出至指定的静态资源服务器文件目录下，前端开发脚手架工具103根据静态资源文件生成静态页面。

静态资源服务器104，用于从页面编辑器101获取更新后的静态页面，存储更新后的静态页面，并生成更新后的静态页面对应的访问链接。

具体地，在存储静态页面时，可以使用扫描工具对静态页面中的内容节点进行扫描，并为每一个内容节点赋予一个唯一的标志符，根据扫描情况生成一份扁平化的键值对数据，键值对数据一一对应的存储节点标志符和节点内容，从而形成一份静态资源文件，并将静态资源文件存储在静态资源服务器104中。

其中，扫描工具可以为NodeJS的解析脚本工具，还可以是解析html文件并生成DOM结构的工具，本实施例不限定扫描工具的类型。

在一种可选的实施例中，如图2所示，内容管理系统中的页面编辑器101为GUI编辑工具，版本管理系统102为git，前端开发脚手架工具103为webpack工具，静态资源服务器104为云服务器，通过webpack打包工具对源码文件进行打包，构建一份静态页面，GUI编辑工具可以对静态页面进行编辑，并生成更新的静态页面，GUI编辑工具还可以将更新的静态页面同步至云服务器，GUI编辑工具与git可以通过NodeJ执行Git命令，实现静态页面对应的源码的更新。

本申请实施例提供的内容管理系统，采用页面编辑器101，用于获取源码文件，展示由源码文件生成的静态页面，并响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面以及更新后的源码文件，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集；版本管理系统102，用于从代码仓库获取源码文件，并将源码文件发送至页面编辑器101，还用于从页面编辑器101获取更新后的源码文件，并将更新后的源码文件发送至代码仓库；前端开发脚手架工具103，用于将页面编辑器101获取的源码文件生成为静态页面；静态资源服务器104，用于从页面编辑器101获取更新后的静态页面，存储更新后的静态页面，并生成更新后的静态页面对应的访问链接，解决了相关技术中对静态页面的内容进行管理时对数据模型依赖过高的问题。通过节点标志符关联节点内容数据的方式存储静态资源，可以对静态页面中的节点关联的节点内容数据进行修改达到修改静态页面的目的，进而达到了提高管理静态页面的灵活性、降低对数据模型依赖性的效果。

可选地，在本申请实施例提供的内容管理系统中，静态资源服务器104为云服务器，云服务器存储更新后的静态页面，并生成更新后的静态页面对应的访问路径。

具体地，静态资源服务器104为当前云厂商提供的具有云存储功能的云服务器，此外，还也可以由开发人员自己开发服务器程序处理请求和响应，并将程序部署在相应的服务器上。

需要说明的是，对于云存储功能，可以在云服务器上存储静态页面并生成访问链接，根据相对的文件路径及页面内的跳转关系，实现页面间的跳转，并展示对应的静态页面，无需专门的处理浏览器的响应，其中，页面之前的相对路径和本地之间的相对路径是类似的，例如：一个文件夹被放到了云服务器上，文件夹中有1.html、2.html、3.html三个文件，通过www.test.com这个网址可以访问到云上的这个文件夹，当需要访问1.html时只需要修改访问www.test.com/1.html，访问2.html、2.html和1.html同理。

需要说明的是，云存储功能的使用需要安装COSCMD工具，在当前计算机用户的文件目录下，配置云服务器的桶(Bucket)、区域(Region)、秘钥Key、秘钥ID，在配置完成后配合node的shell进程，调用命令行上传本地的文件夹以及文件到云服务器，上传的文件是指前面提到的要存放的静态资源；上传的文件夹包含了一个静态资源管理的所有代码，有NodeJS的部分也有静态资源图片、视频文字等的部分。其中，上传文件命令格式：coscmdupload<localpath><cospath>，上传文件夹命令格式：coscmd upload-r<localpath><cospath>。

可选地，在本申请实施例提供的内容管理系统中，前端开发脚手架工具103对源码文件进行以下至少之一处理，得到静态页面：打包处理、压缩处理、页面内容注入处理；其中，打包处理用于检测源码文件对应的公共代码，并将公共代码对应的可视化数据注入到静态页面的标记位置；压缩处理用于压缩源码文件中的空格数据和换行数据，并将大于预设长度的变量替换为目标长度的变量；页面内容注入处理用于将源码文件中的数据注入预设页面模板中。

具体地，前端开发脚手架工具103集成了源码文件的打包、压缩、混淆、热更新、页面内容自动注入的功能。

需要说明的是，静态页面在源码开发阶段为了实现代码的复用，会提取出多个页面内相同的部分，例如顶部菜单栏，底部的地址栏，有些表单或侧边栏也会实现复用，这样在源码开发阶段就只用维护一份代码，无需重复改动。

其中，前端开发脚手架工具103的打包和压缩功能在于可以在不同的页面检测到公共部分的注入代码片段，根据这一片段，将对应的公共部分注入到对应的目标位置，具体地，很多页面可能会有一个公共的头部或者底部，这些公共部分只需要维护一份，在其他的文件里用特殊方式标记或引入，在最后会把这些公共的部分注入到每一个标记的地方，并替换原有标记。

同时，前端开发脚手架工具103的打包功能也具备合并请求，将多个静态资源合并为一个的能力。而前端开发脚手架工具103的压缩和混淆功能主要是针对js脚本文件，压缩其中多余的空格和换行，替换代码中的冗长变量，比如，有些代码中变量命名为thisisatestname在经过脚手架工具的压缩后可以替换为一个a或b之类的缩写)，从而实现较小文件的存储空间，节约传输带宽。

前端开发脚手架工具103的热更新是在静态页面开发调试时实时打包和刷新页面的能力，从而提高了开发和调试的效率。

前端开发脚手架工具103的页面内容的自动注入是指脚手架工具可以匹配页面中特殊字符串，进行模板注入或模板替换的能力，特殊字符可以自己定义或者配置，例如<％这里要注入％>，就会匹配<％和％>以及其中的内容，并替换。

前端开发脚手架工具103的模板注入由webpack的插件可以实现，最简单的就是匹配一段目标字符串，然后根据这段字符串中匹配获得的信息去找目标内容，再读取目标内容进行替换，该功能打包出的静态页面在特定的内容处会有特殊的标签进行标识和定位，其生成的页面会配合页面编辑预览的GUI工具实现编辑内容的定位和逆向定位对应内容在源码位置的能力。

在一种可选的实施例中，前端开发脚手架工具103是Webpack，静态依赖的第三方样式和组件库是Bootstrap，使用html-loader处理多页面重复部分的模板复用问题。

其中，前端开发脚手架工具103生成的项目目录下包括多个文件夹，具体地，包括config文件夹，config文件夹为打包构建静态页面文件的配置文件，这些配置文件指导webpack构建打包时的操作，包括公共模板的注入，js、css资源的合并打包，图片等多媒体资源的编码，html文件的模板处理；还包括dist文件夹，dist文件夹内的内容是打包构建完成之后的静态资源文件，也是预览和发布到静态资源服务器104上的静态资源文件内容还包括；还包括map文件夹，map文件夹内存储的json数据与static文件夹下html文件夹的目录结构一致，存储的是每一个html页面内的可编辑内容的json数据，json数据中存储的是dom节点的唯一标志符与内容的键值对数据，该文件在每次html文件更新时自动生成并更新(这一过程中使用的是cheerio对html文件进行node环境下的dom解析)，在打包时会根据此文件夹下的映射数据替换html文件夹下对应节点的内容；还server文件夹，server文件夹内的文件用于处理页面编辑GUI的服务逻辑，包括代码仓库的操作、静态资源服务器104的资源同步操作、源码文件的改写操作；还包括static文件夹，static文件夹下存储这静态页面在开发阶段的源码，是用于生成最终构建打包的页面的最初来源；还包括webapp文件夹，webapp文件夹下存储着GUI的交互界面的源代码，当GUI界面启动时，此处的代码会被编译执行，并与server文件夹下的文件进行配合，对文件进行一系列的操作。

根据本申请的实施例，提供了一种静态页面的管理方法。

图3是根据本申请实施例的静态页面的管理方法的流程图。如图3所示，该方法包括以下步骤：

步骤S302，获取源码文件，通过前端开发脚手架工具将源码文件生成为静态页面，并展示静态页面，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集。

可以通过版本管理系统从代码仓库获取源码文件，并通过前端开发脚手架工具将源码文件打包成静态页面，同时生成静态页面的多个节点对应的节点标志符和节点内容数据，多对节点标志符和节点内容数据构成键值对数据。

需要说明的是，在开发出一套静态页面之后，可以进行整体资源的打包，打包后的静态资源文件会导出到项目对应的文件夹下，以供编辑预览的GUI web应用调用，在开发静态页面时，可以在需要编辑和修改的地方使用闭合标签包裹，并赋予标签class＝”cms-editable”，在需要编辑的内容节点上注入一个特殊的标记，方便建立起节点和节点内容的映射数据，也便于在编辑时准确的定位到所标记的目标节点。

步骤S304，响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面。

具体地，可以展示项目文件夹下的静态页面，点选需要编辑的静态页面后主界面会进行切换展示。使用鼠标的移动事件可以在鼠标移动时，实时的获取都鼠标悬停的目标节点，双击鼠标，获取目标节点的聚焦，可以编辑对应节点的内容。上述操作具备所见即所得的特点，可以实时预览文案或者图片资源更新后的页面效果。

步骤S306，根据更新后的静态页面更新源码文件，得到更新后的源码文件。

可选地，在本申请实施例提供的静态页面的管理方法中，在根据更新后的静态页面更新源码文件，得到更新后的源码文件之前，该方法还包括：判断是否接收到对更新后的静态页面的确认指令，在接收到确认指令的情况下，执行根据更新后的静态页面更新源码文件，得到更新后的源码文件的步骤。

需要说明的是，更新后的静态页面只是临时文件，只有在点击保存按钮后才，根据当前已经更新过的节点-节点内容的映射关系，去寻找源码对应的文件，在匹配到对应的文件后，会根据最新的内容会持久的更新源码数据，具体地，点击保存按钮后，获取鼠标的移动事件中聚焦的dom，在获取到dom的自定义属性map-id后，可以根据该值标识的关键字去map文件夹下对应的json文件中，将当前dom节点中的内容更新同步到该key对应的内容。

本申请实施例提供的静态页面的管理方法，通过获取源码文件，通过前端开发脚手架工具将源码文件生成为静态页面，并展示静态页面，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集；响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面；根据更新后的静态页面更新源码文件，得到更新后的源码文件，解决了相关技术中对静态页面的内容进行管理时对数据模型依赖过高的问题。通过节点标志符关联节点内容数据的方式存储静态资源，可以对静态页面中的节点关联的节点内容数据进行修改达到修改静态页面的目的，进而达到了提高管理静态页面的灵活性、降低对数据模型依赖性的效果。

可选地，在本申请实施例提供的静态页面的管理方法中，在根据更新后的静态页面更新源码文件，得到更新后的源码文件之后，该方法还包括：检测是否接收到针对更新后的静态页面的发布指令；在接收到发布指令的情况下，将更新后的静态页面同步至静态资源服务器。

具体地，在源码文件更新完毕后会主动的触发一次项目的打包操作，生成一份全新的项目文件夹，可以在GUI工具内进行预览操作，该操作模拟了发布到静态资源服务器上的界面。在确认无误后，用户可点击发布按钮，触发代码仓库的提交操作，将本次的修改记录存入代码仓库的版本管理系统之中，在提交完毕源码后，GUI工具会将项目中项目文件夹下的静态页面通过静态资源服务器的接口同步至静态资源服务器指定的文件夹下，实现静态页面的发布。

由于网络异常的情况时有发生，存在静态页面发布失败的情况下，可选地，在本申请实施例提供的静态页面的管理方法中，在接收到发布指令的情况下，将更新后的静态页面同步至静态资源服务器之后，该方法还包括：接收发布指令对应的反馈信息，并根据反馈信息判断更新后的静态页面是否发布成功；在发布失败的情况下，通过版本管理系统获取更新后的静态页面的上一版本的源码文件，得到目标源码文件；通过前端开发脚手架工具生成目标源码文件对应的静态页面，得到待检测的静态页面；响应对待检测的静态页面的编辑操作，修改待检测的静态页面关联的内容数据，得到目标静态页面，并根据目标静态页面更新目标源码文件。

具体地，在静态页面发布之后，可以移步至正式发布的网址去再次检查页面内容的更新状况，在发生意外状况时，发布网站还可以向GUI工具发出通知消息，GUI工具通过版本切换的功能进行页面代码的回滚操作，具体地，通过版本管理系统获取静态页面对应的源码文件，生成待检测的静态页面，修改待检测的静态页面关联的内容数据，得到修改后的静态页面，从而根据修改后的静态页面更新源码文件，实现源码文件的回滚。

根据本申请的实施例，还提供了另一种静态页面的管理方法。

第一步：使用脚手架工具按照预设的文件内容和文件结构生成项目的文件目录。

第二步：安装项目依赖的所有的第三方插件：webpack、nodeGit、bootstrap、coscmd、cheerio等。

第三步：开发静态页面，在开发静态页面的过程中，在需要编辑和修改的地方使用闭合标签包裹，并赋予标签class＝”cms-editable”，这样做的目的是在与可以在需要编辑的内容节点上注入一个特殊的标记，方便建立起节点和节点内容的映射数据，同时也便于在编辑时准确的定位到所标记的目标节点。

第四步：编辑预览，在开发出一套静态页面之后，可以进行整体资源的打包，打包后的静态资源文件会导出到项目的文件夹下，同时运行脚本，开启编辑预览的GUI web应用。

GUI web应用启动后，会展示项目文件夹下的静态页面，点选需要编辑的静态页面后主界面会进行切换展示。使用鼠标的mouseover事件可以在鼠标移动时，实时的获取都鼠标悬停的目标节点，双击鼠标，获取目标节点的聚焦，既可以编辑对应节点的内容。该操作具备所见即所得的特点，可以实时预览到文案或者图片资源更新后的页面效果。但是这些只是临时文件，只有在点击保存按钮后才会持久的更新源码数据。

第五步：更新源码，并触发打包操作。在GUI工具上点击保存后，GUI会根据当前已经更新过的节点-节点内容的映射关系，去寻找源码对应的文件，在匹配到对应的文件后，会根据最新的内容更新源码文件。

需要说明的是，在源码文件更新完毕后会主动的触发一次项目的打包操作，生成一份全新的项目文件夹，此时可以在GUI工具内进行预览操作，该操作模拟了发布到静态资源服务器上的界面。在确认无误后，用户可点击发布按钮。该按钮会触发代码仓库的提交操作，本次的修改记录就存入代码仓库的版本管理系统之中。在提交完毕后，GUI工具会将项目中项目文件夹下的静态资源通过静态资源服务器的接口同步至静态资源服务器指定的文件夹下。

第六步：移步至正式发布的网址去再次检查页面内容的更新状况，在发生意外状况时，通过GUI工具的版本切换的功能进行页面代码的回滚操作。

具体地，图4是根据本申请实施例的静态页面的管理方法中进行页面代码的回滚操作流程图，如图4所示，进行页面代码的回滚操作包括以下步骤：

Node Git获取git提交的日志，并进行版本的切换，判断是否执行检测的操作，在使得情况下，拉取目标版本源码，并触发脚手架工具的打包重建工作，对静态资源进行打包。进一步的，GUI定本地node服务，页面自动刷新至最新版本，用户可以在GUI界面上编辑本案内容，显示编辑后的页面，还可以保存编辑后的页面。在保存之后，根据页面对应的节点键值对数据更新仓库源码，并触发脚手架工具的打包构建操作，同时，启动预览服务器，预览项目目录下的静态文件，并进行页面的发布。在页面发布之后，Node Git提交当前版本的修改，COSCMD上传项目文件和文件夹。

通过本实施例，一方面通过整合GIT、webpack、nodeJS等技术和工具，实现静态页面内容管理的前端化，轻量化，摆脱数据内容管理系统对服务器程序及数据库的依赖，另一方面，针对页面上任意的可编辑节点进行可视化的编辑，实现可视化的实时编辑和预览静态页面资源，提高了维护的效率，此外开发人员开发静态页面无需二次重构，一次开发即可使用，静态页面资源发布，路径实体清晰，有利于搜索引擎的优化。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例还提供了一种静态页面的管理装置，需要说明的是，本申请实施例的静态页面的管理装置可以用于执行本申请实施例所提供的用于静态页面的管理方法。以下对本申请实施例提供的静态页面的管理装置进行介绍。

图5是根据本申请实施例的静态页面的管理装置的示意图。如图5所示，该装置包括：第一获取单元501、第一响应单元502和更新单元503。

具体地，第一获取单元501，用于获取源码文件，通过前端开发脚手架工具将源码文件生成为静态页面，并展示静态页面，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集；

第一响应单元502，用于响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面；

更新单元503，用于根据更新后的静态页面更新源码文件，得到更新后的源码文件。

可选地，在本申请实施例提供的静态页面的管理装置中，该装置还包括：检测单元，用于在更新单元503根据更新后的静态页面更新源码文件，得到更新后的源码文件之后，检测是否接收到针对更新后的静态页面的发布指令；同步单元，用于在检测单元检测出接收到发布指令的情况下，将更新后的静态页面同步至静态资源服务器。

可选地，在本申请实施例提供的静态页面的管理装置中，该装置还包括：接收单元，用于在同步单元将更新后的静态页面同步至静态资源服务器之后，接收发布指令对应的反馈信息，并根据反馈信息判断更新后的静态页面是否发布成功；第二获取单元，用于在发布失败的情况下，通过版本管理系统获取更新后的静态页面的上一版本的源码文件，得到目标源码文件；生成单元，用于通过前端开发脚手架工具生成目标源码文件对应的静态页面，得到待检测的静态页面；第二响应单元，用于响应对待检测的静态页面的编辑操作，修改待检测的静态页面关联的内容数据，得到目标静态页面，并根据目标静态页面更新目标源码文件。

可选地，在本申请实施例提供的静态页面的管理装置中，该装置还包括：判断单元，用于在更新单元503根据更新后的静态页面更新源码文件，得到更新后的源码文件之前，判断是否接收到对更新后的静态页面的确认指令；执行单元，用于在接收到确认指令的情况下，执行根据更新后的静态页面更新源码文件，得到更新后的源码文件的步骤。

本申请实施例提供的静态页面的管理装置，通过第一获取单元501获取源码文件，通过前端开发脚手架工具将源码文件生成为静态页面，并展示静态页面，其中，静态页面关联了一份节点标志符和节点内容的键值对数据集；第一响应单元502响应对静态页面中的目标节点的编辑操作，修改目标节点关联的节点内容数据，得到更新后的静态页面；更新单元503根据更新后的静态页面更新源码文件，得到更新后的源码文件。解决了相关技术中对静态页面的内容进行管理时对数据模型依赖过高的问题，通过节点标志符关联节点内容数据的方式存储静态资源，可以对静态页面中的节点关联的节点内容数据进行修改达到修改静态页面的目的，进而达到了提高管理静态页面的灵活性、降低对数据模型依赖性的效果。

上述静态页面的管理装置包括处理器和存储器，上述第一获取单元501、第一响应单元502和更新单元503等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来解决相关技术中对静态页面的内容进行管理时对数据模型依赖过高的问题。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本申请实施例还提供了一种非易失性存储介质，非易失性存储介质包括存储的程序，其中，程序运行时控制非易失性存储介质所在的设备执行一种静态页面的管理方法。

本申请实施例还提供了一种电子装置，包含处理器和存储器；存储器中存储有计算机可读指令，处理器用于运行计算机可读指令，其中，计算机可读指令运行时执行一种静态页面的管理方法。本文中的电子装置可以是服务器、PC、PAD、手机等。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种内容管理系统，其特征在于，包括：

页面编辑器，用于获取源码文件，展示由所述源码文件生成的静态页面，并响应对所述静态页面中的目标节点的编辑操作，修改所述目标节点关联的节点内容数据，得到更新后的静态页面以及更新后的源码文件，其中，所述静态页面关联了一份节点标志符和节点内容的键值对数据集；

版本管理系统，用于从代码仓库获取所述源码文件，并将所述源码文件发送至所述页面编辑器，还用于从所述页面编辑器获取所述更新后的源码文件，并将所述更新后的源码文件发送至所述代码仓库；

前端开发脚手架工具，用于将所述页面编辑器获取的所述源码文件生成为所述静态页面；

静态资源服务器，用于从所述页面编辑器获取所述更新后的静态页面，存储所述更新后的静态页面，并生成所述更新后的静态页面对应的访问链接。

2.根据权利要求1所述的内容管理系统，其特征在于，

所述静态资源服务器为云服务器，所述云服务器存储所述更新后的静态页面，并生成所述更新后的静态页面对应的访问路径。

3.根据权利要求1所述的内容管理系统，其特征在于，

所述前端开发脚手架工具对所述源码文件进行以下至少之一处理，得到所述静态页面：打包处理、压缩处理、页面内容注入处理；

其中，所述打包处理用于检测所述源码文件对应的公共代码，并将所述公共代码对应的可视化数据注入到所述静态页面的标记位置；

所述压缩处理用于压缩所述源码文件中的空格数据和换行数据，并将大于预设长度的变量替换为目标长度的变量；

所述页面内容注入处理用于将所述源码文件中的数据注入预设页面模板中。

4.一种静态页面的管理方法，其特征在于，包括：

获取源码文件，通过前端开发脚手架工具将所述源码文件生成为静态页面，并展示所述静态页面，其中，所述静态页面关联了一份节点标志符和节点内容的键值对数据集；

响应对所述静态页面中的目标节点的编辑操作，修改所述目标节点关联的节点内容数据，得到更新后的静态页面；

根据所述更新后的静态页面更新所述源码文件，得到更新后的源码文件。

5.根据权利要求4所述的方法，其特征在于，在根据所述更新后的静态页面更新所述源码文件，得到更新后的源码文件之后，所述方法还包括：

检测是否接收到针对所述更新后的静态页面的发布指令；

在接收到所述发布指令的情况下，将所述更新后的静态页面同步至静态资源服务器。

6.根据权利要求5所述的方法，其特征在于，在接收到所述发布指令的情况下，将所述更新后的静态页面同步至所述静态资源服务器之后，所述方法还包括：

接收所述发布指令对应的反馈信息，并根据所述反馈信息判断所述更新后的静态页面是否发布成功；

在发布失败的情况下，通过版本管理系统获取所述更新后的静态页面的上一版本的源码文件，得到目标源码文件；

通过所述前端开发脚手架工具生成所述目标源码文件对应的静态页面，得到待检测的静态页面；

响应对所述待检测的静态页面的编辑操作，修改所述待检测的静态页面关联的内容数据，得到目标静态页面，并根据所述目标静态页面更新所述目标源码文件。

7.根据权利要求4所述的方法，其特征在于，在根据所述更新后的静态页面更新所述源码文件，得到更新后的源码文件之前，所述方法还包括：

判断是否接收到对所述更新后的静态页面的确认指令；

在接收到所述确认指令的情况下，执行根据所述更新后的静态页面更新所述源码文件，得到更新后的源码文件的步骤。

8.一种静态页面的管理装置，其特征在于，包括：

获取单元，用于获取源码文件，通过前端开发脚手架工具将所述源码文件生成为静态页面，并展示所述静态页面，其中，所述静态页面关联了一份节点标志符和节点内容的键值对数据集；

响应单元，用于响应对所述静态页面中的目标节点的编辑操作，修改所述目标节点关联的节点内容数据，得到更新后的静态页面；

更新单元，用于根据所述更新后的静态页面更新所述源码文件，得到更新后的源码文件。

9.一种非易失性存储介质，其特征在于，所非易失性存储介质用于存储程序，其中，

所述程序运行时控制所述非易失性存储介质所在的设备执行权利要求4至7中任意一项所述的静态页面的管理方法。

10.一种电子装置，其特征在于，包含处理器和存储器，所述存储器中存储有计算机可读指令，所述处理器用于运行所述计算机可读指令，其中，所述计算机可读指令运行时执行权利要求4至7中任意一项所述的静态页面的管理方法。

Images