Web應(yīng)用開發(fā):ASP.NET 大學(xué)場地預(yù)約借用系統(tǒng)
這個(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ù)約頁面需要顯示的信息較多,如下圖所示:
發(fā)表評(píng)論
請(qǐng)輸入評(píng)論內(nèi)容...
請(qǐng)輸入評(píng)論/評(píng)論長度6~500個(gè)字
您提交的評(píng)論過于頻繁,請(qǐng)輸入驗(yàn)證碼繼續(xù)
最新活動(dòng)更多
-
10月31日立即下載>> 【限時(shí)免費(fèi)下載】TE暖通空調(diào)系統(tǒng)高效可靠的組件解決方案
-
即日-11.13立即報(bào)名>>> 【在線會(huì)議】多物理場仿真助跑新能源汽車
-
11月28日立即報(bào)名>>> 2024工程師系列—工業(yè)電子技術(shù)在線會(huì)議
-
12月19日立即報(bào)名>> 【線下會(huì)議】OFweek 2024(第九屆)物聯(lián)網(wǎng)產(chǎn)業(yè)大會(huì)
-
即日-12.26火熱報(bào)名中>> OFweek2024中國智造CIO在線峰會(huì)
-
即日-2025.8.1立即下載>> 《2024智能制造產(chǎn)業(yè)高端化、智能化、綠色化發(fā)展藍(lán)皮書》
推薦專題
- 1 【一周車話】沒有方向盤和踏板的車,你敢坐嗎?
- 2 特斯拉發(fā)布無人駕駛車,還未迎來“Chatgpt時(shí)刻”
- 3 特斯拉股價(jià)大跌15%:Robotaxi離落地還差一個(gè)蘿卜快跑
- 4 馬斯克給的“驚喜”夠嗎?
- 5 海信給AI電視打樣,12大AI智能體全面升級(jí)大屏體驗(yàn)
- 6 打完“價(jià)格戰(zhàn)”,大模型還要比什么?
- 7 馬斯克致敬“國產(chǎn)蘿卜”?
- 8 神經(jīng)網(wǎng)絡(luò),誰是盈利最強(qiáng)企業(yè)?
- 9 比蘋果偉大100倍!真正改寫人類歷史的智能產(chǎn)品降臨
- 10 諾獎(jiǎng)進(jìn)入“AI時(shí)代”,人類何去何從?
- 高級(jí)軟件工程師 廣東省/深圳市
- 自動(dòng)化高級(jí)工程師 廣東省/深圳市
- 光器件研發(fā)工程師 福建省/福州市
- 銷售總監(jiān)(光器件) 北京市/海淀區(qū)
- 激光器高級(jí)銷售經(jīng)理 上海市/虹口區(qū)
- 光器件物理工程師 北京市/海淀區(qū)
- 激光研發(fā)工程師 北京市/昌平區(qū)
- 技術(shù)專家 廣東省/江門市
- 封裝工程師 北京市/海淀區(qū)
- 結(jié)構(gòu)工程師 廣東省/深圳市