网页的生成方法、系统和计算机可读存储介质与流程

本发明涉及计算机技术领域，尤其是涉及一种网页的生成方法、系统和计算机可读存储介质。

背景技术：

随着互联网的诞生和快速发展，网络已成为人们获取信息的重要途径，而网页则成为信息的重要载体。网页通常是由html(hypertextmarkuplanguage，超文本标记语言)代码构成的，而对网页进行修改则需要了解html代码，通过对网页上html代码的修改才可以实现对网页的修改。

然而，在现实生活中，除了相关技术人员，大部分人都是不懂html代码的，但很多人又有修改网页的需求，比如电子商务中的卖家，经常需要维护和修改自己经营的店铺网页，但苦于现有的网页修改方式对非技术人员来说太过复杂，故只能放弃修改或者请相关技术人员修改。

因此，如何简化网页修改方式，是当前亟需解决的技术问题。

技术实现要素：

本发明实施例的主要目的在于提供一种网页的生成方法、系统和计算机可读存储介质，旨在简化网页修改方式，解决现有技术中没有代码基础就无法修改网页的技术问题。

为达以上目的，一方面提出一种网页的生成方法，所述方法包括以下步骤：

根据用户的编辑指令生成待编辑页面，所述待编辑页面包括页面显示区和页面编辑区；

根据用户对所述页面编辑区的操作指令执行对应的编辑任务，并在所述页面显示区显示编辑更新后的页面内容；

将所述页面显示区的页面内容对应的页面代码发送到服务器，以使所述服务器根据所述页面代码生成新的网页。

可选地，所述页面编辑区包括卡片显示区和卡片候选区，所述操作指令包括新增卡片指令，所述根据用户对所述页面编辑区的操作指令执行对应的编辑任务的步骤包括：

当检测到对所述卡片显示区的新增卡片指令时，在所述卡片候选区显示至少两个页面卡片供用户选择；

将用户选择的页面卡片添加到所述卡片显示区，并为新添加的页面卡片生成唯一编码。

可选地，所述为新添加的页面卡片生成唯一编码包括：

当所述页面卡片被添加到所述卡片显示区时，获取鼠标的坐标值；

侦测鼠标的坐标值的变化，当变化幅度大于或等于预设值时，获取当前的时间戳以及当前鼠标的坐标值；

将所述当前鼠标的坐标值插入到所述时间戳中，作为所述新添加的页面卡片的唯一编码。

可选地，所述将所述当前鼠标的坐标值插入到所述时间戳中包括：

在所述时间戳的年与月和月与日之间插入所述坐标值的横坐标值，在所述时间戳的时与分和分与秒之间插入所述坐标值的纵坐标值；或者，

在所述时间戳的年与月和月与日之间插入所述坐标值的纵坐标值，在所述时间戳的时与分和分与秒之间插入所述坐标值的横坐标值。

可选地，所述页面编辑区还包括控件显示区和控件候选区，所述操作指令包括新增控件指令，所述根据用户对所述页面编辑区的操作指令执行对应的编辑任务的步骤包括：

当检测到对所述控件显示区的新增控件指令时，在所述控件候选区显示至少两个控件供用户选择；

将用户选择的控件添加到所述控件显示区，并为新添加的控件生成唯一编码。

可选地，所述为新添加的控件生成唯一编码包括：

当所述控件被添加到所述控件显示区时，获取鼠标的坐标值；

侦测鼠标的坐标值的变化，当变化幅度大于或等于预设值时，获取当前的时间戳以及当前鼠标的坐标值；

将所述当前鼠标的坐标值插入到所述时间戳中，作为所述新添加的控件的唯一编码。可选地，所述页面编辑区包括卡片显示区和控件显示区，所述根据用户的编辑指令生成待编辑页面包括：

当接收到用户的编辑指令时，调用所述用户的网页模板，所述网页模板包括至少一个页面卡片，每个页面卡片包括至少一个控件；

在所述卡片显示区显示所述网页模板的所有页面卡片，在所述控件显示区显示对应的页面卡片的所有控件，在所述页面显示区显示对应的页面卡片的页面内容。

可选地，所述操作指令包括控件编辑指令，所述根据用户对所述页面编辑区的操作指令执行对应的编辑任务包括：

当检测到对所述控件显示区中一个控件的操作指令时，根据所述操作指令更新所述控件对应的页面卡片的页面内容。

可选地，所述将所述页面显示区的页面代码发送到服务器的步骤之后还包括：将所述页面显示区的页面内容对应的页面代码更新至所述用户的网页模板。

另一方面提出一种网页的生成系统，所述系统包括存储器、处理器和至少一个被存储在所述存储器中并被配置为由所述处理器执行的应用程序，所述应用程序被配置为用于执行前述网页的生成方法。

再一发明提出一种计算机可读存储介质，所述计算机可读存储介质上存储有网页的生成程序，所述网页的生成程序被处理器执行时，实现前述网页的生成方法的步骤。

本发明实施例所提供的一种网页的生成方法，通过生成包括页面显示区和页面编辑区的待编辑页面，使得用户可以直接在页面编辑区进行相应的编辑操作，同时页面显示区实时显示出编辑更新后的页面内容，当编辑完成时则将页面代码发送到服务器生成新的网页，从而实现了网页的可视化编辑，用户无需具备代码基础就能制作个性化的网页，大大简化了网页修改方式，解决了现有技术中没有代码基础就无法修改网页的技术问题。

附图说明

图1是本发明网页的生成方法第一实施例的流程图；

图2是本发明实施例中待编辑页面的示意图；

图3是本发明实施例中待编辑页面的又一示意图；

图4是本发明实施例中待编辑页面的又一示意图；

图5是本发明实施例中待编辑页面的又一示意图；

图6是本发明实施例中待编辑页面的又一示意图

图7是本发明网页的生成方法第二实施例的流程图；

图8是本发明网页的生成方法第三实施例的流程图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

另外，在本发明中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。

实施例一

参见图1，提出本发明网页的生成方法第一实施例，所述方法包括以下步骤：

s11、根据用户的编辑指令生成待编辑页面，该待编辑页面包括页面显示区和页面编辑区。

本发明实施例中，当接收到用户的编辑指令时，可以调用预存的用户的网页模板，也可以调用预设的网页模板，还可以调用一个空白的网页，然后生成一个待编辑页面。网页模板一般包括至少一个页面卡片，每个页面卡片包括至少一个控件。

待编辑页面包括页面显示区和页面编辑区，页面编辑区一般包括卡片显示区和控件显示区，卡片显示区用于显示页面卡片，控件显示区用于显示对应的页面卡片中的控件，页面显示区用于显示对应的页面卡片的页面内容。

如图2所示，在一个待编辑页面中，卡片显示区显示了页面卡片1-页面卡片6共六个页面卡片，控件显示区显示了页面卡片1的四个控件，分别为控件1-控件4。

可选地，页面编辑区还可以包括卡片候选区，卡片候选区用于显示至少两个页面卡片供用户选择添加到卡片显示区。

如图3所示，在一个待编辑页面中，卡片显示区还没有页面卡片，当用户点击卡片显示区中的“页面卡片”图标时，卡片候选区则显示页面卡片1-页面卡片4共四个页面卡片供用户选择。

如图4所示，在一个待编辑页面中，卡片显示区显示了页面卡片1-页面卡片5共五个页面卡片，当用户点击卡片显示区中的“新增卡片”图标时，卡片候选区则显示页面卡片1-控件4共四个页面卡片供用户选择。

可选地，页面编辑区还可以包括控件候选区，控件候选区用于显示至少两个控件供用户选择添加到控件显示区。

如图5所示，在一个待编辑页面中，卡片显示区显示了页面卡片1-页面卡片6共六个页面卡片，页面卡片1还没有控件，当用户点击控件显示区的“控件”图标时，控件候选区则显示控件1-控件4共四个控件供用户选择。

如图6所示，在一个待编辑页面中，卡片显示区显示了页面卡片1-页面卡片6共六个页面卡片，控件显示区显示了页面卡片1的三个控件，分别为控件1-控件3，当用户点击控件显示区的“新增控件”图标时，控件候选区则显示控件1-控件4共四个控件供用户选择。

s12、根据用户对页面编辑区的操作指令执行对应的编辑任务，并在页面显示区显示编辑更新后的页面内容。

本发明实施例中，当用户在卡片显示区选中某个页面卡片时，页面显示区则显示该页面卡片的页面内容，并在控件显示区显示该页面卡片的所有控件。当检测到对控件显示区中某一个控件的操作指令时，则根据操作指令更新该控件对应的页面卡片的页面内容，并在页面显示区显示编辑更新后的内容，该操作指令如对控件的点击、拖动等指令，以增删控件或调整控件的大小、位置等。

可选地，前述操作指令可以是对卡片显示区的新增卡片指令，当检测到该新增卡片指令(如触发卡片显示区中一个特定图标)时，则在卡片候选区显示至少两个页面卡片供用户选择(如图3、图4所示)。当用户选择了某个页面卡片(如点击了卡片候选区的某个页面卡片)时，则将用户选择的页面卡片添加到卡片显示区。进一步地，还可以为新添加的页面卡片生成唯一编码(id)，以避免卡片显示区中不同的页面卡片的编码重复。

可选地，前述操作指令也可以是对控件显示区的新增控件指令，当检测到该指令(如触发控件显示区中一个特定图标)时，则在控件候选区显示至少两个控件供用户选择(如图5、图6所示)。当用户选择了某个控件(如点击了控件候选区的某个控件)时，则将用户选择的控件添加到控件显示区。进一步地，还可以为新添加的控件生成唯一编码(id)，以避免控件显示区中不同的控件的编码重复。

在为页面卡片或控件生成唯一编码时，可以通过添加时间戳的方式来实现编码的唯一性。具体的，当页面卡片或控件被添加到卡片显示区或控件显示区，即卡片显示区或控件显示区生成新的页面卡片或控件时，则获取鼠标的坐标值，坐标值(x,y)包括横坐标值x和纵坐标值y，可以是1-4位数；接着侦测鼠标的坐标值(横坐标值x或纵坐标值y)的变化(用户点击添加页面卡片或控件后移动了鼠标)，当变化幅度大于或等于预设值(如设定为10)时，则获取当前的时间戳以及当前鼠标的坐标值；最后将当前鼠标的坐标值插入到时间戳中，作为新添加的页面卡片或控件的唯一编码。

在将坐标值插入时间戳时，可以采用多种插入方式。比如，可以在时间戳的年与月和月与日之间插入坐标值(x，y)的横坐标值x，在时间戳的时与分和分与秒之间插入坐标值(x,y)的纵坐标值y；或者，在时间戳的年与月和月与日之间插入坐标值(x,y)的纵坐标值y，在时间戳的时与分和分与秒之间插入坐标值(x,y)的横坐标值x；或者，依次在年、月、日、时、分、秒之间交替插入坐标值(x,y)的横坐标值x和纵坐标值y，等等。

时间戳的格式多种多样。比如时间戳的格式可以为“年-月-日时:分:秒”，当将坐标值插入“年与月”和“月与日”之间时，则用坐标值替换掉它们之间的“-”；当将坐标值插入到“时与分”和“分与秒”之间时，则用坐标值替换掉它们之间的“：”。

举例而言，当页面卡片或控件被添加到卡片显示区或控件显示区时，此时鼠标的坐标值为(234，455)，然后用户移动了鼠标，坐标值变为(244，458)，横坐标的变化幅度为244-234＝10，纵坐标的变化幅度为458-455＝3，此时横坐标的变化幅度等于预设值10，触发获取当前时间戳。假设当前时间戳为2018-12-1121:34:21，则在时间戳的年与月和月与日之间插入当前鼠标的横坐标值244，在时间戳的时与分和分与秒之间插入当前鼠标的纵坐标值458，即生成页面卡片或控件的唯一编码为20182441224411214583445821。

由于当前鼠标的坐标值有一定的随机性，加上时间戳之后能较好的保障全局唯一性，而且本地生成方法简单。另外，唯一编码中包含部分时间戳信息以及两个1-4位的随机数，有一定规则，在全局查询唯一编码时，通过特定规则也能保证查询效率。

在另一些实施例中，还可以首先为新添加的页面卡片或控件生成一个随机码，然后再将时间戳添加到随机码中而作为该页面卡片或控件的唯一编码。在其它实施例中，还可以通过采用哈希运算、md5加密运算等方式设置编码来生成唯一编码，本发明实施例在此不再一一列举赘述。

s13、将页面显示区的页面内容对应的页面代码发送到服务器，以使服务器根据页面代码生成新的网页。

本发明实施例中，当网页编辑完成后，则保存页面显示区的页面内容，并将该页面内容对应的页面代码发送到服务器，服务器接收到页面代码后，则根据该页面代码生成新的网页。

可选地，还可以将该页面显示区的页面内容对应的页面代码存储为该用户的网页模板或者更新到该用户的网页模板，以供用户后续编辑网页时调用。每个用户可以存储多个网页模板，可以建立用户编码与网页模板编码的对应关系。

本发明实施例网页的生成方法，通过生成包括页面显示区和页面编辑区的待编辑页面，使得用户可以直接在页面编辑区进行相应的编辑操作，同时页面显示区实时显示出编辑更新后的页面内容，当编辑完成时则将页面代码发送到服务器生成新的网页，从而实现了网页的可视化编辑，用户无需具备代码基础就能制作个性化的网页，大大简化了网页修改方式，解决了现有技术中没有代码基础就无法修改网页的技术问题。

同时，通过调用用户的网页模板，使得用户可以快速的完成网页的修改和制作。通过新增卡片、新增控件的操作，使得用户无需网页模板就能制作一个全新的个性化的网页。

实施例二

参见图7，提出本发明网页的生成方法第二实施例，所述方法包括以下步骤：

s21、当接收到用户的编辑指令时，调用该用户的网页模板。

本发明实施例中，当接收到用户的编辑指令时，根据用户编码查找对应的网页模板；当网页模板只有一个时，则直接调用该模板；当网页模板至少有两个时，则先列出所有的网页模板供用户选择，再调用用户选中的网页模板。

s22、根据网页模板生成待编辑页面，在待编辑页面的卡片显示区显示网页模板的页面卡片。

本发明实施例中，网页模板包括至少一个页面卡片，每个页面卡片包括至少一个控件。待编辑页面包括页面显示区和页面编辑区，页面编辑区包括卡片显示区和控件显示区，卡片显示区显示该网页模板的所有页面卡片(如图2所示)。

s23、当检测到用户在卡片显示区选中一个页面卡片时，在待编辑页面的控件显示区显示该页面卡片的控件，并在待编辑页面的页面显示区显示该页面卡片的页面内容。

例如，当用户在卡片显示区点击某个页面卡片时，则在控件显示区显示该页面卡片的所有控件(如图2所示)，同时，在页面显示区显示该页面卡片的页面内容。

s24、当检测到用户在控件显示区对一个控件的操作指令时，根据该操作指令更新该控件对应的页面卡片的页面内容，并在页面显示区显示更新后的页面内容。

例如，当用户在控件显示区拖动一个控件到页面显示区的某个位置时，则更新该控件对应的页面卡片的页面内容，并在页面显示区显示更新后的页面内容。

s25、当检测到用户的完成指令时，将页面显示区的页面内容对应的页面代码发送到服务器，以使服务器根据该页面代码生成新的网页。

例如，当用户点击“完成”图标或按钮时，则保存页面显示区的页面内容，并将页面内容对应的页面代码发送到服务器，服务器接收到页面代码后则生成新的网页。

s26、将页面显示区的页面内容对应的页面代码更新至用户的网页模板。

本发明实施例网页的生成方法，通过调用用户的网页模板，使得用户可以在网页模板的基础上快速完成网页的修改和制作，并在制作完成后更新网页模板，极大的提高了网页制作的效率，保留了用户特有的网页风格。

实施例三

参见图8，提出本发明网页的生成方法第三实施例，所述方法包括以下步骤：

s31、当接收到用户的编辑指令时，生成待编辑页面。

本实施例中，当接收到用户的编辑指令时，调用一个空白的网页生成待编辑页面。

s32、当检测到对待编辑页面的卡片显示区的新增卡片指令时，在待编辑页面的卡片候选区显示至少两个页面卡片供用户选择。

如图3所示，待编辑页面的卡片显示区还没有页面卡片，当用户点击卡片显示区的“页面卡片”图标时，则在待编辑页面上生成一个卡片候选区，并在卡片候选区显示页面卡片1-页面卡片4共四个页面卡片供用户选择。

s33、将用户选择的页面卡片添加到卡片显示区。

例如，当用户点击卡片候选区的某个页面卡片时，则将该页面卡片添加到卡片显示区中，并为新添加的页面卡片生成唯一编码。

s34、当检测到用户在卡片显示区选中一个页面卡片时，在待编辑页面的控件显示区显示该页面卡片的控件，并在待编辑页面的页面显示区显示该页面卡片的页面内容。

s35、当检测到用户在卡片显示区选中一个页面卡片时，在待编辑页面的控件显示区显示该页面卡片的控件，并在待编辑页面的页面显示区显示该页面卡片的页面内容。

例如，当用户在卡片显示区点击某个页面卡片时，则在控件显示区显示该页面卡片的所有控件，同时，在页面显示区显示该页面卡片的页面内容。

s36、当检测到对控件显示区的新增控件指令时，在待编辑页面的控件候选区显示至少两个控件供用户选择。

如图6所示，控件显示区显示了页面卡片1的三个控件，分别为控件1-控件3，当用户点击控件显示区的“新增控件”图标时，则在待编辑页面上生成控件候选区，并在控件候选区显示控件1-控件4共四个控件供用户选择。

s37、将用户选择的控件添加到控件显示区。

例如，当用户点击控件候选区的某个控件时，则将该控件添加到控件显示区中，并为新添加的控件生成唯一编码。

s38、当检测到用户在控件显示区对一个控件的操作指令时，根据该操作指令更新该控件对应的页面卡片的页面内容，并在页面显示区显示更新后的页面内容。

例如，当用户在控件显示区点击某个控件时，则将该控件添加到对应页面卡片的页面内容中，并在页面显示区显示包含了该控件的页面内容。

s39、当检测到用户的完成指令时，将页面显示区的页面内容对应的页面代码发送到服务器，以使服务器根据该页面代码生成新的网页。

例如，当用户点击“完成”图标或按钮时，则保存页面显示区的页面内容，并将页面内容对应的页面代码发送到服务器，服务器接收到页面代码后则生成新的网页。

进一步地，还可以将页面显示区的页面内容对应的页面代码存储为用户的网页模板，以供用户后续编辑网页时直接调用。

本发明实施例网页的生成方法，通过新增卡片、新增控件的操作，使得用户无需网页模板，在一个空白的网页基础上就能制作出一个全新的个性化的网页，进一步简化了网页的制作方式。

此外，即使在一个网页模板上进行网页的修改和制作，用户也可以随时向网页模板中新增卡片和控件，以丰富网页模板的内容。

本发明实施例同时提出一种网页的生成系统，所述系统包括存储器、处理器和至少一个被存储在存储器中并被配置为由处理器执行的应用程序，该应用程序被配置为用于执行网页的生成方法。本实施例中所描述的网页的生成方法为本发明中上述实施例所涉及的网页的生成方法，在此不再赘述。

本发明实施例还提出一种计算机可读存储介质，该计算机可读存储介质上存储有网页的生成程序，该网页的生成程序被处理器执行时，实现网页的生成方法的步骤。本实施例中所描述的网页的生成方法为本发明中上述实施例所涉及的网页的生成方法，在此不再赘述。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如rom/ram、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上参照附图说明了本发明的优选实施例，并非因此局限本发明的权利范围。本领域技术人员不脱离本发明的范围和实质，可以有多种变型方案实现本发明，比如作为一个实施例的特征可用于另一实施例而得到又一实施例。凡在运用本发明的技术构思之内所作的任何修改、等同替换和改进，均应在本发明的权利范围之内。