基于MiniUI框架的Web開發實踐*

周銀萍，王跟成（西藏民族大學 信息工程學院，陜西 咸陽 712082）

基于MiniUI框架的Web開發實踐*

周銀萍，王跟成
（西藏民族大學 信息工程學院，陜西 咸陽 712082）

隨著用戶對Internet網絡服務器提出更高的要求，傳統Web技術的同步請求-響應系統架構逐漸顯現出不足，其中最為突出的一點是每次客戶端更新信息、獲取數據時都要浪費大量時間讀取整個頁面的數據。采用Ajax技術可以挖掘并開發Web瀏覽器的潛力，借助MiniUI使用戶方便地為網站提供Ajax交互，改變傳統Web應用和開發模式，提供全新的用戶上網體驗。

Web技術；Ajax交互；MiniUI

0 引言

傳統Web開發往往在頁面中嵌入服務端腳本代碼，如JSP、ASP、PHP等［1］。這種開發方式很容易滋生一種傾向：習慣不好的程序員會把大量的業務邏輯代碼、數據庫訪問代碼夾雜在頁面中，導致很難讀懂，不易維護。

服務端頁面會生成很多HTML內容進行界面展示，必須使用“Form”標簽提交錄入的數據，這兩種操作都將刷新整個頁面［2］。如果服務端處理、數據庫操作、網絡加載等任何一個環節發生延遲，網頁將處于一種空白“假死”狀態，造成極差的用戶體驗。

Ajax能刷新頁面局部內容可以不通過“Form”標簽提交數據［3］。這意味著，在用戶查詢表格、提交表單時，可以在不刷新頁面的情況下與Web服務器交換數據，從而獲得良好的用戶體驗。

狹義的Ajax僅僅只是一個數據交互技術，沒有與之配套的UI體系，一般僅僅為了解決個別場景的操作優化。在狹義的 Ajax開發場景下，開發者需要在服務端、客戶端分別處理數據交互的格式，并且需要編寫基礎的界面UI，將獲取的數據內容進行UI填充，進而在界面展現。這造成實際開發的極大困難，提升用戶體驗的同時，開發的工作量大大增加，系統的穩定性大大降低，很容易出現瀏覽器兼容不一致、性能變慢、內存泄漏、布局錯亂等問題。而且，用戶體驗的提升也是有限的，開發者只能解決一些受到重點關注的操作場景，不能完整開發出成為媲美C/S應用界面風格和操作習慣的應用系統。

廣義的Ajax技術提供了一整套用于快速開發的“富客戶端UI庫”，為數據交互提供快速的開發機制，讓UI與數據的裝配更天然便捷。開發者可以集中精力開發業務功能，只需要簡單的處理步驟，就能快速打造媲美C/ S應用系統的B/S軟件。

1 Mi n i UI使用介紹

一般來說，使用 MiniUI框架開發 Web應用，只需要在Web頁面的 head區域引用服務器端或本地JS庫文件即可。最新的MiniUI庫文件可以從http://www.miniui.com/下載，該網站提供了支持不同開發環境的 MiniUI開發包（.Net版本、java版本、PHP版本），開發人員可以根據實際的開發環境選擇合適的開發包。使用該庫文件的語法如下（MiniUI庫文件名為 boot.js，存放在網站根目錄下scripts文件夾中）：

＜scriptsrc="scripts/boot.js"type="text/javascript"＞＜/script＞

一般情況下還需要顯示MiniUI的樣式，否則頁面布局會有不規整的現象，這時要引入其 css文件（css樣式文件名為 demo.css，存放在網站根目錄下的 css文件夾中），具體如下：

＜link href="css/demo.css"rel="stylesheet"type="text/css"/＞

在HTML文件的body區域只需要一行簡單的代碼，就能實現一個漂亮的“刪除”按鈕顯示。具體的功能實現可以在JS中通過remove（）方法完成。

＜a class="mini-button"iconCls="icon-remove"onclick="remove（）"＞刪除＜/a＞

2 實例分析及實現代碼

通過MiniUI框架開發Web頁面可以輕松實現頁面無需刷新為前提的各種功能，擁有良好的界面，為用戶提供更好的用戶體驗［4-5］。下面用《西藏自治區高校人文社會科學研究項目管理系統》的開發作為實際的例子來簡單說明MiniUI的使用，服務器端開發語言使用Java［6］。

2.1 設計思路

HTML頁面包含一個tool-bar工具欄和一個 datagrid數據網格列表，工具欄負責具體的增加、刪除、查詢等操作（以刪除為例），datagrid控件負責顯示從數據庫中讀取的相關數據，可根據每頁顯示的條數自動進行分頁顯示，包括當前頁和總頁數，并內置了前一頁、后一頁、首頁、尾頁、總條數統計等功能。打開頁面時數據直接加載至列表中顯示，執行刪除操作后頁面也無需刷新，操作后的新數據直接顯示在頁面中，同時數據條數及其總頁數也會隨之變化。效果圖如圖1所示。

2.2 HTML頁面主要代碼及其分析

＜a class="mini-button"iconCls="icon-remove"onclick="remove（）"＞刪除＜/a＞

＜div id="datagrid1"class="mini-datagrid"style="width：95％；height：310px；"pageSize="10"allowResize="true"url="psmanagerservletzyp？method=getPsList" idField="PSID"multiSelect="true" showSummaryRow="true"＞

首先通過 mini-button在 mini-toolbar工具欄中定義一個“刪除”按鈕，然后通過 mini-datagrid實現頁面列表的展現。在上面的HTML代碼中，MiniUI對傳統HTML頁面控件進行了封裝升級。比如傳統開發頁面列表是通過 table來實現的，需要開發人員編寫 pagebean，每新增或者刪除一條記錄，都要判斷總記錄數及每頁顯示的條數來計算總頁數，而MiniUI則不再需要開發人員去完成這些細節，mini-datagrid內置了 pagebean需要實現的所有功能，使開發人員能有更多的精力去實現更多的功能，有效縮短工期。mini-datagrid只需要設置一個URL就能自動訪問后臺程序，完成數據的讀取和顯示。

2.3 PsManager.js部分代碼及其分析

Web development practice based on MiniUI framew ork

Zhou Yinping，Wang Gencheng
（School of Information Engineering，Xizang Minzu University，Xianyang 712082，China）

The traditional Web technology——synchronous request/response system architecture is gradually showing insufficience，as users put forward higher requirements to the Internet server.The most striking point is that customers update information and access to data each time wasting a lot of time to read data of the entire page.Potential of Web browser can be tapped and developed using Ajax technology.With the help of MiniUI，the article made users easily provide Ajax interactions for websites，and changed the traditional Web applications and development model to provide new user Internet experience.

Web technology；Ajax interactions；MiniUI

圖1示例圖

TP319

A

1674-7720（2015）24-0079-02

周銀萍，王跟成.基于MiniUI框架的Web開發實踐［J］.微型機與應用，2015，34（24）：79-80，83.

西藏自治區高校人文社會科學項目管理系統（2015ZX041）