基于Ext JS＆TP的高?？蒲衅脚_設(shè)計與實現(xiàn)

陳員義，張節(jié)蘭

（江西師范高等專科學(xué)校數(shù)學(xué)與信息技術(shù)學(xué)院，江西鷹潭335000）

0 引 言

隨著“互聯(lián)網(wǎng)+”的提出，各高校都在加速建設(shè)智慧校園，而在高校日常管理工作中，教學(xué)與科研兩者皆處在重要位置，且緊密聯(lián)系，相輔相成，互相促進(jìn)。由于高等院校從事科研的機(jī)構(gòu)及人員眾多且涉及學(xué)科領(lǐng)域廣泛，科研項目類型復(fù)雜等因素，造成了科研立項、科研成果、科研經(jīng)費(fèi)、科研流程監(jiān)督等相關(guān)管理工作量大、復(fù)雜化程度高，處理效率亟待進(jìn)一步優(yōu)化與改善。在智慧校園的籌建過程中，為了能更好地服務(wù)于高?？蒲泄ぷ?，必須構(gòu)建一套行之有效的管理機(jī)制，進(jìn)而打造全方位、信息化的運(yùn)作體系，為此研發(fā)建設(shè)一個數(shù)字化、智能化、多終端、高效、可靠的高?？蒲衅脚_已勢在必行。

1 系統(tǒng)總體設(shè)計

在搭建智慧校園過程中，為了避免重復(fù)建設(shè)，科研平臺的研發(fā)即是嘗試集成整合現(xiàn)有的一些信息平臺，同時考慮對接其它第三方平臺，并使用統(tǒng)一的數(shù)據(jù)標(biāo)準(zhǔn)，使得信息數(shù)據(jù)可以無障礙地在各平臺間流動，而且提供了單點登錄，節(jié)省了不必要的維修開銷。系統(tǒng)技術(shù)與功能模塊總體架構(gòu)如圖1所示。

科研管理平臺主要包括：工作平臺、業(yè)務(wù)管理、決策評估、資源管理、統(tǒng)計報表、門戶網(wǎng)站、流程模塊、系統(tǒng)設(shè)置等模塊。針對該平臺中各主題模塊的功能設(shè)計可做如下闡釋與解析。

（1）工作平臺模塊。主要實現(xiàn)了各種快捷入口、工作郵件、通知公告、工作私信、日程、項目預(yù)警機(jī)制等功能。

（2）業(yè)務(wù)管理模塊。這是科研平臺的核心業(yè)務(wù)邏輯功能，主要實現(xiàn)全局總覽、科研隊伍、科研平臺、分類成果管理、科研經(jīng)費(fèi)管理、項目進(jìn)度管理、生成材料等功能。

（3）決策評估模塊。主要實現(xiàn)科研報表、綜合查詢、科研考核、科研獎勵等功能。

（4）資源管理模塊。主要實現(xiàn)科研工作者上傳的各類文檔資料的管理功能。

（5）流程模塊。主要實現(xiàn)科研項目從立項、直至結(jié)題的整個業(yè)務(wù)邏輯，并可自定義業(yè)務(wù)流程等功能。

（6）系統(tǒng)設(shè)置模塊。主要實現(xiàn)系統(tǒng)配置、郵件管理、日志管理、數(shù)據(jù)庫備份與還原、數(shù)據(jù)導(dǎo)入導(dǎo)出、用戶權(quán)限管理、第三方工具及平臺集成等功能。

2 系統(tǒng)關(guān)鍵技術(shù)

從技術(shù)架構(gòu)來說，研究中使用Apache作為Web服務(wù)器，后臺使用ThinkPHP 5.1框架和MySQL數(shù)據(jù)庫基礎(chǔ)，并基于B／S體系使用RESTful架構(gòu)設(shè)計，而且遵循統(tǒng)一的數(shù)據(jù)交互標(biāo)準(zhǔn)JSON。Web前端使用Ext JS 6.6框架，配備了各種豐富的UI組件、響應(yīng)式布局和優(yōu)秀的交互設(shè)計，具有良好用戶體驗，還可與MVVM架構(gòu)模式相結(jié)合，而在MVVM模型中，支持?jǐn)?shù)據(jù)單向與雙向綁定，因而能夠開發(fā)出既適用于桌面、又適合移動設(shè)備的Web通用應(yīng)用程序，以符合響應(yīng)式布局來實現(xiàn)不同平臺的無縫開發(fā)的這種新潮流。對此可做剖析論述如下。

2.1 ThinkPHP 5.1 框架技術(shù)

ThinkPHP是一個開源免費(fèi)、快速、簡單的面向?qū)ο蟮妮p量級PHP開發(fā)框架，是為了敏捷Web應(yīng)用開發(fā)和簡化企業(yè)應(yīng)用開發(fā)而推出的，一直秉承簡潔實用的設(shè)計原則，在保持出色的性能和至簡代碼的同時，也注重易用性［1-3］。

在ThinkPHP研發(fā)中，會用到MVC及流行的MVVM架構(gòu)模式，以及多模塊、依賴注入、插件、鉤子與行為、Fa?ade、中間件等技術(shù)。其中，中間件主要用于攔截或過濾應(yīng)用的HTTP請求并用來定制業(yè)務(wù)邏輯處理。

特別地，ThinkPHP設(shè)計了便捷的數(shù)據(jù)操縱方法和豐富的路由功能等其它可選項，并允許設(shè)置RESTFul請求的資源路由，完美地支持JSON數(shù)據(jù)格式。同時，ThinkPHP具有一個完整的基于規(guī)則的用戶角色訪問控制的類庫Auth，可以比較容易實現(xiàn)用戶自定義的規(guī)則，更符合企業(yè)實際業(yè)務(wù)的需求。

2.2 Ext JS 6.6 技術(shù)

自Ext JS 5起就開始支持MVVM架構(gòu)模式。MVVM的主要作用在于簡化事件驅(qū)動編程的用戶UI開發(fā)，而MVVM與MVC之間的關(guān)鍵區(qū)別就是MVVM具有視圖的抽象，稱為 ViewModel。ViewModel使用稱為“數(shù)據(jù)綁定”的技術(shù)協(xié)調(diào)Model的數(shù)據(jù)和View的數(shù)據(jù)表示之間的變化［4-6］。

在開發(fā)Web應(yīng)用程序時，相比Ext JS 4的MVC架構(gòu)模式具體表現(xiàn)為：MVC模式主要問題是控制器的層職責(zé)過大，代碼過多導(dǎo)致加載相當(dāng)困難。通常解決辦法是一次性地加載所有的控制器，而一經(jīng)加載就無法銷毀，比較耗費(fèi)資源。而在MVVM模式中，是將控制器與視圖綁定在一起，其生命周期則將伴生在視圖的生命周期內(nèi)，因此控制器會跟隨視圖的創(chuàng)建或銷毀而同步創(chuàng)建或銷毀［7-9］，從而使得Ext JS更易于構(gòu)建大中型Web應(yīng)用程序的前端。

Ext JS 6.6提供各種豐富的UI組件，特別是多種數(shù)據(jù)表格控件、數(shù)據(jù)表單，能適應(yīng)大多數(shù)的數(shù)據(jù)處理開發(fā)需求，支持Ajax技術(shù)與JSON數(shù)據(jù)格式。

2.3 JSON數(shù)據(jù)交換格式與Ajax技術(shù)

考慮到科研平臺設(shè)計為單頁面應(yīng)用程序（SAP），因而將界面和數(shù)據(jù)分離，通過Ajax技術(shù)獲取后臺數(shù)據(jù)。該數(shù)據(jù)的格式通常有3種：純文本、XML、JSON。Ajax技術(shù)可以異步更新局部頁面，使得服務(wù)器響應(yīng)更及時，有非常好的用戶體驗等優(yōu)點［10］。 同時，分析后可知，ThinkPHP 與 Ext JS都支持JSON數(shù)據(jù)交換格式，所以Web前端和服務(wù)器端的數(shù)據(jù)交換格式也采用了JSON格式，JSON是一種輕量級的數(shù)據(jù)交換格式，設(shè)計性能優(yōu)良，易于網(wǎng)絡(luò)傳輸，方便程序解析與生成。

3 系統(tǒng)特色功能分析與設(shè)計

高?？蒲衅脚_了采用PHP語言并在ThinkPHP 5.1框架上開發(fā)。設(shè)計時采用Visual Studio Code為開發(fā)工具，MySQL Community Server為數(shù)據(jù)庫，Apache為Web服務(wù)器。結(jié)合ThinkPHP與Ext JS框架，并基于Ext JS 6.6官方自帶的簡潔大氣風(fēng)格、響應(yīng)式設(shè)計后臺模板admin-dash board，對高校科研平臺進(jìn)行了單頁面應(yīng)用SAP、模塊化、組件化、層次化設(shè)計與開發(fā)。研究內(nèi)容詳見如下。

3.1 用戶授權(quán)

在企業(yè)級Web應(yīng)用中，用戶的認(rèn)證與授權(quán)是一個重要的部分。在傳統(tǒng)的解決方案里，使用了技術(shù)已臻至成熟的基于角色的權(quán)限訪問控制RBAC。但隨著企業(yè)業(yè)務(wù)復(fù)雜度的增加，角色與實際的邏輯業(yè)務(wù)的關(guān)系也趨于多樣化，權(quán)限的粒度更小。而該種研究方案卻是基于節(jié)點進(jìn)行認(rèn)證，若要達(dá)到控制的粒度比節(jié)點更小，研發(fā)時的難度和復(fù)雜程度皆會上升，故而無法適應(yīng)這種趨勢的變化。

本系統(tǒng)使用基于規(guī)則的權(quán)限訪問控制機(jī)制來優(yōu)化用戶的權(quán)限管理，用戶可自定義規(guī)則，控制粒度更細(xì)、更靈活。通過擴(kuò)展ThinkPHP的Auth類實現(xiàn)更復(fù)雜的基于規(guī)則的認(rèn)證。其數(shù)據(jù)庫表主要有：module（模塊表）、menu（菜單表）、rule（規(guī)則表）、group（用戶組表）、group_access（用戶組明細(xì)表），進(jìn)而可得數(shù)據(jù)庫的設(shè)計模型如圖2所示。

圖2 Auth權(quán)限認(rèn)證數(shù)據(jù)庫設(shè)計Fig.2 Authorization authentication database design

設(shè)計中，實現(xiàn)了左側(cè)的動態(tài)二級樹形列表菜單使用了 Ext JS 的 Ext.list.Tree組件，頂部模塊導(dǎo)航使用Ext.view.View組件。這2個組件通過Ajax對象發(fā)送請求，請求服務(wù)器端ThinkPHP框架的Auth類庫接口進(jìn)行認(rèn)證并查詢數(shù)據(jù)庫獲取模塊列表數(shù)據(jù)及菜單數(shù)據(jù)且轉(zhuǎn)換成JSON格式，再從服務(wù)器返回生成的JSON數(shù)據(jù)來實現(xiàn)。

平臺模塊列表的JSON對象格式為：

［｛

id： ’1’，

title： ’工作平臺’，

iconCls： ’x-fa fa-desktop’，

moduleName： ’platform’，

display：true

｝，

…

］。

其中，主要屬性moduleName為模塊名；title為模塊標(biāo)題；display是否在頂部導(dǎo)航顯示。

二級樹形菜單的JSON對象格式為：

［｛

text： ’全局總覽’，

iconCls： ’x-fa fa-desktop’，

rowCls： ’nav-tree-badge’，

viewType： ’datacenter’，

routeId： ’datacenter’，

leaf：true

｝，｛

text： ’分類成果’，

iconCls： ’x-fa fa-leanpub’，

expanded： false， ／／是否展開

selectable： false，／／是否被選中

children： ［｛

text： ’論文’，

iconCls： ’x-fa fa-file-o’，

viewType： ’thesis’，

leaf：true

｝，

…

］

｝

…

］。

其中，viewType為視圖類型，也就是內(nèi)容區(qū)域展示的頁面；routeId為默認(rèn)的路由，為每個模塊的默認(rèn)視圖類型；leaf標(biāo)記該菜單是否有二級菜單；children為子菜單集合。

通過Ext JS的路由管理功能及card布局并動態(tài)創(chuàng)建、銷毀自定義的組件，從而實現(xiàn)單頁面應(yīng)用SAP。

最終，基于規(guī)則的權(quán)限認(rèn)證多模塊二級樹形列表菜單導(dǎo)航的運(yùn)行效果如圖3所示。

圖3 基于規(guī)則的權(quán)限認(rèn)證多模塊二級樹形導(dǎo)航Fig.3 Rule-based privilege authentication multi-module two-level tree navigation

3.2 集成TinyMCE富文本編輯器

富文本編輯器（RichTextEditor）是一種所見所得、可嵌入表單或瀏覽器的內(nèi)容編輯器。主流內(nèi)容編輯器主要有2類，即：Markdown編輯器與Html編輯器。其中，Markdown編輯器是一款專為記錄思想和分享知識的實用性工具。而Html編輯器已經(jīng)是企業(yè)信息化平臺的標(biāo)準(zhǔn)配置，更類似于Microsoft Word的編輯功能，用于富文本內(nèi)容的編輯、發(fā)布與存儲。

雖然Ext JS 6自身也給出了Html編輯器，但是功能太弱，無法滿足科研平臺的公告、通知、郵件、生成材料等內(nèi)容的編輯、存儲與發(fā)布要求，也沒有文檔上傳功能。

故而，在科研平臺開發(fā)過程中，通過比較三大主流 Html編輯器：UEditor、CKEditor、TinyMCE 的綜合性能，再經(jīng)分析后確定將TinyMCE集成在表單中，并定制工具欄與實現(xiàn)可編輯富文本及上傳各種文檔資料功能。最終設(shè)計效果如圖4所示。對此設(shè)計過程可探討分述如下。

圖4 富文本編輯器效果圖Fig.4 Rich text editor effect diagram

首先，在官網(wǎng)下載最新TinyMCE，以及語言包，解壓并把js文件及語言包拷貝到項目文件夾中。修改app.json文件來加載tinymce包，設(shè)計執(zhí)行代碼如下：｛＂path＂：＂resources／tinymce／tinymce.min.js＂｝

其次，自定義Ext JS用戶組件TinyMCE.js：實現(xiàn)基本的文本編輯功能，TinymcePlus.js繼承TinyMCE并通過屬性baseEditConfig來配置TinyMCE及自動加載中文包，同時也一并解決了從媒體庫插入媒體的問題。

4 結(jié)束語

本文針對高校科研平臺的現(xiàn)狀和迫切需要解決的問題及科研工作復(fù)雜化的業(yè)務(wù)邏輯需求，設(shè)計并提出了基于ThinkPHP 5.1與Ext JS 6.6框架的高?？蒲衅脚_。其優(yōu)點表現(xiàn)在：基于框架開發(fā)可縮短工程項目周期，并提高項目的健壯性、安全性和可維護(hù)性，而組件化設(shè)計則能更有效地提高代碼可復(fù)用性等。同時，用戶授權(quán)使用基于規(guī)則認(rèn)證的權(quán)限訪問控制，將能全面、且友好地滿足日趨復(fù)雜化及企業(yè)級業(yè)務(wù)需求。這些技術(shù)特點都為科研平臺的運(yùn)行與后續(xù)升級提供了堅實的基礎(chǔ)。