CN111949256A - 网页实时预览编辑方法、装置、设备及存储介质 - Google Patents
网页实时预览编辑方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN111949256A CN111949256A CN202010807864.XA CN202010807864A CN111949256A CN 111949256 A CN111949256 A CN 111949256A CN 202010807864 A CN202010807864 A CN 202010807864A CN 111949256 A CN111949256 A CN 111949256A
- Authority
- CN
- China
- Prior art keywords
- webpage
- editing
- web page
- editable
- blank template
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 54
- 230000000694 effects Effects 0.000 claims abstract description 30
- 238000012544 monitoring process Methods 0.000 claims abstract description 5
- 230000004044 response Effects 0.000 claims abstract description 5
- 238000003780 insertion Methods 0.000 claims abstract description 4
- 230000037431 insertion Effects 0.000 claims abstract description 4
- 238000004590 computer program Methods 0.000 claims description 18
- 230000015654 memory Effects 0.000 claims description 18
- 230000001360 synchronised effect Effects 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 6
- 238000002955 isolation Methods 0.000 abstract description 3
- 238000004891 communication Methods 0.000 description 10
- 238000012545 processing Methods 0.000 description 10
- 238000010586 diagram Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 7
- 230000000007 visual effect Effects 0.000 description 7
- 230000005540 biological transmission Effects 0.000 description 5
- 238000004458 analytical method Methods 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 3
- 238000004519 manufacturing process Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000001413 cellular effect Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000005034 decoration Methods 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请公开一种网页实时预览编辑方法、装置、设备及存储介质，所述方法包括如下步骤：在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中；监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页；接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中；响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。本申请适于为大型的网页专题开发工程提供高效编辑解决方案，能更好地实现代码隔离和管理。
Description
技术领域
本申请属于互联网技术领域，具体涉及一种网页实时预览编辑方法，还涉及前述方法相应的装置、电子设备以及非易失性存储介质。
背景技术
随着互联网应用和技术的全面深化发展，起来越多的线上应用都基于网页来实现，HTML5的普及，更使基于网页的各种终端应用程序和网站得以蓬勃发展。基于网页的应用，需要提供关于网页的制作配置环境。大型的互联网平台，尤其是一些门户网站、直播网站等，其涉及要开发、运营、维护的页面繁多，开发和编辑时间往往也比较紧迫，而设计要求各异，开发人员工作压力必然巨大。面对这种现状，为网页开发和运维提供更为高效的编辑机制显得更为迫切。
为解决上述问题，业内采用可视化搭建的解决方案，使得网站运营开发人员可以实时预览网页的每一步编辑结果，发现问题时再重新编辑，以提高运营维护网页的效率。
可视化搭建相关的解决方案常见如下两种：
其一，通过在HTML源码中嵌入iframe标签的方式，嵌套一个远程专题发布页，并通过postMessage或url传参的方式进行数据传递；其二，通过将专题发布页与专题编辑端部署在同一个工程，将专题发布页当作专题编辑端一个子模块进行展示，因同在一个工程上，专题发布页与专题编辑端之间为父子模块关系，即而父子模块之间进行数据传递比较方便。但以上两个方案均具有一定的缺陷，例如，均需重新编辑代码或重新触控控件或插件，使得每次对网页进行少量更新，也需重新编辑代码或触控控件或插件，增加了不必要的工作量，降低了工作效率，不利于大规模的更新网页。同时，前一方案复杂度较高实现较为繁琐，后一方案不利于代码分离及管理。
发明内容
本申请的首要目的旨在提供一种便于运营和维护的网页实时预览编辑方法。
作为本申请的另一目的，基于前述的网页实时预览编辑方法而提供与之相适应的一种网页实时预览编辑装置。
作为本申请的又一目的，基于前述网页实时预览编辑方法而提供与之相适应的电子设备。
作为本申请的又一目的，提供一种适于存储所述网页实时预览编辑方法实现的计算机程序的非易失性存储介质。
为满足本申请的各个目的，本申请采用如下技术方法：
适应本申请的首要目的而提供一种网页实时预览编辑方法，包括如下步骤：
在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中；
监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页；
接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中；
响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。
在一个实施例中，被插入到所述空白模板中的HTML源码，仅包括其可执行代码和/或样式代码。
进一步的，所述编辑数据包括所述可编辑网页中的一个或多个布局元素的定义数据。
优选的，为所述空白模板创建与所述已发布网页的发布端相同的根元素ID,以便根据该根元素ID将所述编辑后的可编辑网页的编辑数据同步到所述发布端供发布。
较佳的，所述网页编辑端提供图形用户界面，该图形用户界面包括编辑控制区与编辑预览区，所述编辑控制区用于触发作用于所述可编辑网页的编辑事件，所述编辑预览区用于展示所述可编辑网页的预览效果。
在一个实施例中，包括前置步骤：启动定时任务，定时从远程服务器抓取所述的已发布网页，存储于本地数据库，以供插入到所述空白模板。
在一个实施例中，包括后置步骤：响应于用户发布指令，将全局变量中已更新的所述编辑数据同步至所述远程服务器以实现对所述已发布网页的更新。
适于本申请的另一目的而提供一种网页实时预览编辑装置，其包括：
插入单元，在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中；
编辑单元，监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页；
接收单元接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中；
预览单元，响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。
适应于本申请的又一目的而提供一种电子设备，包括中央处理器和存储器，所述中央处理器用于调用运行存储于所述存储器中的计算机程序以执行网页实时预览编辑方法的步骤。
适应于本申请的又一目的而提供一种非易失性存储介质，其存储有依据所述的网页实时预览编辑方法所实现的计算机程序，该计算机程序被计算机调用运行时，执行该方法所包括的步骤。
相对于现有技术，本申请的优势如下：
首先，本申请从远程服务器获取已发布网页的HTML源码，将获取的HTML源码插入到在网页编辑端创建的空白模板中，实例化该插入HTML源码的空白模板为可在网页编辑端预览的可编辑网页，使得在网页编辑端即可通过可编辑网页预览已发布网页的显示效果。之后，接收作用于可编辑网页的编辑数据，使得在编辑可编辑网页的过程，边编辑边预览编辑效果，提高编辑效率。
其次，本申请的网页编辑端与远程服务器存储的已发布网页的HTML源码相分离，当在网页编辑端编辑HTML源码时将不会影响存储于远程服务器的已发布网页的HTML源码，有效地实现了网页编辑端与远程服务器存储的HTML源码之间的隔离。
再次，本申请的远程服务器响应于用户发送指令，通过远程加载全局变量进行数据的传递，简化了数据传递的复杂性，降低了网页编辑端与远程服务器之间的相互通信传输数据的难度。
此外，本申请通过获取已发布网页的HTML源码，使得网页编辑端只需更新或添加数据便可实现网页制作，避免对整个网页都进行开发，减少了编辑网页的工作量，提升了编辑网页的效率。
本申请附加的方面和优点将在下面的描述中部分给出，这些将从下面的描述中变得明显，或通过本申请的实践了解到。
附图说明
本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：
图1为实施本申请的技术方案相关的一种典型的网络部署架构示意图；
图2为本申请的网页实时预览编辑方法的典型实施例的流程示意图；
图3为本申请的网页实时预览编辑装置的典型实施例的原理框图。
图4为本申请的网页实时预览编辑方法的网页编辑端的图形用户界面的示意图。
图5为本申请的网页实时预览编辑方法的网页编辑端的图形用户界面预览的示意图。
具体实施方式
下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本申请的限制。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本申请所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。
本技术领域技术人员可以理解，这里所使用的“客户端”、“终端”、“终端设备”既包括无线信号接收器的设备，其仅具备无发射能力的无线信号接收器的设备，又包括接收和发射硬件的设备，其具有能够在双向通信链路上，进行双向通信的接收和发射硬件的设备。这种设备可以包括：蜂窝或其他诸如个人计算机、平板电脑之类的通信设备，其具有单线路显示器或多线路显示器或没有多线路显示器的蜂窝或其他通信设备；PCS(PersonalCommunications Service，个人通信系统)，其可以组合语音、数据处理、传真和/或数据通信能力；PDA(Personal Digital Assistant，个人数字助理)，其可以包括射频接收器、寻呼机、互联网/内联网访问、网络浏览器、记事本、日历和/或GPS(Global PositioningSystem，全球定位系统)接收器；常规膝上型和/或掌上型计算机或其他设备，其具有和/或包括射频接收器的常规膝上型和/或掌上型计算机或其他设备。这里所使用的“客户端”、“终端”、“终端设备”可以是便携式、可运输、安装在交通工具(航空、海运和/或陆地)中的，或者适合于和/或配置为在本地运行，和/或以分布形式，运行在地球和/或空间的任何其他位置运行。这里所使用的“客户端”、“终端”、“终端设备”还可以是通信终端、上网终端、音乐/视频播放终端，例如可以是PDA、MID(Mobile Internet Device，移动互联网设备)和/或具有音乐/视频播放功能的移动电话，也可以是智能电视、机顶盒等设备。
本申请所称的“服务器”、“客户端”、“服务节点”等名称所指向的硬件，本质上是具备个人计算机等效能力的电子设备，为具有中央处理器(包括运算器和控制器)、存储器、输入设备以及输出设备等冯诺依曼原理所揭示的必要构件的硬件装置，计算机程序存储于其存储器中，中央处理器将存储在外存中的程序调入内存中运行，执行程序中的指令，与输入输出设备交互，借此完成特定的功能。
需要指出的是，本申请所称的“服务器”这一概念，同理也可扩展到适用于服务器机群的情况。依据本领域技术人员所理解的网络部署原理，所述各服务器应是逻辑上的划分，在物理空间上，这些服务器既可以是互相独立但可通过接口调用的，也可以是集成到一台物理计算机或一套计算机机群的。本领域技术人员应当理解这一变通，而不应以此约束本申请的网络部署方式的实施方式。
请参阅图1，本申请相关技术方案实施时所需的硬件基础可按图中所示的架构进行部署。本申请所称服务器80部署在云端，作为一个前端的应用服务器，其可以负责进一步连接起相关数据服务器以及其他提供相关支持的服务器等，以此构成逻辑上相关联的服务机群，来为相关的终端设备例如，图中所示的智能手机81和个人计算机82提供服务。所述的智能手机和个人计算机均可通过公知的网络接入方式接入互联网，与云端的服务器80建立数据通信链路，以便运行所述服务器所提供的服务相关的终端应用程序。
一般而言，本申请涉及的某一专题的网页会被发布到一个专门的服务器中成为专题发布页，该服务器可称之为网页服务器，本申请的网页编辑端可以通过本申请的网页实时预览编辑方法的实施而基于所述的专题发布页来进行编辑，甚至将编辑后的网页重新发布到原来的服务器网络空间。本申请涉及到对所述专题发布页的源码资源的抓取时，也可通过一独立的服务器来执行，该服务器器可称为爬虫服务器，被抓取后的资源可以存储到由该服务器维护的数据库中供调用。在此基础上，更有助于实施本申请的各种技术方案。
首先，请参阅图2，本申请的一种网页实时预览编辑方法，典型的实施例中，其包括如下步骤：
步骤S10,在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中:
本申请所述的已发布网页作为一个应用程序或网站的页面，已经事先被发布到所述的网页服务器中，可通过终端设备的浏览器输入已发布网页的相关网址，在浏览器与该相关网址对应的网页服务器建立数据通信的基础上，浏览器请求该网页服务器发送所述已发布网页的数据，接收到该相关网页数据后，对网页数据进行解析，最后在浏览器的用户界面上显示网页内容。
本申请的所述网页编辑端为以浏览器或应用程序的形式支持的页面编辑器，该网页编辑端可创建作为可编辑网页的数据容器和显示窗口的空白模板，其在后端充当数据容器用于添加相应的可编辑网页的代码，而在前端则通过网页编辑端提供的一个显示窗口解析代码显示可编辑网页的内容。基于浏览器的这种解析机制，本质上是通过浏览器对可编辑网页的代码进行实例化成网页界面效果，通过实例化，添加到空白模板的代码通常将会在显示窗口中反映出相应的变化，反之，在显示窗口对空白模板执行的编辑，往往也会导致其对应的代码发生变化。
所述网页编辑端提供HTML源码编辑器的功能，可如前创建所述的空白模板，该空白模板用于插入已发布网页的HTML源码，由此实例化出可编辑网页在相应的显示窗口中显示，在基础上，通过网页编辑器可以继续编辑该可编辑网页。
对于已发布网页的HTML源码的获取，可以通过所述的爬虫服务器来实施。具体而言，所述的爬虫服务器启动定时任务，调用相关程序定时执行从所述网页服务器上抓取已发布网页的HTML源码的任务，并将抓取的已发布网页的HTML源码存储于本地数据库以便后续供所述网页编辑端调用。
所述爬虫服务器为构造了Node.js运行环境的服务器，如前所述，通过定时任务来实现对各个专题已发布的网页进行HTML源码抓取。当其抓取到各个专题的HTML源码后，提取出各个已发布网页的HTML源码中的可执行代码和样式代码，完成格式化，以便于后续高效调用。
本申请需调用已发布网页的HTML源码主要涉及其中的可执行代码和/或样式代码。所述可执行代码通常为Javascript相关代码，所述样式代码通常为CSS相关代码。相应的，网页编辑端主要从爬虫服务器存储的所述数据库中调用已发布网页的Javascript相关代码与CSS相关代码。
在所述空白模板创建之后，网页编辑端即从所述数据库中调用所述的Javascript相关代码以及所述的CSS相关代码，添加到所述的空白模板中，在此基础上，空白模板便可实例化出可编辑网页。一些实施例中，可以仅考虑Javascript相关代码，或仅考虑CSS相关代码，视已发布网页的实际代码情况而定。
前述爬虫服务器抓取各个专题的已发布网页时，为后续关联管理的方便，会按照专题的唯一性特征(专题ID，或是根元素ID)对每个已发布网页的HTML源码(尤其是Javascript、CSS相关代码)进行关联性存储，而网页编辑端在创建空白模板时也因为这种对应关系，而与相应的已发布网页所属的根元素ID相绑定，也就是说，空白模板绑定的专题根元素ID即是相应的已发布网页所绑定的专题ID，由此，网页编辑端便可根据该根元素ID向爬虫服务器请求相应的已发布网页的HTML源码，同时也可依据该根元素ID将编辑后的网页同步到网页服务器完成重新发布。
网页编辑端向空白模板插入所述的HTML源码时，请求爬虫服务器以获取可执行代码和/或样式代码的文件路径，爬虫服务器查询数据库获取所述的文件路径后，反馈给网页编辑端；网页编辑端依据该文件路径获取该些可执行代码和/或样式代码，之后动态地将样式代码与可执行代码插入所述的空白模板中。较佳的，为兼顾实时显示效果，样式代码可较先于可执行代码插入到所述的空白模板中。
在一个实施例中，在步骤S10之前，还包括前置步骤：启动定时任务，定时从远程服务器即所述的网页服务器中抓取所述的已发布网页，储存于本地数据库，以供插入到所述空白模板。
一个改进的实施例中，爬虫服务器可以将抓取的HTML源码通过调用内部函数对HTML源码按照类别存储，对不同类别的HTML源码赋予相同的ID，以对相同类别的HTML源码进行归类。
步骤S11，监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页：
当监听到从网页服务器获取的已发布网页的HTML源码插入到空白模板后，网页编辑端自动解析所述的HTML源码，在空白模板对应的显示窗口中显示解析后的网页内容，呈现出所述的可编辑网页，完成对所述的HTML源码的实例化。因该可编辑网页的HTML源码与已发布网页的HTML源码完全或部分相同，因此，网页编辑端便可通过所述空白模板的显示窗口预览已发布网页的全部或部分显示效果。
在另一个实施例中，空白模板只获取了已发布网页的HTML源码的Javascript代码与CSS代码，执行该Javascript代码与CSS代码实例化所述空白模板为可编辑网页，可编辑网页上显示已发布网页的CSS代码所体现的静态样式效果以及Javascript代码所体现的动态渲染效果。即可编辑网页上只显示了已发布网页的框架样式效果，而无已发布网页的具体文字、图片或以及视频等等数据。框架样式效果可为网页页面布局、颜色的限定、图片的显示大小以及图片的颜色渲染效果等等样式效果。
为了兼顾所述可编辑网页的编辑，所述网页编辑端提供图形用户界面，该图形用户界面包括编辑控制区与编辑预览区，编辑控制区用于触发作用于可编辑网页的编辑事件与显示可编辑网页的HTML源码，编辑预览区用于容置所述的空白模板的显示窗口以便显示可编辑网页的预览效果。进一步的，参见图4，网页编辑端的图形用户界面可为浏览器的打开页面，以此使得图形用户界面可视化，图形用户界面的编辑控制区包括图4中的代码编辑区30与控件编辑区31和/或插件编辑区31，通过触发代码编辑区30与控件编辑区31和/或插件编辑区31的触发事件，可实现对可编辑网页的编辑。图4中还包括图形用户界面的编辑预览区32包括，可编辑网页响应触发事件，更新可编辑网页的可视化效果，在编辑预览区32显示响应效果。
步骤S12，接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中：
作用所述可编辑网页的编辑事件，将产生相对应的编辑数据。通过接收作用于可编辑网页的编辑数据，将编辑数据存储于本申请构造的全局变量中，适时实现对全局变量中的已存储的编辑数据的更新。具体而言，根据将要创建的网页可视化效果，可在可编辑网页上实施编辑，作用于其对应的HTML源码，或者在编辑过程通过网页编辑端提供的各种手段插入其它数据，或者对可编辑网页实施各种包括删除元素、恢复元素在内的编辑，如此种种，最终将形成对应的所述编辑数据。网页编辑端于是负责将该编辑数据存储于所述全局变量中，以使得所述可编辑网页在被刷新解析时，可以通过监听所述全局变量是否发生数据更新，而根据该全局变量中最新的编辑数据实施所述的解析，使可编辑网页呈现最新的效果。
在其中一个实施例中，通过触控设备在图形用户界面的编辑控制区的代码编辑区30编辑HTML源码，在代码编辑区30编辑HTML源码，当编辑好HTML源码之后，将HTML源码存储于全局变量中。编辑的HTML源码数据为该编辑数据，该编辑数据包括文字编辑数据、图片编辑数据、音频编辑数据、视频编辑数据、表格编辑数据、控件编辑数据以及代码编辑数据等等的其中一个或多个编辑数据。该些编辑数据用于更新或替换或添加于空白模板中的HTML源码，使得空白模板因接受该些编辑数据而变化，空白模板动态的变化，如前所述，以所述全局变量为传递中介来实现。
在另一个实施例中，通过触控设备在图形用户界面的编辑控制区的控件编辑区31或插件编辑区31，触控控件编辑区31的控件或插件编辑区31的插件，将控件或插件拖动于图形用户界面的编辑预览区，即通过可视化搭建的方式将控件或插件插入到可编辑网页中，进行网页的编辑。进一步的，通过可视化搭建的方式为可编辑网页插入文字、图片、音频、视频以及表格等等各种格式的文件。当通过可视化编辑的方式完成编辑控件、插件以及各种文件后，将编辑的控件、插件以及文件转换为HTML源码，将编辑获取的HTML源码存储于所述全局变量中，以使全局变量能够向可编辑网页传递相关的编辑数据。
步骤S13：响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。
在用户完成编辑并向全局变量写入编辑数据后，即可在网页编辑端提供的图形用户界面的编辑预览区上预览经编辑后的可编辑网页的最新视觉效果，实现所见即所得的实时预览效果。
如前所述，全局变量数据更新后，网页编辑端实时监听到该全局变量的变化，而控制可编辑网页响应该更新事件，于是从所述全局变量中读取数据作为所述可编辑网页的最新数据进行网页解析，从而在图形用户界面的编辑预览区上显示相应的解析效果，实现相应的网页预览功能。
在一个实施例中，可编辑网页上发生了图片数据的替换，因此最新的图片数据被存储于所述的全局变量中，网页编辑端监听全局变量的修改，于是控制可编辑网页刷新显示，在实施对可编辑网页的重新解析时读取所述的全局变量中的所述图片数据以替换原有的相应图片资源，从而向显示窗口输出替换了图片的页面效果。如图5所示，网页编辑端检测到全局变量更新后，在可编辑网页上显示更新后的网页预览效果，该更新数据为图片数据。
在一个实施例中，如步骤S11中所述的空白模板只获取了已发布网页的HTML源码的Javascript代码与CSS代码，通过Javascript代码与CSS代码获取了已发布网页的框架样式效果，将本步骤所编辑获取的编辑数据插入全局变量中，刷新可编辑网页，在可编辑网页的框架样式效果中显示插入的编辑数据实例化后的效果。例如，可编辑网页中具有空白图片框，通过插入图片数据于全局变量中，刷新可编辑网页，使得可编辑网页的图片框中显示该插入的图片。
基于以上揭示的多种实施例可见，本申请的可编辑网页具有高度的可扩展性，可在保留已发布网页的可作用于本次编辑网页的源代码的情况下，进行编辑网页数据，以轻松高效地制作出富于交互的网页，使得网页的更新制作过程省时省力。
在以上的实施例中，完成编辑后的可编辑网页，其后续的发布可以由一个独立的终端设备负责，该终端设备负责维护与所述网页服务器的连接，向网页服务器上传整个专题相关的网页文件。该终端设备当然也可与所述的爬虫服务器共享同一硬件设备。无论如何，该终端设备负责维护所述各个专题相关的网页文件资源，并且为整个专题建立基于各个网页文件的ID，其中包含所述的根节点ID(根元素ID)。由此，经网页编辑端可以通过向终端设备提交可编辑网页相应的全局变量的编辑数据以及相应的HTML源码，来实现向终端设备传递可编辑页面相对应的资源，继而可由终端设备据之合成为编辑后的页面文件，用于上传替换网页服务器上的相应的网页文件，实现网页更新。
在另一实施例中，在步骤S13之后，还包括后置步骤：响应于用户发布指令，将全局变量中已更新的所述编辑数据同步至所述网页服务器以实现对所述已发布网页的更新。需要指出的是，由于本申请的一个实施例中已经实现了所述可编辑网页与所述已发布网页关联于同一专题ID，因此，将完成编辑后的可编辑网页重新发布到所述的网页服务器时，可以直接利用该专题ID建立两者之间的对应关系，实现快速替换，完成网页更新。
当根据这一实施例实现时，网页编辑端可以集成相应的网页发布功能，由其负责响应用户发布指令，将所述可编辑网页的最新HTML源码，包括所述Javascript、CSS代码以及所述全局变量中的各种最新的编辑数据，合成为可编辑网页相对应的网页文件，以所述的专题ID为依据，向所述的网页服务器上传该网页文件，实现对网页服务器上的对应的已发布网页的直接替换。
进一步，可以通过将上述的网页实时预览编辑方法中的各个实施例进行功能化，构造出本申请的一种网页实时预览编辑装置，按照这一思路，请参阅图3，其中的一个典型实施例中，该装置包括：
插入单元20，在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中；
编辑单元21，监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页；
接收单元22接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中；
预览单元23，响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。
进一步，为便于本申请的执行，提供一种电子设备，作为本申请所部署的服务器，包括中央处理器和存储器，所述中央处理器用于调用运行存储于所述存储器中的计算机程序以执行如前所述的一种网页实时预览编辑方法的步骤。
可以看出，存储器适宜采用非易失性存储介质，通过将前述的方法实现为计算机程序，安装到手机之类电子设备中，相关程序代码和数据便被存储到电子设备的非易失性存储介质中，进一步通过电子设备的中央处理器运行该程序，将其从非易性存储介质中调入内存中运行，便可实现本申请所期望的目的。因此，可以理解，本申请的一个实施例中，还可提供一种非易失性存储介质，其中存储有依据所述的网页实时预览编辑方法的各个实施例所实现的计算机程序，该计算机程序被计算机调用运行时，执行该方法所包括的步骤。
综上所述，本申请适于为大型的网页专题开发工程提供高效编辑解决方案，能更好地实现代码隔离和管理。
本技术领域技术人员可以理解，本申请包涉及用于执行本申请中所述操作、方法中的一项或多项的设备。这些设备可以为所需的目的而专门设计和制造，或者也可以包括通用计算机中的已知设备。这些设备具有存储在其存储器之内的计算机程序，这些计算机程序选择性地激活或重构。这样的计算机程序可以被存储在设备(例如，计算机)可读介质中或者存储在适于存储电子指令并分别耦联到总线的任何类型的介质中，所述计算机可读介质包括但不限于任何类型的盘(包括软盘、硬盘、光盘、CD-ROM、和磁光盘)、ROM(Read-Only Memory，只读存储器)、RAM(Random Access Memory，随即存储器)、EPROM(ErasableProgrammable Read-Only Memory，可擦写可编程只读存储器)、EEPROM(ElectricallyErasable Programmable Read-Only Memory，电可擦可编程只读存储器)、闪存、磁性卡片或光线卡片。也就是，可读介质包括由设备(例如，计算机)以能够读的形式存储或传输信息的任何介质。
本技术领域技术人员可以理解，可以用计算机程序指令来实现这些结构图和/或框图和/或流图中的每个框以及这些结构图和/或框图和/或流图中的框的组合。本技术领域技术人员可以理解，可以将这些计算机程序指令提供给通用计算机、专业计算机或其他可编程数据处理方法的处理器来实现，从而通过计算机或其他可编程数据处理方法的处理器来执行本申请公开的结构图和/或框图和/或流图的框或多个框中指定的方案。
本技术领域技术人员可以理解，本申请中已经讨论过的各种操作、方法、流程中的步骤、措施、方案可以被交替、更改、组合或删除。进一步地，具有本申请中已经讨论过的各种操作、方法、流程中的其他步骤、措施、方案也可以被交替、更改、重排、分解、组合或删除。进一步地，现有技术中的具有与本申请中公开的各种操作、方法、流程中的步骤、措施、方案也可以被交替、更改、重排、分解、组合或删除。
以上所述仅是本申请的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。
Claims (10)
1.一种网页实时预览编辑方法，其特征在于，包括如下步骤：
在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中；
监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页；
接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中；
响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。
2.如权利要求1所述的方法，其特征在于，被插入到所述空白模板中的HTML源码，仅包括其可执行代码和/或样式代码。
3.如权利要求1所述的方法，其特征在于，所述编辑数据包括所述可编辑网页中的一个或多个布局元素的定义数据。
4.如权利要求1所述的方法，其特征在于，为所述空白模板创建与所述已发布网页的发布端相同的根元素ID,以便根据该根元素ID将所述编辑后的可编辑网页的编辑数据同步到所述发布端供发布。
5.如权利要求1所述的方法，其特征在于，所述网页编辑端提供图形用户界面，该图形用户界面包括编辑控制区与编辑预览区，所述编辑控制区用于触发作用于所述可编辑网页的编辑事件，所述编辑预览区用于展示所述可编辑网页的预览效果。
6.如权利要求1所述的方法，其特征在于，包括前置步骤：启动定时任务，定时从远程服务器抓取所述的已发布网页，存储于本地数据库，以供插入到所述空白模板。
7.如权利要求1所述的方法，其特征在于，包括后置步骤：响应于用户发布指令，将全局变量中已更新的所述编辑数据同步至所述远程服务器以实现对所述已发布网页的更新。
8.一种网页实时预览编辑装置，其特征在于，包括：
插入单元，在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中；
编辑单元，监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页；
接收单元接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中；
预览单元，响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。
9.一种电子设备，包括中央处理器和存储器，其特征在于，所述中央处理器用于调用运行存储于所述存储器中的计算机程序以执行如权利要求1至7中任一项所述的网页实时预览编辑方法的步骤。
10.一种非易失性存储介质，其特征在于，其存储有依据权利要求1至7中任意一项所述的网页实时预览编辑方法所实现的计算机程序，该计算机程序被计算机调用运行时，执行该方法所包括的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010807864.XA CN111949256A (zh) | 2020-08-12 | 2020-08-12 | 网页实时预览编辑方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010807864.XA CN111949256A (zh) | 2020-08-12 | 2020-08-12 | 网页实时预览编辑方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111949256A true CN111949256A (zh) | 2020-11-17 |
Family
ID=73333284
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010807864.XA Pending CN111949256A (zh) | 2020-08-12 | 2020-08-12 | 网页实时预览编辑方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111949256A (zh) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112241259A (zh) * | 2020-11-19 | 2021-01-19 | 湖南红网新媒体集团有限公司 | 一种网页编辑系统、方法、装置及存储介质 |
| CN112363725A (zh) * | 2020-11-19 | 2021-02-12 | 四川长虹电器股份有限公司 | 基于web端配置电视主场景并可视化渲染的系统 |
| CN113343157A (zh) * | 2021-07-05 | 2021-09-03 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种基于领域专用语言的内容编辑方法和装置 |
| CN113343156A (zh) * | 2021-06-30 | 2021-09-03 | 工银科技有限公司 | 网页编辑方法、装置、设备和存储介质 |
| CN113448543A (zh) * | 2021-01-20 | 2021-09-28 | 北京新氧科技有限公司 | 页面处理方法、装置、设备及系统 |
| CN113704668A (zh) * | 2021-09-01 | 2021-11-26 | 稿定（厦门）科技有限公司 | 用于网页开发的数据处理方法和装置 |
| CN113722040A (zh) * | 2021-09-07 | 2021-11-30 | 北京达佳互联信息技术有限公司 | 作品处理方法、装置、计算机设备及介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130262986A1 (en) * | 2012-03-30 | 2013-10-03 | D.A.P. Leblond | Systems, Methods, and Media for Managing Editable Previews of Webpages |
| CN104090979A (zh) * | 2014-07-23 | 2014-10-08 | 上海天脉聚源文化传媒有限公司 | 一种网页编辑方法及装置 |
| CN109299422A (zh) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | 可视化网页编辑方法、系统、设备及存储介质 |
| CN109740096A (zh) * | 2018-12-28 | 2019-05-10 | 广州华多网络科技有限公司 | 一种实时预览的实现方法、装置、系统及存储介质 |
| CN110825426A (zh) * | 2018-08-09 | 2020-02-21 | 阿里巴巴集团控股有限公司 | 网页开发方法、预览方法、发布方法及开发系统 |
-
2020
- 2020-08-12 CN CN202010807864.XA patent/CN111949256A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130262986A1 (en) * | 2012-03-30 | 2013-10-03 | D.A.P. Leblond | Systems, Methods, and Media for Managing Editable Previews of Webpages |
| CN104090979A (zh) * | 2014-07-23 | 2014-10-08 | 上海天脉聚源文化传媒有限公司 | 一种网页编辑方法及装置 |
| CN110825426A (zh) * | 2018-08-09 | 2020-02-21 | 阿里巴巴集团控股有限公司 | 网页开发方法、预览方法、发布方法及开发系统 |
| CN109299422A (zh) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | 可视化网页编辑方法、系统、设备及存储介质 |
| CN109740096A (zh) * | 2018-12-28 | 2019-05-10 | 广州华多网络科技有限公司 | 一种实时预览的实现方法、装置、系统及存储介质 |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112241259A (zh) * | 2020-11-19 | 2021-01-19 | 湖南红网新媒体集团有限公司 | 一种网页编辑系统、方法、装置及存储介质 |
| CN112363725A (zh) * | 2020-11-19 | 2021-02-12 | 四川长虹电器股份有限公司 | 基于web端配置电视主场景并可视化渲染的系统 |
| CN113448543A (zh) * | 2021-01-20 | 2021-09-28 | 北京新氧科技有限公司 | 页面处理方法、装置、设备及系统 |
| CN113448543B (zh) * | 2021-01-20 | 2024-02-02 | 北京新氧科技有限公司 | 页面处理方法、装置、设备及系统 |
| CN113343156A (zh) * | 2021-06-30 | 2021-09-03 | 工银科技有限公司 | 网页编辑方法、装置、设备和存储介质 |
| CN113343157A (zh) * | 2021-07-05 | 2021-09-03 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种基于领域专用语言的内容编辑方法和装置 |
| CN113343157B (zh) * | 2021-07-05 | 2023-07-14 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种基于领域专用语言的内容编辑方法和装置 |
| CN113704668A (zh) * | 2021-09-01 | 2021-11-26 | 稿定（厦门）科技有限公司 | 用于网页开发的数据处理方法和装置 |
| CN113704668B (zh) * | 2021-09-01 | 2022-10-14 | 稿定（厦门）科技有限公司 | 用于网页开发的数据处理方法和装置 |
| CN113722040A (zh) * | 2021-09-07 | 2021-11-30 | 北京达佳互联信息技术有限公司 | 作品处理方法、装置、计算机设备及介质 |
| CN113722040B (zh) * | 2021-09-07 | 2023-09-05 | 北京达佳互联信息技术有限公司 | 作品处理方法、装置、计算机设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111949256A (zh) | 网页实时预览编辑方法、装置、设备及存储介质 | |
| CN111177618B (zh) | 网站搭建方法、装置、设备及计算机可读存储介质 | |
| CN109460232B (zh) | 一种组态页面的制作和监控方法 | |
| US8825749B2 (en) | Method of tracking offline user interaction in a rendered document on a mobile device | |
| CN106445518A (zh) | 一种跨平台移动终端应用程序开发方法及系统 | |
| JP2011018314A (ja) | ウェブページの共有方法、システムおよびコンピュータプログラム | |
| US20110161847A1 (en) | System and method for integrating and publishing pages of content | |
| CN110971655A (zh) | 离线客户端重放和同步 | |
| JP2010527051A (ja) | モバイル装置のための文書処理 | |
| US20160012145A1 (en) | Client-Side Template Engine and Method for Constructing a Nested DOM Module for a Website | |
| CN111506844B (zh) | 页面处理方法、设备及计算机存储介质 | |
| US20160012147A1 (en) | Asynchronous Initialization of Document Object Model (DOM) Modules | |
| CN112269576A (zh) | 一种组件展示方法、装置、服务器和存储介质 | |
| US20160012144A1 (en) | Javascript-based, client-side template driver system | |
| CN112328342B (zh) | 基于在线文档的待办事项处理方法及装置 | |
| CN111435937A (zh) | 一种监控平台的刷新方法及装置 | |
| CN114706584A (zh) | 一种数据可视化展示制作系统 | |
| CN103593345A (zh) | 网页流程图编辑方法及系统 | |
| JP5303534B2 (ja) | 体裁情報処理装置及び方法 | |
| CN114756228A (zh) | 页面处理方法、装置、设备及存储介质 | |
| CN112733009A (zh) | 一种搜索方法及装置 | |
| CN116578795A (zh) | 网页页面的生成方法及装置、存储介质、电子设备 | |
| CN113709575B (zh) | 视频编辑处理方法、装置、电子设备及存储介质 | |
| CN112328140B (zh) | 图像输入方法及其装置、设备、介质 | |
| CN114625934A (zh) | 油气水井井筒数据的展示方法、装置、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20210120 Address after: 511442 3108, 79 Wanbo 2nd Road, Nancun Town, Panyu District, Guangzhou City, Guangdong Province Applicant after: GUANGZHOU CUBESILI INFORMATION TECHNOLOGY Co.,Ltd. Address before: 29th floor, building B-1, Wanda Plaza, Nancun Town, Panyu District, Guangzhou City, Guangdong Province Applicant before: GUANGZHOU HUADUO NETWORK TECHNOLOGY Co.,Ltd. |
|
| EE01 | Entry into force of recordation of patent licensing contract | ||
| EE01 | Entry into force of recordation of patent licensing contract |
Application publication date: 20201117 Assignee: GUANGZHOU HUADUO NETWORK TECHNOLOGY Co.,Ltd. Assignor: GUANGZHOU CUBESILI INFORMATION TECHNOLOGY Co.,Ltd. Contract record no.: X2021440000054 Denomination of invention: Web page real time preview editing method, device, device and storage medium License type: Common License Record date: 20210208 |