响应式页面创建方法、系统、以及服务器技术方案

技术编号:15762599 阅读:64 留言:0更新日期:2017-07-05 22:13
本发明专利技术涉及通信技术领域,公开了一种响应式页面创建方法、系统、以及服务器,该方法包括:载入目标页面HTML文件;将所述目标页面HTML文件划分为多个子页面HTML文件;针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局;将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件;渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件;以及将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。本发明专利技术能够实现简便实现响应式前端界面,降低技术门槛,增加团队可协作性,提高开发效率,并且增加程序可维护性。

Responsive page creation method, system, and server

The present invention relates to the technical field of communication, and discloses a response page creating method, system and server, the method includes: loading the target page HTML file; the target page HTML file is divided into multiple sub page HTML file; component layout for each of the plurality of sub page HTML file in HTML page file; will fill data into each sub page HTML file layout after the sub pages in the HTML file; each sub page HTML file data after filling the plurality of sub pages in the HTML file; and each sub page HTML file after assembling rendering of the plurality of sub page HTML file in response to a page. The invention can realize simple response front end interface, lower technical threshold, increase team collaboration, improve development efficiency and increase program maintainability.

【技术实现步骤摘要】
响应式页面创建方法、系统、以及服务器
本专利技术涉及通信
,具体地,涉及一种响应式页面创建方法、一种响应式页面创建系统、以及一种服务器。
技术介绍
现有技术中,网站开发人员一般采用响应式网页来实现使用户在网站的传统浏览器、移动电话(例如智能手机)、和平板电脑浏览器上都能很好地浏览网站。响应式网页可以根据随所显示设备的屏幕大小的改变而改变,以使用户具有良好的用户体验。但是开发一个支持响应式网页的应用程序的技术门槛很高,编写难度大。因此,如何能够简便实现响应式前端界面,降低开发人员技术门槛,提高开发效率成为亟待解决的技术问题。
技术实现思路
针对现有技术中存在的缺少一种能够简便实现响应式前端界面并降低开发人员技术门槛以提高开发效率的响应式页面创建方法的技术问题,本专利技术提供了一种响应式页面创建方法,该方法包括:载入目标页面HTML文件;将所述目标页面HTML文件划分为多个子页面HTML文件;针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局;将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件;渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件;以及将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。相应地,本专利技术还提供了一种服务器,该服务器包括:载入模块,用于载入目标页面HTML文件;划分模块,用于将所述目标页面HTML文件划分为多个子页面HTML文件;组件布局模块,用于针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局;数据填充模块,用于将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件;渲染模块,用于渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件;以及拼装模块,用于将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。另外,本专利技术还提供了一种响应式页面创建系统,该系统包括:终端,用于发送载入目标页面HTML的请求并显示响应式页面;以及本专利技术提供的服务器。采用本专利技术的响应式页面创建方法、系统、以及服务器,通过载入目标页面HTML文件,之后将所述目标页面HTML文件划分为多个子页面HTML文件,接着针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局,接着将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件,之后渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件,以及最后将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面,能够实现简便实现响应式前端界面,降低技术门槛,增加团队可协作性,提高开发效率,并且增加程序可维护性。本专利技术的其它特征和优点将在随后的具体实施方式部分予以详细说明。附图说明附图是用来提供对本专利技术的进一步理解,并且构成说明书的一部分,与下面的具体实施方式一起用于解释本专利技术,但并不构成对本专利技术的限制。在附图中:图1是根据本专利技术的一种实施方式的响应式页面创建系统的结构示意图;以及图2是根据本专利技术的一种实施方式的响应式页面创建方法的示例流程图。附图标记说明10载入模块11划分模块12组件布局模块13数据填充模块14渲染模块15拼装模块16数据库100服务器200终端具体实施方式以下结合附图对本专利技术的具体实施方式进行详细说明。应当理解的是,此处所描述的具体实施方式仅用于说明和解释本专利技术,并不用于限制本专利技术。下面将举例说明本专利技术的思想,但应当理解的这些示例为非局限性示例,本专利技术的保护范围不限于此:为了更加清楚地说明本专利技术的思想,以响应式页面创建系统为例进行详细地说明。图1是根据本专利技术的一种实施方式的响应式页面创建系统的结构示意图,其中实线表示组件之间的通信,箭头表示通信方向。如图1所示,该系统可以包括:服务器100;以及终端200,用于发送载入目标页面HTML的请求并显示响应式页面。其中,所述终端200可以为移动电话、计算机、平板电脑中的任一者。服务器100可以包括:载入模块10,用于载入目标页面HTML文件;划分模块11,用于将所述目标页面HTML文件划分为多个子页面HTML文件;组件布局模块12,用于针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局;数据填充模块13,用于将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件;渲染模块14,用于渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件;以及拼装模块15,用于将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。优选地,所述服务器100还可以在载入多个目标页面HTML文件的情况下,重用具有相同内容的子页面HTML文件。优选地,在所述多个目标页面HTML文件具有相同内容的子页面HTML文件的情况下,所述组件布局模块12可以仅对一个目标页面HTML文件的具有相同内容的子页面HTML文件进行组件布局;所述数据填充模块13可以仅对组件布局后的所述一个目标页面HTML文件的具有相同内容的子页面HTML文件进行数据填充;所述渲染模块14可以仅对数据填充后的所述一个目标页面HTML文件的具有相同内容的子页面HTML文件进行渲染;以及所述拼装模块15可以将渲染后的该具有相同内容的子页面HTML文件与多个目标页面HTML文件的其他子页面HTML文件进行拼装以生成多个响应式页面。具体地,在该响应式页面系统中,服务器100与终端200之间的交互过程如下:首先,终端200根据用户的选择发送载入目标页面HTML的请求(例如输入用户想要访问的网页链接)。对应地,在服务器100侧,服务器100的载入模块10载入目标页面HTML文件。接着,服务器100的划分模块11可以将所述目标页面HTML文件划分为多个子页面HTML文件,即根据网站整体结构,将各区域进行切分,化整为零方便重用和团队协作。举例来说,每个页面都有顶部导航栏,底部介绍栏,还有中间内容部分,或者有的页面是由左部,中部,和右部来划分区域。每个页面跳转的时候,顶部和底部可能会一直不变,只有中间内容在变化,因此将区域切分后,可以重用顶部和底部的页面代码,而不必为各页面重新编写。应当理解的是,顶部和底部的这种示例仅是用来说明本专利技术区域划分的思想,除此之外,还可以重用例如左部、右部等等其他具有相同内容的部分,本专利技术对此不进行限定。作为示例,服务器100的划分模块11将所述目标页面HTML文件划分为多个子页面HTML文件的具体流程如下:1.定义整个网站应用入口,默认为index.html2.<head>标签中引入bootstrap.css和自定义css文件3.<body>标签定义属性为<bodyng-app="app"ng-controller="RootCtrl">,增加<div>子标签<divui-view></div>4.在<body>中引入script,包括angular.js双向绑定框架angular-ui-router.js路由工具本文档来自技高网...
响应式页面创建方法、系统、以及服务器

【技术保护点】
一种响应式页面创建方法,其特征在于,该方法包括:载入目标页面HTML文件;将所述目标页面HTML文件划分为多个子页面HTML文件;针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局;将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件;渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件;以及将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。

【技术特征摘要】
1.一种响应式页面创建方法,其特征在于,该方法包括:载入目标页面HTML文件;将所述目标页面HTML文件划分为多个子页面HTML文件;针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局;将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件;渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件;以及将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。2.根据权利要求1所述的方法,其特征在于,将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件包括:利用Angular.JS进行数据填充。3.根据权利要求1所述的方法,其特征在于,该方法还包括:在载入多个目标页面HTML文件的情况下,重用具有相同内容的子页面HTML文件。4.根据权利要求3所述的方法,其特征在于,所述在载入多个目标页面HTML文件的情况下重用具有相同内容的子页面HTML文件包括:在所述多个目标页面HTML文件具有相同内容的子页面HTML文件的情况下,仅对一个目标页面HTML文件的具有相同内容的子页面HTML文件进行组件布局、数据填充、以及渲染,将渲染后的该具有相同内容的子页面HTML文件与多个目标页面HTML文件的其他子页面HTML文件进行拼装以生成多个响应式页面。5.一种服务器,其特征在于,该服务器包括:载入模块,用于载入目标页面HTML文件;划分模块,用于将所述目标页面HTML文件划分为多个子页面HTML文件;组件布局模块,用于针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局;数据填充模块,用于...

【专利技术属性】
技术研发人员:赵复科杨井岗
申请(专利权)人:航天信息软件技术有限公司
类型:发明
国别省市:北京,11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1