页面创建方法、电子设备及存储介质与流程

1.本技术涉及web项目开发技术领域，特别是涉及一种页面创建方法、电子设备及计算机可读存储介质。


背景技术：

2.在进行web项目开发时，开发人员需要对不同的页面进行单独创建。因此，开发人员需要在创建不同的页面的相同部分时，需要进行重复的操作。并且，在后续页面升级过程面临对不同的页面中相同的部分的调整时，需要分别对不同的页面中相同的部分进行调整，即每个页面都需要调整，这样不仅需要很高的人力成本，还效率低。


技术实现要素：

3.本技术提供一种页面创建方法、电子设备及计算机可读存储介质，能够解决现有的页面创建方法所需人力成本高且效率低的问题。
4.为解决上述技术问题，本技术采用的一个技术方案是：提供一种特征匹配方法。该方法包括：根据目标页面的预设根节点确定所述目标页面要继承的模板页面；根据目标页面的预设扩展规则，对模板页面进行扩展，以获得目标页面；预设扩展规则基于所述模板页面的节点。
5.为解决上述技术问题，本技术采用的另一个技术方案是：提供一种电子设备，该电子设备包括处理器、与处理器连接的存储器，其中，存储器存储有程序指令；处理器用于执行存储器存储的程序指令以实现上述方法。
6.为解决上述技术问题，本技术采用的又一个技术方案是：提供一种计算机可读存储介质，存储有程序指令，该程序指令被执行时能够实现上述方法。
7.通过上述方式，本技术中在创建页面时，对于不同的页面的重复部分(节点)，可以直接通过继承模板页面得到，对应非重复部分，仅需对模板页面的至少一个节点进行扩展得到。从而重复部分无需开发人员重复操作就能够实现不同的页面复用。进而，在后续升级过程中，仅需修改模板页面就可完成不同的页面的自动升级。因此，本技术提供的方法能够降低页面创建所需的人力成本，提高页面创建的效率。
附图说明
8.图1是本技术页面创建方法一实施例的流程示意图；
9.图2是图1中s11的具体流程示意图；
10.图3是图1中s12的具体流程示意图；
11.图4是本技术电子设备一实施例的结构示意图；
12.图5是本技术计算机可读存储介质一实施例的结构示意图。
具体实施方式
13.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本技术的一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
14.本技术中的术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”、“第三”的特征可以明示或者隐含地包括至少一个该特征。本技术的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。
15.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本技术的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，在不冲突的情况下，本文所描述的实施例可以与其它实施例相结合。
16.图1是本技术页面创建方法一实施例的流程示意图。需注意的是，若有实质上相同的结果，本实施例并不以图1所示的流程顺序为限。如图1所示，本实施例可以包括：
17.s11：根据目标页面的预设根节点确定目标页面要继承的模板页面。
18.用户(一般为开发人员)如有创建目标页面需求，可通过用户界面输入指令建立一个初始的目标页面，并为初始的目标页面包括的预设根节点设置extends属性。预设根节点可以为初始的目标页面包括的任意一个节点，也即为目标页面在未继承模板页面之前包括的任意一个节点，例如第一个节点。extends属性的值为要继承的模板页面的存储路径，故可以根据预设根节点的extends属性确定要继承的模板页面。
19.模板页面包括节点对应的视图和业务逻辑两个部分。举例说明，模板页面为浏览器页面，其包括节点“搜索框”，“搜索框”的视图包括颜色、长度和宽度等等；“搜索框”对应的业务逻辑为通过“搜索框”实现相关功能的操作逻辑。相应地，本技术中，目标页面对模板页面的继承可以分为两个部分，一个部分是继承模板页面的节点对应的视图；另一个部分是继承模板页面的节点对应的业务逻辑。对于业务逻辑的继承，可直接遵循es或ts的继承模式。
20.结合参阅图2，s11可以包括以下子步骤：
21.s111：将包含预设根节点的目标页面解析为预设格式的目标结构数据。
22.可以理解的是，初始的目标页面的视图为字符串格式的非结构数据，本步骤实质是将初始的目标页面的视图解析为预设格式的目标结构数据。预设格式可以为ast格式，目标结构数据可以表示为pageast。
23.s112：从目标结构数据中读取预设根节点以确定模板页面。
24.解析为目标结构数据之后，可以直接从目标数据中读取预设根节点，进而根据预设根节点的extends属性确定模板页面。
25.此外，在为预设根节点设置extends属性之后，还需要会初始的目标页面设置对应的预设扩展规则。预设扩展规则的详细描述请参见后面步骤的相关说明。
26.s12：根据目标页面的预设扩展规则，对模板页面进行扩展，以获得目标页面。
27.预设扩展规则基于模板页面的节点。
28.根据预设扩展规则对模板页面的扩展，是对模板页面的节点进行的。预设扩展规则包括扩展类型和扩展目标，扩展类型为新增、移除(remove)和替换(replace)中的一种，新增包括新增子节点(append)和新增兄弟节点(insert)两种类型。扩展目标用于表示模板页面的节点。换句话说，扩展目标的值为模板页面中的节点的标识信息，例如为“#id”、“.class”、”tagname”等。由此，根据预设扩展规则对模板页面进行扩展，实质为基于对应的扩展类型对扩展目标表示模板页面的节点进行扩展，即对模板页面的节点进行新增、替换、移除中的一种操作。在扩展类型为替换的情况下，预设扩展规则包括新的节点。在扩展类型为新增的情况下，预设扩展规则包括扩展位置，扩展位置为相对扩展目标的方位。若为append，则扩展位置属于扩展目标的位置范畴，例如结束位置之前。若为insert，则扩展位置为扩展目标的上(before)、下(after)、左(left)、右(right)方。
29.其中，对模板页面的节点进行新增操作，即在扩展位置增加新的节点。对模板页面的节点进行替换操作，即将模板页面的节点替换为新的节点。对模板页面的节点进行移除操作，即将模板页面的节点删除。
30.作为一实施例，预设扩展规则是在模板页面的至少一个节点中增加的扩展属性。如下对不同扩展类型的情况进行说明：
31.若扩展类型为新增子节点，则扩展属性plugins可以表示为:
32.<div:plugins＝”{type:’append’,place:’xxx’,target:’xxx’}”><div>。
33.其中，type表示扩展类型，place表示扩展位置，target表示扩展目标，div表示新的节点。
34.若扩展类型为新增兄弟节点，则扩展属性plugins可以表示为：
35.<div:plugins＝”{type:’append’,place:’xxx’,target:’xxx’}”><div>。
36.例如，扩展属性为：
37.<div:plugins＝”{type:’insert’,place:’before’,target:’#demo’}”><div>
38.意味着需要在demo的上方增加一个子节点div。
39.若扩展类型为替换节点，则扩展属性plugins可以表示为：
40.plugins＝”{type:’replace’,place:’xxx’,target:’xxx’}”。
41.若扩展类型为移除节点，则扩展属性plugins可以表示为：
42.plugins＝”{type:’insert’,place:’xxx’,target:’xxx’}”。
43.作为另一实施例，预设扩展规则是在模板页面增加的扩展节点。如下对不同扩展类型的情况进行举例说明：
44.若扩展类型为新增子节点，则扩展节点plugins可以表示为：
45.<plugins type＝”append”,place＝”xxx”,target＝”xxx”>
46.子节点扩展内容
47.…
48.</plugins>
49.其中，在子节点扩展内容包括一个或多个新的子节点。
50.若扩展类型为新增兄弟节点，则扩展节点plugins可以表示为：
51.<plugins type＝”insert”,place＝”xxx”,target＝”xxx”>
52.兄弟节点扩展内容
53.…
54.</plugins>
55.其中，兄弟节点扩展内容包括一个或多个新的兄弟节点。
56.结合参阅图3，s12可以包括以下子步骤：
57.s121：将模板页面解析为预设格式的模板结构数据，根据预设扩展规则对模板结构数据进行扩展。
58.可以理解的是，模板的视图为字符串格式的非结构数据，本步骤实质是将模板的视图解析为预设格式的模板结构数据。预设格式可以为ast格式，模板结构数据可以表示为templateast。
59.s122：将扩展后的模板结构数据进行编译，获得目标页面。
60.编译与解析的过程相反，即编译是将目标结构数据编译成字符串格式的目标非结构数据。
61.通过本实施例的实施，本技术中在创建页面时，对于不同的页面的重复部分(节点)，可以直接通过继承模板页面得到，对应非重复部分，仅需对模板页面的至少一个节点进行扩展得到。从而重复部分无需开发人员重复操作就能够实现不同的页面复用。进而，在后续升级过程中，仅需修改模板页面就可完成不同的页面的自动升级。因此，本技术提供的方法能够降低页面创建所需的人力成本，提高页面创建的效率。
62.图4是本技术电子设备一实施例的结构示意图。如图4所示，该电子设备包括处理器21、与处理器21耦接的存储器22。
63.其中，存储器22存储有用于实现上述任一实施例的方法的程序指令；处理器21用于执行存储器22存储的程序指令以实现上述方法实施例的步骤。其中，处理器21还可以称为cpu(central processing unit，中央处理单元)。处理器21可能是一种集成电路芯片，具有信号的处理能力。处理器21还可以是通用处理器、数字信号处理器(dsp)、专用集成电路(asic)、现场可编程门阵列(fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
64.图5是本技术计算机可读存储介质一实施例的结构示意图。如图5所示，本技术实施例的计算机可读存储介质30存储有程序指令31，该程序指令31被执行时实现本技术上述实施例提供的方法。其中，该程序指令31可以形成程序文件以软件产品的形式存储在上述计算机可读存储介质30中，以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本技术各个实施方式方法的全部或部分步骤。而前述的计算机可读存储介质30包括：u盘、移动硬盘、只读存储器(rom，read
‑
only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质，或者是计算机、服务器、手机、平板等终端设备。
65.在本技术所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
66.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。以上仅为本技术的实施方式，并非因此限制本技术的专利范围，凡是利用本技术说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本技术的专利保护范围内。