袁學(xué)民,王 蘋,田曉暉
(天津大學(xué)管理與經(jīng)濟學(xué)部,天津300072)
目前的信息管理系統(tǒng)開發(fā)類課程由于理論教學(xué)課時較多,幾乎占滿整個課程,實踐部分則由單獨的實驗構(gòu)成,課程理論課的授課時間里,基本是在介紹或鞏固理論知識,實驗課上,重點是在完成實驗,這種理論和實踐的間接分離導(dǎo)致學(xué)生理解吸收差[1]。因此本文的研究內(nèi)容是將理論和實踐相結(jié)合,研究在教學(xué)過程中如何向?qū)W生演示不同開發(fā)架構(gòu)的概念,通過設(shè)計一個簡單的教學(xué)實驗來向?qū)W生演示不同開發(fā)架構(gòu)的概念,同時對比3種開發(fā)架構(gòu)的優(yōu)缺點,給出其在教學(xué)中是否具有深入研究的必要性說明,以期能起到拋磚引玉之功,最終將微軟不同的開發(fā)架構(gòu)應(yīng)用于課程的教改研究中,提升教學(xué)效果。
本文選取WebForm、MVC和Blazor這3個分別代表了逐漸被淘汰、正在流行和新興起來的系統(tǒng)架構(gòu)進行教學(xué)研究。分別探索其設(shè)計模型、架構(gòu)特點,并在對比其特性的基礎(chǔ)上,通過案例進行教學(xué)實驗,分析其異同點,讓學(xué)生進一步思考新時代下不同環(huán)境的主流系統(tǒng)架構(gòu)發(fā)展趨勢,為信息管理系統(tǒng)開發(fā)類課程教學(xué)改革提供思路。
WebForm架構(gòu)沒有固定的結(jié)構(gòu),通常指WebForm程序,它是.NET平臺提供的的設(shè)計程序模板之一,可以在微軟公司的操作系統(tǒng)中運行。WebForm應(yīng)用程序也就是網(wǎng)頁窗體應(yīng)用程序,也稱WebForm軟件,它的原理是通過一些簡單的控件和組件來實現(xiàn)功能。董夢雨等[2]基于WebForm應(yīng)用程序設(shè)計具有管理員信息管理模塊、教師管理模塊和學(xué)生管理模塊的學(xué)生成績管理系統(tǒng),認(rèn)為WebForm是一種框架,可以向用戶提供有條理的、面向?qū)ο箢惣?,對用戶高效開發(fā)出WebForm應(yīng)用程序是十分方便的。FOLADOR等[3]按照MVC標(biāo)準(zhǔn),從臨床需求、研究環(huán)境出發(fā),提出并開發(fā)了一個用戶管理帕金森病患者的繼承生物醫(yī)學(xué)數(shù)據(jù)系統(tǒng)(SⅠDABⅠ)。他們認(rèn)為在比較復(fù)雜的組織文件中,由于MVC模式允許對數(shù)據(jù)庫進行可靠的訪問,從而可以為開發(fā)人員提供一個簡潔、有邏輯、復(fù)用程度高、擴展限度高和高效率的代碼。PAOLONE等[4]研究關(guān)于MVC軟件體系的結(jié)構(gòu)來固定MVC Web應(yīng)用程序的度量和閾值,通過實例實驗進行評估和證明,這樣代碼質(zhì)量很高。Blazor是微軟提供的一個前端開發(fā)框架,它將C與瀏覽器開發(fā)相結(jié)合,解決了C在瀏覽器開發(fā)方面的一個大問題。它的出現(xiàn)讓C#程序可以實現(xiàn)服務(wù)器、電視、桌面和物聯(lián)網(wǎng)應(yīng)用程序等,對于開發(fā)人員而言,這是一個極大的進步。MⅠLLER[5]研究在Blazor客戶機和Web APⅠ服務(wù)器中的應(yīng)用程序之間的共享,以此來驗證Blazor的業(yè)務(wù)邏輯,認(rèn)為Blazor在應(yīng)用程序中的功能是具有實時能力較強的開發(fā)模式。
本文通過設(shè)計一個簡單的教學(xué)實驗來對WebForm、MVC和Blazor這3種開發(fā)架構(gòu)進行說明,本實驗的系統(tǒng)結(jié)構(gòu)并不復(fù)雜,管理對象較為單一,因此由數(shù)據(jù)庫管理是比較合適的選擇。本次實驗用的數(shù)據(jù)表“T001學(xué)生基本信息表”中,包含“姓名”“性別”“學(xué)號”“年級”“班級”“民族”6個字段。
教學(xué)實驗的核心是在實驗中應(yīng)用3種技術(shù)架構(gòu),因此在實驗設(shè)計方面,滿足數(shù)據(jù)管理有代表性的檢索功能即可,對數(shù)據(jù)管理方面不進行過于深入的研究。基于3種架構(gòu)對系統(tǒng)實現(xiàn)是本文的主要實驗部分,主要研究目的是通過實驗對3種架構(gòu)進行教學(xué)講解和分析總結(jié),便于學(xué)生們理解和應(yīng)用。
在系統(tǒng)的設(shè)計和實現(xiàn)中,首先保證滿足系統(tǒng)的需求。3個架構(gòu)要實現(xiàn)的功能是一樣的,因此設(shè)計時的首要考慮因素是基于不同的架構(gòu)模式,如何實現(xiàn)對數(shù)據(jù)的檢索功能。將系統(tǒng)的實現(xiàn)過程總結(jié)在流程圖中,具體如圖1所示。
圖1 系統(tǒng)實現(xiàn)流程圖
教學(xué)實驗通過C#語言編寫實驗代碼,在Windows系統(tǒng)中運行程序,通過Visual Studio 2008、Visual Studio 2019和SQL Server 2005工具進行系統(tǒng)實現(xiàn)。
其中WebForm系統(tǒng)架構(gòu)的實驗在Visual Studio 2008和SQL Server 2005環(huán)境中進行,MVC系統(tǒng)架構(gòu)的實現(xiàn)和Blazor系統(tǒng)架構(gòu)的實現(xiàn)在Visual Studio 2019和SQL Server 2005環(huán)境中進行。
1.4.1 基于WebForm架構(gòu)實現(xiàn)信息管理系統(tǒng)
應(yīng)用環(huán)境搭建。在電腦上配置編譯環(huán)境Visual Studio 2008與SQL Server 2005。WebForm相較于其他2種架構(gòu)發(fā)展得較早,且在Visual Studio 2012以后的版本中不能直接在新建項目中找到WebForm,因此選擇存在學(xué)習(xí)資源較多的Visual Studio 2008進行實驗。Visual Studio 2008中提供了.NET Framwork2.0、3.0、3.5多個版本,在開發(fā)系統(tǒng)時選擇更多。
創(chuàng)建應(yīng)用程序。打開編譯環(huán)境Visual Studio 2008,依此選擇“文件”“新建”“項目”,并在彈出窗口中的項目類型選擇“Visual C#”,模板選擇“ASP.NET Web應(yīng)用程序”,并根據(jù)提示設(shè)置文件名和文件地址,點擊“確定”選項即創(chuàng)建好一個應(yīng)用程序,然后對程序內(nèi)容進行代碼編寫。
連接數(shù)據(jù)庫。在本機的SQL Server 2005中打開數(shù)據(jù)文件,通過Visual Studio 2008的服務(wù)器資源管理器,連接到本機的數(shù)據(jù)庫,通過編寫代碼完成對應(yīng)數(shù)據(jù)信息設(shè)置綁定數(shù)據(jù)表。
數(shù)據(jù)調(diào)用及顯示。在Default.aspx文件中編寫語句,通過控件GridView進行數(shù)據(jù)綁定和傳輸,對控件編寫對應(yīng)的代碼完成數(shù)據(jù)綁定,實現(xiàn)數(shù)據(jù)表的調(diào)用。完成后此時的GridView控件中已有數(shù)據(jù)表的“姓名”“性別”“學(xué)號”“年級”“班級”“民族”數(shù)據(jù)。
搜索功能。數(shù)據(jù)文件已傳遞綁定到GridView中,通過控件文本框和按鈕組合,編寫代碼對其定義,完成文本框數(shù)據(jù)字符傳遞以及檢索綁定的設(shè)置。
運行檢測。運行程序,先進行精確查詢檢測。文本框中輸入要查詢的學(xué)生名字,點擊“Search”按鈕查詢,如圖2所示。
圖2 WebForm精確查詢示例圖
成功查詢出學(xué)生信息,再進行模糊信息查詢檢測。關(guān)閉運行的程序,重新運行,在搜索框中輸入學(xué)生姓名的一個字,點擊“Search”按鈕進行查詢,如圖3所示。
圖3 WebForm模糊查詢示例圖
成功查詢出所有名字包含輸入字符的學(xué)生信息,實驗成功。
1.4.2 基于MVC架構(gòu)實現(xiàn)信息管理系統(tǒng)
應(yīng)用環(huán)境搭建。配置編譯環(huán)境Visual Studio 2019與SQL Server 2005。Visual Studio 2019具有Web Pages(頁面)、MVC(模型-視圖-控制器)和Web Forms(窗體)3種ASP.NET的編程模板,其中MVC用于創(chuàng)建Web應(yīng)用程序,分別從Model、View和Controller進行編程。因此本次實驗進行的MVC應(yīng)用程序選擇在Visual Studio 2019中設(shè)計和完成。
創(chuàng)建應(yīng)用程序。打開Visual Studio 2019,選擇“創(chuàng)建新項目”,在創(chuàng)建新項目頁面的搜索框中輸入asp.net web,此時選取“ASP.NET Web”模板,這里需要注意編程語言的選擇,因為Visual Studio 2019提供多種編程語言的“ASP.NET Web”模板,本次實驗選擇C#語言進行實驗,點擊“下一步”按鈕,在配置新項目界面設(shè)置文件名和選擇文件存儲地址,即創(chuàng)建好應(yīng)用程序。
Controller(控制器)的實現(xiàn)。右鍵單擊“解決方案資源管理器”中的“Controllers”文件夾,點擊“添加”,根據(jù)提示設(shè)置控制器名稱完成添加。
Model(模型)的實現(xiàn)。具體過程如下:①右鍵單擊“解決方案資源管理器”里的“Model”文件夾,依次選擇“添加”和“新建項”;②彈出的界面中依次選擇“已安裝”“Visual C#”以及“數(shù)據(jù)”,在數(shù)據(jù)模型中選擇“ADO.NET實體數(shù)據(jù)模型”;③設(shè)置Model名稱,在彈出的“實體數(shù)據(jù)模型向?qū)А敝羞x擇“來自數(shù)據(jù)庫的EF設(shè)計器”,點擊“下一步”按鈕;④點擊“新建連接”,在彈出的界面中,“數(shù)據(jù)源”目錄處選擇“Microsoft SQL Server”,單擊“確定”;⑤根據(jù)界面提示在“服務(wù)器名稱”項寫上Microsoft SQL Server中的服務(wù)器的名稱,選取“使用SQL Server身份驗證”,依據(jù)提示完成用戶名及密碼的填寫,再測試連接是否成功,完成數(shù)據(jù)連接的話會出現(xiàn)“連接成功”的提示,這里的數(shù)據(jù)也就是模型-視圖-控制器中的模型。
View(視圖)的實現(xiàn)。視圖的創(chuàng)建,第一步雙擊之前的“Controllers”文件夾,點擊“Controllers.cs”文件,在return View()的方法內(nèi)單擊右鍵,選擇“添加視圖”,根據(jù)提示完成視圖添加。
運行檢測。在相關(guān)的配置完成后,運行程序,在搜索欄中輸入要查詢的學(xué)生名字,點擊“搜索”,如圖4所示。
圖4 MVC精確查詢示例圖
成功查詢到學(xué)生信息,說明程序成功。
再進行模糊查詢的檢測,在搜索欄里輸入要查詢的關(guān)鍵詞,點擊“搜索”,如圖5所示。
圖5 MVC模糊查詢示例圖
成功查詢到名字里包含關(guān)鍵詞的所有學(xué)生,模糊查詢檢測完成。
1.4.3 基于Blazor架構(gòu)實現(xiàn)信息管理系統(tǒng)
應(yīng)用環(huán)境搭建。配置編譯環(huán)境Visual Studio 2019與SQL Server 2005。因為Blazor的技術(shù)對環(huán)境要求較高,而且微軟的環(huán)境具有向下兼容的特點,因此選擇最高的.NET Core 5.0,防止一些不必要的意外情況發(fā)生。而Visual Studio 2019提供了Blazor架構(gòu)的模型與.NET Core 5.0的版本支持,所以本次實驗進行的Blazor應(yīng)用程序選擇在Visual Studio 2019中設(shè)計和完成。
創(chuàng)建應(yīng)用程序。啟動Visual Studio 2019并點擊“創(chuàng)建新項目”,在“新建項目”項中,選擇“ASP.NET Core Web應(yīng)用程序”,隨后在界面“配置新項目”中,進行“項目名稱”的設(shè)置。需要注意的是,要記住項目名稱,在后續(xù)的代碼工作中會有用。然后點擊“創(chuàng)建”,在彈窗的“創(chuàng)建新的ASP.NET Core Web應(yīng)用程序”界面中,選取“.NET Core”“ASP.NET Core 5.0”以及“ASP.NET Core Web應(yīng)用”,點擊“創(chuàng)建”,程序即創(chuàng)建完成。
設(shè)置網(wǎng)站樣式。在Pages/Shared/_Layout.cshtml文件中,設(shè)置網(wǎng)站的樣式,其中對網(wǎng)頁要顯示的數(shù)據(jù)表的列名也在此設(shè)置;在Pages/Ⅰndex.cshtml文件中,設(shè)置網(wǎng)頁適應(yīng)設(shè)備版本的格式。
數(shù)據(jù)模型。在項目文件中,建立相關(guān)的數(shù)據(jù)模型,連接數(shù)據(jù)庫,將數(shù)據(jù)導(dǎo)入模型。中間可以進行運行程序隨時檢測,保證程序可以運行。
添加篩選。在Students/Ⅰndex.cshtml.cs文件中,進行添加篩選的操作,編寫代碼以完成精確搜索和模糊搜索的目的。
運行檢測。在相關(guān)的配置完成后,運行程序,在搜索欄中輸入要查詢的學(xué)生名字,點擊“搜索”,如圖6所示。
圖6 Blazor精確查詢示例圖
成功查詢到學(xué)生信息,說明程序成功。
再進行模糊查詢的檢測,在搜索欄里輸入要查詢的關(guān)鍵詞,點擊“搜索”,如圖7所示。
圖7 Blazor模糊查詢示例圖
成功查詢到名字里包含關(guān)鍵詞的所有學(xué)生,模糊查詢檢測完成。
在教學(xué)實驗中,學(xué)生可以通過對WebForm架構(gòu)、MVC架構(gòu)和Blazor架構(gòu)的分別實踐,完成了對3種架構(gòu)的不同思維模式的思考和體驗。3種架構(gòu)的開發(fā)模式區(qū)別很大,在數(shù)據(jù)管理、數(shù)據(jù)規(guī)模、便捷性等方面有著各自的優(yōu)缺點。
WebForm應(yīng)用程序開發(fā)快速,開發(fā)時具有其他2種架構(gòu)都沒有的直觀性,但其可容納的數(shù)據(jù)規(guī)模較小,在較多數(shù)據(jù)時,通過控件的方式進行每次數(shù)據(jù)調(diào)用則會大大影響運行速度。MVC架構(gòu)開發(fā)的結(jié)構(gòu)清晰,模型、視圖和控制器分工明確,可擴展性強,變化能力強。且MVC架構(gòu)直接將數(shù)據(jù)存儲到模型當(dāng)中,在處理大規(guī)模數(shù)據(jù)時,它的運行能力也更強于WebForm應(yīng)用程序,因此也是3種架構(gòu)中當(dāng)前應(yīng)用得最多的架構(gòu)。Blazor架構(gòu)通過創(chuàng)建了一個新的界面,也就是一個單獨的Web框架,而不是MVC的多層結(jié)構(gòu),比起MVC的結(jié)構(gòu)更加簡單。比起WebForm的控件思維,Blazor與其有相似之處,但是對數(shù)據(jù)的處理能力強于WebForm。
判斷一個系統(tǒng)架構(gòu)的好壞需要從程序的結(jié)構(gòu)合理、代碼的復(fù)用性等方面去分析,表1列出了3種架構(gòu)的對比總結(jié)。判斷一種架構(gòu)是否適合應(yīng)用于課程教學(xué)中,也需要從學(xué)習(xí)難易程度、市場接受度等方面去分析。
表1 3種架構(gòu)對比總結(jié)
通過實驗過程,可以很明顯地感受到WebForm對比MVC和Blazor,在開發(fā)過程中最大的優(yōu)勢就是開發(fā)方式簡單且容易學(xué)習(xí),基于控件進行的開發(fā)讓W(xué)ebForm對初學(xué)者十分友好,但是模塊和層次方面不如其他2種架構(gòu),正在慢慢被市場所淘汰,可以讓學(xué)生作為入門學(xué)習(xí)內(nèi)容來練習(xí)一些小型系統(tǒng)的開發(fā),建議減少其在開發(fā)類課程體系中的占比。
MVC對比起其他2個架構(gòu)最明顯的特征就是層次十分分明,3個模塊分工合作,這對不同類型的項目適用性是很強的。對于大多數(shù)學(xué)生來說,MVC讓學(xué)生更加清晰地了解模型的整體,開發(fā)過程也更加規(guī)范和有跡可循。MVC的3層架構(gòu),讓MVC的代碼復(fù)用性遠遠高于WebForm和Blazor,而且不僅是代碼的復(fù)用,在程序的維護方面、代碼的安全性方面也更具有保障,目前正被市場廣泛認(rèn)可。建議將MVC作為信息管理系統(tǒng)開發(fā)類課程的必修內(nèi)容,增加其在開發(fā)類課程體系中的占比。Blazor比起其他2種架構(gòu)來說,是一種較新的技術(shù),它的結(jié)構(gòu)和功能都與WebForm比較相似,層次結(jié)構(gòu)沒有很分明,但是能滿足的需求多,“小而精”比較符合Blazor在架構(gòu)中的定位。離線訪問功能增加了Blazor的市場競爭力。但是Blazor架構(gòu)才剛剛興起,發(fā)展還不夠深入完整,可以學(xué)習(xí)參考的資料比起其他2種架構(gòu)來說還是比較少,不建議將其納入開發(fā)類課程體系中,但是可以組織學(xué)生以興趣小組的方式去學(xué)習(xí),進一步提高有拔高需求的學(xué)生們的架構(gòu)開發(fā)能力。