CN107577712A - 一种加载页面的方法、装置及计算机设备 - Google Patents

一种加载页面的方法、装置及计算机设备 Download PDF

Info

Publication number
CN107577712A
CN107577712A CN201710648775.3A CN201710648775A CN107577712A CN 107577712 A CN107577712 A CN 107577712A CN 201710648775 A CN201710648775 A CN 201710648775A CN 107577712 A CN107577712 A CN 107577712A
Authority
CN
China
Prior art keywords
loading
current node
attribute value
container
attribute
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.)
Granted
Application number
CN201710648775.3A
Other languages
English (en)
Other versions
CN107577712B (zh
Inventor
王佳
张文明
陈少杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201710648775.3A priority Critical patent/CN107577712B/zh
Priority to PCT/CN2017/107782 priority patent/WO2019024275A1/zh
Publication of CN107577712A publication Critical patent/CN107577712A/zh
Application granted granted Critical
Publication of CN107577712B publication Critical patent/CN107577712B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00Network arrangements or protocols for supporting network services or applications
    • H04L67/01Protocols
    • H04L67/02Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L69/00Network arrangements, protocols or services independent of the application payload and not provided for in the other groups of this subclass
    • H04L69/22Parsing or analysis of headers

Landscapes

  • Engineering & Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Computer Security & Cryptography (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明提供了一种加载页面的方法、装置及计算机设备,所述方法包括:接收所述页面当前节点的加载请求;判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,接收所述当前节点的加载属性值;判断文档对象模型中是否存在所述加载属性值对应的第一容器,若存在所述对应的第一容器,则基于所述第一容器加载并显示所述当前节点;所述第一容器中缓存有所述当前节点的加载数据;如此,通过对当前节点预设一个加载属性,当需要加载当前节点时,只需触发所述当前节点加载属性,接收当前节点的加载属性值即可根据所述加载属性值实现加载过程,避免了在加载页面时需要调用多层加载代码才能实现页面的加载,简化了加载过程,进而提高了加载效率。

Description

一种加载页面的方法、装置及计算机设备
技术领域
本发明属于资源加载技术领域,尤其涉及一种加载页面的方法、装置及计算机设备。
背景技术
随着电子产品的不断发展,智能终端基本上已经成为人手必备的电子产品,用户在使用这些终端时,必不可少的操作就是浏览页面。
现有技术中,当终端接收到加载请求,对页面数据进行加载时,通常要调用多层加载代码才可以实现页面加载功能,导致页面加载过程比较繁琐,降低了加载的效率。
发明内容
针对现有技术存在的问题,本发明实施例提供了一种加载页面的方法、装置及计算机设备,用于解决现有技术中对页面进行加载时,加载过程繁琐,导致加载效率降低的技术问题。
本发明提供一种加载页面的方法,所述方法包括:
接收当前节点的加载请求;
判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,接收所述当前节点的加载属性值;
判断是否存在所述加载属性值对应的第一容器,若存在对应的所述第一容器,则基于所述第一容器加载并显示所述当前节点;所述第一容器中缓存有所述当前节点的加载数据。
上述方案中,所述基于所述第一容器加载并显示所述当前节点,包括:
判断所述当前节点是否存在预设的缓存属性值,若存在所述预设的缓存属性值,判断所述缓存属性值是否与预设的标识值一致;
若所述缓存属性值与所述标识值一致,则从所述第一容器中调用所述当前节点的加载数据,加载并显示所述加载数据。
上述方案中,若不存在所述对应的第一容器的情况下,还包括:
按照预设的解析规则对所述加载属性值进行解析,获取解析结果;
若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址;
基于所述请求地址获取并显示加载数据。
上述方案中,所述按照预设的解析规则对所述加载属性值进行解析,获取解析结果,包括:
获取所述加载属性值的字符串;
按照预设的划分规则将所述字符串划分为各数组;
获取所述数组的数量,所述数组的数量为所述解析结果。
上述方案中,所述若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址,包括:
将所述字符串第一个字符设置为控制器属性值,将第二个字符设置为方法属性值;
将所述字符串中剩余的元素解析为对应的键值对;
获取服务器的域名、通信协议及通信端口;
根据所述控制器属性值、所述方法属性值、所述键值对、所述服务器的域名、通信协议及通信端口构建所述请求地址。
上述方案中,所述基于所述请求地址获取并显示加载数据,包括:
获取用户文件夹;
基于所述请求地址中目标文件的名称标识,判断所述用户文件夹中是否存在所述当前节点的目标文件,若存在所述目标文件,则将所述请求地址添置至对应的第二容器中;
接收服务器基于所述请求地址返回的加载数据,并将所述加载数据存储至所述第二容器中;
利用脚本文件将所述加载数据渲染到所述目标文件中,显示所述加载数据。
上述方案中,所述显示所述加载数据,包括:
判断所述当前节点是否存在弹出模态框属性,若存在所述弹出模态框属性,则弹出所述模态框,并在所述模态框中显示所述加载数据;
若不存在所述弹出模态框属性,则直接在所述页面中显示所述加载数据。
本发明还提供一种加载页面的装置,所述装置包括:
接收单元,用于接收当前节点的加载请求;
第一判断单元,用于判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,所述接收单元还用于接收所述当前节点的加载属性值;
第二判断单元,用于判断是否存在所述加载属性值对应的第一容器;
加载单元,用于在存在对应的所述第一容器的情况下,基于对应的所述第一容器加载并显示所述当前节点。
本发明还提供一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现以下步骤:
接收当前节点的加载请求;
判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,接收所述当前节点的加载属性值;
判断是否存在所述加载属性值对应的第一容器,若存在对应的所述第一容器,则基于所述第一容器加载并显示所述当前节点。
本发明还提供一种加载页面的计算机设备,包括:
至少一个处理器;以及
与所述处理器通信连接的至少一个存储器,其中,
所述存储器存储有可被所述处理器执行的程序指令,所述处理器调用所述程序指令能够执行如上述任一所述的方法。
本发明提供了一种加载页面的方法、装置及计算机设备,所述方法包括:接收当前节点的加载请求;判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,接收所述当前节点的加载属性值;判断文档对象模型中是否存在所述加载属性值对应的第一容器,若存在对应的所述第一容器,则基于所述第一容器加载并显示所述当前节点;所述第一容器中缓存有所述当前节点的加载数据;如此,通过对当前节点预设一个加载属性,当需要加载当前节点时,只需触发所述当前节点加载属性,接收当前节点的加载属性值即可根据所述加载属性值实现加载过程,避免了在加载页面时需要调用多层加载代码才能实现页面的加载,简化了加载过程,进而提高了加载效率。
附图说明
图1为本发明实施例一提供的加载页面的方法流程示意图;
图2为本发明实施例二提供的加载页面的装置结构示意图;
图3为本发明实施例四提供的加载页面的计算机设备结构示意图。
具体实施方式
为了在加载页面时可以简化加载流程,提高加载效率,本发明提供了一种加载页面的方法及装置,所述方法包括:接收当前节点的加载请求;判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,接收所述当前节点的加载属性值;判断文档对象模型中是否存在所述加载属性值对应的第一容器,若存在对应的所述第一容器,则基于所述第一容器加载并显示所述当前节点;所述第一容器中缓存有所述当前节点的加载数据。
下面通过附图及具体实施例对本发明的技术方案做进一步的详细说明。
实施例一
本实施例提供一种加载页面的方法,如图1所示,所述方法包括:
S101,接收当前节点的加载请求;
本步骤中,当用户需要加载页面中的当前节点时,会点击文档对象模型(DOM,Document Object Mode)中的当前节点,即发送了加载当前节点的加载请求;客户端就会接收到所述当前节点加载请求。
S102,判断所述当前节点是否存在预设的加载属性data-app,若存在所述加载属性data-app,接收所述当前节点的加载属性值;
当接收到所述加载请求后,判断所述当前节点是否存在预设的加载属性data-app,若存在所述加载属性data-app,接收所述当前节点的加载属性值。这里,所述加载属性是用于触发加载过程的,即当需要加载当前节点时,只需一条代码触发加载属性即可,无需调用多层加载代码。
所述加载属性值是一串hash属性值,所述hash属性值是一个可读可写的字符串,以便能对随时修改节点的加载属性值,方便加载各个节点。需要说明的是,当前节点所属的文件可以是用户列表list.html、用户详情detail.html及脚本文件user.js中的任意一个文件。即当前节点可以是用户列表中的任一节点,也可以是用户详情中的任一节点,也可以是脚本文件中的任一节点。
本实施例中所述hash属性值是统一资源定位符(URL,Uniform ResourceLocator)后的锚部分,所述锚部分是URL中#开始的部分;比如,当前节点的URL是http://example.com:1234/test.htm#part2,那么则hash属性值就是#part2。那么,当需要加载当前节点时,将hash属性值修改为当前节点的地址即可实现对当前节点的加载。所以,若用户想要加载用户列表list.html、用户详情detail.html及脚本文件user.js中的任意一个文件中的节点时,只需将hash属性值修改为相应用户列表list.html、用户详情detail.html及脚本文件user.js中对应的节点地址,就可以独立加载上述节点,不会互相干扰,这样也进一步提高了加载效率。
S103,判断是否存在所述加载属性值对应的第一容器,若存在对应的所述第一容器,则基于所述第一容器加载并显示所述当前节点;
当将hash属性值修改为当前节点的地址时,判断所述DOM中是否存在所述加载属性值对应的第一容器data-app-container,若存在所述对应的第一容器,判断所述当前节点是否存在预设的缓存属性值data-app-cache,若存在所述预设的缓存属性值data-app-cache,判断所述缓存属性值data-app-cache是否与预设的标识值一致或是否为空,若所述缓存属性值data-app-cache与预设的标识值一致或为空,表示所述第一容器中缓存有所述当前节点的加载数据,那么则从所述第一容器中调用所述当前节点的加载数据,加载并显示所述加载数据。所述预设的标识值可以设置为1。
这里,若所述缓存属性值data-app-cache与预设的标识值不一致时,比如缓存属性值data-app-cache为0,说明所述第一容器中没有缓存当前节点的加载数据,在下次需要加载当前节点时还需重新发送请求。
进一步地,若不存在所述对应的第一容器或所述预设的缓存属性值data-app-cache与预设的标识值不一致时,还包括:
按照预设的解析规则对所述加载属性值进行解析,获取解析结果;
若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址;基于所述请求地址获取并显示加载数据。
具体地,所述按照预设的解析规则对所述加载属性值进行解析,获取解析结果,包括:获取所述加载属性值的字符串;按照预设的划分规则将所述字符串划分为各数组;获取所述数组的数量,所述数组的数量为所述解析结果。所述预设的划分规则可以是根据字符串中的下划线划分数组;或者根据预设的各组的字符串的标准个数进行划分,比如各数组中字符串的标准个数为5个或10个等。
获取到解析结果后,若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址;比如数组的数量为偶数时,表示解析结果与预设的解析值一致;比如数组的数量为奇数时,表示解析结果与预设的解析值不同。当解析结果与预设的解析值不同时,推送一个提示错误的信息。
那么根据所述解析结果构建请求地址具体为:将所述字符串第一个字符设置为控制器属性值controller,将第二个字符设置为方法属性值action;将所述字符串中剩余的元素解析为对应的键值对;获取服务器的域名、通信协议及通信端口;根据所述控制器属性值、所述方法属性值、所述键值对、所述服务器的域名、通信协议及通信端口构建所述请求地址。
比如,若所述服务器的域名为www.example.com,通信协议为HTTP,端口号为80,键值对为id=3,那么最后构建的请求地址为http://www.example.com/controller/action?id=3。
构建好请求地址后,基于所述请求地址获取并显示加载数据,具体如下:
将请求地址发送至服务器,所述服务器接收请求地址返回一个数据,比如{"error":0,"data":{"id":3,"nickname":"张三"}};其中data就是需要加载的数据。
当error为0时,则获取用户的文件夹,基于所述请求地址中目标文件的名称标识,判断所述用户文件夹中是否存在所述当前节点对应的目标文件,若存在所述目标文件,则将所述请求地址添置至对应的第二容器中;接收服务器基于所述请求地址返回的加载数据data,并将所述加载数据data存储至所述第二容器中;利用脚本文件将所述加载数据data渲染到所述目标文件中,显示所述加载数据data。所述目标文件即为所述当前节点对应的文件。
当error不为0时,则推送一个错误信息的提示框。
这里,因需要加载当前节点的下一节点时,为了保证下一节点的显示页面在当前节点的显示页面之上,需要将第二容器及下一节点对应的第三容器都添加至div标签中,所述div可以理解为一个以类别class为标记的总容器app-container,不同节点对应的容器都存储在div标签中。
然后定义一个脚本js变量max_index++,用于表示层级值,并将各节点的CSS属性z-index设置为max_index,即z-index=z-index;当接收到一次加载请求时,max_index就加1,比如接收到当前节点的加载请求时,max_index为0,那么接收到下一节点的加载请求时,max_index为1,那么下一节点的显示页面就会在当前节点的页面之上。
最后利用脚本文件user.js将所述加载数据渲染到所述目标文件中,显示所述加载数据。
这里,在显示所述加载数据,包括:判断所述当前节点是否存在弹出模态框属性,若存在所述弹出模态框属性data-app-dialog,则弹出所述模态框,并在所述模态框中显示所述加载数据;
若不存在所述弹出模态框属性,则直接在所述页面中显示所述加载数据。
这样就完成了页面的加载过程。
实施例二
相应于实施例一,本实施例提供一种加载页面的装置,如图2所示,所述装置包括:接收单元21、第一判断单元22、第二判断单元23及加载单元24;其中,
当用户需要加载页面中的当前节点时,会点击DOM中的当前节点,即发送了加载当前节点的加载请求;接收单元21就会接收到所述页面当前节点加载请求。
当接收单元21接收到所述加载请求后,第一判断单元22用于判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,所述接收单元21还用于接收所述当前节点的加载属性值;这里,所述加载属性是用于触发加载过程的,即当需要加载当前节点时,只需一条代码触发加载属性即可,无需调用多层加载代码。
所述加载属性值是一串hash属性值,所述hash属性值是一个可读可写的字符串,以便能对随时修改节点的加载属性值,方便加载各个节点。需要说明的是,当前节点对应的文件可以是用户列表list.html、用户详情detail.html及脚本文件user.js中的任意一个文件。
本实施例中所述hash属性值URL后的锚部分,所述锚部分是URL中#开始的部分;比如,当前节点的URL是http://example.com:1234/test.htm#part2,那么则hash属性值就是#part2。那么,当需要加载当前节点时,将hash属性值修改为当前节点的地址即可实现对当前节点的加载。所以,若用户想要加载用户列表list.html、用户详情detail.html及脚本文件user.js中的任意一个文件对应的节点时,只需将hash属性值修改为相应用户列表list.html、用户详情detail.html及脚本文件user.js对应的节点地址,就可以独立加载上述节点,不会互相干扰,这样也进一步提高了加载效率。
当将hash属性值修改为当前节点的地址时,第二判断单元23用于判断文档对象模型DOM中是否存在所述加载属性值对应的第一容器,若存在所述对应的第一容器,则继续判断所述当前节点是否存在预设的缓存属性值;data-app-cache,若存在所述预设的缓存属性值data-app-cache,判断所述缓存属性值data-app-cache是否与预设的标识值一致或是否为空,若所述缓存属性值data-app-cache与预设的标识值一致或为空,表示所述第一容器中缓存有所述当前节点的加载数据,那么所述加载单元24则从所述第一容器中调用所述当前节点的加载数据,加载并显示所述加载数据。所述预设的标识值为1。
这里,若所述缓存属性值data-app-cache与预设的标识值不一致时,缓存属性值data-app-cache为0,说明所述第一容器中没有缓存当前节点的加载数据,在下次需要加载当前节点时还需重新发送请求。
进一步地,若不存在所述对应的第一容器或所述预设的缓存属性值data-app-cache与预设的标识值不一致时,所述加载单元24还用于:
按照预设的解析规则对所述加载属性值进行解析,获取解析结果;
若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址;基于所述请求地址获取并显示加载数据。
具体地,所述加载单元24按照预设的解析规则对所述加载属性值进行解析,获取解析结果,包括:获取所述加载属性值的字符串;按照预设的划分规则将所述字符串划分为各数组;获取所述数组的数量,所述数组的数量为所述解析结果。所述预设的划分规则可以是根据字符串中的下划线划分数组;或者根据预设的各组的字符串的标准个数进行划分,比如各数组中字符串的标准个数为5个或10个等。
获取到解析结果后,若所述解析结果与预设的解析值一致时,所述加载单元24则根据所述解析结果构建请求地址;比如数组的数量为偶数时,表示解析结果与预设的解析值一致;比如数组的数量为奇数时,表示解析结果与预设的解析值不同。当解析结果与预设的解析值不同时,推送一个提示错误的信息。
那么根据所述解析结果构建请求地址具体为:将所述字符串第一个字符设置为控制器属性值controller,将第二个字符设置为方法属性值action;将所述字符串中剩余的元素解析为对应的键值对;获取服务器的域名、通信协议及通信端口;根据所述控制器属性值、所述方法属性值、所述键值对、所述服务器的域名、通信协议及通信端口构建所述请求地址。
比如,若所述服务器的域名为www.example.com,通信协议为HTTP,端口号为80,键值对为id=3,那么最后构建的请求地址为http://www.example.com/controller/action?id=3。
所述加载单元24构建好请求地址后,基于所述请求地址获取并显示加载数据。具体如下:
将请求地址发送至服务器,所述服务器接收请求地址返回一个数据,比如{"error":0,"data":{"id":3,"nickname":"张三"}};其中data就是需要加载的数据。
具体地,当error为0时,所述加载单元24则获取用户的文件夹,基于所述请求地址中目标文件的名称标识,判断所述用户文件夹中是否存在所述当前节点对应的目标文件,若存在所述目标文件,则将所述请求地址添置至对应的第二容器中;接收服务器基于所述请求地址返回的加载数据data,并将所述加载数据data存储至所述第二容器中;利用脚本文件将所述加载数据data渲染到所述目标文件中,显示所述加载数据data。所述目标文件即为所述当前节点对应的文件。
当error不为0时,则推送一个错误信息的提示框。
这里,在需要加载当前节点的下一节点时,为了保证下一节点的显示页面在当前节点的显示页面之上,所述加载单元24需要将第二容器及下一节点对应的第三容器都添加至div标签中,所述div可以理解为一个以类别class为标记的总容器app-container,不同节点对应的容器都存储在div标签中。
然后定义一个脚本js变量max_index++,用于表示层级值,并将各节点的CSS属性z-index设置为max_index,即z-index=z-index;当接收到一次加载请求时,max_index就加1,比如接收到当前节点的加载请求时,max_index为0,那么接收到下一节点的加载请求时,max_index为1,那么下一节点的显示页面就会在当前节点的页面之上。
所述加载单元24最后利用脚本文件user.js将所述加载数据渲染到所述目标文件中,显示所述加载数据。
这里,所述加载单元24在显示所述加载数据,包括:判断所述当前节点是否存在弹出模态框属性,若存在所述弹出模态框属性data-app-dialog,则弹出所述模态框,并在所述模态框中显示所述加载数据;
若不存在所述弹出模态框属性,则直接在所述页面中显示所述加载数据。
这样就完成了页面的加载过程。
实施例三
实际应用中,当利用实施例一提供的方法及实施例二提供的装置对用户详情文件detail.html中的节点进行加载时,具体如下:
当用户需要加载页面中detail.html的当前节点时,会点击文档对象模型中的当前节点,即发送了加载当前节点的加载请求;客户端就会接收到所述当前节点加载请求。
当接收到所述加载请求后,判断所述当前节点是否存在预设的加载属性data-app,若存在所述加载属性data-app,接收所述当前节点的加载属性值。这里,所述加载属性是用于触发加载过程的,即当需要加载当前节点时,只需一条代码触发加载属性即可,无需调用多层加载代码。
所述加载属性值是一串hash属性值,所述hash属性值是一个可读可写的字符串,以便能对随时修改节点的加载属性值,方便加载各个节点。比如当前节点的加载属性值可以为controller_action_id_3。
这里,所述hash属性值是URL后的锚部分,所述锚部分是URL中#开始的部分;比如,当前节点的URL是http://example.com:1234/test.htm#part2,那么则hash属性值就是#part2。那么,当需要加载当前节点时,将hash属性值修改为当前节点的地址即可实现对当前节点的加载。同样,若用户想要加载用户列表list.html、脚本文件user.js中的任意一个文件对应的节点时,只需将hash属性值修改为相应用户列表list.html及脚本文件user.js对应的节点地址,就可以独立加载上述节点,不会互相干扰,这样也进一步提高了加载效率。
当将hash属性值修改为当前节点的地址时,判断所述DOM中是否存在所述加载属性值对应的第一容器data-app-container,若存在所述对应的第一容器,判断所述当前节点是否存在预设的缓存属性值data-app-cache,若存在所述预设的缓存属性值data-app-cache,判断所述缓存属性值data-app-cache是否与预设的标识值一致或是否为空,若所述缓存属性值data-app-cache与预设的标识值一致或为空,表示所述第一容器中缓存有所述当前节点的加载数据,那么则从所述第一容器中调用所述当前节点的加载数据,加载并显示所述加载数据。所述预设的标识值为1。
这里,若所述缓存属性值data-app-cache与预设的标识值不一致时,缓存属性值data-app-cache为0,说明所述第一容器中没有缓存当前节点的加载数据,在下次需要加载当前节点时还需重新发送请求。
进一步地,若不存在所述对应的第一容器或所述预设的缓存属性值data-app-cache与预设的标识值不一致时,还包括:
按照预设的解析规则对所述加载属性值进行解析,获取解析结果;
若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址;基于所述请求地址获取并显示加载数据。
具体地,所述按照预设的解析规则对所述加载属性值进行解析,获取解析结果,包括:获取所述加载属性值的字符串;按照预设的划分规则将所述字符串划分为各数组;获取所述数组的数量,所述数组的数量为所述解析结果。所述预设的划分规则可以是根据字符串中的下划线划分数组;或者根据预设的各组的字符串的标准个数进行划分,比如各数组中字符串的标准个数为5个或10个等。
获取到解析结果后,若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址;比如数组的数量为偶数时,表示解析结果与预设的解析值一致;比如数组的数量为奇数时,表示解析结果与预设的解析值不同。当解析结果与预设的解析值不同时,推送一个提示错误的信息。
那么根据所述解析结果构建请求地址具体为:将所述字符串第一个字符设置为控制器属性值controller,将第二个字符设置为方法属性值action;将所述字符串中剩余的元素解析为对应的键值对;获取服务器的域名、通信协议及通信端口;根据所述控制器属性值、所述方法属性值、所述键值对、所述服务器的域名、通信协议及通信端口构建所述请求地址。
比如,若所述服务器的域名为www.example.com,通信协议为HTTP,端口号为80,键值对为id=3,那么最后构建的请求地址为http://www.example.com/controller/action?id=3。
构建好请求地址后,基于所述请求地址获取并显示加载数据。具体如下:
将请求地址发送至服务器,所述服务器接收请求地址返回一个数据,比如{"error":0,"data":{"id":3,"nickname":"张三"}};其中data就是需要加载的数据。
具体地,当error为0时,则获取用户的文件夹,基于所述请求地址中目标文件的名称标识,判断所述用户文件夹中是否存在所述当前节点对应的目标文件,若存在所述目标文件,则将所述请求地址添置至对应的第二容器中;接收服务器基于所述请求地址返回的加载数据data,并将所述加载数据存储至所述第二容器中;利用脚本文件将所述加载数据data渲染到所述目标文件中,显示所述加载数据data。所述目标文件即为所述当前节点对应的文件。
当error不为0时,则推送一个错误信息的提示框。
比如,所述目标文件为用户详情detail.html文件,当前节点的加载属性值为user_detail_id_3,那么当前节点的请求地址即为http://www.example.com/user/detail?id=3,那么服务器就会基于http://www.example.com/user/detail?id=3这个请求地址返回加载数据。
这里,因需要加载当前节点的下一节点时,为了保证下一节点的显示页面在当前节点的显示页面之上,需要将第二容器及下一节点对应的第三容器都添加至div标签中,所述div可以理解为一个以类别class为标记的总容器app-container,不同节点对应的容器都存储在div标签中。
然后定义一个脚本js变量max_index++,用于表示层级值,并将各节点的CSS属性z-index设置为max_index,即z-index=z-index;当接收到一次加载请求时,max_index就加1,比如接收到当前节点的加载请求时,max_index为0,那么接收到下一节点(比如用户列表list.html)的加载请求时,max_index为1,那么下一节点的显示页面就会在当前节点的显示页面之上。
最后利用脚本文件user.js将所述加载数据渲染到所述目标文件中,显示所述加载数据。
这里,在显示所述加载数据,包括:判断所述当前节点是否存在弹出模态框属性,若存在所述弹出模态框属性data-app-dialog,则弹出所述模态框,并在所述模态框中显示所述加载数据;
若不存在所述弹出模态框属性,则直接在所述页面中显示所述加载数据。
这样就完成了用户详情页面的加载过程。
实施例四
本实施例还提供一种加载页面的计算机设备,如图3所示,所述计算机设备包括:射频(Radio Frequency,RF)电路310、存储器320、输入单元330、显示单元340、音频电路350、WiFi模块360、处理器370、以及电源380等部件。本领域技术人员可以理解,图3中示出的计算机设备结构并不构成对计算机设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
下面结合图3对计算机设备的各个构成部件进行具体的介绍:
RF电路310可用于信号的接收和发送,特别地,将基站的下行信息接收后,给处理器350处理。通常,RF电路310包括但不限于至少一个放大器、收发信机、耦合器、低噪声放大器(Low Noise Amplifier,LNA)、双工器等。
存储器320可用于存储软件程序以及模块,处理器350通过运行存储在存储器320的软件程序以及模块,从而执行计算机设备的各种功能应用以及数据处理。存储器320可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序等;存储数据区可存储根据计算机设备的使用所创建的数据等。此外,存储器320可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
输入单元330可用于接收输入的数字或字符信息,以及产生与计算机设备的用户设置以及功能控制有关的键信号输入。具体地,输入单元330可包括键盘331以及其他输入设备332。键盘331,可收集用户在其上的输入操作,并根据预先设定的程式驱动相应的连接装置。键盘331采集到输出信息后再送给处理器350。除了键盘331,输入单元330还可以包括其他输入设备332。具体地,其他输入设备332可以包括但不限于触控面板、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。
显示单元340可用于显示由用户输入的信息或提供给用户的信息以及计算机设备的各种菜单。显示单元340可包括显示面板341,可选的,可以采用液晶显示器(LiquidCrystal Display,LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等形式来配置显示面板341。进一步的,键盘331可覆盖显示面板341,当键盘331检测到在其上或附近的触摸操作后,传送给处理器350以确定触摸事件的类型,随后处理器350根据输入事件的类型在显示面板341上提供相应的视觉输出。虽然在图3中键盘331与显示面板341是作为两个独立的部件来实现计算机设备的输入和输入功能,但是在某些实施例中,可以将键盘331与显示面板341集成而实现计算机设备的输入和输出功能。
音频电路350、扬声器351,传声器352可提供用户与计算机设备之间的音频接口。音频电路350可将接收到的音频数据转换后的电信号,传输到扬声器351,由扬声器351转换为声音信号输出;
WiFi属于短距离无线传输技术,计算机设备通过WiFi模块360可以帮助用户收发电子邮件、浏览网页和访问流式媒体等,它为用户提供了无线的宽带互联网访问。虽然图3示出了WiFi模块360,但是可以理解的是,其并不属于计算机设备的必须构成,完全可以根据需要在不改变发明的本质的范围内而省略。
处理器370是计算机设备的控制中心,利用各种接口和线路连接整个计算机设备的各个部分,通过运行或执行存储在存储器320内的软件程序和/或模块,以及调用存储在存储器320内的数据,执行计算机设备的各种功能和处理数据,从而对计算机设备进行整体监控。可选的,处理器370可包括一个或多个处理单元;优选的,处理器370可集成应用处理器,其中,应用处理器主要处理操作系统、用户界面和应用程序等。
计算机设备还包括给各个部件供电的电源380(比如电源适配器),优选的,电源可以通过电源管理系统与处理器370逻辑相连。
本发明提供的一种加载页面的方法、装置及计算机设备能带来的有益效果至少是:
本发明提供了一种加载页面的方法、装置及计算机设备,所述方法包括:接收当前节点的加载请求;判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,接收所述当前节点的加载属性值;判断文档对象模型中是否存在所述加载属性值对应的第一容器,若存在对应的所述第一容器,则基于所述第一容器加载并显示所述当前节点;所述第一容器中缓存有所述当前节点的加载数据;如此,通过对当前节点预设一个加载属性,当需要加载当前节点时,只需触发所述当前节点加载属性,接收当前节点的加载属性值即可根据所述加载属性值实现加载过程,避免了在加载页面时需要调用多层加载代码才能实现页面的加载,简化了加载过程,进而提高了加载效率。并且,由于在加载不同文件的节点时是独立加载的过程,各个加载过程互不干扰,完全分离,进一步提高了加载效率;另外,由于加载完毕后会自动缓存,那么在下一次处理同样的加载请求时,即可直接加载缓存数据,也能提高加载效率。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述,构造这类系统所要求的结构是显而易见的。此外,本发明也不针对任何特定编程语言。应当明白,可以利用各种编程语言实现在此描述的本发明的内容,并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中,说明了大量具体细节。然而,能够理解,本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中,并未详细示出公知的方法、结构和技术,以便不模糊对本说明书的理解。
类似地,应当理解,为了精简本公开并帮助理解各个发明方面中的一个或多个,在上面对本发明的示例性实施例的描述中,本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说,如下面的权利要求书所反映的那样,发明方面在于少于前面公开的单个实施例的所有特征。因此,遵循具体实施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解,可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件,以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外,可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外,本领域的技术人员能够理解,尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征,但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现,或者以在一个或者多个处理器上运行的软件模块实现,或者以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或者数字信号处理器(DSP,Digital Signal Processing)来实现根据本发明实施例的网关、代理服务器、系统中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如,计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读存储介质上,或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到,或者在载体信号上提供,或者以任何其他形式提供;该程序被处理器执行时实现以下步骤:获取用户的登陆信息;根据所述登陆信息判断所述用户是否存在关注的主播,若存在关注的主播,则继续判断所述主播的粉丝标示状态是否为开启状态;若所述粉丝标示状态为开启状态,则继续判断所述用户是否选择了目标主播的粉丝标示;若所述用户选择了所述目标主播的粉丝标示,则判断所述用户的粉丝等级,并根据所述用户的粉丝等级为所述用户在当前直播间发送的弹幕信息加载对应的粉丝勋章;所述粉丝勋章包括:目标主播的昵称或头像。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制,并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中,不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中,这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
以上所述,仅为本发明的较佳实施例而已,并非用于限定本发明的保护范围,凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等,均应包含在本发明的保护范围之内。

Claims (10)

1.一种加载页面的方法,其特征在于,所述方法包括:
接收当前节点的加载请求;
判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,接收所述当前节点的加载属性值;
判断是否存在所述加载属性值对应的第一容器,若存在对应的所述第一容器,则基于所述第一容器加载并显示所述当前节点;所述第一容器中缓存有所述当前节点的加载数据。
2.如权利要求1的方法,其特征在于,所述基于所述第一容器加载并显示所述当前节点,包括:
判断所述当前节点是否存在预设的缓存属性值,若存在所述预设的缓存属性值,判断所述缓存属性值是否与预设的标识值一致;
若所述缓存属性值与所述标识值一致,则从所述第一容器中调用所述当前节点的加载数据,加载并显示所述加载数据。
3.如权利要求1的方法,其特征在于,若不存在所述对应的第一容器的情况下,还包括:
按照预设的解析规则对所述加载属性值进行解析,获取解析结果;
若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址;
基于所述请求地址获取并显示加载数据。
4.如权利要求3的方法,其特征在于,所述按照预设的解析规则对所述加载属性值进行解析,获取解析结果,包括:
获取所述加载属性值的字符串;
按照预设的划分规则将所述字符串划分为各数组;
获取所述数组的数量,所述数组的数量为所述解析结果。
5.如权利要求4的方法,其特征在于,所述若所述解析结果与预设的解析值一致时,则根据所述解析结果构建请求地址,包括:
将所述字符串第一个字符设置为控制器属性值,将第二个字符设置为方法属性值;
将所述字符串中剩余的元素解析为对应的键值对;
获取服务器的域名、通信协议及通信端口;
根据所述控制器属性值、所述方法属性值、所述键值对、所述服务器的域名、通信协议及通信端口构建所述请求地址。
6.如权利要求3的方法,其特征在于,所述基于所述请求地址获取并显示加载数据,包括:
获取用户文件夹;
基于所述请求地址中目标文件的名称标识,判断所述用户文件夹中是否存在所述当前节点的目标文件,若存在所述目标文件,则将所述请求地址添置至对应的第二容器中;
接收服务器基于所述请求地址返回的加载数据,并将所述加载数据存储至所述第二容器中;
利用脚本文件将所述加载数据渲染到所述目标文件中,显示所述加载数据。
7.如权利要求6的方法,其特征在于,所述显示所述加载数据,包括:
判断所述当前节点是否存在弹出模态框属性,若存在所述弹出模态框属性,则弹出所述模态框,并在所述模态框中显示所述加载数据;
若不存在所述弹出模态框属性,则直接在所述页面中显示所述加载数据。
8.一种加载页面的装置,其特征在于,所述装置包括:
接收单元,用于接收当前节点的加载请求;
第一判断单元,用于判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,所述接收单元还用于接收所述当前节点的加载属性值;
第二判断单元,用于判断是否存在所述加载属性值对应的第一容器;
加载单元,用于在存在对应的所述第一容器的情况下,基于对应的所述第一容器加载并显示所述当前节点。
9.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现以下步骤:
接收当前节点的加载请求;
判断所述当前节点是否存在预设的加载属性,若存在所述加载属性,接收所述当前节点的加载属性值;
判断是否存在所述加载属性值对应的第一容器,若存在对应的所述第一容器,则基于所述第一容器加载并显示所述当前节点。
10.一种加载页面的计算机设备,其特征在于,包括:
至少一个处理器;以及
与所述处理器通信连接的至少一个存储器,其中,
所述存储器存储有可被所述处理器执行的程序指令,所述处理器调用所述程序指令能够执行如权利要求1至7任一所述的方法。
CN201710648775.3A 2017-08-01 2017-08-01 一种加载页面的方法、装置及计算机设备 Active CN107577712B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201710648775.3A CN107577712B (zh) 2017-08-01 2017-08-01 一种加载页面的方法、装置及计算机设备
PCT/CN2017/107782 WO2019024275A1 (zh) 2017-08-01 2017-10-26 一种加载页面的方法、装置及计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710648775.3A CN107577712B (zh) 2017-08-01 2017-08-01 一种加载页面的方法、装置及计算机设备

Publications (2)

Publication Number Publication Date
CN107577712A true CN107577712A (zh) 2018-01-12
CN107577712B CN107577712B (zh) 2019-03-15

Family

ID=61035359

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710648775.3A Active CN107577712B (zh) 2017-08-01 2017-08-01 一种加载页面的方法、装置及计算机设备

Country Status (2)

Country Link
CN (1) CN107577712B (zh)
WO (1) WO2019024275A1 (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108595652A (zh) * 2018-04-27 2018-09-28 平安科技(深圳)有限公司 加载dom节点数据的方法、装置、计算机设备及存储介质
CN108829828A (zh) * 2018-06-15 2018-11-16 乐蜜有限公司 一种网页显示方法、装置、电子设备及可读存储介质
CN109634601A (zh) * 2018-10-16 2019-04-16 深圳壹账通智能科技有限公司 网页处理方法、设备、存储介质及装置
CN111124528A (zh) * 2019-11-11 2020-05-08 泰康保险集团股份有限公司 页面加载方法、装置、电子设备及计算机可读存储介质

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101677315A (zh) * 2008-09-16 2010-03-24 中兴通讯股份有限公司 一种实现动态加载c/s结构的应用系统的方法
US20100281357A1 (en) * 2009-04-30 2010-11-04 International Business Machines Corporation System and method for processing a widget at a web browser
CN102221998A (zh) * 2011-06-07 2011-10-19 北京大学 一种扩展构件运行支撑平台中ejb容器的方法
CN102375882A (zh) * 2011-09-19 2012-03-14 奇智软件(北京)有限公司 一种快速访问网页的方法、装置及一种浏览器
CN103984686A (zh) * 2013-02-07 2014-08-13 阿里巴巴集团控股有限公司 页面切换方法及装置
CN104111928A (zh) * 2013-04-17 2014-10-22 北京百度网讯科技有限公司 网页构建方法、网页呈现方法及其装置
CN106126685A (zh) * 2016-06-29 2016-11-16 北京小米移动软件有限公司 页面加载方法及装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104102643B (zh) * 2013-04-03 2017-09-22 阿里巴巴集团控股有限公司 一种进行页面快照的方法和装置
CN103617222A (zh) * 2013-11-22 2014-03-05 北京奇虎科技有限公司 一种网页中进行预下载的方法和浏览器
US9679075B1 (en) * 2014-04-30 2017-06-13 Instart Logic, Inc. Efficient delivery of animated image files

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101677315A (zh) * 2008-09-16 2010-03-24 中兴通讯股份有限公司 一种实现动态加载c/s结构的应用系统的方法
US20100281357A1 (en) * 2009-04-30 2010-11-04 International Business Machines Corporation System and method for processing a widget at a web browser
CN102221998A (zh) * 2011-06-07 2011-10-19 北京大学 一种扩展构件运行支撑平台中ejb容器的方法
CN102375882A (zh) * 2011-09-19 2012-03-14 奇智软件(北京)有限公司 一种快速访问网页的方法、装置及一种浏览器
CN103984686A (zh) * 2013-02-07 2014-08-13 阿里巴巴集团控股有限公司 页面切换方法及装置
CN104111928A (zh) * 2013-04-17 2014-10-22 北京百度网讯科技有限公司 网页构建方法、网页呈现方法及其装置
CN106126685A (zh) * 2016-06-29 2016-11-16 北京小米移动软件有限公司 页面加载方法及装置

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108595652A (zh) * 2018-04-27 2018-09-28 平安科技(深圳)有限公司 加载dom节点数据的方法、装置、计算机设备及存储介质
CN108829828A (zh) * 2018-06-15 2018-11-16 乐蜜有限公司 一种网页显示方法、装置、电子设备及可读存储介质
CN108829828B (zh) * 2018-06-15 2022-01-21 卓米私人有限公司 一种网页显示方法、装置、电子设备及可读存储介质
CN109634601A (zh) * 2018-10-16 2019-04-16 深圳壹账通智能科技有限公司 网页处理方法、设备、存储介质及装置
CN111124528A (zh) * 2019-11-11 2020-05-08 泰康保险集团股份有限公司 页面加载方法、装置、电子设备及计算机可读存储介质
CN111124528B (zh) * 2019-11-11 2023-06-27 泰康保险集团股份有限公司 页面加载方法、装置、电子设备及计算机可读存储介质

Also Published As

Publication number Publication date
WO2019024275A1 (zh) 2019-02-07
CN107577712B (zh) 2019-03-15

Similar Documents

Publication Publication Date Title
CN107577712B (zh) 一种加载页面的方法、装置及计算机设备
CN108280014B (zh) 一种监听浏览器页面的方法、装置及计算机设备
CN107277029B (zh) 一种远程过程调用的方法、装置及计算机设备
CN104598513B (zh) 一种基于网页框架的数据流控制方法和系统
EP2962216B1 (en) Sharing application states
CN104794396B (zh) 跨站式脚本漏洞检测方法及装置
CN104965848B (zh) 一种前端资源加载方法及装置
CN110555118B (zh) 一种加载图片的方法及装置
CN105337787A (zh) 一种多服务器监控方法、装置和系统
CN107391115B (zh) 一种实现弹窗交互事件的方法、装置及计算机设备
CN102647482A (zh) 一种访问网站的方法和系统
CN104636664B (zh) 基于文档对象模型的跨站脚本攻击漏洞检测方法及装置
US20170289243A1 (en) Domain name resolution method and electronic device
CN105608159B (zh) 数据缓存的方法和装置
CN108881930B (zh) 一种赠送礼物的方法、系统及电子设备
CN107479985B (zh) 一种远程过程调用的方法、装置及计算机设备
WO2017219293A1 (zh) 一种获取网页内容的方法及装置
CN104462571A (zh) 进行网页加载的方法、装置和浏览器客户端
CN110020338B (zh) 浏览器、网页打开方法及设备
CN109561167A (zh) 一种域名解析方法及装置
CN108235074B (zh) 一种发送、接收密钥信息的方法、服务器及计算机设备
CN110321230B (zh) 一种用于处理排行榜信息的系统、方法及计算机设备
CN109145182B (zh) 数据采集方法、装置、计算机设备及系统
CN108234663B (zh) 一种获取数据的方法、装置及计算机设备
CN108712662A (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
GR01 Patent grant
GR01 Patent grant