CN106919371A

CN106919371A - 响应式页面创建方法、***、以及服务器

Info

Publication number: CN106919371A
Application number: CN201510994433.8A
Authority: CN
Inventors: 赵复科; 杨井岗
Original assignee: Aisino Corp
Current assignee: Aisino Corp
Priority date: 2015-12-25
Filing date: 2015-12-25
Publication date: 2017-07-04

Abstract

本发明涉及通信技术领域，公开了一种响应式页面创建方法、***、以及服务器，该方法包括：载入目标页面HTML文件；将所述目标页面HTML文件划分为多个子页面HTML文件；针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局；将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件；渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件；以及将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。本发明能够实现简便实现响应式前端界面，降低技术门槛，增加团队可协作性，提高开发效率，并且增加程序可维护性。

Description

响应式页面创建方法、***、以及服务器

技术领域

本发明涉及通信技术领域，具体地，涉及一种响应式页面创建方法、一种响应式页面创建***、以及一种服务器。

背景技术

现有技术中，网站开发人员一般采用响应式网页来实现使用户在网站的传统浏览器、移动电话(例如智能手机)、和平板电脑浏览器上都能很好地浏览网站。响应式网页可以根据随所显示设备的屏幕大小的改变而改变，以使用户具有良好的用户体验。但是开发一个支持响应式网页的应用程序的技术门槛很高，编写难度大。

因此，如何能够简便实现响应式前端界面，降低开发人员技术门槛，提高开发效率成为亟待解决的技术问题。

发明内容

针对现有技术中存在的缺少一种能够简便实现响应式前端界面并降低开发人员技术门槛以提高开发效率的响应式页面创建方法的技术问题，本发明提供了一种响应式页面创建方法，该方法包括：载入目标页面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.html

2.<head>标签中引入bootstrap.css和自定义css文件

3.<body>标签定义属性为<body ng-app＝"app"ng-controller＝"RootCtrl">，增加<div>子标签<div ui-view></div>

4.在<body>中引入script，包括

angular.js双向绑定框架

angular-ui-router.js路由工具

app.js应用配置

controllers.js控制器配置

5.定义切分子页面，如header.html，body.html，footer.html，放入views文件夹

接着，服务器100的组件布局模块12可以针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局，其中可以使用上一步骤中引入的bootstrap.css中的ui组件，bootstrap是响应式css框架，它能使web ui组件随着设备屏幕变化而自适应。以header.html为例，创建一个默认的导航栏的步骤如下：

1.向<nav>标签添加class.navbar、.navbar-default。

2.向上面的元素添加role＝"navigation"，有助于增加可访问性。

3.向<div>元素添加一个标题class.navbar-header，内部包含了带有class navbar-brand的<a>元素。这会让文本看起来更大一号。

4.为了向导航栏添加链接，只需要简单地添加带有class.nav、.navbar-nav的无序列表即可。

接着，服务器100的数据填充模块13可以将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件，所述数据填充模块利用Angular.JS进行数据填充。具体来说，在完成子页面组件定义后，页面雏形已形成，但还需要将业务数据从数据库加载出来显示在页面上，要想改变页面显示效果，就需要对HTML DOM结构进行变更。在划分模块11定义整体结构时，引入的angular.js就能将数据模型与DOM进行双向绑定，开发人员无需对DOM进行繁琐操作，只需要在控制器中对数据模型进行变更即可完成界面的数据填充。

实现数据填充流程如下：

1.在body.html中定义标签

<b>Total:</b>{{qty*cost}}

其中，ng-model为定义的数据模型

2.在controllers.js中定义控制器，在控制器中通过ajax post请求，获取到数据库中的数据，给数据模型赋值

3.编写后台服务，实现从数据库16取值，并返回Map对象，key为数据模型名

采用这样的实施方式，即采用双向数据绑定进行数据填充，可以屏蔽繁琐的DOM操作，开发人员直接操作数据模型，降低开发工作量，可以将更多精力用来关注业务。

之后，渲染模块14可以渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件。以及拼装模块15可以将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。优选地，所述拼装模块15可以为url路由配置模块。例如，可以在url路由配置中完成对整体页面的拼装。配置流程如下：

1.在入口配置文件app.js中增加config配置angular.config(function($stateProvider,$urlRouterProvider,$locationProvider){})；

2.使用$stateProvider对象的state方法定义状态

采用这样的实施方式可以实现重用多个目标页面HTML文件中的相同内容的子页面HTML文件，在最后的拼装流程中将这些相同内容的子页面HTML文件与多个目标页面HTML文件的每个目标页面HTML文件的不同内容的子页面文件相应地进行拼接，以获得一个完整的响应式页面。最后，终端200可以显示该响应式页面。

图2是根据本发明的一种实施方式的响应式页面创建方法的示例流程图，如图2所示，该方法可以包括以下步骤：

步骤1001，载入目标页面HTML文件；

步骤1002，将所述目标页面HTML文件划分为多个子页面HTML文件；

步骤1003，针对所述多个子页面HTML文件中的每个子页面HTML文件进行组件布局；

步骤1004，将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件；

步骤1005，渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件；以及

步骤1006，将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。

优选地，将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件可以包括：利用Angular.JS进行数据填充。

优选地，该方法还包括：在载入多个目标页面HTML文件的情况下，重用具有相同内容的子页面HTML文件。

优选地，所述在载入多个目标页面HTML文件的情况下重用具有相同内容的子页面HTML文件包括：在所述多个目标页面HTML文件具有相同内容的子页面HTML文件的情况下，仅对一个目标页面HTML文件的具有相同内容的子页面HTML文件进行组件布局、数据填充、以及渲染，将渲染后的该具有相同内容的子页面HTML文件与多个目标页面HTML文件的其他子页面HTML文件进行拼装以生成多个响应式页面。

应当理解的是，上述响应式页面创建方法的各个具体实施方式，均已在示例在响应式页面创建***的实施方式中做了详细地说明(如上所述)，在此不再赘述。并且，本领域技术人员可以根据本发明的公开选择上述各种实施方式中的任一者，或者选择上述各种实施方式的组合来配置服务器，并且其他的替换实施方式也落入本发明的保护范围。

采用本发明的响应式页面创建方法、***、以及服务器，能够实现简便实现响应式前端界面，降低技术门槛，增加团队可协作性，提高开发效率，并且增加程序可维护性。

以上结合附图详细描述了本发明的优选实施方式，但是，本发明并不限于上述实施方式中的具体细节，在本发明的技术构思范围内，可以对本发明的技术方案进行多种简单变型，这些简单变型均属于本发明的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。

此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。

Claims

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文件进行组件布局；

数据填充模块，用于将数据填充到组件布局后的所述多个子页面HTML文件中的每个子页面HTML文件；

渲染模块，用于渲染数据填充后的所述多个子页面HTML文件中的每个子页面HTML文件；以及

拼装模块，用于将渲染后的所述多个子页面HTML文件中的每个子页面HTML文件拼装为一个响应式页面。

6.根据权利要求5所述的服务器，其特征在于，所述数据填充模块利用Angular.JS进行数据填充。

7.根据权利要求5所述的服务器，其特征在于，所述服务器还用于在载入多个目标页面HTML文件的情况下，重用具有相同内容的子页面HTML文件。

8.根据权利要求7所述的服务器，其特征在于，所述服务器还用于在载入多个目标页面HTML文件的情况下重用具有相同内容的子页面HTML文件包括：

在所述多个目标页面HTML文件具有相同内容的子页面HTML文件的情况下，

所述组件布局模块用于仅对一个目标页面HTML文件的具有相同内容的子页面HTML文件进行组件布局；

所述数据填充模块用于仅对组件布局后的所述一个目标页面HTML文件的具有相同内容的子页面HTML文件进行数据填充；

所述渲染模块用于仅对数据填充后的所述一个目标页面HTML文件的具有相同内容的子页面HTML文件进行渲染；以及

所述拼装模块用于将渲染后的该具有相同内容的子页面HTML文件与多个目标页面HTML文件的其他子页面HTML文件进行拼装以生成多个响应式页面。

9.一种响应式页面创建***，其特征在于，该***包括：

终端，用于发送载入目标页面HTML的请求并显示响应式页面；以及

根据权利要求5-8中任一项所述的服务器。

10.根据权利要求9所述的***，其特征在于，所述终端为移动电话、计算机、平板电脑中的任一者。