CN110175026B

CN110175026B - 一种网页可视化编辑方法、装置及存储介质

Info

Publication number: CN110175026B
Application number: CN201910469879.7A
Authority: CN
Inventors: 龙云存; 杨成
Original assignee: Changsha Mituo Information Technology Co ltd
Current assignee: Changsha Mituo Information Technology Co ltd
Priority date: 2019-05-31
Filing date: 2019-05-31
Publication date: 2023-10-13
Anticipated expiration: 2039-05-31
Also published as: CN110175026A

Abstract

本发明公开了一种网页可视化编辑方法，包括如下步骤：获取所需编辑对象；在数据库中查询编辑对象；为查询到的编辑对象附加数据库标签；渲染编辑对象所在的页面，形成编辑页面；在编辑页面中，对编辑对象进行编辑；根据数据库标签，更新数据库中对应的编辑对象，形成更新后的编辑对象；根据更新后的编辑对象，重新渲染页面。本发明公开的网页可视化编辑方法，在满足对网页进行编辑的基础上，降低入门门槛低，便于非专业人员操作。

Description

一种网页可视化编辑方法、装置及存储介质

技术领域

本发明涉及互联网技术领域，更具体地说，特别涉及一种网页可视化编辑方法、装置及存储介质。

背景技术

随着互联网的快速发展，网站作为信息发布及产品展示的一种重要途径，被人们广泛接受，而网页作为网站的构成体，其类型、内容和表现形式也越来越多样。但是网站常常需要花费许多时间、人力和物力对网页进行编辑，进而实现网站的信息更新和维护工作。

现有网站的内容更新和编辑步骤复杂，网页需要设置的内容过多，都是由相关专业知识的专业人员进行，更新和维护的门槛和学习成本较高，非专业的人员难以上手操作。

对于网站建设和信息发布人员来说，他们最关注的是网站系统的易用性和功能的完善性；对于没有网站管理专业知识的人员来说，他们最关注的是网站操作的便捷性。

因此，设计一种入门门槛低，便于非专业人员操作的网页可视化编辑方法、装置及存储介质，是本领域技术人员亟待解决的问题

发明内容

本发明要解决的技术问题为提供一种网页可视化编辑方法、装置及存储介质，在满足对网页进行编辑的基础上，降低入门门槛低，便于非专业人员操作。

本发明公开了一种网页可视化编辑方法，包括如下步骤：

获取所需编辑对象；

在数据库中查询所述编辑对象；

为查询到的所述编辑对象附加数据库标签；

渲染所述编辑对象所在的页面，形成编辑页面；

在所述编辑页面中，对所述编辑对象进行编辑；

根据所述数据库标签，更新数据库中对应的所述编辑对象，形成更新后的所述编辑对象；

根据更新后的所述编辑对象，重新渲染所述页面。

优选的，在所述获取所需编辑对象之后，还包括：

判断所述编辑对象的页面地址是否带有页面参数；

如带有页面参数，则继续执行后续步骤；

若不带有页面参数，则停止执行后续步骤。

优选的，所述为查询到的所述编辑对象附加数据库标签具体为：

查询所述编辑对象在所述数据库中所对应的数据表名、数据字段和数据行号；

将所述数据表名、所述数据字段和所述数据行号组成所述数据库标签；

将所述数据库标签附加给所述编辑对象。

进一步的，所述编辑对象包括文字、图片和图标中的一种或多种。

进一步的，在所述编辑页面中，对所述编辑对象进行编辑具体为：

判断所述编辑页面中的所述编辑对象；

若所述编辑对象为文字，则将所述数据库标签提取到其父级元素上，若所述编辑对象为图片和/或图标，则将所述数据库标签提取到其所在元素上；

对所述编辑对象进行编辑。

优选的，在所述根据更新后的所述编辑对象，重新渲染所述页面之后，还包括：

在所述编辑页面中对所述页面的布局样式进行修改，形成布局样式数据；

根据所述布局样式数据，重新渲染所述页面。

本发明还公开了一种网页可视化编辑装置，包括：

获取模块，用于获取所需编辑对象；

与所述获取模块连接的查询模块，用于在数据库中查询所述编辑对象；

与所述查询模块连接的附加模块，用于为查询到的所述编辑对象附加数据库标签；

与所述附加模块连接的渲染模块，用于渲染所述编辑对象所在的页面，形成编辑页面；

与所述渲染模块连接的编辑模块，用于在所述编辑页面中，对所述编辑对象进行编辑；

与所述编辑模块连接的处理模块，用于根据所述数据库标签，更新数据库中对应的所述编辑对象，形成更新后的所述编辑对象；

所述渲染模块还用于根据更新后的所述编辑对象，重新渲染所述页面。

进一步的，还包括与所述获取模块连接的判断模块，用于判断所述编辑对象的页面地址是否带有页面参数；

如带有页面参数，则所述判断模块将所述编辑对象发送给所述查询模块；

若不带有页面参数，则所述判断模块不将所述编辑对象发送给所述查询模块。

进一步的，所述判断模块还用于判断所述编辑页面中的所述编辑对象；

若所述编辑对象为文字，则所述编辑模块将所述数据库标签提取到其父级元素上，若所述编辑对象为图片和/或图标，则所述编辑模块将所述数据库标签提取到其所在元素上。

本发明还公开了一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被执行后，实现如上述任一所述的网页可视化编辑方法。

本发明提供的网页可视化编辑方法，通过对编辑对象添加数据库标签，在编辑时调用编辑对象形成可视化的编辑页面，在编辑页面进行直观的修改后，依据数据库标签更新数据库中编辑对象所对应的数据，最终完成页面的编辑。在满足对网页进行编辑的基础上，降低入门门槛低，便于非专业人员操作。

附图说明

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

图1为本发明实施例中网页可视化编辑方法的流程示意图；

图2为本发明实施例中网页可视化编辑方法的另一种实施方式的流程示意图；

图3为本发明实施例中网页可视化编辑装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。

基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

本发明公开了一种网页可视化编辑方法，包括如下步骤：

S1.获取所需编辑对象；

S2.在数据库中查询编辑对象；

S3.为查询到的编辑对象附加数据库标签；

S4.渲染编辑对象所在的页面，形成编辑页面；

S5.在编辑页面中，对编辑对象进行编辑；

S6.根据数据库标签，更新数据库中对应的编辑对象，形成更新后的编辑对象；

S7.根据更新后的编辑对象，重新渲染页面。

本实施例中的网页代码均存储在数据库中，对应不同的数据表，每个数据表中具备多个字段名，而字段名下具备多行数列，在获取并查询到编辑对象后，取出编辑对象所对应的代码数据，并根据其在数据库中的存储位置在代码数据后附加数据库标签，然后渲染对应页面，形成可视化的编辑页面，使得可以直观的在编辑页面对编辑对象进行编辑。编辑完成后，点击保存，此时将更新完的编辑对象的代码连同附加的数据库标签发送给数据库，而数据库则依据数据库标签，更新并存储其中所对应的更新后的编辑对象的代码，然后根据更新后的编辑对象代码，重新渲染页面，形成最终与可视化编辑页面所预览网页同样效果的完成页面。

在实际运用中，由于网页代码编写的语言有多种，本实施例中仅以JavaScript为例进行说明，例如附加数据库标签的方法具体如下：

在数据库查询到编辑对象后，根据编辑对象的种类不同，在后面增加数据库标签：

文字内容替换格式：

“<mmet-table＝”数据所在的表名”met-id＝”数据所在id(索引)”met-field＝”数据所在字段名”/>”，如查询到一个新闻标题，这个标题是数据库news表中的第10条，字段为title，标题内容为"这是一篇测试新闻"，对这个数据进行处理后就会变成"这是一篇测试新闻<mmet-id＝10met-table＝news met-field＝title></m>"。

图片地址替换格式：

“https://www.mituo.cn/upload/2019/04/12312312312.jpg”替换成“https://www.mituo.cn/upload/2019/04/12312312312.jpg？met-table＝数据所在表名&met-id＝数据所在id&met-field＝数据所在字段名”；

图标内容替换：

“fa-alert”替换成“fa-alertmet-icon|数据所在id(索引)|数据所在表名|数据所在字段名”。

优选的，在获取所需编辑对象之后，还包括：

S11.判断编辑对象的页面地址是否带有页面参数；

S12.如带有页面参数，则继续执行后续步骤；

S13.若不带有页面参数，则停止执行后续步骤。

在实际运用中，仍然以JavaScript为例，通过判断页面地址是否带有“&pageset＝1”参数来作为判断条件，若有，则继续执行S2，若没有，则停止执行后续的所有步骤。即如果不带有页面参数，则代表此网页不可进行编辑，因此后续为了可视化编辑的所有步骤已经没必要进行。

本实施例中所述的是否带有页面参数，其含义是页面参数本身是否有效，可以是页面参数本身的存在状态，也可以是页面参数其值所对应的定义状态，或者是可以有其它方式，只要页面参数本身有两种或两种以上的状态，即可以根据不同状态来判定网页是否可以进行编辑。

优选的，为查询到的编辑对象附加数据库标签具体为：

S31.查询编辑对象在数据库中所对应的数据表名、数据字段和数据行号；

S32.将数据表名、数据字段和数据行号组成数据库标签；

S33.将数据库标签附加给编辑对象。

进一步的，编辑对象包括文字、图片和图标中的一种或多种，当然还可以适用于音频或者视频对象，本实施例中仅作为方法步骤举例，在实际运用中，只要可以进行编辑的网页元素，均可以作为本发明的编辑对象，在此不再累述。

进一步的，在编辑页面中，对编辑对象进行编辑具体为：

S51.判断编辑页面中的编辑对象；

S52.若编辑对象为文字，则将数据库标签提取到其父级元素上；

S53.若编辑对象为图片和/或图标，则将数据库标签提取到其所在元素上；

S54.对编辑对象进行编辑。

在实际运用中，仍然以JavaScript为例，具体如下：

若编辑对象为文字内容，则将页面中的<m>标签中的参数提取出来附加到其父级元素上，并删除<m>标签，

例如：“<div>这是一篇测试新闻<m met-id＝10met-table＝newsmet-field＝title></m></div>”转换成“<divmet-table＝”news”met-id＝”10”met-field＝title”>这是一篇测试新闻</div>”；

若编辑对象为图片地址，则将图片地址的met参数添加到其所在元素上，

例如：“<img src＝’‘https://www.mituo.cn/upload/2019/04/12312312312.jpg？met-table＝数据所在表名&met-id＝数据所在id&met-field＝数据所在字段名/>”转换成<imgsrc＝’‘https://www.mituo.cn/upload/2019/04/12312312312.jpg？met-table＝数据所在表名&met-id＝数据所在id(索引)&met-field＝数据所在字段名’”/>”；

若编辑对象为图标，则将图标的参数添加到其所在元素上，

例如：“<i class＝”fa fa-alertmet-icon|数据所在id|数据所在表名|数据所在字段名”/>”替换成“<i class＝”fa fa-alertmet-icon”met-id＝”数据所在id”met-table＝”数据所在表名”met-field＝”数据所在字段名”/>”

优选的，在根据更新后的编辑对象，重新渲染页面之后，还包括：

S8.在编辑页面中对页面的布局样式进行修改，形成布局样式数据；

S9.根据布局样式数据，重新渲染页面。

可设置区块的显示，布局样式，数据获取等，保存成功并自动刷新页面后，页面css、js会重新生成，由这些参数控制的样式功能信息会自动更新到页面css、js中，设置调用的区块数据会重新调用，对页面重新进行渲染，进而实现对页面的布局样式的修改。

本发明还公开了一种网页可视化编辑装置，包括：

获取模块1，用于获取所需编辑对象；

与获取模块1连接的查询模块2，用于在数据库中查询编辑对象；

与查询模块2连接的附加模块3，用于为查询到的编辑对象附加数据库标签；

与附加模块3连接的渲染模块4，用于渲染编辑对象所在的页面，形成编辑页面；

与渲染模块4连接的编辑模块5，用于在编辑页面中，对编辑对象进行编辑；

与编辑模块5连接的处理模块6，用于根据数据库标签，更新数据库中对应的编辑对象，形成更新后的编辑对象；

渲染模块4还用于根据更新后的编辑对象，重新渲染页面。

获取模块1在获取编辑对象后，将编辑对象发送给查询模块2，查询模块2查询并取出编辑对象所对应的代码数据发送给附件模块，附加模块3根据其在数据库中的存储位置在代码数据后附加数据库标签，然后渲染模块4渲染对应页面，形成可视化的编辑页面，使得可以用户通过编辑模块5直观的在编辑页面对编辑对象进行编辑。编辑完成后，点击保存，此时处理模块6将更新完的编辑对象的代码连同附加的数据库标签发送给数据库，而数据库则依据数据库标签，更新并存储其中所对应的更新后的编辑对象的代码，然后渲染模块4根据更新后的编辑对象代码，重新渲染页面，形成最终与可视化编辑页面所预览网页同样效果的完成页面。

上述各模块之间的连接关系，仅代表其虚拟的连接关系，可以是电气的直接连接，也可以是依赖于数据传输关系的虚拟连接，本实施例中不做具体限制。

进一步的，还包括与获取模块1连接的判断模块7，用于判断编辑对象的页面地址是否带有页面参数；

如带有页面参数，则判断模块7将编辑对象发送给查询模块2；

若不带有页面参数，则判断模块7不将编辑对象发送给查询模块2。

设置判断模块7来判断预编辑对象所对应的页面地址的页面参数与否，目的是为了提供后续操作步骤的触发条件，即如果不带有页面参数，则代表此网页不可进行编辑，因此后续为了可视化编辑的所有步骤已经没必要进行。

当然，在实际运用中，每个网页或者页面的编辑状态可以实时变化，即在明确此次只需对子页面进行编辑时，可以事先将主页面的页面参数置为隐藏，使其在本次编辑中变为不可编辑状态，避免在编辑时对主页面造成不必要的编辑。

另外，上述的是否带有页面参数，可以是直接判定页面参数存在与否，或者隐藏与否，即有和无的状态，另外，也可以定义页面参数的具体数值来对应其是否起效，例如页面参数为1，即代表页面参数起效，对应有页面参数，若页面参数为0，则代表页面参数不生效，对应无页面参数。因此，本实施例中所述的是否带有页面参数，其含义是页面参数本身是否有效，可以是页面参数本身的存在状态，也可以是页面参数其值所对应的定义状态，或者是可以有其它方式，只要页面参数本身有两种或两种以上的状态，即可以根据不同状态来判定网页是否可以进行编辑。

并且，除开是否可以编辑之外，也可以用页面参数实现其它编辑手段，例如页面参数有不同序号，根据序号的高低，决定各页面之间的从属关系，或者决定子页面在其父页面未进行编辑时，子页面无法进行直接编辑，甚之反之，父页面在子页面未进行编辑时，父页面无法进行直接编辑，在此不再累述。

进一步的，判断模块7还用于判断编辑页面中的编辑对象；

若编辑对象为文字，则编辑模块5将数据库标签提取到其父级元素上，若编辑对象为图片和/或图标，则编辑模块5将数据库标签提取到其所在元素上。

本发明还公开了一种存储介质，存储介质存储有计算机程序，计算机程序被执行后，实现如上述任一所述的网页可视化编辑方法。

以上对本发明所提供的一种网页可视化编辑方法、装置及存储介质进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。

Claims

1.一种网页可视化编辑方法，其特征在于，包括如下步骤：

获取所需编辑对象；

在数据库中查询所述编辑对象；

为查询到的所述编辑对象附加数据库标签；

渲染所述编辑对象所在的页面，形成编辑页面；

在所述编辑页面中，对所述编辑对象进行编辑；

根据更新后的所述编辑对象，重新渲染所述页面；

所述为查询到的所述编辑对象附加数据库标签具体为：

将所述数据库标签附加给所述编辑对象；

所述编辑对象包括文字、图片和图标中的一种或多种；

在所述编辑页面中，对所述编辑对象进行编辑具体为：

判断所述编辑页面中的所述编辑对象；

对所述编辑对象进行编辑。

2.根据权利要求1所述的网页可视化编辑方法，其特征在于，在所述获取所需编辑对象之后，还包括：

判断所述编辑对象的页面地址是否带有页面参数；

如带有页面参数，则继续执行后续步骤；

若不带有页面参数，则停止执行后续步骤。

3.根据权利要求1所述的网页可视化编辑方法，其特征在于，在所述根据更新后的所述编辑对象，重新渲染所述页面之后，还包括：

根据所述布局样式数据，重新渲染所述页面。

4.一种网页可视化编辑装置，其特征在于，包括：

获取模块，用于获取所需编辑对象；

所述渲染模块还用于根据更新后的所述编辑对象，重新渲染所述页面；

所述附加模块，在执行所述为查询到的所述编辑对象附加数据库标签的动作时，具体用于查询所述编辑对象在所述数据库中所对应的数据表名、数据字段和数据行号；将所述数据表名、所述数据字段和所述数据行号组成所述数据库标签；将所述数据库标签附加给所述编辑对象；

所述编辑模块，在执行所述在所述编辑页面中，对所述编辑对象进行编辑的动作时，具体用于判断所述编辑页面中的所述编辑对象；若所述编辑对象为文字，则所述编辑模块将所述数据库标签提取到其父级元素上；若所述编辑对象为图片和/或图标，则所述编辑模块将所述数据库标签提取到其所在元素上；对所述编辑对象进行编辑；

所述编辑对象包括文字、图片和图标中的一种或多种。

5.根据权利要求4所述的网页可视化编辑装置，其特征在于，还包括与所述获取模块连接的判断模块，用于判断所述编辑对象的页面地址是否带有页面参数；

6.一种存储介质，所述存储介质存储有计算机程序，其特征在于，所述计算机程序被执行后，实现如权利要求1至3任一所述的网页可视化编辑方法。