本發(fā)明涉及通信技術(shù)領(lǐng)域，具體地，涉及一種響應(yīng)式頁(yè)面創(chuàng)建方法、一種響應(yīng)式頁(yè)面創(chuàng)建系統(tǒng)、以及一種服務(wù)器。

背景技術(shù)：

現(xiàn)有技術(shù)中，網(wǎng)站開(kāi)發(fā)人員一般采用響應(yīng)式網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)使用戶在網(wǎng)站的傳統(tǒng)瀏覽器、移動(dòng)電話(例如智能手機(jī))、和平板電腦瀏覽器上都能很好地瀏覽網(wǎng)站。響應(yīng)式網(wǎng)頁(yè)可以根據(jù)隨所顯示設(shè)備的屏幕大小的改變而改變，以使用戶具有良好的用戶體驗(yàn)。但是開(kāi)發(fā)一個(gè)支持響應(yīng)式網(wǎng)頁(yè)的應(yīng)用程序的技術(shù)門(mén)檻很高，編寫(xiě)難度大。

因此，如何能夠簡(jiǎn)便實(shí)現(xiàn)響應(yīng)式前端界面，降低開(kāi)發(fā)人員技術(shù)門(mén)檻，提高開(kāi)發(fā)效率成為亟待解決的技術(shù)問(wèn)題。

技術(shù)實(shí)現(xiàn)要素：

針對(duì)現(xiàn)有技術(shù)中存在的缺少一種能夠簡(jiǎn)便實(shí)現(xiàn)響應(yīng)式前端界面并降低開(kāi)發(fā)人員技術(shù)門(mén)檻以提高開(kāi)發(fā)效率的響應(yīng)式頁(yè)面創(chuàng)建方法的技術(shù)問(wèn)題，本發(fā)明提供了一種響應(yīng)式頁(yè)面創(chuàng)建方法，該方法包括：載入目標(biāo)頁(yè)面html文件；將所述目標(biāo)頁(yè)面html文件劃分為多個(gè)子頁(yè)面html文件；針對(duì)所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件進(jìn)行組件布局；將數(shù)據(jù)填充到組件布局后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件；渲染數(shù)據(jù)填充后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件；以及將渲染后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件拼裝為一個(gè)響應(yīng)式頁(yè)面。

相應(yīng)地，本發(fā)明還提供了一種服務(wù)器，該服務(wù)器包括：載入模塊，用于載入目標(biāo)頁(yè)面html文件；劃分模塊，用于將所述目標(biāo)頁(yè)面html文件劃分為多個(gè)子頁(yè)面html文件；組件布局模塊，用于針對(duì)所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件進(jìn)行組件布局；數(shù)據(jù)填充模塊，用于將數(shù)據(jù)填充到組件布局后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件；渲染模塊，用于渲染數(shù)據(jù)填充后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件；以及拼裝模塊，用于將渲染后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件拼裝為一個(gè)響應(yīng)式頁(yè)面。

另外，本發(fā)明還提供了一種響應(yīng)式頁(yè)面創(chuàng)建系統(tǒng)，該系統(tǒng)包括：終端，用于發(fā)送載入目標(biāo)頁(yè)面html的請(qǐng)求并顯示響應(yīng)式頁(yè)面；以及本發(fā)明提供的服務(wù)器。

采用本發(fā)明的響應(yīng)式頁(yè)面創(chuàng)建方法、系統(tǒng)、以及服務(wù)器，通過(guò)載入目標(biāo)頁(yè)面html文件，之后將所述目標(biāo)頁(yè)面html文件劃分為多個(gè)子頁(yè)面html文件，接著針對(duì)所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件進(jìn)行組件布局，接著將數(shù)據(jù)填充到組件布局后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件，之后渲染數(shù)據(jù)填充后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件，以及最后將渲染后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件拼裝為一個(gè)響應(yīng)式頁(yè)面，能夠?qū)崿F(xiàn)簡(jiǎn)便實(shí)現(xiàn)響應(yīng)式前端界面，降低技術(shù)門(mén)檻，增加團(tuán)隊(duì)可協(xié)作性，提高開(kāi)發(fā)效率，并且增加程序可維護(hù)性。

本發(fā)明的其它特征和優(yōu)點(diǎn)將在隨后的具體實(shí)施方式部分予以詳細(xì)說(shuō)明。

附圖說(shuō)明

附圖是用來(lái)提供對(duì)本發(fā)明的進(jìn)一步理解，并且構(gòu)成說(shuō)明書(shū)的一部分，與下面的具體實(shí)施方式一起用于解釋本發(fā)明，但并不構(gòu)成對(duì)本發(fā)明的限制。在 附圖中：

圖1是根據(jù)本發(fā)明的一種實(shí)施方式的響應(yīng)式頁(yè)面創(chuàng)建系統(tǒng)的結(jié)構(gòu)示意圖；以及

圖2是根據(jù)本發(fā)明的一種實(shí)施方式的響應(yīng)式頁(yè)面創(chuàng)建方法的示例流程圖。

附圖標(biāo)記說(shuō)明

10載入模塊11劃分模塊

12組件布局模塊13數(shù)據(jù)填充模塊

14渲染模塊15拼裝模塊

16數(shù)據(jù)庫(kù)100服務(wù)器

200終端

具體實(shí)施方式

以下結(jié)合附圖對(duì)本發(fā)明的具體實(shí)施方式進(jìn)行詳細(xì)說(shuō)明。應(yīng)當(dāng)理解的是，此處所描述的具體實(shí)施方式僅用于說(shuō)明和解釋本發(fā)明，并不用于限制本發(fā)明。

下面將舉例說(shuō)明本發(fā)明的思想，但應(yīng)當(dāng)理解的這些示例為非局限性示例，本發(fā)明的保護(hù)范圍不限于此：

為了更加清楚地說(shuō)明本發(fā)明的思想，以響應(yīng)式頁(yè)面創(chuàng)建系統(tǒng)為例進(jìn)行詳細(xì)地說(shuō)明。圖1是根據(jù)本發(fā)明的一種實(shí)施方式的響應(yīng)式頁(yè)面創(chuàng)建系統(tǒng)的結(jié)構(gòu)示意圖，其中實(shí)線表示組件之間的通信，箭頭表示通信方向。如圖1所示，該系統(tǒng)可以包括：服務(wù)器100；以及終端200，用于發(fā)送載入目標(biāo)頁(yè)面html的請(qǐng)求并顯示響應(yīng)式頁(yè)面。其中，所述終端200可以為移動(dòng)電話、計(jì)算機(jī)、平板電腦中的任一者。服務(wù)器100可以包括：載入模塊10，用于載入目標(biāo)頁(yè) 面html文件；劃分模塊11，用于將所述目標(biāo)頁(yè)面html文件劃分為多個(gè)子頁(yè)面html文件；組件布局模塊12，用于針對(duì)所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件進(jìn)行組件布局；數(shù)據(jù)填充模塊13，用于將數(shù)據(jù)填充到組件布局后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件；渲染模塊14，用于渲染數(shù)據(jù)填充后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件；以及拼裝模塊15，用于將渲染后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件拼裝為一個(gè)響應(yīng)式頁(yè)面。

優(yōu)選地，所述服務(wù)器100還可以在載入多個(gè)目標(biāo)頁(yè)面html文件的情況下，重用具有相同內(nèi)容的子頁(yè)面html文件。

優(yōu)選地，在所述多個(gè)目標(biāo)頁(yè)面html文件具有相同內(nèi)容的子頁(yè)面html文件的情況下，所述組件布局模塊12可以僅對(duì)一個(gè)目標(biāo)頁(yè)面html文件的具有相同內(nèi)容的子頁(yè)面html文件進(jìn)行組件布局；所述數(shù)據(jù)填充模塊13可以僅對(duì)組件布局后的所述一個(gè)目標(biāo)頁(yè)面html文件的具有相同內(nèi)容的子頁(yè)面html文件進(jìn)行數(shù)據(jù)填充；所述渲染模塊14可以僅對(duì)數(shù)據(jù)填充后的所述一個(gè)目標(biāo)頁(yè)面html文件的具有相同內(nèi)容的子頁(yè)面html文件進(jìn)行渲染；以及所述拼裝模塊15可以將渲染后的該具有相同內(nèi)容的子頁(yè)面html文件與多個(gè)目標(biāo)頁(yè)面html文件的其他子頁(yè)面html文件進(jìn)行拼裝以生成多個(gè)響應(yīng)式頁(yè)面。

具體地，在該響應(yīng)式頁(yè)面系統(tǒng)中，服務(wù)器100與終端200之間的交互過(guò)程如下：

首先，終端200根據(jù)用戶的選擇發(fā)送載入目標(biāo)頁(yè)面html的請(qǐng)求(例如輸入用戶想要訪問(wèn)的網(wǎng)頁(yè)鏈接)。對(duì)應(yīng)地，在服務(wù)器100側(cè)，服務(wù)器100的載入模塊10載入目標(biāo)頁(yè)面html文件。接著，服務(wù)器100的劃分模塊11可以將所述目標(biāo)頁(yè)面html文件劃分為多個(gè)子頁(yè)面html文件，即根據(jù)網(wǎng)站整體結(jié)構(gòu)，將各區(qū)域進(jìn)行切分，化整為零方便重用和團(tuán)隊(duì)協(xié)作。舉例來(lái)說(shuō)， 每個(gè)頁(yè)面都有頂部導(dǎo)航欄，底部介紹欄，還有中間內(nèi)容部分，或者有的頁(yè)面是由左部，中部，和右部來(lái)劃分區(qū)域。每個(gè)頁(yè)面跳轉(zhuǎn)的時(shí)候，頂部和底部可能會(huì)一直不變，只有中間內(nèi)容在變化，因此將區(qū)域切分后，可以重用頂部和底部的頁(yè)面代碼，而不必為各頁(yè)面重新編寫(xiě)。應(yīng)當(dāng)理解的是，頂部和底部的這種示例僅是用來(lái)說(shuō)明本發(fā)明區(qū)域劃分的思想，除此之外，還可以重用例如左部、右部等等其他具有相同內(nèi)容的部分，本發(fā)明對(duì)此不進(jìn)行限定。

作為示例，服務(wù)器100的劃分模塊11將所述目標(biāo)頁(yè)面html文件劃分為多個(gè)子頁(yè)面html文件的具體流程如下：

1.定義整個(gè)網(wǎng)站應(yīng)用入口，默認(rèn)為index.html

2.<head>標(biāo)簽中引入bootstrap.css和自定義css文件

3.<body>標(biāo)簽定義屬性為<bodyng-app＝"app"ng-controller＝"rootctrl">，增加<div>子標(biāo)簽<divui-view></div>

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

angular.js雙向綁定框架

angular-ui-router.js路由工具

app.js應(yīng)用配置

controllers.js控制器配置

5.定義切分子頁(yè)面，如header.html，body.html，footer.html，放入views文件夾

接著，服務(wù)器100的組件布局模塊12可以針對(duì)所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件進(jìn)行組件布局，其中可以使用上一步驟中引入的bootstrap.css中的ui組件，bootstrap是響應(yīng)式css框架，它能使webui組件隨著設(shè)備屏幕變化而自適應(yīng)。以header.html為例，創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的步驟如下：

1.向<nav>標(biāo)簽添加class.navbar、.navbar-default。

2.向上面的元素添加role＝"navigation"，有助于增加可訪問(wèn)性。

3.向<div>元素添加一個(gè)標(biāo)題class.navbar-header，內(nèi)部包含了帶有classnavbar-brand的<a>元素。這會(huì)讓文本看起來(lái)更大一號(hào)。

4.為了向?qū)Ш綑谔砑渔溄樱恍枰?jiǎn)單地添加帶有class.nav、.navbar-nav的無(wú)序列表即可。

接著，服務(wù)器100的數(shù)據(jù)填充模塊13可以將數(shù)據(jù)填充到組件布局后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件，所述數(shù)據(jù)填充模塊利用angular.js進(jìn)行數(shù)據(jù)填充。具體來(lái)說(shuō)，在完成子頁(yè)面組件定義后，頁(yè)面雛形已形成，但還需要將業(yè)務(wù)數(shù)據(jù)從數(shù)據(jù)庫(kù)加載出來(lái)顯示在頁(yè)面上，要想改變頁(yè)面顯示效果，就需要對(duì)htmldom結(jié)構(gòu)進(jìn)行變更。在劃分模塊11定義整體結(jié)構(gòu)時(shí)，引入的angular.js就能將數(shù)據(jù)模型與dom進(jìn)行雙向綁定，開(kāi)發(fā)人員無(wú)需對(duì)dom進(jìn)行繁瑣操作，只需要在控制器中對(duì)數(shù)據(jù)模型進(jìn)行變更即可完成界面的數(shù)據(jù)填充。

實(shí)現(xiàn)數(shù)據(jù)填充流程如下：

1.在body.html中定義標(biāo)簽

<inputtype＝"integer"min＝"0"ng-model＝"qty"required>

<inputtype＝"number"ng-model＝"cost"required>

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

其中，ng-model為定義的數(shù)據(jù)模型

2.在controllers.js中定義控制器，在控制器中通過(guò)ajaxpost請(qǐng)求，獲取到數(shù)據(jù)庫(kù)中的數(shù)據(jù)，給數(shù)據(jù)模型賦值

3.編寫(xiě)后臺(tái)服務(wù)，實(shí)現(xiàn)從數(shù)據(jù)庫(kù)16取值，并返回map對(duì)象，key為數(shù)據(jù)模型名

采用這樣的實(shí)施方式，即采用雙向數(shù)據(jù)綁定進(jìn)行數(shù)據(jù)填充，可以屏蔽繁瑣的dom操作，開(kāi)發(fā)人員直接操作數(shù)據(jù)模型，降低開(kāi)發(fā)工作量，可以將更多精力用來(lái)關(guān)注業(yè)務(wù)。

之后，渲染模塊14可以渲染數(shù)據(jù)填充后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件。以及拼裝模塊15可以將渲染后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件拼裝為一個(gè)響應(yīng)式頁(yè)面。優(yōu)選地，所述拼裝模塊15可以為url路由配置模塊。例如，可以在url路由配置中完成對(duì)整體頁(yè)面的拼裝。配置流程如下：

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

2.使用$stateprovider對(duì)象的state方法定義狀態(tài)

采用這樣的實(shí)施方式可以實(shí)現(xiàn)重用多個(gè)目標(biāo)頁(yè)面html文件中的相同內(nèi)容的子頁(yè)面html文件，在最后的拼裝流程中將這些相同內(nèi)容的子頁(yè)面html文件與多個(gè)目標(biāo)頁(yè)面html文件的每個(gè)目標(biāo)頁(yè)面html文件的不同內(nèi)容的子頁(yè)面文件相應(yīng)地進(jìn)行拼接，以獲得一個(gè)完整的響應(yīng)式頁(yè)面。最后，終端200可以顯示該響應(yīng)式頁(yè)面。

圖2是根據(jù)本發(fā)明的一種實(shí)施方式的響應(yīng)式頁(yè)面創(chuàng)建方法的示例流程圖，如圖2所示，該方法可以包括以下步驟：

步驟1001，載入目標(biāo)頁(yè)面html文件；

步驟1002，將所述目標(biāo)頁(yè)面html文件劃分為多個(gè)子頁(yè)面html文件；

步驟1003，針對(duì)所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件進(jìn)行組件布局；

步驟1004，將數(shù)據(jù)填充到組件布局后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件；

步驟1005，渲染數(shù)據(jù)填充后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件；以及

步驟1006，將渲染后的所述多個(gè)子頁(yè)面html文件中的每個(gè)子頁(yè)面html文件拼裝為一個(gè)響應(yīng)式頁(yè)面。

優(yōu)選地，將數(shù)據(jù)填充到組件布局后的所述多個(gè)子頁(yè)面html文件中的 每個(gè)子頁(yè)面html文件可以包括：利用angular.js進(jìn)行數(shù)據(jù)填充。

優(yōu)選地，該方法還包括：在載入多個(gè)目標(biāo)頁(yè)面html文件的情況下，重用具有相同內(nèi)容的子頁(yè)面html文件。

優(yōu)選地，所述在載入多個(gè)目標(biāo)頁(yè)面html文件的情況下重用具有相同內(nèi)容的子頁(yè)面html文件包括：在所述多個(gè)目標(biāo)頁(yè)面html文件具有相同內(nèi)容的子頁(yè)面html文件的情況下，僅對(duì)一個(gè)目標(biāo)頁(yè)面html文件的具有相同內(nèi)容的子頁(yè)面html文件進(jìn)行組件布局、數(shù)據(jù)填充、以及渲染，將渲染后的該具有相同內(nèi)容的子頁(yè)面html文件與多個(gè)目標(biāo)頁(yè)面html文件的其他子頁(yè)面html文件進(jìn)行拼裝以生成多個(gè)響應(yīng)式頁(yè)面。

應(yīng)當(dāng)理解的是，上述響應(yīng)式頁(yè)面創(chuàng)建方法的各個(gè)具體實(shí)施方式，均已在示例在響應(yīng)式頁(yè)面創(chuàng)建系統(tǒng)的實(shí)施方式中做了詳細(xì)地說(shuō)明(如上所述)，在此不再贅述。并且，本領(lǐng)域技術(shù)人員可以根據(jù)本發(fā)明的公開(kāi)選擇上述各種實(shí)施方式中的任一者，或者選擇上述各種實(shí)施方式的組合來(lái)配置服務(wù)器，并且其他的替換實(shí)施方式也落入本發(fā)明的保護(hù)范圍。

采用本發(fā)明的響應(yīng)式頁(yè)面創(chuàng)建方法、系統(tǒng)、以及服務(wù)器，能夠?qū)崿F(xiàn)簡(jiǎn)便實(shí)現(xiàn)響應(yīng)式前端界面，降低技術(shù)門(mén)檻，增加團(tuán)隊(duì)可協(xié)作性，提高開(kāi)發(fā)效率，并且增加程序可維護(hù)性。

以上結(jié)合附圖詳細(xì)描述了本發(fā)明的優(yōu)選實(shí)施方式，但是，本發(fā)明并不限于上述實(shí)施方式中的具體細(xì)節(jié)，在本發(fā)明的技術(shù)構(gòu)思范圍內(nèi)，可以對(duì)本發(fā)明的技術(shù)方案進(jìn)行多種簡(jiǎn)單變型，這些簡(jiǎn)單變型均屬于本發(fā)明的保護(hù)范圍。

另外需要說(shuō)明的是，在上述具體實(shí)施方式中所描述的各個(gè)具體技術(shù)特征，在不矛盾的情況下，可以通過(guò)任何合適的方式進(jìn)行組合，為了避免不必要的重復(fù)，本發(fā)明對(duì)各種可能的組合方式不再另行說(shuō)明。

此外，本發(fā)明的各種不同的實(shí)施方式之間也可以進(jìn)行任意組合，只要其不違背本發(fā)明的思想，其同樣應(yīng)當(dāng)視為本發(fā)明所公開(kāi)的內(nèi)容。