采用MiniUI框架的綜合管理信息系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

(長江科學(xué)院 信息中心，武漢 430010)

1 研究背景

在這個(gè)網(wǎng)絡(luò)技術(shù)和信息化建設(shè)飛速發(fā)展的時(shí)代，辦公自動(dòng)化作為一種新型辦公方式，已經(jīng)廣泛應(yīng)用于公司企業(yè)、學(xué)校、醫(yī)院等各行各業(yè)中。通過OA系統(tǒng)，可以很方便地處理各類工作事務(wù)，獲取工作信息，發(fā)布并共享工作動(dòng)態(tài)，不同部門員工可以在不同時(shí)間、不同地點(diǎn)協(xié)同辦公[1-4]。OA系統(tǒng)代替紙質(zhì)化辦公，不僅可以提供更為高效、規(guī)范、智能、環(huán)保的數(shù)字化辦公環(huán)境，降低辦公開銷，使得企業(yè)能夠更加專注于業(yè)務(wù)拓展，而且可以促進(jìn)內(nèi)部員工的溝通交流，共享信息及公共資源，提高企業(yè)的辦公效率和管理效率，有利于企業(yè)的快速發(fā)展。

近年來，長江科學(xué)院緊跟時(shí)代步伐，大力開展信息化建設(shè)，綜合管理信息系統(tǒng)得到了全面的推廣和廣泛的應(yīng)用，也極大地提高了員工的辦公效率。但是，隨著人員規(guī)模的不斷增加、業(yè)務(wù)范圍的快速擴(kuò)展、辦公復(fù)雜度的不斷加大，對(duì)辦公系統(tǒng)的需求也在不斷增加，經(jīng)常會(huì)有功能的新增或修改、系統(tǒng)模塊的調(diào)整、審批流程的變化等問題。而為了滿足這些復(fù)雜、多變的需求，開發(fā)人員針對(duì)每一個(gè)單獨(dú)的功能進(jìn)行開發(fā)測試工作，往往需要花費(fèi)大量的時(shí)間和精力。當(dāng)工作量越來越大時(shí)，開發(fā)人員難免會(huì)力不從心，不能及時(shí)解決各類需求問題，直接影響到各部門的工作進(jìn)度和整體的辦公效率。

通過長期的應(yīng)用不難發(fā)現(xiàn)，在原有的辦公系統(tǒng)中，導(dǎo)致開發(fā)任務(wù)繁重、維護(hù)工作量巨大的原因大致有以下3點(diǎn)：

(1)前臺(tái)配置過程復(fù)雜，系統(tǒng)雖然采用了靈活的MVC(Mode/View/Controller)開發(fā)模式，但前臺(tái)界面大多是由HTML(Hyper Text Markup Language)、JS(JavaScript)腳本語音拼寫而成，當(dāng)新增一個(gè)功能時(shí)，必須根據(jù)需求界面逐行逐個(gè)地配置對(duì)應(yīng)的前臺(tái)腳本，如果界面功能復(fù)雜，則需要耗費(fèi)大量的時(shí)間在腳本的配置上。

(2)管理維護(hù)繁瑣，例如權(quán)限管理工作，即查看權(quán)限和操作權(quán)限的變動(dòng)，由于組織結(jié)構(gòu)復(fù)雜，人員變動(dòng)較快，需要不斷為異動(dòng)人員添加或修改權(quán)限，而許多權(quán)限都是在代碼中設(shè)置的，導(dǎo)致經(jīng)常需要去代碼中才能完成權(quán)限管理工作。

(3)兼容性差，這主要體現(xiàn)在瀏覽器的兼容性上，如果有瀏覽器被更改或升級(jí)等情況，就會(huì)導(dǎo)致辦公系統(tǒng)不能正常運(yùn)行，影響辦公。

為了解決這些問題，實(shí)現(xiàn)更加高效、便捷的網(wǎng)絡(luò)化辦公，本文提出了一種新的辦公系統(tǒng)設(shè)計(jì)思路，即在MVC開發(fā)模式中，采用MiniUI作為前端框架[5]，使用“配置”而非“編碼”的方式描述和生成界面，從而極大地減少界面代碼量，降低開發(fā)難度和開發(fā)周期，并提升系統(tǒng)的可維護(hù)性。

2 JQuery MiniUI前端框架

2.1 MiniUI介紹

JQuery MiniUI，即Java腳本框架迷你用戶界面，它是一款優(yōu)秀的JS前端Web框架，提供了豐富、強(qiáng)大的控件庫，能夠快速開發(fā)企業(yè)級(jí)Web應(yīng)用軟件[6]。MiniUI最大的技術(shù)特點(diǎn)就是快速開發(fā)，能夠極大程度地減少代碼量，輕松實(shí)現(xiàn)界面的配置，開發(fā)者能夠從繁瑣的腳本頁面中脫離出來，更加專注于服務(wù)及業(yè)務(wù)端的開發(fā)與設(shè)計(jì)，提供更優(yōu)質(zhì)的自動(dòng)化辦公環(huán)境。

MiniUI由WebUI(Website User Interface)、AJAX(Asynchronous Javascript And XML)數(shù)據(jù)通信機(jī)制、JS和HTML腳本配置、應(yīng)用框架4部分構(gòu)成[7]，如圖1所示。

圖1 MiniUI構(gòu)成Fig.1 Composition of MiniUI

(1)MiniUI采用的WebUI開發(fā)框架，能夠增強(qiáng)Web界面的信息承載量、表現(xiàn)力和操作性。它屏蔽了瀏覽器的差異性，支持應(yīng)用程序跨瀏覽器、支持CSS(Cascading Style Sheet)外觀切換，能夠靈活控制控件的可見性、可編輯性和可用性。同時(shí)包含豐富的常用 UI 控件，如可鎖定列的表格、多選樹、帶模糊查詢與分頁功能的下拉框等。

(2)AJAX，即異步的JavaScript和XML。它提供了一種可以只對(duì)頁面上某一部分內(nèi)容重新進(jìn)行http請(qǐng)求的技術(shù)方法，不需要重新加載整個(gè)網(wǎng)頁數(shù)據(jù)而實(shí)現(xiàn)頁面的局部刷新。用戶查詢表格或提交表單的時(shí)候，可以在不刷新頁面的情況下與Web服務(wù)器交換數(shù)據(jù)，從而獲得良好的用戶體驗(yàn)。同時(shí)，MiniUI提供了服務(wù)器端和客戶端的JSON(JavaScript Object Notation)組件，規(guī)范與服務(wù)器端進(jìn)行數(shù)據(jù)交互的傳輸格式。

(3)MiniUI的所有UI控件不僅能使用“配置”的方式去創(chuàng)建Web界面，實(shí)現(xiàn)界面視圖-控制器的代碼分離，而且支持JavaScript、HTML標(biāo)簽等方式創(chuàng)建，可以“配置”與“編碼”并用。

(4)MiniUI提供了豐富的控件庫和應(yīng)用框架，例如，登錄頁面、主頁面、典表單頁面、列表頁面、布局頁面等，開發(fā)人員可以直接使用，節(jié)省開發(fā)時(shí)間。

基于MiniUI前端框架，軟件開發(fā)人員可方便地使用AJAX技術(shù)刷新顯示頁面、對(duì)表單數(shù)據(jù)進(jìn)行增刪改查操作，并快速實(shí)現(xiàn)彈出分頁表格、CRUD(Create Read Update and Delete)、樹、控制面板、頁面布局導(dǎo)航、數(shù)據(jù)驗(yàn)證、菜單工具欄等有代表性的Web前端系統(tǒng)管理界面。另外，MiniUI具有良好的兼容性，不僅可無縫集成多種第三方控件，而且支持多種主流瀏覽器，例如IE瀏覽器、360安全瀏覽器、Chrome等[8]。

2.2 MiniUI應(yīng)用原理

目前B/S(browser/server)辦公系統(tǒng)的設(shè)計(jì)，基本都是采用MVC開發(fā)模式。即模型-視圖-控制器框架，它實(shí)現(xiàn)了視圖層和業(yè)務(wù)層的分離，將輸入、處理和輸出分開，具有耦合性低、重用性高、部署快、可維護(hù)性高等特點(diǎn)[9]。MiniUI作為一種優(yōu)秀的前端技術(shù)，可以很好地應(yīng)用于MVC開發(fā)模式，如圖2所示。

圖2 基于MiniUI的MVC模式Fig.2 MiniUI-based MVC model

MiniUI支持JavaScript、CSS、Html等純客戶端技術(shù)，處于MVC框架中的視圖層，與模型層分離。它通過AJAX+JSON與后臺(tái)進(jìn)行數(shù)據(jù)交互：當(dāng)用戶輸入操作指令后，控制器(控制層)使用Request獲取用戶提交的數(shù)據(jù)和指令，提交給業(yè)務(wù)層(模型層)進(jìn)行存儲(chǔ)和業(yè)務(wù)邏輯判斷，然后通過Request將結(jié)果通過JSON 字符串的形式返回給顯示層(視圖層)，用戶最終看到前臺(tái)反饋信息。

MiniUI系列控件內(nèi)置了AJAX調(diào)用方法，配置好URL后，通過訪問URL地址就可以實(shí)現(xiàn)數(shù)據(jù)的交互。而且，MiniUI提供了相當(dāng)多的JSON 序列化控件，開發(fā)者可直接使用，無需處理AJAX和JSON細(xì)節(jié)，減少代碼量，提高開發(fā)效率。

采用MVC+MiniUI的系統(tǒng)開發(fā)模式，不僅可以滿足UI與數(shù)據(jù)分離的開發(fā)模型，帶給系統(tǒng)更為清晰的層次化架構(gòu)，而且能夠?qū)崿F(xiàn)前臺(tái)腳本的快速配置，降低B/S架構(gòu)的復(fù)雜性，提高界面的快速響應(yīng)能力。

圖4 表單定義的控件信息頁面Fig.4 Control information of form definition

3 系統(tǒng)設(shè)計(jì)

3.1 總體框架設(shè)計(jì)

綜合管理信息系統(tǒng)的設(shè)計(jì)旨在實(shí)現(xiàn)一個(gè)集新聞發(fā)布、業(yè)務(wù)流程處理、統(tǒng)計(jì)管理、人員維護(hù)等功能于一體的自動(dòng)化辦公系統(tǒng)平臺(tái)。根據(jù)實(shí)際需求，將系統(tǒng)分成了院務(wù)管理、人力資源、科研管理、財(cái)務(wù)管理、資產(chǎn)管理、黨群監(jiān)審、科技信息、后勤保障、綜合查詢共9大子系統(tǒng)，另外還有首頁新聞網(wǎng)站、個(gè)人中心、支撐平臺(tái)及系統(tǒng)管理功能模塊。

圖3 系統(tǒng)框架Fig.3 Framework of the system

系統(tǒng)的總體框架如圖3所示，首頁可以提供院內(nèi)新聞和任務(wù)提醒等功能；9大子系統(tǒng)不僅涵蓋了全院所有的業(yè)務(wù)流程，包括院務(wù)公文流程、財(cái)務(wù)報(bào)銷流程、科研投標(biāo)流程等，而且能夠?qū)崿F(xiàn)員工信息管理、項(xiàng)目統(tǒng)計(jì)管理、資產(chǎn)分類管理等一系列有效的管理方法；另外，個(gè)人中心維護(hù)每個(gè)用戶自己的工作任務(wù)、成果管理及收入查詢，支撐平臺(tái)為用戶提供辦公插件的下載；最后，系統(tǒng)管理是只對(duì)管理員開放的功能模塊，是一個(gè)強(qiáng)大的后臺(tái)管理子系統(tǒng)，可以實(shí)現(xiàn)整個(gè)系統(tǒng)的菜單管理、權(quán)限分配、組織角色維護(hù)等功能，保障整個(gè)系統(tǒng)的正常運(yùn)轉(zhuǎn)。

3.2 系統(tǒng)開發(fā)環(huán)境

系統(tǒng)采用目前主流的B/S(瀏覽器/服務(wù)器)結(jié)構(gòu)，基于微軟最新的Framework4.0框架，利用MVC開發(fā)模式進(jìn)行設(shè)計(jì)；前端采用JQuery MiniUI，可以提供專業(yè)的WebUI控件庫；數(shù)據(jù)庫采用SQL Server 2008，提供快速穩(wěn)定的數(shù)據(jù)處理能力。系統(tǒng)在功能強(qiáng)大的Visual Studio 2010平臺(tái)上進(jìn)行開發(fā)，并采用升級(jí)后的IIS7.0作為Web服務(wù)器，使系統(tǒng)可以在不停止服務(wù)的情況下進(jìn)行更新升級(jí)等操作。

3.3 采用MiniUI的功能模塊設(shè)計(jì)

利用MiniUI豐富、強(qiáng)大的控件庫，開發(fā)人員可以通過“配置”的方式實(shí)現(xiàn)功能模塊的開發(fā)設(shè)計(jì)。對(duì)于簡單審批流程或者信息統(tǒng)計(jì)模塊，MiniUI能夠真正做到全配置、零代碼開發(fā)，將表單頁面設(shè)計(jì)、列表數(shù)據(jù)顯示、流程環(huán)節(jié)定義、權(quán)限分配等一一配置出來，完成開發(fā)設(shè)計(jì)的全部步驟。為了更具體地闡明MiniUI在系統(tǒng)開發(fā)中的作用，以科研管理中備案注冊申請(qǐng)流程為例，詳細(xì)說明基于MiniUI的功能設(shè)計(jì)步驟如下。

第1步：表單定義。根據(jù)功能需求，設(shè)計(jì)前臺(tái)表單頁面，見圖4，在控件信息中可添加文本框、單選多選框、下拉框、日期選擇框、附件框、簽名框等常用控件，并對(duì)相應(yīng)的字段名、字段類型等信息進(jìn)行詳細(xì)配置。然后，在布局信息中，顯示了編輯好的所有字段，圖5是基于MiniUI實(shí)現(xiàn)的布局設(shè)計(jì)工具，支持插入、合并行或列等功能，實(shí)現(xiàn)“零腳本”配置復(fù)雜的前臺(tái)表單。最后生成表單，保存表單配置信息，并且在數(shù)據(jù)庫中生成對(duì)應(yīng)的表，保存了所有字段的有效信息。

圖5 表單定義的布局設(shè)計(jì)頁面Fig.5 Layout design of form definition

圖6 流程定義信息頁面Fig.6 Information of workflow definition

第2步：列表定義。與第1步的配置類似，導(dǎo)入在表單定義中生成的字段信息，然后編輯字段及其查詢方式，完成數(shù)據(jù)的列表顯示及詳細(xì)查詢功能。

第3步：流程定義。對(duì)于業(yè)務(wù)流程，采用基于工作流的審批方式，配置流程信息，如圖6所示，通過唯一性的“流程定義編號(hào)”與表單、列表關(guān)聯(lián)起來。它提供了流程定義需要的元素，支持描繪各種流程圖，并定義各個(gè)環(huán)節(jié)的基本信息、執(zhí)行審批人，控制操作及訪問權(quán)限等。

第4步：菜單定義。采用樹形結(jié)構(gòu)將各個(gè)子系統(tǒng)、子模塊分類，并將列表的URL作為“頁面地址”，實(shí)現(xiàn)菜單與功能的綁定。

第5步：權(quán)限分配。支持菜單權(quán)限分配和授權(quán)對(duì)象的定義及權(quán)限分配，實(shí)現(xiàn)了對(duì)每一個(gè)菜單、每一個(gè)模塊的菜單權(quán)限、數(shù)據(jù)權(quán)限、按鈕權(quán)限的靈活化、精確管理，不同角色、不同身份的用戶允許訪問的菜單不同、數(shù)據(jù)不同，允許操作的增加、修改、刪除等功能按鈕不同。

另外，系統(tǒng)中有一部分業(yè)務(wù)流程比較復(fù)雜，簡單的配置往往不能實(shí)現(xiàn)其功能，這時(shí)就需要利用MiniUI實(shí)現(xiàn)前后臺(tái)的配合，后臺(tái)代碼實(shí)現(xiàn)具體功能，MiniUI配置前臺(tái)頁面，并通過特定的URL進(jìn)行關(guān)聯(lián)。例如，備案注冊申請(qǐng)流程增加了復(fù)雜功能后，需要在流程定義中修改它的“表單URL”信息，通過URL:“/ScientificResearch/BiddingManage/Registration-Apply/PageView?TmplCode=RegistrationApplyTable”，調(diào)用后臺(tái)代碼，實(shí)現(xiàn)復(fù)雜業(yè)務(wù)流程的開發(fā)。

4 系統(tǒng)測試與應(yīng)用

4.1 運(yùn)行環(huán)境測試

基于MVC+MiniUI框架設(shè)計(jì)的綜合管理信息系統(tǒng)，支持win7及以上操作系統(tǒng)，完美適用于內(nèi)核為IE10及以上版本的多種瀏覽器。其中，在Windows7操作系統(tǒng)中使用IE11瀏覽器對(duì)新系統(tǒng)進(jìn)行測試，發(fā)現(xiàn)新系統(tǒng)的兼容性、穩(wěn)定性得到了全面的提升，無論是系統(tǒng)數(shù)據(jù)的查詢、訪問還是系統(tǒng)插件的使用，都沒有出現(xiàn)過延遲、卡頓、報(bào)錯(cuò)等異常情況，特別是在舊平臺(tái)中用戶體驗(yàn)不佳的文檔在線瀏覽、編輯控件和文件上傳控件，在新系統(tǒng)中都能更好地兼容。

圖7 申請(qǐng)流程的表單頁面Fig.7 Form page of starting a workflow

4.2 功能應(yīng)用測試

繼續(xù)以備案注冊申請(qǐng)流程為例，對(duì)系統(tǒng)功能的實(shí)際應(yīng)用進(jìn)行測試。流程的申請(qǐng)表單頁面如圖7所示，此頁面是完全通過本文3.3節(jié)中的流程定義配置生成的，它包含了子表、日期控件、選人控件、彈出選擇框、附件上傳框等多種常用控件，能夠滿足業(yè)務(wù)流程的各種需求。流程采用的層級(jí)審批的方式，并且在流程定義中指定了下一環(huán)節(jié)執(zhí)行的范圍，使流程操作變得更方便，使流程審批變得更快捷。該流程有一個(gè)功能需求：在審批通過后，將申請(qǐng)的備案注冊單位信息自動(dòng)更新到另一個(gè)專門維護(hù)備案注冊信息的列表中去。為了實(shí)現(xiàn)這個(gè)功能，需要在后臺(tái)“OnFlowEnd”方法中重寫實(shí)現(xiàn)代碼，然后系統(tǒng)在流程結(jié)束時(shí)會(huì)自動(dòng)調(diào)用這個(gè)方法，代碼路徑在流程定義的“表單URL”信息中，該方法就是將“備案注冊單位名稱”、“備案注冊單位網(wǎng)址”等有用信息讀取出來，并保存到另一個(gè)表中。

不難發(fā)現(xiàn)，對(duì)于這個(gè)審批流程，只有一個(gè)功能需要應(yīng)用后臺(tái)代碼實(shí)現(xiàn)，其他所有的開發(fā)工作都可以通過配置生成。相較于舊系統(tǒng)，MVC+MiniUI模式的系統(tǒng)開發(fā)大大簡化了開發(fā)過程，縮短了開發(fā)周期；并且，采用MiniUI配置的前端顯示界面更加整潔、美觀，控件不僅更加多樣化，而且在實(shí)際應(yīng)用過程中表現(xiàn)得更加穩(wěn)定。

5 結(jié) 語

目前主流的OA系統(tǒng)都是基于MVC框架設(shè)計(jì)實(shí)現(xiàn)，它的特點(diǎn)就是將視圖層與業(yè)務(wù)層分離，具有耦合性低、重用性高、部署快、可維護(hù)性高等特點(diǎn)。但是，傳統(tǒng)的視圖層大多采用JavaScript、.aspx等腳本語言實(shí)現(xiàn)，面對(duì)復(fù)雜的功能開發(fā)，往往需要花費(fèi)大部分的時(shí)間設(shè)計(jì)前臺(tái)界面，導(dǎo)致開發(fā)人員疲于處理大量繁瑣的UI底層細(xì)節(jié)，無形中延遲了開發(fā)周期，增加了開發(fā)成本。MiniUI作為一款優(yōu)秀的前端Web框架，能夠很好地替代其他腳本語言，快速開發(fā)前臺(tái)界面。 MiniUI提供了豐富、強(qiáng)大的控件庫，可以通過配置而非編碼的方式輕松實(shí)現(xiàn)前臺(tái)界面的功能需求，讓開發(fā)人員能夠?qū)⒕ν度氲綇?fù)雜業(yè)務(wù)的開發(fā)中去，減少了前臺(tái)代碼量，提高了開發(fā)效率。所以，采用MiniUI框架設(shè)計(jì)的綜合管理信息系統(tǒng)不僅縮短了開發(fā)周期、降低了開發(fā)成本，而且解決了前臺(tái)布局錯(cuò)亂、響應(yīng)超時(shí)、瀏覽器不兼容等問題，能夠帶來更加高效、便捷的辦公體驗(yàn)，提高辦公效率。