一种网页的构造、加载方法及系统技术方案

本发明专利技术公开了一种网页的构造、加载方法及系统，针对现有技术中页面代码可复用性较差，大大影响开发效率的缺陷而发明专利技术，本方法的网页包括页头和页体，将所述页体分割成不同的区域，所述区域由至少一个区块构成，加载模板文件，本发明专利技术方法和系统能够达到提高代码的复用性，提高了开发效率的技术效果。

【技术实现步骤摘要】

本专利技术涉及计算机
，尤其涉及一种网页的构造、加载方法及系统。
技术介绍
随着互联网日益普及，互联网中的动态网页技术越来越成熟。常见的动态网页开发语言有 JSP (Java Server Pages)>PHP (Hypertext Preprocessor)>ASP (Active ServerPages)等，配合 CSS (Cascading Style Sheet,级联样式表)、JS (JavaScript)就可以实现非常绚丽的交互效果。然而，如果没有好的页面构造方法，编写出的代码可复用性较差，大大影响开发效率。目前普遍采用的方法是采用模板技术来实现，模板技术是采用界面和数据分离的方式，由后台提供数据，前端定义页面级模板来实现，这样需要调整前端展示时，只需修改模板页即可。这样的方式复用率较低，每个页面都要设计一个模板页，模板不能复用。
技术实现思路
本专利技术要解决的技术问题是提供一种网页的构造、加载方法及系统。为了解决上述技术问题，本专利技术提供了一种网页构造的方法，所述网页包括页头和页体，包括，将所述页体分割成不同的区域，所述区域由至少一个区块构成，加载模板文件。进一步地，所述模板文件包括页面级模板、页体级模板和区块级模板。进一步地,所述页面级模板包括CSS(Cascading Style Sheet,级联样式表)文件、JS (JavaScript)文件和所述页体的位置信息，所述页体级模板包括JS文件、CSS文件和模板结构，所述区块级模板包括JS文件、CSS文件和模板结构。进一步地，所述模板结构包括区域位置及区域内区块。本专利技术还提供了用于所述的网页的加载方法，包括，接收用户的请求封装数据，渲染页体，渲染页面。进一步地，所述渲染页体具体为步骤S301，页体是否声明了要加载的CSS文件，如果所述CSS文件存在，执行步骤S302 ;如果所述CSS文件不存在，执行步骤S303，步骤S302，对所述CSS文件进行预处理，步骤S303，页体是否声明了要加载的JS文件，如果所述JS文件存在，执行步骤S304 ；如果所述JS文件不存在，执行步骤S305，步骤S304，对所述JS文件进行预处理，步骤S305，渲染模板。进一步地,所述渲染页面具体为步骤S601，判断CSS文件集是否有CSS文件，如果有，执行步骤S602 ;如果没有，执行步骤 S603 ；步骤S602，逐个加载CSS文件；步骤S603，判断JS文件集是否有JS文件，如果有，执行步骤S604 ;如果没有，执行步骤S605 ；步骤S604，逐个加载JS文件；步骤S605，渲染模板。本专利技术还提供了一种网页的构造系统，所述网页包括页头和页体，包括分割模块，用于将所述页体分割成不同的区域，所述区域由至少一个区块构成，加载模块，用于加载模板文件。本专利技术还提供了用于所述网页的加载系统，包括，封装模块，用于接收用户的请求封装数据，第一渲染模块，用于渲染页体，第二渲染模块，用于渲染页面。由上可知，本专利技术方法和系统能够达到提高代码的复用性，提高了开发效率的技术效果。附图说明图1是本专利技术一较佳实施例的页面、区域、区块示意图，图2是本专利技术一较佳实施例的构造方法流程图，图3是本专利技术一较佳实施例的加载方法流程图，图4是本专利技术一较佳实施例的渲染页体流程图，图5是本专利技术一较佳实施例的渲染页面流程图，图6是本专利技术一较佳实施例的CSS预处理流程图，图7是本专利技术一较佳实施例的JS预处理流程图，图8是本专利技术一较佳实施例的构造系统结构图，图9是本专利技术一较佳实施例的加载系统结构图。具体实施例方式为使本专利技术的目的、技术方案、及优点更加清楚明白，下面结合附图对本专利技术涉及的一种服务功能授权的方法及系统的具体实施实例进行进一步详细描述。动态页面各不相同，但它们有个共同的特点每个页面由大大小小的相对独立的区块构成，这些区块可以复用到其他需要的页面上去。只要开发这些区块，然后根据需要进行不同的组合，就可以完成不同页面的开发了，这样提高了代码的复用性，极大地提高了开发效率。参阅图1，本专利技术一较佳实施例的页面、区域、区块示意图，如图1所示，页面由一个或多个区域构成，每个区域又由一个或多个区块构成。参阅图2，本专利技术一较佳实施例的构造方法流程图，步骤S101，将页体分割成不同的区域，区域由至少一个区块构成，步骤S102，加载模板文件。模板文件包括页面级模板、页体级模板和区块级模板，页面级模板包括CSS文件、JS文件和所述页体的位置信息，页体级模板包括JS文件、CSS文件和模板结构，区块级模板包括JS文件、CSS文件和模板结构，模板结构包括区域位置及区域内区块。参阅图3，本专利技术一较佳实施例的加载方法流程图，步骤S201，接收用户的请求封装数据，步骤S202，渲染页体，步骤S203，渲染页面。参阅图4，本专利技术一较佳实施例的渲染页体流程图，步骤S301，页体是否声明了要加载的CSS文件，如果所述CSS文件存在，执行步骤S302 ;如果所述CSS文件不存在，执行步骤S303，步骤S302，对所述CSS文件进行预处理，步骤S303，页体是否声明了要加载的JS文件，如果所述JS文件存在，执行步骤S304 ；如果所述JS文件不存在，执行步骤S305，步骤S304，对所述JS文件进行预处理，步骤S305，渲染模板。参阅图5，本专利技术一较佳实施例的渲染页面流程图，步骤S601，判断CSS文件集是否有CSS文件，如果有，执行步骤S602 ;如果没有，执行步骤 S603 ；步骤S602，逐个加载CSS文件；步骤S603，判断JS文件集是否有JS文件，如果有，执行步骤S604 ;如果没有，执行步骤S605 ；步骤S604，逐个加载JS文件；步骤S605，渲染模板。参阅图6，本专利技术一较佳实施例的CSS预处理流程图，步骤S401，该CSS文件是否已加入CSS文件集，如果已加入，执行步骤S402，如果未加入，流程结束，步骤S402，将CSS文件加入CSS文件集。参阅图7，本专利技术一较佳实施例的JS预处理流程图，步骤S501，该文件是否已加入JS文件集，如果已加入，执行步骤S502，如果未加入，流程结束，步骤S502，将JS文件加入JS文件集。参阅图8，本专利技术一较佳实施例的构造系统结构图，包括分割模块和加载模块，分割模块用于将所述页体分割成不同的区域，所述区域由至少一个区块构成；加载模块用于加载模板文件。图9是本专利技术一较佳实施例的加载系统结构图。包括封装模块、第一渲染模块和第二渲染模块，封装模块用于接收用户的请求封装数据，第一渲染模块用于渲染页体，第二渲染模块用于渲染页面。以上具体实施方式仅用于说明本专利技术，而非用于限定本专利技术。本文档来自技高网...

【技术保护点】
一种网页的构造方法，所述网页包括页头和页体，其特征在于，将所述页体分割成不同的区域，所述区域由至少一个区块构成，加载模板文件。

【技术特征摘要】
1.一种网页的构造方法，所述网页包括页头和页体，其特征在于， 将所述页体分割成不同的区域，所述区域由至少一个区块构成， 加载模板文件。2.根据权利要求1所述的方法，其特征在于，所述模板文件包括页面级模板、页体级模板和区块级模板。3.根据权利要求2所述的方法，其特征在于， 所述页面级模板包括CSS (Cascading Style Sheet,级联样式表)文件、JS(JavaScript)文件和所述页体的位置信息， 所述页体级模板包括JS文件、CSS文件和模板结构， 所述区块级模板包括JS文件、CSS文件和模板结构。4.根据权利要求3所述的方法，其特征在于，所述模板结构包括区域位置及区域内区块。5.一种用于权利要求1所述的网页的加载方法，其特征在于， 接收用户的请求封装数据， 渲染页体， 渲染页面。6.根据权利要求5所述的加载方法，其特征在于，所述渲染页体具体为 步骤S301，页体是否声明了要加载的CSS文件，如果所述CSS文件存在，执行步骤S302 ;如果所述CSS文件不存在，执行步骤S303， 步骤S302，...

【专利技术属性】
技术研发人员：王豪杰，
申请(专利权)人：重庆金算盘软件有限公司，
类型：发明
国别省市：