遠程試驗網絡監控系統的開發及應用

楊暉 楊鍵 黃海波 史裕華 彭東紅

楊? 暉

畢業于上海交通大學，碩士學位。現就職于東風商用車技術中心，任高級工程師，主要研究方向：新能源、智能網聯、車型開發等，曾三次獲得東風公司級科技進步獎，獲多項國家發明專利，已發表論文數篇。

摘? 要：本文所述系統是基于visualStudio軟件開發環境下，由Sql-Server數據庫管理系統和C#編程語言，采用BS架構建立的基于WEB的試驗數據管理系統。使用該管理系統通過WEB瀏覽器實現試驗數據的異地監控及處理分析，具有設備成本低、系統擴容、升級簡便等優點。

關鍵詞：B/S架構;試驗數據;管理系統;Ajax

中圖分類號： U467.5? ? ? 文獻標識碼：A? ? ? 文章編號：1005-2550（2022）03-0044-07

The Development and Application of the WEB Based Test-data Management System

YANG Hui1， YANG Jian1， HUANG Hai-bo2， SHI Yu-hua1， PENG Dong-hong1

（ 1.Dongfeng Commercial Vehicle Technical Center， Wuhan 430056， China;

2. DongFeng Motor Corporation Technical Center， Wuhan 430056， China ）

Abstract： This article describe the WEB based test-data management system which is programmed by the Sql-Server and C# language then established by the B/S structure. It perfoms under VisualStudio environment. In the system WEB browser is used to achieve remote monitoring， processing， analysis of the test data. The new system is convenient in expansion and upgrade. It also reduce the equipment cost.

Key Words： B/S structure; analysis of the test data; management system; Ajax

在樣機試驗過程中往往積累了大量的試驗數據，這些試驗數據的存儲、處理及分析需要用到專業的試驗數據管理系統。以往企業常用的試驗數據管理系統大多使用C/S（Client/Server）架構，即通過Delphi編寫的前端客戶端應用程序，訪問后臺SQL Server數據庫服務器，通過內建的局域網絡對試驗數據進行維護和瀏覽。用戶查詢或處理數據，必須使用專用的客戶端軟件，操作也僅限于某地局域網內，無法實現異地數據交換和遠程信息共享。該系統占用大量計算機資源，且升級、擴容空間有限，無法滿足日益增長的試驗數據處理需求。針對以上不足，我們基于“網絡實驗室”構想相應開發了基于Internet采用B/S結構的遠程試驗數據庫管理系統。新系統成本低廉、操作簡便并可實現實驗數據的異地操作[1-5]。

B/S（Browser/ Server）架構，即3-tier結構，它采用Internet瀏覽器作為用戶工作界面，在客戶端（Browser）中完成少量數據查訊、顯示數據、曲線顯示及狀態報警等事務邏輯，大部分事務邏輯則在后臺服務器端（Server）中進行。采用這種架構的軟件可以在因特網上任何一臺客戶端實現訪問操作而無需安裝專用客戶端程序，有著C/S結構軟件無法比擬的優勢。本試驗網絡監控系統就采用了如圖1的B/S軟件架構。它將主事程序全部部署在后臺網絡服務器上，用戶則只需打開Internet瀏覽器，輸入服務器Ip地址登陸后臺服務器，向數據庫系統發送信息檢索申請、接收目標數據，以網頁的形式顯示在客戶端瀏覽器上。為了提高試驗數據管理系統對數據庫的訪問效率，該系統將安裝在已有Windows Server系統軟件的服務器上，并與Sqlserver數據庫服務器處于同一局域網內。

該軟件主要包括試驗信息管理、試驗數據監控以及用戶信息管理等功能模塊。為避免每秒一次整頁數據刷新造成用戶的視覺疲勞，所有的試驗監控頁面均采用了Ajax（JavaScript & XML）技術，以實現網頁局部刷新。由于用戶是通過IE瀏覽器進入管理程序來訪問后臺的數據庫服務器，為確保網絡安全性，本操作軟件中還增加了用戶登錄驗證模塊。此外，本軟件還增加了日志功能模塊以方便試驗信息的交流。

本項目的程序構架采用了微軟的ASP.NET技術。它是一種建立在通用語言上的程序構架，以微軟.net為平臺的動態服務器頁面（Active Server Pages）技術，可在一臺服務器上運行由許多Internet網絡信息服務器（Internet Information Server）執行的服務器端程序技術，通過一臺Web服務器可建立強大的Web應用程序。開發環境及編程語言則用Visual Studio和C#。前者是微軟最新開發的.NET框架下的最新編程集成開發環境（Intergrated Development Environment），支持VB，VC++，C#，Visual J#等四種開發語言，廣泛用于Windows平臺的桌面程序、網絡程序、移動設備程序等各領域。

本系統開發硬件是安裝了Internet信息服務器的微機，開發軟件則采用Visual Studio C# 。編程結束后，只需將其剪切到原有的試驗數據庫服務器上即可。由于軟件開發中一直維持著對原有數據庫無縫對接，移植后的操作系統依然可全面操控原有試驗數據庫。下面就該系統的具體開發過程進行詳細介紹。

1? ? 配置數據庫

首先進入Visual Studio的服務器資源管理器窗口，并點擊“數據連接”命令以創建數據庫連接，進入“添加連接”窗口面板后，在服務器名的文本框內輸入原試驗數據庫所在服務器的IP地址，再在登錄服務器方式上選“使用SqlServer身份驗證”，輸入數據庫的用戶名和密碼。如果IP地址和用戶名密碼都正確，就可選擇需要進行管理的數據庫并測試連接。如圖2所示，當連接成功后試驗數據庫的映射就被添加到該服務器資源管理器的列表中示，即可進一步對試驗數據進行顯示和操作了。

接著點擊“創建項目”命令創建一個創建Web項目并通過點擊右鍵，為其添加“appcode”，“jslib”，“resource”三個文件夾，分別用于存放公共類，javascrip代碼和其它一些資源文件。其中，Extjs類庫和Css樣式表放入jslib文件夾下。

2? ? 創建公共類

在一些大型軟件開發項目中有一些程序代碼是須要重復使用的，例如：連接數據庫、各種數據庫操作以及一些常用的邏輯處理等等。為了更好的管理和使用代碼，需將一些常用代碼按邏輯封裝成為一個或多個類，通過調用這些類中的方法來完成對事務的處理。這些自行創建且經常調用的類為被稱為公共類。

本項目中一共創建了4個公共類：

1. DBConnection String.cs——用于定義數據庫連接的字符串和數據庫操作所要使用的SQL查訊語句;2. DBConnection.cs——用于所有對后臺數據庫的操作，包括數據庫連接，各數據表中數據的增刪改查等操作方法;3. MD5Convert.cs——用于將用戶提交的密碼轉換成MD5轉碼的數字簽名字符串;4. TransString.cs——用于將從試驗數據中提出的參數代碼轉換成中文字符串。

3? ? 系統登錄前臺頁面的設計

首先，在項目解決方案中創建用于登錄的logon.html網頁;接著，在登錄頁面代碼中通過以下代碼加載Etjs3.0所有類庫和樣式表;最后在項目的jslib文件夾下新建logonExtjs.js文件，并打開logonExtjs.js文件窗口，手工編寫全部代碼。

<！--引入Extjs樣式表 -->

<link rel="stylesheet" type="text/css" href="jscriprlib/ext-3.0.0/resources/css/ext-all.css"/>

<！--引入Extjs基本庫 -->

<！--引入Extjs所有庫 -->

<！--引入Extjs自定義js文件-->

4? ? 登錄時后臺驗證功能模塊的設計

logon.aspx就是用于進行用戶名密碼驗證的服務器端程序，在本程序中添加一個名為logon的aspx頁面。在它的后臺代碼文件logon.aspx.cs中編寫邏輯代碼。這些代碼包括連接數據庫，將Ajax提交的用戶名和經MD5轉碼后的密碼字符串與數據庫users表中的用戶信息相比較等等。然后對比較結果進行判斷，如果表中存在相同信息，表示用戶登錄成功，將用戶名和用戶的權限字符串保存到session（會話）中的“username”和“purview”變量中，然后就輸出“Success”，否則輸出“failed”。這個輸出信息會隨Ajax的回調函數進入data變量中，并在函數體內判斷當用戶名和密碼驗證成功時轉向主頁面;當驗證失敗時彈出Extjs錯誤信息提示框。

本系統用戶操作權限的等級由系統管理員設定，并連同用戶信息一起保存在數據庫中。用戶在登錄頁面中通過輸入用戶名和密碼登錄可進入系統，經服務器程序與數據庫查訊驗證即決定訪問權限。用戶登錄驗證時輸入的密碼需要由程序轉為MD5的加密轉碼才能與數據庫中的MD5轉碼字符串相比較。用戶最高權限的是系統管理員，可通過IE瀏覽器管理用戶成員及數據。中級權限的是一般用戶，他們通過IE瀏覽器可具有一般的添加，修改參數的功能但無權刪除數據。而普通用戶則只有瀏覽的權限。

向后臺數據庫進行用戶信息提交時需要特殊的代碼，本程序采用的是Ext.Ajax（{…}）方式代碼，它有幾個必填參數： 1、url：logon.aspx—表示向服務器中名為”logon.aspx”的程序發送請求;2、Paras： {uname：name，Paw：password }——表示向服務器提交登錄時用戶輸入的用戶名和密碼值;3、function（data）{…}——表示請求完成后要執行的回調函數，其中data變量是用來接收服務器端程序發回數據的。

5? ? 母版頁的設計

為了統一程序界面風格，本程序采用aspx母版頁設計，即將母版頁面格式應用于所有網頁。母版頁（擴展名是.master）它的使用跟普通的頁面一樣，既可以通過可視化的設計，也可以通過編寫后置代碼設計。與普通頁面不一樣的是，它可以包含ContentPlaceHolder控件。ContentPlaceHolder控件就是可以顯示內容頁面的區域。其代碼如下：

<%@ Master Language="C#" Auto EventWireup= "true" CodeFile="Master

Page.? master.cs" Inherits="MasterPage" %>

......

<form id="form1" runat="server">

<div>

<asp：contentplaceholder id="ContentPlaceHolder1"? ?runat="server">

</asp：contentplaceholder>

</div>

</form>

......

在項目中創建DBmaster.Master母版頁，在母版頁前臺頁面設計中加入主頁面標題和頁腳，站點導航列表等元素。同時在標題下面加入兩個Label標簽，一個用于顯示用戶名稱，一個用于顯示用戶權限。

在DBmaster. Master.cs的后臺代碼頁中編寫邏輯代碼，主要內容是驗證session（會話）中的"username"和"purview"變量內容是否為空：如果用戶是正常登錄進入帶母版頁的頁面，則session（會話）中的"username"和"purview"變量中一定有用戶名和權限等級的值，然后將用戶名和權限等級用兩個Label標簽顯示在頁面上;如果用戶是沒經登錄頁面直接進入其它頁面的，session（會話）中的"username" 和"purview" 變量一定為空，則頁面轉向到用戶登錄頁面，強制用戶進行登錄。以上是為了提高網絡安全性，杜絕未登錄就進入其它頁面。

完成母版頁設計后，在其它功能模塊頁面的創建過程中都鉤選“引入母版面”選項，將其引入其它試驗數據監控系統功能模塊的詳細設計中。本監控系統大致包括如圖3所示的幾個功能模塊，其中，用戶登陸驗證功能模塊的構建已完成，下面開始構建剩下幾個模塊。

6? ? 主頁面和試驗信息交流模塊的設計

首先在項目中創建master.aspx頁面，勾選引入母版面對話框，加入已有的母版頁。然后，在內容頁面板中加入各功能頁的超鏈接，同時引入Extjs類庫。此外，還要用Extjs代碼創建一個試驗日志信息顯示面板，用于添加和顯示試驗室的試驗信息。具體操作如下：

為實現以上與后臺數據庫交互功能，須要創建兩個.aspx頁面：一個是showTestLog，aspx，用于在主頁面加載后訪問數據庫，并將試驗信息表的最后10行數據取出然后發送到主頁信息面板。另一個是insertTestlog.aspx，用于將用戶要添加的信息和當前系統時間生成的字符串插入數據庫中的TestLog表。最終生成的主頁面如圖4：

試驗人員可將每天試驗信息發布到圖右側的試驗日志面板上，通過它試驗人員及開發人員可交流試驗信息、提交試驗申請。

7? ? 試驗信息管路模塊及子功能頁面的設計

試驗信息管理主要包括用戶信息管理和試驗信息管理兩部分，分布在不同的子功能頁面中，對它們可以執行顯示、修改和插入操作。通過在ASP.net中使用數據源控件和DataGridView數據表控件，該操作很方便地實現了上述功能。下面以試驗參數資料頁為例闡述各子功能頁的編寫方法。

先在項目中創建testparas.aspx，并引入母版頁進入頁面設計模式。接著，從VS工具欄中拖入DataSource和DataGridView控件。其中，DataSource是一個數據源控件，它可從數據源獲得數據并應用到連接的控件上，而當需編輯被連接控件時它又起到更新數據源的作用。我們在DataSource上配置數據源到后臺數據庫中的testParameter表，在SQL命令欄中選擇可執行“查訊，編輯，插入，刪除”等命令選項，這樣DataSource就可以對數據庫進行增、刪、改、查操作。而DataGridView則是一個數據顯示控件。當數據源配置好后，將數據表DataGridView的數據源屬性設置成已配置好的數據源，這樣DataGridView就可顯示試驗參數表中的所有數據。如果想要讓數據表實現數據分面功能可將其屬性中autopagin設置為true，并設置分頁的顯示行數。而要實現對數據表的編輯和刪除操作時，只須在命令按鈕屬性中添加“選擇”、“編輯”、“刪除”按鈕即可。

這樣一個具有顯示、編輯和刪除功能的試驗參數數據表就創建完成了，其它數據表創建方式基本類似。其中，注意的是用戶信息查訊管理數據表，它專為系統管理員提供，是將數據庫中的一些用戶基本數據以表格的型式顯示在用戶的IE瀏覽器上，管理員通過它可實現遠程用戶操作信息和使用權限的管理。用戶也可用其修改自己的登陸密碼。

8? ? 試驗數據實時監控功能模塊的設計

為了簡化用戶對試驗情況遠程監控的操作，本系統還構建了試驗監控面板，用戶直接實施各試驗結果的遠程監控及編輯，編輯后的信息經服務器程序被保存到數據庫。實時監控頁面主要包括實時數據顯示面板和參數列表選擇面板，前者用于實時動態顯示數據，而后者則是試驗參數的選擇顯示列表。當進入監控頁面時，窗口首先彈出的是試驗參數列表。用戶在該列表中勾選需調取的試驗參數項，相關試驗數據就會顯示在數據顯示面板中。

1）連接數據庫，從RealData表中取出本試驗室的最后一條試驗數據。由于試驗數據是一個由各試驗參數連在一起的字符串，需將這個字符串分割成一個由“參數名稱”+“參數值”的字符串數組。例如：[[TWI=21.05]，[TWU=22.9]];

2）掃描參數列表中的勾選狀態，將數據數組中與勾選參數名相同的鍵值字符串提出，組成新的數組。把參數名稱的英文字符串轉換成為中文字符串，然后遍歷數組，將中文參數名用標簽控件（Label）顯示，數據用文本框（TextBox）顯示;

3）創建Timer控件，這是ASP.net中一個Ajax定時器控件，可以一定間隔時間重復執行特定的代碼。我們將定時器控件的間隔時間定為一秒執行一次，并重復以上代碼使得前臺窗體頁面呈現每隔一秒局部刷新一次試驗數據的動態實時監控效果。

9? ? 試驗數據曲線實時監控功能模塊的設計

為了便于直觀體現試驗參數的數值變化趨勢，本系統增了變化趨勢線顯示面板。不僅可以動態生成最新數值變化曲線圖，還可顯示歷史數據變化趨勢圖。

本功能模塊的技術難點在于如何做到圖表數值的實時提取和動態刷新。因為一條曲線一般由20個時點以上參數值描繪而成，每一時點都需要從有40—70個參數值中選取，并且要實現每秒一次的動態圖表刷新，這導致從前臺頁面到后臺數據庫間的數據更新量是相當大的。為此，本系統引入了另一個Ajax開源框架jQuery，它是一個快速的、簡潔的javaScript庫，便于用戶處理HTML documents、events，實現動畫效果，并提供AJAX交互。本系統中的趨勢曲線圖及即采用以jQuery為基礎開發的開源圖表類庫flot，所有試驗室的曲線前臺頁面均用html+jquery+Extjs開發，后臺則使用.aspx從數據庫取數據并發送至前臺頁面。

本系統首先為曲線監控頁加入如圖5的Extjs 的窗體面板效果。該頁面由一個窗體加四個面板構成，左邊的導航欄面板是控制頁面工作方式的面板，其中有一個“實時采集選擇”勾選項。當此項被勾選時，右邊的圖表面板中顯示的是最新試驗數據曲線;否則，圖表面板中顯示的是試驗數據動態歷史回溯曲線。右邊除了圖表面板外還有參數面板，其為參數列表主要用于選取需要出現在圖表面板中的參數類別。

在后臺程序中還創建了兩個.aspxt頁面，一個是RealChartData.aspx，另一個是HistoryChartData.aspx，前者用于從數據庫中取得最新的20條試驗數據記錄。后者則從實驗起始點開始依次向后取20條試驗數據。

{{“第1點中的所有參數的鍵值對”}，{“第2點中的所有參數的鍵值對”}，…{“第20點中的所有參數的鍵值對”}}。

至此，基于S/B架構的遠程試驗數據監控系統編制完成。

10? ? 應用結論

該系統部署在原有的某發動機試驗數據服務器上，并用VS進行發布。近一個月的試運行證明了新系統不但滿足原系統各項性能技術指標，而且比原系統功能更強大、訪問效率更高、擴展性更強。

針對相關專家對數據安全性疑慮，我們對應用系統的數據登錄頁面進行了改進：用戶在登錄頁面輸入用戶名和密碼后，系統后臺將向登錄用戶手機發送驗證碼（驗證碼有效期為90秒），并在登錄頁面彈出驗證輸入窗口，當登錄用戶90秒內在彈出窗口輸入正確的手機驗證碼后，才能實現登錄成功。

原發動機試驗數據管理系統采用C/S框架只能局限在局域網內運行，它主要通過如圖6所示的幾個數據包處理程序，將試驗數據收集、整理并保存到一些文本文件中： RecvToFile.exe負責接收來自試驗臺架的數據并將其保存到文本文件中;DoPksToDB.ex負責將文本文件中數據進行處理轉換插入到數據庫中。用戶只能通過局域網內的客戶端應用程序登陸該系統實現數據檢索、查詢及瀏覽操作，設備成本高、擴容性差、不能進行遠程數據共享，而且功能單一、操作繁瑣。

與原有試驗數據管理系統相比，新系統采用B/S架構體系使得數據庫服務器智能化、保證了并發性，系統穩定、性能強大、程序訪問效率更高，擁有更高技術含量適用于用戶量大的中大型網絡應用程序。通過將服務器IP地址的開放，實現了用戶在異地監控和管理，擴大了用戶群;通過服務器端升級即可讓客戶端瀏覽最新版本，軟件擴展與升級不會引響用戶對程序的訪問，降低了系統維護與升級的成本;新系統對客戶端的設備要求很低——只需安裝了IE瀏覽器的普通微機，減輕了客戶端使用成本;業務表達通過簡單的瀏覽器來實現，操作界面簡單易學;新系統可以方便地設置數據管理訪問權限，數據安全性高于原有系統。

參考文獻：

[1]余金山，陳建榮，王濤. C#2008開發入行真功夫[M].電子工業出版社，2009：15-18，31.

[2]Nicholas C.Zakas[美]著.李松峰，曹力量，譯. JavaScript高級程序設計（第3版）[M].人民郵電出版社，2012：10-700.

[3]Tim Wright[美]著.愛飛翔，譯. JavaScript應用開發實踐指南[M].機械工業出版社，2013： 12-300.

[4]郭興峰，張露，劉文昌. ASP.NET 3.5動態網站開發基礎教程[M].清華大學出版社，2010：15-350.

[5]黃海燕，肖建華，閻東林. 汽車發動機試驗學教程（第2版）[M].清華大學出版社，2016：42-51.