• <samp id="frm2q"><ins id="frm2q"></ins></samp>
      1. <samp id="frm2q"></samp>
        <progress id="frm2q"><bdo id="frm2q"><strong id="frm2q"></strong></bdo></progress>
        <menuitem id="frm2q"><ins id="frm2q"><u id="frm2q"></u></ins></menuitem>

        <progress id="frm2q"></progress>
      2. 基于ExtJS的V**管理系統的設計與實現

        小編:管理員 105閱讀 2022.09.07

        摘要:基于ExtJS設計了一個V**管理系統,主要應用于配網安全防護系統中的主站加密裝置,可實現對主站加密裝置的參數配置及運行維護。由于應用要求,該管理系統需界面美觀、響應迅速、用戶體驗佳,且穩定性強、易于維護。綜合對比分析多種JS框架,采用了Ajax開發框架——ExtJS作為前端開發框架,同時服務端選用簡潔輕巧的網頁開發語言PHP,再結合輕量級的后臺數據庫,最終實現了一個高效易用的V**管理系統,實現了方便快捷地對主站加密裝置進行管理及維護的目的。

        正文內容:

        0 引 言

        為了優化界面性能并增強競爭力,越來越多的管理系統和網站陸續開始采用Ajax(Asynchronous JavaScript and XML)這種創建交互式網頁的新型技術。ExtJS作為Ajax框架的優秀代表之一,應運而生。如今,一些主流的V**開發商提供的管理系統界面,或多或少都運用了Ajax技術;诖,為滿足客戶需求、提升用戶體驗,配網主站端V**管理系統就采用了基于ExtJS框架的開發路線。

        1 ExtJS概述

        1.1 ExtJS簡介

        ExtJS是一個與后臺技術無關的前端Ajax框架,主要用于創建UI(User Interface用戶界面),也被用來開發RIA(富客戶端)的Web應用。它是由JavaScript、CSS和HTML等技術實現的。

        ExtJS起源于YUI。YUI全稱為Yahoo! User Interface Library,是一個采用JavaScript編寫的工具和控件庫[1]。起先,YUI僅限在Yahoo內部使用。之后,隨著源碼開放,出現了相當多的YUI擴展。這些擴展中,公認較為突出的是Jack Slocum的YUI-Ext。YUI-Ext參考了Java Swing等工具組織可視化組件的機制。

        2006年,Jack發行了最早的YUI-Ext版本。1年后,他正式將Ext更名為ExtJS。經過6年的發展,ExtJS已優化更新到現如今的4.1.1版本,功能日益強大,使用范圍也越來越廣。

        1.2 ExtJS的優勢

        (1)ExtJS開發的Web界面美觀豐富,能很好地滿足用戶體驗,給B/S應用帶來生命力和活力;

        (2)ExtJS可用于.Net、Java、PHP等各種語言開發應用中;

        (3)ExtJS使開發人員從大量的Web UI操作及跨瀏覽器處理工作中脫離出來,使開發變得快速、輕松。

        2 管理系統的設計

        配網主站裝置管理系統用于提供關于主站裝置的可視化系統操作及監測管理主要的V**性能參數。該系統采用的是現今流行的B/S(Browser/Server,即瀏覽器/服務器)開發模式。這種模式相當于基于Web的數據庫瀏覽模式[2]。用戶界面完全通過Web瀏覽器實現,且對客戶端硬件要求不高,具有很強的開放性,易于擴展。

        本文中的主站Web管理系統以PHP的開發框架——CI為骨架,分為客戶端和服務器端兩部分實現?蛻舳思辞芭_界面,采用ExtJS框架構成;服務器端包括全部操作功能的實現,采用網頁語言PHP來完成。

        2.1 系統的總體設計

        系統設計是系統開發的首要步驟。只有預先架構出一個理想的系統模型,系統的開發工作才能正常進行。

        根據用戶的各項需求,通過對系統的整體分析,設計了一個管理系統的總體模塊結構,包括系統狀態、系統管理、V**管理、防火墻策略、日志審計五大功能模塊,如圖1所示。

        (1)系統狀態

        系統狀態功能是向用戶顯示設備的基本信息及運行狀態。此界面對不同權限的操作者均開放。

        (2)系統管理

        該模塊提供系統主要的管理功能。用戶管理功能包括對系統用戶的添加、編輯和刪除等操作。在此,對可登錄的用戶劃分為系統管理員、配置管理員和審計管理員三個級別。系統管理員僅擁有操作系統管理模塊的權限,配置管理員擁有操作V**管理和防火墻策略兩大功能模塊的權限,審計管理員僅擁有操作日志審計模塊的權限。系統時鐘功能則提供對系統時間的調整設置。系統維護功能分為配置、備份、重啟、恢復出廠配置和升級等五項子功能。網絡配置功能實現對主站裝置相關網絡參數的修改配置。

        (3)V**管理

        系統的V**管理是一個主要的功能模塊。該模塊中,用戶須先導出證書請求,完成主站證書上傳,并成功添加終端裝置后才可順利建立隧道和規則。整個V**管理模塊的重點在于策略管理。

        (4)防火墻策略

        防火墻包括安全策略、IP/MAC綁定和攻擊防御三大功能。安全策略功能包括安全策略的新建、編輯和刪除等操作;IP/MAC綁定模塊則實現對某一IP地址和相應MAC的綁定;攻擊防御模塊實現對防火墻配置的按需更改。

        (5)日志審計

        對系統相關日志的統計和查看是V**管理系統不可省略的功能。通常,用戶比較關心通信日志和操作日志。因此,日志審計模塊涵蓋了通信日志審計和操作日志審計兩個子模塊。通信日志記錄IPSEC隧道通信內容;操作日志記錄用戶對系統的一系列操作結果,分為錯誤日志和成功日志兩類。

        2.2 系統的詳細設計

        完成管理系統的整體設計后,要細化系統各個功能模塊。功能細化設計的主要工作是找出各個功能模塊的實現方案和具體每一步實現的目標等。其中,系統登錄和系統操作流程設計為兩個主要環節,F針對系統登錄和系統操作兩大方面進行簡要闡述。

        2.2.1 系統登錄設計

        整個管理系統中,執行所有功能模塊的首要條件是規劃設計出用戶根據權限登錄和操作的所有流程。本管理系統的登錄設計,如圖2所示。

        用戶在登錄界面輸入正確的用戶名和登錄口令,驗證通過后,系統再根據其所賦予的權限進行判斷,給出相應的可操作界面。系統的登錄設計基于ExtJS界面框架、采用Ajax技術進行數據交互。

        2.2.2 系統操作設計

        該管理系統采用典型的三層模型結構,從下到上分別為數據訪問層、業務邏輯層和表示層。其中,數據訪問層規定后臺數據庫的操作方式;業務邏輯層主要負責對用戶輸入數據進行邏輯處理,并關聯到對應的數據訪問層執行操作;表示層主要負責各種用戶系統界面的呈現,包括登錄、系統管理、V**管理、防火墻等界面。

        通過用戶相關操作實現系統的功能模塊,大大提高了系統操作設計的重要性,直接影響后期系統的實現。列出執行流程圖能更清楚直觀地了解常用的系統操作過程,在此以V**策略中隧道添加為例說明,如圖3所示。

        用戶在進行隧道添加操作前,需先對主站加密裝置進行證書初始化。成功導入證書后,再進行裝置添加。切換到節點管理界面,此時呈現給用戶的即表示層。執行添加終端裝置操作時,業務邏輯層驗證處理用戶傳來的數據后,交由底層的數據訪問層進行數據存儲。完成裝置添加后,切換到策略管理界面執行新建隧道操作。對應三層之間的數據流向及交互關系,與添加裝置操作相同。

        3 管理系統的實現

        系統的開發經歷分析、設計后,進入到最后的實現階段。本系統的實現分為物理環境實現、代碼實現及數據庫的實現。

        3.1 物理環境實現

        系統的物理環境是系統能否成功實現的基本保證。對于本系統,物理環境主要包括登錄主機軟硬件環境的配置。首先,需要正確配置主站裝置中的系統軟件;其次,應該考慮計算機配置與應用系統的兼容性,避免出現系統安裝出錯、運行故障等問題;最后,要求連接到主站裝置控制端口的計算機操作系統設定為Windows XP。

        3.2 代碼實現

        系統的全部代碼運行在CI框架上,各功能模塊的代碼又分模塊放置。代碼模塊中的模型(models)包括數據和對數據的操作,采用PHP語言編寫。視圖(views)即用戶界面,選取ExtJS庫中的組件構成,其中內嵌少許PHP代碼?刂破鳎╟ontrollers)即對模型的操作,采用PHP語言編寫。整個系統代碼構成了MVC式的網站組織模式。在所有代碼中,ExtJS構成的用戶視圖與后臺操作基本無關,這就實現了視圖與操作的分離,便于界面的維護。

        由于IE瀏覽器自身對JS腳本解析慢,支持性較差,在此對官方發布的ExtJS代碼進行了裁剪瘦身,并在代碼中采用ExtJS4新增的按需加載機制加載JS文件,同時開啟了Apache服務器的gzip壓縮功能,以提高網頁傳輸速率。如此,這將大大提高ExtJS在IE下的性能,使得網頁響應變快,IE對其兼容性變強。

        3.3 數據庫的實現

        后臺數據庫采用SQLite軟件存儲數據。它是一款輕型的數據庫,占用內存低,支持多種操作系統,且能與PHP代碼融合較好。

        根據系統所包含的幾大功能模塊,共建立了用戶、V**和日志三個數據庫。對于參考界面中的功能細節劃分,三個數據庫中分別建立了相應的數據表,在此不作詳述。

        至此,基于ExtJS的主站裝置管理系統全部實現完成,當然還包括系統測試、運行等后期工作,此處不再一一贅述。

        4 結 語

        通過對前端框架及服務端開發技術的預研分析,結合經典的系統架構,根據系統的功能需求及性能需求,在完成對各功能模塊的具體設計及細化后的操作設計后,最終完成了整個主站加密裝置管理系統的開發實現。本管理系統中,富客戶端框架ExtJS與PHP語言完成了很好的配合,數據交互及用戶體驗良好。但是,由于ExtJS框架源碼占用空間較大,依舊會耗費一定的解析加載時間。因此,后期會考慮對ExtJS實現功能定制,且進一步優化PHP與ExtJS的數據交互機制。

        關聯標簽:
        日本漂亮人妻被强制

      3. <samp id="frm2q"><ins id="frm2q"></ins></samp>
          1. <samp id="frm2q"></samp>
            <progress id="frm2q"><bdo id="frm2q"><strong id="frm2q"></strong></bdo></progress>
            <menuitem id="frm2q"><ins id="frm2q"><u id="frm2q"></u></ins></menuitem>

            <progress id="frm2q"></progress>