實(shí)驗(yàn)六

題目要求

基于Asp.Net Core進(jìn)行網(wǎng)頁(yè)編程，從數(shù)據(jù)庫(kù)中讀取學(xué)生看書的數(shù)據(jù)，并展示到網(wǎng)頁(yè)中。要求先展示列表，然后點(diǎn)擊具體項(xiàng)目，進(jìn)行展示?？蛇M(jìn)行一定的數(shù)據(jù)匯總。

環(huán)境設(shè)置

操作系統(tǒng)： Windows 10 x64

SDK： .NET Framework 4.7.2

IDE： Visual Studio 2019

題意分析

俗話說(shuō)，題目越短越困難。還是像以往一樣，我們把要求拆解來(lái)看，具體有以下幾個(gè)要求：

①基于Asp.Net Core進(jìn)行網(wǎng)頁(yè)開發(fā)
②從數(shù)據(jù)庫(kù)中讀取數(shù)據(jù)
③將數(shù)據(jù)展示到網(wǎng)頁(yè)中
④先展示列表，然后點(diǎn)擊具體項(xiàng)目進(jìn)行展示
⑤可進(jìn)行一定的數(shù)據(jù)匯總

可以看到，其中的①和②就是我們最大的核心功能，也正是前端與后端的內(nèi)容。將①②③串接在一起就是實(shí)驗(yàn)的主體，④和⑤是附加要求。
對(duì)于前端內(nèi)容①，我們需要掌握Asp.Net Core的基本開發(fā)方式，掌握MVC模式（模型-視圖-控制器模式）的基本架構(gòu)和使用，并在這一模式中完成數(shù)據(jù)庫(kù)的操作和前端頁(yè)面的展示。
對(duì)于后端內(nèi)容②，我們需要掌握數(shù)據(jù)庫(kù)的基本組織形式和SQL語(yǔ)言的基本使用。本次實(shí)驗(yàn)使用開源的MySQL數(shù)據(jù)庫(kù)，通過MySQL進(jìn)行數(shù)據(jù)庫(kù)、表的建立和加入數(shù)據(jù)，建好的數(shù)據(jù)表供網(wǎng)頁(yè)直接讀取。具體的模式我們將在下面展開。
從ASP.Net Core的性質(zhì)出發(fā)，本次實(shí)驗(yàn)使用的是前后端不分離的開發(fā)模式，即通過ASP.Net Core現(xiàn)場(chǎng)讀取數(shù)據(jù)庫(kù)并展示在動(dòng)態(tài)網(wǎng)頁(yè)之中。當(dāng)下流行的也是更高效率開發(fā)模式是前后端分離的開發(fā)模式，即前后端只使用一個(gè)例如json的文件進(jìn)行交互：前端向后端發(fā)送請(qǐng)求并獲取文件然后解析。限于篇幅本文不再贅述。

后端·數(shù)據(jù)庫(kù)

數(shù)據(jù)庫(kù)概述

數(shù)據(jù)庫(kù)，顧名思義，就是用來(lái)存放數(shù)據(jù)的地方。從精確的定義來(lái)看，數(shù)據(jù)庫(kù)是指以一定方式存儲(chǔ)在一起，能為多個(gè)用戶共享，具有盡可能小的冗余度，并且與應(yīng)用程序彼此獨(dú)立的數(shù)據(jù)集合，用于存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)。數(shù)據(jù)組織有多種數(shù)據(jù)模型，目前主要的數(shù)據(jù)模型是關(guān)系數(shù)據(jù)模型，以關(guān)系模型為基礎(chǔ)的數(shù)據(jù)庫(kù)就是關(guān)系型數(shù)據(jù)庫(kù)，也是目前使用最廣泛的數(shù)據(jù)庫(kù)。當(dāng)下流行的各個(gè)數(shù)據(jù)庫(kù)，例如Oracle、Microsoft SQL Server、Access和MySQL等等，都是關(guān)系型數(shù)據(jù)庫(kù)。簡(jiǎn)單來(lái)說(shuō)，關(guān)系模型指的就是二維表格模型，而一個(gè)關(guān)系型數(shù)據(jù)庫(kù)就是由二維表及其之間的聯(lián)系所組成的一個(gè)數(shù)據(jù)組織。

SQL

有了數(shù)據(jù)庫(kù)之后，自然而然想到的是如何去操作它。結(jié)構(gòu)化查詢語(yǔ)言（Structured Query Language），即SQL，是源自于IBM公司，后被采納為國(guó)際標(biāo)準(zhǔn)的關(guān)系型數(shù)據(jù)庫(kù)的查詢語(yǔ)言。它操作簡(jiǎn)單易上手，許多數(shù)據(jù)庫(kù)都支持，當(dāng)然包括我們這個(gè)實(shí)驗(yàn)用到的MySQL數(shù)據(jù)庫(kù)。SQL語(yǔ)言包括查詢，操縱，定義和控制等幾個(gè)部分，通過命令動(dòng)詞來(lái)實(shí)現(xiàn)。我們更為熟知的是CRUD（增查改刪，Create Retrieve Update Delete），當(dāng)然也包括在這些命令中。我們將在接下來(lái)詳細(xì)地使用SQL語(yǔ)言來(lái)構(gòu)建和讀取我們的數(shù)據(jù)庫(kù)。

C#中的SQL

要在C#中使用SQL對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作，可沒有這么簡(jiǎn)單。換句話說(shuō)，我們不能像在MySQL的命令窗口里輸入指令那樣直接在C#的控制臺(tái)里使用SQL，而必須通過程序?qū)?shù)據(jù)庫(kù)進(jìn)行連接，使用字符串表示命令并通過C#語(yǔ)句調(diào)用它們，最后再退出。不同的數(shù)據(jù)庫(kù)使用不同的前綴語(yǔ)句，例如MySQL數(shù)據(jù)庫(kù)對(duì)應(yīng)的語(yǔ)句是MySqlxxx，并要引入MySql.Data.MySqlClient包；而Microsoft SQL Service使用的語(yǔ)句是OleDbxxx等。我們將在下面的流程里看到它的詳細(xì)使用方法。

前端·ASP.NET Core

前端基礎(chǔ)知識(shí)·HTML和JavaScript

為了將數(shù)據(jù)展示在瀏覽器中，我們需要運(yùn)用HTML和JavaScript與用戶進(jìn)行交互。
超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language），即HTML，是一種標(biāo)記語(yǔ)言，它通過標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容。簡(jiǎn)單來(lái)說(shuō)，我們通過輸入不同的標(biāo)記來(lái)完成不同的功能。而這些標(biāo)記不同于XML，是已經(jīng)規(guī)定好的，我們運(yùn)用這些標(biāo)記的組合就像使用指令一樣控制網(wǎng)頁(yè)的長(zhǎng)相。我們將在接下來(lái)看見它們的使用方式。
上面提到的HTML只能完成網(wǎng)頁(yè)的展示部分，但是我們能看見的絕大部分網(wǎng)頁(yè)都是能夠跟用戶進(jìn)行多姿多彩的交互的。這怎么辦？為了完成這些交互，我們需要使用JavaScript這個(gè)腳本語(yǔ)言。腳本語(yǔ)言的特性是“隨調(diào)隨用”，也就是解釋型或者即時(shí)編譯型語(yǔ)言。它不同于大量的后端語(yǔ)言是編譯之后再執(zhí)行，而是在網(wǎng)頁(yè)運(yùn)行的過程中一句一句執(zhí)行。這樣的特性可以幫助我們實(shí)現(xiàn)在網(wǎng)頁(yè)運(yùn)作中的各種各樣的功能。在實(shí)際開發(fā)中，JS和HTML結(jié)合起來(lái)完成了展示和人機(jī)交互的基本功能。
除了HTML和JavaScript，在前端的開發(fā)中時(shí)常運(yùn)用到的還有CSS（層疊樣式表，Cascading Style Sheets）來(lái)完成各種各樣絢麗的動(dòng)態(tài)效果。本實(shí)驗(yàn)的功能使用不到它，有興趣的讀者可以自行查找資料進(jìn)行了解。

ASP.NET Core概述

動(dòng)態(tài)服務(wù)器頁(yè)面（Active Server Pages），即ASP，是微軟公司開發(fā)的服務(wù)器端腳本環(huán)境，可用來(lái)創(chuàng)建動(dòng)態(tài)交互式網(wǎng)頁(yè)并建立強(qiáng)大的web應(yīng)用程序。當(dāng)服務(wù)器收到對(duì)ASP文件的請(qǐng)求時(shí)，它會(huì)處理包含在用于構(gòu)建發(fā)送給瀏覽器的HTML網(wǎng)頁(yè)文件中的服務(wù)器端腳本代碼。而.NET平臺(tái)我們已經(jīng)很熟悉了，是微軟開發(fā)的開發(fā)平臺(tái)。.NET Core是.NET Framework的新一代版本，是微軟開發(fā)的第一個(gè)具有跨平臺(tái)（Windows、Mac OSX、Linux）能力的應(yīng)用程序開發(fā)框架。二者結(jié)合起來(lái)就是ASP.NET Core，它是基于.NET Core的Web開發(fā)框架，是對(duì)ASP.NET的再開發(fā)和優(yōu)化。有興趣的讀者可以自行查找并了解他們的歷史，本文就不再贅述了。

MVC（模型-視圖-控制器，Model-View-Controller）

MVC是一種構(gòu)建Web應(yīng)用的模式，簡(jiǎn)單來(lái)說(shuō)就是這個(gè)網(wǎng)頁(yè)或者說(shuō)Web應(yīng)用是怎么構(gòu)建的，怎么運(yùn)作的。其應(yīng)用幾乎遍及所有的Web框架，而不僅僅是在我們實(shí)驗(yàn)用的Asp.Net Core中。就連iOS和Android上的移動(dòng)應(yīng)用也是MVC的一個(gè)變種。拆開來(lái)看，MVC的三個(gè)組成部分有如下的功能：

模型：負(fù)責(zé)應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分，通常模型對(duì)象負(fù)責(zé)在數(shù)據(jù)庫(kù)中存取數(shù)據(jù)。在Asp.Net Core中，模型可以分為兩種：以xxxItem命名的模型負(fù)責(zé)記錄部分，記錄的是保存在數(shù)據(jù)庫(kù)中的條目；以xxxViewModel命名的模型負(fù)責(zé)與視圖相結(jié)合，發(fā)送到瀏覽器供用戶查看。

視圖：是應(yīng)用程序中處理數(shù)據(jù)顯示的部分。通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建的。簡(jiǎn)單來(lái)說(shuō)就是把已經(jīng)存好的數(shù)據(jù)呈現(xiàn)給用戶。在Asp.Net Core中，視圖是用Razor語(yǔ)言書寫的，它存儲(chǔ)在后綴為.cshtml的特殊文件中。關(guān)于Razor語(yǔ)言我們將在下面進(jìn)行介紹。

控制器：是應(yīng)用程序中處理用戶交互的部分。通常控制器負(fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。也就是說(shuō)控制器是負(fù)責(zé)人機(jī)交互的“窗口”，它處理用戶（端）的輸入并送交給相應(yīng)的代碼進(jìn)行處理。

Razor·HTML和C#的結(jié)合體

上面提到了Razor這種語(yǔ)言。其實(shí)，他就是HTML和C#（也可以是VB）的混合版本。Razor使用“@”符號(hào)來(lái)區(qū)別HTML標(biāo)記和C#代碼。以@開頭的變量或是頭尾用@標(biāo)記的均被識(shí)別為C#代碼。而這C#代碼之中還可以嵌套HTML標(biāo)記，比如放入表單元素之中（<td><td>）。是不是很神奇？它在一定程度上可以取代部分JS代碼的功能。我們可以在下面看到這個(gè)東西的實(shí)際用途。需要注意的是，這個(gè)語(yǔ)言是微軟特地為ASP系列的網(wǎng)頁(yè)開發(fā)而制造的，純前端的開發(fā)是用不了它的。

數(shù)據(jù)從何而來(lái)？

數(shù)據(jù)當(dāng)然是從數(shù)據(jù)庫(kù)讀取啦。本次實(shí)驗(yàn)的需求比較簡(jiǎn)單，于是我們可以直接把讀取數(shù)據(jù)庫(kù)的任務(wù)交給Controller，即直接在控制器Controller當(dāng)中讀取數(shù)據(jù)庫(kù)的內(nèi)容，然后存到模型Model（xxxItem）里面。在更加專業(yè)化，更加層次化結(jié)構(gòu)化的ASP.NET Core開發(fā)中，我們會(huì)再把MVC改造成不同的層次以達(dá)到展示和與后端交流分開的作用。這時(shí)候就會(huì)出現(xiàn)：一個(gè)由控制器和視圖構(gòu)成的表示層，用來(lái)處理用戶的交互；一個(gè)包含了業(yè)務(wù)邏輯和數(shù)據(jù)庫(kù)代碼的服務(wù)層，跟數(shù)據(jù)庫(kù)交流的任務(wù)就會(huì)交給這個(gè)服務(wù)層。讀者可以自行查找相關(guān)的資料并了解，本次實(shí)驗(yàn)只和大家交流最簡(jiǎn)單的開發(fā)工作。

完整代碼

后端代碼（實(shí)驗(yàn)六 第二題 后端\Program.cs）：建立數(shù)據(jù)庫(kù)并寫入數(shù)據(jù)

前端代碼（實(shí)驗(yàn)六 第二題 前端\Controllers\HomeController.cs）：初始創(chuàng)立時(shí)的頁(yè)面

前端代碼（實(shí)驗(yàn)六 第二題 前端\Controllers\TestController.cs）：自寫的控制器，用以讀取數(shù)據(jù)庫(kù)和存放數(shù)據(jù)

前端代碼（實(shí)驗(yàn)六 第二題 前端\Models\TestItem.cs）：提供了數(shù)據(jù)訪問的接口

前端代碼（實(shí)驗(yàn)六 第二題 前端\Models\TestViewModel.cs）：與視圖結(jié)合提供給用戶

前端代碼（實(shí)驗(yàn)六 第二題 前端\Views\Home\Index.cshtml）：初始創(chuàng)立時(shí)的頁(yè)面

前端代碼（實(shí)驗(yàn)六 第二題 前端\Views\Home\Privacy.cshtml）：初始創(chuàng)立時(shí)的頁(yè)面

前端代碼（實(shí)驗(yàn)六 第二題 前端\Views\Test\Index.cshtml）：自寫的頁(yè)面，包含了對(duì)模型中數(shù)據(jù)的篩選和展示

代碼片段分析

后端·建立數(shù)據(jù)庫(kù)

由于無(wú)法像在控制臺(tái)那樣直接操作數(shù)據(jù)庫(kù)，我們只能通過包提供的字符串的形式來(lái)通過C#指令對(duì)數(shù)據(jù)庫(kù)進(jìn)行連接和其他操作。下面的代碼也是相同的道理。

對(duì)于非查詢的語(yǔ)句，包提供了ExecuteNonQuery()這一指令進(jìn)行操作，操作的SQL指令就是寫在CommandText中的字符串。而查詢語(yǔ)句是數(shù)據(jù)庫(kù)操作中最常用的語(yǔ)句，且查詢的方式豐富多彩，比如下面的這一塊代碼：

MySQL在C#的包中提供了兩種查詢語(yǔ)句的方式，其中一種便是上面提供的ExecuteReader()。這一語(yǔ)句的作用是創(chuàng)建一個(gè)讀取器對(duì)象，這個(gè)讀取器對(duì)象就像一個(gè)迭代器一樣，逐行讀出SQL命令獲取的數(shù)據(jù)并以數(shù)組的形式返回，所以我們可以通過下標(biāo)的方式來(lái)獲取每個(gè)字段的內(nèi)容。當(dāng)然，上面的代碼只是在調(diào)試后端的時(shí)候用得到，在前端讀取數(shù)據(jù)的時(shí)候是要稍加改造的，我們會(huì)在后面看到。

前端

TestController.cs中

這一段代碼是將前端的內(nèi)容稍加改造用以讀取數(shù)據(jù)庫(kù)。不同的地方在于，它將數(shù)據(jù)先放進(jìn)一個(gè)臨時(shí)的對(duì)象數(shù)組，而后將數(shù)組傳入模型之中存儲(chǔ)。實(shí)際測(cè)試中，return View(new TestViewModel { Contents = contents });這樣創(chuàng)建新對(duì)象數(shù)組的方式是必要的，否則會(huì)導(dǎo)致問題，而問題的原因目前仍未究明。Index函數(shù)是供頁(yè)面加載時(shí)直接讀取的函數(shù)，而不用再增加子目錄。

Test\Index.cshtml中

上面這段是純粹的HTML語(yǔ)言，用以創(chuàng)建表頭（thead），也就是表格的第0行。其中包含了一些select控件，也就是下拉菜單，它的元素是option，也就是各個(gè)選項(xiàng)。控件的onchang函數(shù)是在控件的內(nèi)容改變的時(shí)候會(huì)觸發(fā)的函數(shù)，函數(shù)內(nèi)容寫在了JavaScript腳本之中，我們會(huì)在接下來(lái)看到。
到這里，數(shù)據(jù)篩選，也就是要求④的初步思路已經(jīng)有所窺見了：我們會(huì)利用JS腳本，像開發(fā)C#程序一樣對(duì)數(shù)據(jù)進(jìn)行篩選，然后再返回給表格顯示出來(lái)。這些數(shù)據(jù)都已經(jīng)是被讀取之后放進(jìn)緩沖區(qū)之中的了，而不是現(xiàn)場(chǎng)調(diào)取數(shù)據(jù)庫(kù)。
僅僅有上面HTML的文本是還不夠的，我們還需要將內(nèi)容一個(gè)個(gè)添加到表格的cell，也就是單元里面，這時(shí)候Razor就派上用場(chǎng)了：

前面加了@符號(hào)的都是C#的語(yǔ)法或者變量，而帶<>的都是HTML語(yǔ)法?？梢钥吹?，C#的變量被嵌入到了單元格之中，而單元格又被嵌入到了foreach循環(huán)之中，變相達(dá)到了動(dòng)態(tài)創(chuàng)建表格的效果。當(dāng)然，以上功能通過JavaScript應(yīng)該也是能夠達(dá)到的，但是要用JS和C#導(dǎo)出的數(shù)據(jù)打交道就顯得有些麻煩了，Razor正好彌合了這二者的空缺；接下來(lái)我們會(huì)看到純HTML條件下JS發(fā)揮的作用。我們接著往下看。

JS腳本要寫在<script><script>標(biāo)簽之中。這一段文字上下代碼的順序跟寫在程序的是相反的，因?yàn)閺倪壿嬌蟻?lái)看，應(yīng)當(dāng)先實(shí)現(xiàn)的是完成所有數(shù)據(jù)的匯總之后展示，而后點(diǎn)擊下拉列表進(jìn)行篩選。前者是在網(wǎng)頁(yè)運(yùn)行時(shí)依據(jù)腳本的編寫次序來(lái)運(yùn)行，而后者要通過調(diào)用函數(shù)來(lái)實(shí)現(xiàn)。更好的處理方式是將函數(shù)的實(shí)現(xiàn)放在HTML的頭部，也就是<head></head>標(biāo)簽之中。
現(xiàn)在來(lái)分析一下這部分腳本的作用。在先前的代碼中已經(jīng)通過Razor將數(shù)據(jù)庫(kù)內(nèi)容放到HTML表格里了，但是這些內(nèi)容沒有進(jìn)入JS的存儲(chǔ)空間中，所以我們要通過HTML表格這一中介將數(shù)據(jù)讀到一個(gè)全局?jǐn)?shù)組變量里面，再對(duì)它進(jìn)行篩選。全局?jǐn)?shù)組里面是存儲(chǔ)的數(shù)據(jù)是JS對(duì)象，而JS的對(duì)象接觸過JSON(JavaScript Object Notation)的同學(xué)就很熟悉了：一個(gè){}中囊括了一些鍵值對(duì)，其中鍵就是屬性，值就是這個(gè)屬性對(duì)應(yīng)的值，剛好拿來(lái)裝學(xué)生的字段信息。我們一邊將每行的字段從表格之中找出來(lái)，然后存到對(duì)象里面（比如oneStudent.number = tableElement.rows[i].cells[0].innerText），一邊將這些選項(xiàng)放進(jìn)下拉框select當(dāng)中。這當(dāng)中已經(jīng)包含了去重的過程為了達(dá)到去重的效果，我們?yōu)橐Y選的字段開一個(gè)輔助數(shù)組，比如var qNumber = new Array()，將沒有插入過select下拉框的對(duì)象插入其中，同時(shí)又插入下拉框中。其中用到的indexOf函數(shù)事實(shí)上承擔(dān)了篩選的作用，若其返回-1則表示該對(duì)象不在數(shù)組之中。
值得一提的是，JavaScript是一種弱類型語(yǔ)言，因而所有變量都以var聲明。提到這個(gè)是因?yàn)榻?jīng)常使用到的document.getElementById()是功能非常強(qiáng)大的函數(shù)，能夠在頁(yè)面范圍內(nèi)根據(jù)Id值抓取不同的對(duì)象。這個(gè)Id值就好像C#中的變量名，可以用以標(biāo)識(shí)不同種類的控件。
接下來(lái)的部分就全是JS函數(shù)部分了，也是這個(gè)實(shí)驗(yàn)最終的部分。

以上就是三個(gè)子功能函數(shù)的內(nèi)容。首先是將表格的內(nèi)容全部刪除。我們能夠在此大膽刪掉表格的原因是我們已經(jīng)將所有的內(nèi)容按照對(duì)象加入了全局?jǐn)?shù)組之中。刪除的原理是獲取表格所有的行，并且逐行刪除。這里要注意兩點(diǎn)：其一，從尾部開始刪起，以防止循環(huán)變量下標(biāo)和行數(shù)的改變影響刪除次序（想象一下跳著刪）；其二，第0行是表頭，真正的內(nèi)容是從第1行開始的，刪除時(shí)要注意i>0。
第二個(gè)函數(shù)的內(nèi)容是從外部獲取要篩選的內(nèi)容并進(jìn)行篩選，返回一個(gè)篩選完畢的數(shù)組。這個(gè)判定的信息由總的函數(shù)提供，來(lái)自于select框的選定內(nèi)容，提取的方式在下面的代碼可以看見。在select下拉框中有一個(gè)特殊的符號(hào)"*"，也就是通配符。通配符表示不對(duì)當(dāng)前字段的內(nèi)容做篩選限制。那么它在判定條件之中是如何表現(xiàn)的呢？顯然，它對(duì)于傳入的任何條件都返回真，自然而然地想到用或條件來(lái)實(shí)現(xiàn)。而將這些帶或邏輯的判定表達(dá)式用與運(yùn)算符連接起來(lái)就是總的判定條件了，也就是代碼中如下的部分。

第三個(gè)函數(shù)則是創(chuàng)建新的表格并將返回的篩選過的數(shù)組插入其中。插入的方式是逐行插入，每行中逐單元插入，也就是逐列插入。這些table控件自帶的函數(shù)形式上比較簡(jiǎn)單，這里就不再贅述了，能掌握使用方式就行了。
接下來(lái)就是把這些子函數(shù)全部拼裝起來(lái)，變成一個(gè)供調(diào)用的總函數(shù)：

以前兩行為例，由于select只能獲取到被選中項(xiàng)的下標(biāo)，我們需要通過下標(biāo)從options數(shù)組中來(lái)獲取被選中的option。而option是一個(gè)對(duì)象，我們要的篩選方式是通過字符串來(lái)篩選，于是通過value值獲取它們的文字。注意，這只能在未在標(biāo)簽中指定value值的時(shí)候使用，若已指定value值，可使用innerText來(lái)獲取。獲取各個(gè)select框里用戶要求的篩選條件之后將它們傳入ChooseCondition函數(shù)中，再運(yùn)行各個(gè)子函數(shù)就能達(dá)到我們想要的目標(biāo)了。
那么，這個(gè)函數(shù)將在什么時(shí)候調(diào)用呢？我們回到最開始制造表格時(shí)的代碼：

這個(gè)onchange函數(shù)就是用以調(diào)用最終的ChooseSelect()函數(shù)，來(lái)實(shí)現(xiàn)在每次完成任意一個(gè)下拉框的改變之后改變整張表格的內(nèi)容。

至此。我們層層解析，步步為營(yíng)，終于達(dá)到了實(shí)驗(yàn)要求的目標(biāo)。接下來(lái)進(jìn)入本實(shí)驗(yàn)，也是我們最后一個(gè)實(shí)驗(yàn)的特色環(huán)節(jié)：

演示

這是本實(shí)驗(yàn)的特色環(huán)節(jié)。這次實(shí)驗(yàn)大部分在于前端，而我們又不像之前那樣直接使用窗體進(jìn)行開發(fā)而需要借助瀏覽器展示。這是一個(gè)所見即所得的項(xiàng)目，我們將從數(shù)據(jù)庫(kù)開始，逐步展示我們這次實(shí)驗(yàn)的所有界面。
在運(yùn)行了后端代碼之后，我們直接到數(shù)據(jù)庫(kù)窗口（cmd），通過select * from studentdata指令查看已經(jīng)插好的數(shù)據(jù)庫(kù)（表）：

可以看到，數(shù)據(jù)已經(jīng)被寫入數(shù)據(jù)庫(kù)了。我們返回DOS界面，將目錄轉(zhuǎn)移到項(xiàng)目文件夾下，輸入指令dotnet watch run運(yùn)行整個(gè)項(xiàng)目。當(dāng)然，也可以在VS中直接啟動(dòng)，在IIS中運(yùn)行。

可以看到，在運(yùn)行web應(yīng)用之后直接進(jìn)入了home界面，我們?cè)诘刂窓谥凶芳?/span>/test來(lái)實(shí)現(xiàn)對(duì)TestController的Index函數(shù)的訪問，進(jìn)而展示到瀏覽器之中。

可以看到我們已經(jīng)進(jìn)入了含有表格的頁(yè)面，這里展示了所有的數(shù)據(jù)。我們可以通過調(diào)整不同的篩選條件選擇我們想要的條目

如果選擇互斥的條件的話……

可以看到它變成了一張空表，情理之中。
至此，我們已經(jīng)完成了這個(gè)實(shí)驗(yàn)所有內(nèi)容的展示。

總結(jié)

通過本次實(shí)驗(yàn)，我們了解了關(guān)系型數(shù)據(jù)庫(kù)的基本組織形式，掌握了SQL語(yǔ)言的基本內(nèi)容和使用方式，并完成了往其中添加數(shù)據(jù)和查找數(shù)據(jù)的功能。在前端內(nèi)容方面，我們學(xué)習(xí)了HTML、JavaScript等前端基礎(chǔ)知識(shí)，了解了Asp.Net Core的基本組織結(jié)構(gòu)和MVC開發(fā)模式。通過以上知識(shí)完成了一個(gè)簡(jiǎn)單Web應(yīng)用的開發(fā)。

當(dāng)然這個(gè)實(shí)驗(yàn)是非常簡(jiǎn)單的MVC開發(fā)模式，與真正專業(yè)化的開發(fā)相比還難以望其項(xiàng)背。比如，就算在前后端不分離的場(chǎng)景下，應(yīng)該也存在某種方式能夠讓前端給后端發(fā)送指令請(qǐng)求并查詢數(shù)據(jù)庫(kù)而后返回，而不是使用通過JS操作緩存區(qū)的數(shù)據(jù)這樣效率較低的方式。數(shù)據(jù)庫(kù)的優(yōu)勢(shì)就在于強(qiáng)大的數(shù)據(jù)組織能力。其次，本實(shí)驗(yàn)本可以分層完成，即前文提到的分為表示層和服務(wù)層等，這樣能夠使得程序更加模塊化。最后，我們可以通過Asp.Net Core提供的其他方式完成對(duì)數(shù)據(jù)庫(kù)更高效的訪問，而非使用MySql.Data.MySqlClient這一包。

回顧

通過這學(xué)期的C#學(xué)習(xí)，我們從最開始的控制臺(tái)界面開發(fā)，到窗體應(yīng)用開發(fā)，到委托事件反射，再到多線程和互斥，最后到Web應(yīng)用開發(fā)，可以說(shuō)是學(xué)到了不少的東西。筆者也從一個(gè)一無(wú)所知的小白，一路走到了具有一定開發(fā)基礎(chǔ)的研習(xí)者了。當(dāng)然，軟件開發(fā)的途徑遠(yuǎn)不止這些，軟件開發(fā)也絕非C#這一條路，但是通過本學(xué)期的C#學(xué)習(xí)，我們能夠領(lǐng)略到軟件開發(fā)的魅力和基本模式，基本知識(shí)。軟工路且長(zhǎng)，希望日后能夠?qū)W到更多深刻，實(shí)用，有趣的開發(fā)內(nèi)容。在文章的最后，要感謝一直陪伴和指導(dǎo)我們的賴永炫教授，盡心盡力的助教老師，身邊各位親愛的同學(xué)們，以及在崎嶇道路上不斷攀登的自己。
以上，就是本次實(shí)驗(yàn)報(bào)告的，
所有內(nèi)容。
祝閱讀到此的各位小伙伴2022快樂！

參考文獻(xiàn)

李輝 等.數(shù)據(jù)庫(kù)系統(tǒng)原理及MySQL應(yīng)用教程：機(jī)械工業(yè)出版社，2015

李春葆，曾平，喻丹丹.C#程序設(shè)計(jì)教程（第3版）：清華大學(xué)出版社，2015

賴永炫.廈門大學(xué)移動(dòng)計(jì)算與數(shù)據(jù)分析實(shí)驗(yàn)室，Mobile Computing & Data Analysis

Copyright @ 2022, Bilibili: ForeverMeteor, all rights reserved.?