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

1、目標與應用場景

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

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

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

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

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

2、設計思路

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

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

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

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

（1）AJAX接口的設計問題，項目屬于輕量級項目，不需要多個后臺接口文件（．ashx），避免造成管理上的不便。采用一個．ashx實現(xiàn)多個請求，需要在請求時加上該請求所需要的功能，即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ù)，確定該請求所需要的功能，然后調用相應的代碼進行Response。

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

后臺代碼：

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

使用sql語句獲取所有記錄，轉為json字符串以后返回到前臺。前臺AJAX請求代碼：

function flushRoom（） ｛
       ＄．ajax（｛
           type： ＇get＇，
           url： ＇RoomBookHandler．ashx＇，
           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ù)據失�。。В�；
           ｝
       ｝）；
   ｝

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

function creatRoomTable（dataStr） ｛
       var dataList ＝ JSON．parse（dataStr）；
       var trStr ＝ ＇＜table class＝＂primary＂ id＝＂roomInfo＂ ＞＜tr＞＇ ＋
           ＇＜th＞ 教室號＜／th＞ ＜th＞教室類型＜／th＞＜th＞容納人數(shù)＜／th＞＇ ＋
           ＇＜th＞ 教室狀態(tài)＜／th＞ ＜th＞教室說明＜／th＞＜th＞是否預約＜／th＞＜／tr ＞＇；
       ／／循環(huán)遍歷出json對象中的每一個數(shù)據并顯示在對應的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＂＞預定＜／span＞＜／label＞＇；
           ｝
           else ｛
               trStr ＋＝ ＂不可用＂；
           ｝
           trStr ＋＝ ＇＜／td＞＇；
           trStr ＋＝ ＇＜／tr＞＇；
       ｝
       trStr ＋＝ ＇＜／table＞＇
       return trStr；
   ｝

首先需要將字符串轉成json對象，隨后構建表格的HTML代碼，遍歷json對象逐個生成表格元素。

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

只需要判斷新的預約是否在已預約時間段的左側或者右側即可。具體的代碼如下：

for （int i ＝ 0； i ＜ dtBookInfo．Rows．Count； i＋＋）
｛
   ／／大于已預約右邊，小于已預約左邊
   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（＂該時間段已經有別人預約啦，請重新選擇！＂）；
｝

4、數(shù)據庫結構

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

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

RoomInfo表的結構如下：

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

BookInfo表的結構如下：

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

WebUser表的結構如下：

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

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

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

項目結構如下，css、js等文件都放入了相應的文件夾。前端分為登錄注冊頁面（login．aspx）和預定頁面（indextem．aspx）。用到了一些幫助類（SqlHelper．cs等）：

5．1 前端

前端開發(fā)時，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＞

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

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

登錄頁面

登錄頁面需要在成功以后做跳轉，因此采用的是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＂＞賬號登錄＜／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＞

注冊用戶進行用戶名的檢測：

預約頁面

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