一種基于Bootstrap顯示運行時定制頁面的方法
【技術領域】
[0001]本發(fā)明涉及計算機技術領域，具體地說是一種實用性強、基于Bootstrap顯示運行時定制頁面的方法。
【背景技術】
[0002]Bootstrap是一個用于快速開發(fā)Web應用程序和網站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案，包含了功能強大的內置組件，易于定制，它還提供了基于Web的定制，并且是開源的。
[0003]MVVM是Model-View-ViewModel的簡寫，是三層架構，M層(Model實體層)、V層(View表示層，它有DataContext屬性，這個屬性可以使用DataTemplate模板綁定VM層的數據用來顯示)、VM層(ViewModel層，對Model層進行CRUD進行操作，同時對V層提供數據綁定)，這樣分層的好處是各部門可以完全獨立地工作，在具體實現(xiàn)中采用KnockOut來支持，只需要關注數據的存取，不需要重新刷新整個控件片段或自己寫JS增刪節(jié)點。
[0004]現(xiàn)有技術中，定制HTML的Π頁面時，頁面中的各種元素和布局發(fā)生變化后，數據無法及時更新，整個顯示過程滯后，如果能夠采用Bootstrap進行定制Π頁面，則能夠有效解決該問題，在實際應用中，Bootstrap負責UI，Knockout.js負責數據綁定，可以根據形成的表單描述文件，快速簡潔的展現(xiàn)出所需要的UI界面，并進行數據綁定更新操作，理論上不需要寫多余的JavaScript代碼和CSS描述?；诖?，現(xiàn)提供一種基于Bootstrap顯示運行時定制頁面的方法。

【發(fā)明內容】

[0005]本發(fā)明的技術任務是針對以上不足之處，提供一種實用性強、基于Bootstrap顯示運行時定制頁面的方法。
[0006]—種基于Bootstrap顯示運行時定制頁面的方法，其具體實現(xiàn)過程為:
首先進行頁面初始化，即用戶在客戶端向服務器端發(fā)出頁面瀏覽請求，服務器端根據請求的頁面ID獲取頁面描述文檔并解析，形成JSON格式數據返回客戶端；
頁面聯(lián)動操作:客戶端腳本調用返回的JSON數據描繪Π頁面，生成數據Model實例并獲取數據綁定到頁面，實現(xiàn)Π頁面和數據的聯(lián)動。
[0007]所述頁面初始化前，創(chuàng)建頁面基礎描述文檔，該頁面基礎描述文檔包含的內容包括:頁面元素類型、綁定數據對象、頁面元素綁定的對應字段，并提供列權限進行顯示字段的過濾和可編輯性。
[0008]所述頁面初始化的詳細過程為:
服務器端根據要獲取的頁面ID，獲取運行時定制頁面的設計文檔ID，并從數據庫獲取該文檔的描述XML文檔；
服務器端分析獲取的對應頁面XML文檔，將獲取的每一個項目的屬性轉換成JSON格式，返回到客戶端。
[0009]所述JSON數據描繪的Π頁面包括以下元素:文本、數字、下拉、日期、時間、智能幫助控件。
[0010]所述頁面聯(lián)動操作的具體過程為:打開Π頁面時，輸入要加載的頁面ID，客戶端讀取服務器端UI頁面的描述定義，通過該定義進行界面元素和數據綁定的解析及二次描述，并通過JSON格式的數據返回到客戶端，客戶端根據返回的JSON數據進行頁面元素的布局和重組。
[0011]所述頁面聯(lián)動操作的詳細過程為:客戶端把從服務器端獲取的JSON數據進行處理，轉換成對應的HTML Tag添加到一個空白頁面中，形成持久層對象；
客戶端腳本根據頁面綁定的持久層對象生成一個Model并綁定到頁面上；
頁面元素加載完畢后，根據綁定的數據對象發(fā)起服務器請求，進行數據加載工作，并顯示到頁面，實現(xiàn)Π頁面和數據的聯(lián)動。
[0012]上述每個元素在生成到HTML頁面時均有對應JavaScript對其進行包裝處理。
[0013]所述Π頁面在聯(lián)動操作時，根據頁面元素內的值變化實時更新Model內對應字段的值，并返回數據庫保存:即服務器端檢測到有變化數據存在時，該變化部分的數據通過雙向綁定，將頁面的值變化反映到綁定的Model中，并通過請求更新到數據庫并保存。
[0014]本發(fā)明的一種基于Bootstrap顯示運行時定制頁面的方法，具有以下優(yōu)點:
本發(fā)明提出的一種基于Bootstrap顯示運行時定制頁面的方法，可以根據業(yè)務要求定義頁面的各種元素、布局、功能，最終顯示頁面根據設計的樣式進行內容展示，并采用了MVVM框架，當頁面相關元素值發(fā)生變化時，會及時更新內存中的數據，從而完成頁面數據的雙向綁定，實用性強，易于推廣。
【附圖說明】
[0015]附圖1是本發(fā)明的頁面初始化示意圖。
[0016]附圖2為本發(fā)明的頁面操作示意圖。
【具體實施方式】
[0017]下面結合附圖和具體實施例對本發(fā)明作進一步說明。
[0018]本發(fā)明公開了一種基于Bootstrap顯示運行時定制頁面的方法，該方法的過程如附圖1、圖2所示，其具體實現(xiàn)過程為:
首先進行頁面初始化，即用戶在客戶端向服務器端發(fā)出頁面瀏覽請求，服務器端根據請求的頁面ID獲取頁面描述文檔并解析，形成JSON格式數據返回客戶端；
頁面聯(lián)動操作:客戶端腳本調用返回的JSON數據描繪Π頁面，生成數據Model實例并獲取數據綁定到頁面，實現(xiàn)Π頁面和數據的聯(lián)動。
[0019]所述頁面初始化前，創(chuàng)建頁面基礎描述文檔，支持運行時設計，其中包含的內容包括頁面元素類型，綁定數據對象，和頁面元素綁定的對應字段，并提供列權限進行顯示字段的過濾和可編輯性。
[0020]所述頁面初始化的詳細過程為:
服務器端根據要獲取的頁面ID，獲取運行時定制頁面的設計文檔ID，并從數據庫獲取該文檔的描述XML文檔； 服務器端分析獲取的對應頁面XML文檔，將獲取的每一個項目的屬性轉換成JSON格式，返回到客戶端。
[0021]所述JSON數據描繪的Π頁面包括以下元素:文本、數字、下拉、日期、時間、智能幫助控件，提供了一系列的二次封裝，實現(xiàn)對于自定義項目的顯示、操作、數據綁定的擴展處理。
[0022]所述頁面聯(lián)動操作的具體過程為:打開Π頁面時，輸