這個(gè)是我在修專業(yè)課《Web應(yīng)用開發(fā)技術(shù)》時(shí)的結(jié)課作業(yè)，分組是按5人一組的。結(jié)果由于我是大四老學(xué)長回來補(bǔ)修的。就自己單干了。采用了asp．net技術(shù)開發(fā)的，前端用了一些CSS框架進(jìn)行美化。數(shù)據(jù)交互采用AJAX，數(shù)據(jù)庫用的SQL Sever。

1、目標(biāo)與應(yīng)用場景

同學(xué)們?cè)谶M(jìn)行各類活動(dòng)時(shí)，通常需要一定的場地配合。如果是室外場地，例如操場等無需進(jìn)行借用預(yù)約便可使用。但是大部分活動(dòng)都需要在室內(nèi)場地完成，例如開團(tuán)員大會(huì)，開班會(huì)，班級(jí)聯(lián)誼等。再者，教師群體需要舉辦學(xué)術(shù)交流活動(dòng)等也需要室內(nèi)的場地完成。華中科技大學(xué)的教室和公用場地十分充足，即使在工作日，也有很多空閑的場地剩余。場地包括啟明學(xué)院、教學(xué)樓、學(xué)生公寓內(nèi)部的公用房、學(xué)院內(nèi)的教室等。為滿足廣大同學(xué)的學(xué)習(xí)活動(dòng)需求，促進(jìn)同學(xué)之間的交流，同時(shí)更加充分地利用公共教室范圍內(nèi)的場地，我們小組決定設(shè)計(jì)并實(shí)現(xiàn)華中科技大學(xué)的場地預(yù)約系統(tǒng)，該系統(tǒng)的需求如下：

用戶可以登錄系統(tǒng)，進(jìn)行教室的預(yù)約。系統(tǒng)需要支持多用戶使用，用戶之間同一教室的預(yù)約時(shí)間段不能沖突。如果不需要教室了，用戶可以選擇取消自己的預(yù)約。用戶能看到自己的歷史預(yù)約信息。

根據(jù)以上的需求，擬實(shí)現(xiàn)的系統(tǒng)功能如下：

登錄注冊(cè)：新用戶可以通過注冊(cè)頁面進(jìn)行注冊(cè)，隨后使用注冊(cè)的賬號(hào)密碼進(jìn)行系統(tǒng)登錄并使用。密碼采用MD5密文保存到數(shù)據(jù)庫中，確保用戶的隱私安全。場地展示：系統(tǒng)從數(shù)據(jù)庫讀取當(dāng)前的場地信息，如場地類型、場地的名稱、是否空閑等信息。并將其展示到頁面前臺(tái)，供用戶查看選擇。預(yù)約：用戶根據(jù)自己需要的場地類型，選擇合適的場地，選中后系統(tǒng)顯示該場地已被預(yù)約的時(shí)段，避免產(chǎn)生沖突。用戶選擇好時(shí)間段以后即可進(jìn)行預(yù)約，系統(tǒng)檢測預(yù)約是否沖突，如果不沖突則預(yù)約成功。取消預(yù)約：展示用戶已經(jīng)預(yù)約成功的場地和時(shí)段，用戶不需要了可以取消預(yù)約。歷史展示：顯示用戶的歷史預(yù)約記錄。

該系統(tǒng)的應(yīng)用群體主要為大學(xué)生和大學(xué)教師。場景面向大學(xué)校園。旨在打造一個(gè)方便的場地預(yù)約管理系統(tǒng)。

2、設(shè)計(jì)思路

系統(tǒng)的設(shè)計(jì)分為前端、后端和數(shù)據(jù)庫三大塊。初步確定的開發(fā)平臺(tái)為微軟的．net平臺(tái)＋SQL Sever數(shù)據(jù)庫（當(dāng)然也是課程設(shè)計(jì)要求的）。前端對(duì)相關(guān)的頁面進(jìn)行設(shè)計(jì)布局，還可以使用現(xiàn)成的CSS框架進(jìn)行一定的美化。后端可以使用老師封裝好的SqlHelper．cs進(jìn)行數(shù)據(jù)庫的一些請(qǐng)求。前后端交互采用的主要是AJAX技術(shù)，實(shí)現(xiàn)輕量級(jí)的交互。關(guān)于前后端主要的思路如下：

前端：分頁面進(jìn)行開發(fā)，可以使得結(jié)構(gòu)更加清晰。頁面可劃分為登錄注冊(cè)頁面和主功能頁面。后端：交互技術(shù)使用AJAX進(jìn)行交互，后端可以使用．a(chǎn)shx文件進(jìn)行API的編寫，采用參數(shù)action控制請(qǐng)求的類型，例如action＝”login”時(shí)表示請(qǐng)求的是登錄功能，從而進(jìn)行判斷。數(shù)據(jù)庫：確定系統(tǒng)的功能，提取相應(yīng)的數(shù)據(jù)結(jié)構(gòu)，建立數(shù)據(jù)庫表。系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)圖如下：

3、關(guān)鍵問題與實(shí)現(xiàn)代碼

在該系統(tǒng)中，關(guān)鍵性的問題主要有以下幾個(gè)：

（1）AJAX接口的設(shè)計(jì)問題，項(xiàng)目屬于輕量級(jí)項(xiàng)目，不需要多個(gè)后臺(tái)接口文件（．a(chǎn)shx），避免造成管理上的不便。采用一個(gè)．a(chǎn)shx實(shí)現(xiàn)多個(gè)請(qǐng)求，需要在請(qǐng)求時(shí)加上該請(qǐng)求所需要的功能，即action參數(shù)。因此采用了以下的框架：

public void ProcessRequest（HttpContext context）
       ｛
           context．Response．ContentType ＝ ＂text／plain＂；
           string action ＝ context．Request［＂action＂］；
           if （！string．IsNullOrEmpty（action））
           ｛
               switch （action）
               ｛
                   case ＂bookRoom＂：

在開頭便判斷Request的action參數(shù)，確定該請(qǐng)求所需要的功能，然后調(diào)用相應(yīng)的代碼進(jìn)行Response。

（2）利用請(qǐng)求返回的json數(shù)據(jù)創(chuàng)建相應(yīng)的HTML代碼，顯示到頁面上。以場地信息的展示為例：

后臺(tái)代碼：

case ＂flushRoom＂：
   DataTable dtRoom ＝ SqlHelper．getDataTable（＂select ＊ from RoomInfo＂）；
   string sJson ＝ JsonConvert．SerializeObject（dtRoom）；
   context．Response．Write（sJson）；
   break；

使用sql語句獲取所有記錄，轉(zhuǎn)為json字符串以后返回到前臺(tái)。前臺(tái)AJAX請(qǐng)求代碼：

function flushRoom（） ｛
       ＄．a(chǎn)jax（｛
           type： ＇get＇，
           url： ＇RoomBookHandler．a(chǎn)shx＇，
           async： true，
           data： ｛
               action： ＇flushRoom＇，
           ｝，
           success： function （result） ｛
               document．getElementById（＂roomInfo＂）．innerHTML ＝ creatRoomTable（result）；
               var footerStr ＝ ＇＜footer id＝＂bookTimeSpan＂ ＞＜／footer ＞＇；
               document．getElementById（＂bookTimeSpan＂）．innerHTML ＝ footerStr；
           ｝，
           error： function （） ｛
               alert（＇獲取數(shù)據(jù)失�。。В�；
           ｝
       ｝）；
   ｝

將AJAX返回的結(jié)果，使用creatRoomTable函數(shù)生成HTML表格，并設(shè)置到頁面的元素上面。creatRoomTable的代碼如下：

function creatRoomTable（dataStr） ｛
       var dataList ＝ JSON．parse（dataStr）；
       var trStr ＝ ＇＜table class＝＂primary＂ id＝＂roomInfo＂ ＞＜tr＞＇ ＋
           ＇＜th＞ 教室號(hào)＜／th＞ ＜th＞教室類型＜／th＞＜th＞容納人數(shù)＜／th＞＇ ＋
           ＇＜th＞ 教室狀態(tài)＜／th＞ ＜th＞教室說明＜／th＞＜th＞是否預(yù)約＜／th＞＜／tr ＞＇；
       ／／循環(huán)遍歷出json對(duì)象中的每一個(gè)數(shù)據(jù)并顯示在對(duì)應(yīng)的td中
       for （i ＝ 0； i ＜ dataList．length； i＋＋） ｛
           trStr ＋＝ ＇＜tr＞＇；
           trStr ＋＝ ＇＜td＞＇ ＋ dataList［i］．RoomNumber ＋ ＇＜／td＞＇；
           trStr ＋＝ ＇＜td＞＇ ＋ dataList［i］．RoomType ＋ ＇＜／td＞＇；
           trStr ＋＝ ＇＜td＞＇ ＋ dataList［i］．RoomPeople ＋ ＇＜／td＞＇；
           trStr ＋＝ ＇＜td＞＇ ＋ dataList［i］．RoomStatus ＋ ＇＜／td＞＇；
           trStr ＋＝ ＇＜td＞＇ ＋ dataList［i］．Remarks ＋ ＇＜／td＞＇；
           trStr ＋＝ ＇＜td＞＇；
           if （dataList［i］．RoomStatus．toString（）．trim（） ＝＝＝ ＂空閑＂） ｛
               trStr ＋＝ ＇＜label＞＜input type＝＂radio＂ onClick＝＂getRoomTimeSpan（）＂ name＝＂selectRoom＂ value＝＂＇ ＋ dataList［i］．RoomNumber．toString（） ＋ ＇＂ ／＞＜span class＝＂checkable＂＞預(yù)定＜／span＞＜／label＞＇；
           ｝
           else ｛
               trStr ＋＝ ＂不可用＂；
           ｝
           trStr ＋＝ ＇＜／td＞＇；
           trStr ＋＝ ＇＜／tr＞＇；
       ｝
       trStr ＋＝ ＇＜／table＞＇
       return trStr；
   ｝

首先需要將字符串轉(zhuǎn)成json對(duì)象，隨后構(gòu)建表格的HTML代碼，遍歷json對(duì)象逐個(gè)生成表格元素。

（3）檢測預(yù)約時(shí)間段是否重復(fù)。數(shù)據(jù)庫中存儲(chǔ)的時(shí)間段是以字符串形式存儲(chǔ)的，其實(shí)判斷區(qū)間有無重復(fù)可以直接對(duì)字符串進(jìn)行比較。思路是先檢索該場地已預(yù)約的時(shí)間段。隨后一一進(jìn)行對(duì)比，如果全部通過，則不存在沖突。檢測的思路如下圖所示：

只需要判斷新的預(yù)約是否在已預(yù)約時(shí)間段的左側(cè)或者右側(cè)即可。具體的代碼如下：

for （int i ＝ 0； i ＜ dtBookInfo．Rows．Count； i＋＋）
｛
   ／／大于已預(yù)約右邊，小于已預(yù)約左邊
   notOverlap ＆＝ （ （string．Compare（bookSt， dtBookInfo．Rows［i］［1］．ToString（）．Trim（）， true） ＞ 0） ｜｜
                   （string．Compare（bookEt， dtBookInfo．Rows［i］［0］．ToString（）．Trim（）， true） ＜ 0） ）；
｝
if （！notOverlap）
｛
   context．Response．Write（＂該時(shí)間段已經(jīng)有別人預(yù)約啦，請(qǐng)重新選擇�。ⅲ�；
｝

4、數(shù)據(jù)庫結(jié)構(gòu)

數(shù)據(jù)庫的設(shè)計(jì)中，使用了三個(gè)數(shù)據(jù)庫表用以系統(tǒng)數(shù)據(jù)的存儲(chǔ)。分別為：

RoomInfo：記錄場地的信息，諸如場地類型，容納人數(shù)，是否可用等。BookInfo：記錄預(yù)定的信息，例如預(yù)定的用戶，預(yù)定的場地，預(yù)定的時(shí)間段等。WebUser：記錄系統(tǒng)的用戶信息，如用戶名，密碼的MD5密文，手機(jī)號(hào)等。

RoomInfo表的結(jié)構(gòu)如下：

列名數(shù)據(jù)類型說明實(shí)例RoomNumbernchar（10）場地號(hào)東九A101RoomTypenchar（10）場地類型階梯教室RoomPeoplenchar（10）場地能容納的人數(shù)100RoomStatusnchar（10）場地狀態(tài)空閑Remarksnchar（10）備注正在裝修

BookInfo表的結(jié)構(gòu)如下：

列名數(shù)據(jù)類型說明實(shí)例IDint預(yù)定號(hào)1CustomerNamevarchar（255）用戶名張三MyRemarknvarchar（50）備注預(yù)定教室開班會(huì)BookDatenchar（10）預(yù)定日期2021－06－01BookStnchar（50）預(yù)定開始時(shí)間09：30BookEtnchar（50）預(yù)定結(jié)束時(shí)間11：20BookDurationfloat預(yù)定時(shí)長2．5RoomNumbernchar（10）預(yù)定的場地號(hào)東九A101

WebUser表的結(jié)構(gòu)如下：

列名數(shù)據(jù)類型說明實(shí)例usernamevarchar（255）用戶名張三passwordvarchar（255）密碼MD5202……telephonevarchar（50）電話17798253366

數(shù)據(jù)庫的ER圖如下：

5、程序主要代碼及其說明

項(xiàng)目結(jié)構(gòu)如下，css、js等文件都放入了相應(yīng)的文件夾。前端分為登錄注冊(cè)頁面（login．a(chǎn)spx）和預(yù)定頁面（indextem．a(chǎn)spx）。用到了一些幫助類（SqlHelper．cs等）：

5．1 前端

前端開發(fā)時(shí)，JavaScript部分用到了json3和jQuery的庫，需要在aspx文件開頭中引入：

＜script src＝＂https：／／cdn．bootcss．com／json3／3．3．2／json3．js＂＞＜／script＞
＜script src＝＂https：／／cdn．bootcss．com／jquery／3．4．1／jquery．js＂＞＜／script＞

前端的界面使用了一個(gè)小型而時(shí)尚CSS庫Picnic CSS（https：／／picnicss．com／） 進(jìn)行美化，并且自定義了一些css的樣式，需要在頭部引入相關(guān)文件：

＜link rel＝＂stylesheet＂ href＝＂css／templatemo－style．css＂ ／＞
＜link rel＝＂stylesheet＂ href＝＂css／picnic．css＂ ／＞

登錄頁面

登錄頁面需要在成功以后做跳轉(zhuǎn)，因此采用的是form提交的信息：

＜div id＝＂section1＂ class＝＂section－w3ls＂＞
   ＜input type＝＂radio＂ name＝＂sections＂ id＝＂option1＂ checked＞
   ＜label for＝＂option1＂ class＝＂icon－left－w3pvt＂＞＜span class＝＂fa fa－user－circle＂ aria－h(huán)idden＝＂true＂＞＜／span＞登錄＜／label＞
   ＜article＞
       ＜form runat＝＂server＂＞
           ＜h3 class＝＂legend＂＞賬號(hào)登錄＜／h3＞
           ＜div class＝＂input＂＞
               ＜span class＝＂fa fa－user－o＂ aria－h(huán)idden＝＂true＂＞＜／span＞
               ＜input type＝＂text＂ placeholder＝＂用戶名＂ name＝＂inputEmail＂ required ／＞
           ＜／div＞
           ＜div class＝＂input＂＞
               ＜span class＝＂fa fa－key＂ aria－h(huán)idden＝＂true＂＞＜／span＞
               ＜input type＝＂password＂ placeholder＝＂密碼＂ name＝＂inputPassword＂ required ／＞
           ＜／div＞
           ＜asp：Button ID＝＂Button1＂ class＝＂btn submit＂ runat＝＂server＂ Text＝＂登陸＂ OnClick＝＂Button1＿Click＂ ／＞
           ＜a href＝＂＃＂ class＝＂bottom－text－w3ls＂＞忘記密碼？＜／a＞
       ＜／form＞
   ＜／article＞
＜／div＞

注冊(cè)用戶進(jìn)行用戶名的檢測：

預(yù)約頁面

預(yù)約頁面需要顯示的信息較多，如下圖所示：