这个是我在修专业课《Web应用开发技术》时的结课作业，分组是按5人一组的。结果由于我是大四老学长回来补修的。就自己单干了。采用了asp.net技术开发的，前端用了一些CSS框架进行美化。数据交互采用AJAX，数据库用的SQL Sever。
代码获取
关注公众号【程序猿声】后台回复【WRB】即可获取。
1、目标与应用场景
同学们在进行各类活动时，通常需要一定的场地配合。如果是室外场地，例如操场等无需进行借用预约便可使用。但是大部分活动都需要在室内场地完成，例如开团员大会，开班会，班级联谊等。再者，教师群体需要举办学术交流活动等也需要室内的场地完成。华中科技大学的教室和公用场地十分充足，即使在工作日，也有很多空闲的场地剩余。场地包括启明学院、教学楼、学生公寓内部的公用房、学院内的教室等。为满足广大同学的学习活动需求，促进同学之间的交流，同时更加充分地利用公共教室范围内的场地，我们小组决定设计并实现华中科技大学的场地预约系统，该系统的需求如下：
- 用户可以登录系统，进行教室的预约。
- 系统需要支持多用户使用，用户之间同一教室的预约时间段不能冲突。
- 如果不需要教室了，用户可以选择取消自己的预约。
- 用户能看到自己的历史预约信息。
根据以上的需求，拟实现的系统功能如下：
- 登录注册：新用户可以通过注册页面进行注册，随后使用注册的账号密码进行系统登录并使用。密码采用MD5密文保存到数据库中，确保用户的隐私安全。
- 场地展示：系统从数据库读取当前的场地信息，如场地类型、场地的名称、是否空闲等信息。并将其展示到页面前台，供用户查看选择。
- 预约：用户根据自己需要的场地类型，选择合适的场地，选中后系统显示该场地已被预约的时段，避免产生冲突。用户选择好时间段以后即可进行预约，系统检测预约是否冲突，如果不冲突则预约成功。
- 取消预约：展示用户已经预约成功的场地和时段，用户不需要了可以取消预约。
- 历史展示：显示用户的历史预约记录。
该系统的应用群体主要为大学生和大学教师。场景面向大学校园。旨在打造一个方便的场地预约管理系统。
2、设计思路
系统的设计分为前端、后端和数据库三大块。初步确定的开发平台为微软的.net平台+SQL Sever数据库（当然也是课程设计要求的）。前端对相关的页面进行设计布局，还可以使用现成的CSS框架进行一定的美化。后端可以使用老师封装好的SqlHelper.cs进行数据库的一些请求。前后端交互采用的主要是AJAX技术，实现轻量级的交互。关于前后端主要的思路如下：
- 前端：分页面进行开发，可以使得结构更加清晰。页面可划分为登录注册页面和主功能页面。
- 后端：交互技术使用AJAX进行交互，后端可以使用.ashx文件进行API的编写，采用参数action控制请求的类型，例如action=”login”时表示请求的是登录功能，从而进行判断。
- 数据库：确定系统的功能，提取相应的数据结构，建立数据库表。
系统功能结构设计图如下：
3、关键问题与实现代码
在该系统中，关键性的问题主要有以下几个：
（1）AJAX接口的设计问题，项目属于轻量级项目，不需要多个后台接口文件(.ashx)，避免造成管理上的不便。采用一个.ashx实现多个请求，需要在请求时加上该请求所需要的功能，即action参数。因此采用了以下的框架：
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参数，确定该请求所需要的功能，然后调用相应的代码进行Response。
（2）利用请求返回的json数据创建相应的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('获取数据失败!');
}
});
}
将AJAX返回的结果，使用creatRoomTable函数生成HTML表格，并设置到页面的元素上面。creatRoomTable的代码如下：
function creatRoomTable(dataStr) {
var dataList = JSON.parse(dataStr);
var trStr = '<table class="primary" id="roomInfo" style=" 100%"><tr>' +
'<th> 教室号</th> <th>教室类型</th><th>容纳人数</th>' +
'<th> 教室状态</th> <th>教室说明</th><th>是否预约</th></tr >';
//循环遍历出json对象中的每一个数据并显示在对应的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）检测预约时间段是否重复。数据库中存储的时间段是以字符串形式存储的，其实判断区间有无重复可以直接对字符串进行比较。思路是先检索该场地已预约的时间段。随后一一进行对比，如果全部通过，则不存在冲突。检测的思路如下图所示：
只需要判断新的预约是否在已预约时间段的左侧或者右侧即可。具体的代码如下：
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、数据库结构
数据库的设计中，使用了三个数据库表用以系统数据的存储。分别为：
- RoomInfo：记录场地的信息，诸如场地类型，容纳人数，是否可用等。
- BookInfo：记录预定的信息，例如预定的用户，预定的场地，预定的时间段等。
- WebUser：记录系统的用户信息，如用户名，密码的MD5密文，手机号等。
RoomInfo表的结构如下：
| 列名 | 数据类型 | 说明 | 实例 |
|---|---|---|---|
| RoomNumber | nchar(10) | 场地号 | 东九A101 |
| RoomType | nchar(10) | 场地类型 | 阶梯教室 |
| RoomPeople | nchar(10) | 场地能容纳的人数 | 100 |
| RoomStatus | nchar(10) | 场地状态 | 空闲 |
| Remarks | nchar(10) | 备注 | 正在装修 |
BookInfo表的结构如下：
| 列名 | 数据类型 | 说明 | 实例 |
|---|---|---|---|
| ID | int | 预定号 | 1 |
| CustomerName | varchar(255) | 用户名 | 张三 |
| MyRemark | nvarchar(50) | 备注 | 预定教室开班会 |
| BookDate | nchar(10) | 预定日期 | 2021-06-01 |
| BookSt | nchar(50) | 预定开始时间 | 09:30 |
| BookEt | nchar(50) | 预定结束时间 | 11:20 |
| BookDuration | float | 预定时长 | 2.5 |
| RoomNumber | nchar(10) | 预定的场地号 | 东九A101 |
WebUser表的结构如下：
| 列名 | 数据类型 | 说明 | 实例 |
|---|---|---|---|
| username | varchar(255) | 用户名 | 张三 |
| password | varchar(255) | 密码MD5 | 202…… |
| telephone | varchar(50) | 电话 | 17798253366 |
数据库的ER图如下：
5、程序主要代码及其说明
项目结构如下，css、js等文件都放入了相应的文件夹。前端分为登录注册页面（login.aspx）和预定页面（indextem.aspx）。用到了一些帮助类（SqlHelper.cs等）：
5.1 前端
前端开发时，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-hidden="true"></span>登录</label>
<article>
<form runat="server">
<h3 class="legend">账号登录</h3>
<div class="input">
<span class="fa fa-user-o" aria-hidden="true"></span>
<input type="text" placeholder="用户名" name="inputEmail" required />
</div>
<div class="input">
<span class="fa fa-key" aria-hidden="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>
注册用户进行用户名的检测：
预约页面
预约页面需要显示的信息较多，如下图所示：
可以在HTML页面编写元素，然后使用js动态生成，例如：
<table class="primary" id="roomInfo" style=" 100%"></table>
document.getElementById("roomInfo").innerHTML = creatRoomTable(result);
也可以直接在aspx文件中使用C#的脚本进行生成：
<%
System.Data.DataSet ds2 = MyDBUtils.DBHelper.ExecuteQuery("select BookInfo.ID, BookInfo.RoomNumber, RoomType, RoomPeople, MyRemark,BookSt, " +
"BookEt, BookDuration from BookInfo join RoomInfo on " +
"BookInfo.RoomNumber = RoomInfo.RoomNumber where " +
"BookDate > '" + DateTime.Now.ToString("yyyy-MM-dd") + "' and CustomerName='" + Request.Cookies["login_name"].Value + "'");
for (int i = 0; i < ds2.Tables[0].Rows.Count; i++)
{
Context.Response.Write("<tr>");
for (int j = 1; j < 8; j++)
{
Context.Response.Write("<td>");
Context.Response.Write(ds2.Tables[0].Rows[i][j].ToString());
Context.Response.Write("</td>");
}
Context.Response.Write("<td>");
Context.Response.Write("<label><input type='checkbox' name='checkbokRoom' value='" + ds2.Tables[0].Rows[i][0].ToString()+"-"+ ds2.Tables[0].Rows[i][1].ToString() + "' /><span class='checkable'>退订</span></label>");
Context.Response.Write("</td>");
Context.Response.Write("</tr>");
}
%>
表格中的radio单选按钮，需要绑定单击的事件，这部分代码获取选中的场地所预约的时间段，并将其显示到表格下方的框框中，为AJAX局部更新，改变选中的场地时（单选按钮的改变），也会在下面更新该场地的预约时间段：
function getRoomTimeSpan() {
var roomNumber = getSelectedRadioValue();
//发送请求获预约的时间段
$.ajax({
type: 'get',
url: 'RoomBookHandler.ashx',
async: true,
data: {
action: 'getBookTime',
roomNo: roomNumber
},
success: function (result) {
var dataList = JSON.parse(result);
var footerStr = '<footer id="bookTimeSpan" >';
for (var ind in dataList) {
footerStr += '<span class="label warning" style="font-size: 110%">';
footerStr += dataList[ind].BookSt.toString().trim().substring(0, 5);
footerStr += ' - ';
footerStr += dataList[ind].BookEt.toString().trim().substring(0, 5);
footerStr += '</span >';
}
footerStr += '</footer >';
document.getElementById("bookTimeSpan").innerHTML = footerStr;
},
error: function () {
alert('获取数据失败!');
}
});
}
时间段的选择使用了一个时间选择控件，效果如下：
预定时，获取用户输入的一系列数据，然后使用AJAX发送到后台进行处理：
function bookRoom() {
var bookT = document.getElementById("timeArrange").value;
if (bookT === "") {
alert("必须选择要借用的时间范围！");
return false;
}
var myR = document.getElementById("myRemarks").value;
var roomNumber = getSelectedRadioValue();
if (roomNumber === "") {
alert("必须选择要借用的教室！");
return false;
}
//要发送的数据，教室号，预定开始时间-结束时间，我的备注
$.ajax({
type: 'post',
url: 'RoomBookHandler.ashx',
async: true,
data: {
action: 'bookRoom',
roomNo: roomNumber,
bookTime: bookT,
myRemark: myR
},
success: function (result) {
alert(result);
getRoomTimeSpan();
updateBookedTable();
},
error: function () {
alert('请求失败!');
}
});
}
注意，如果用户输入不合法，比如未选中时间段，未选中教室，时间段冲突等都无法有效完成预定。
预约成功显示预约的教室：
表格创建代码与场地显示的表格创建代码类似，取消预约的需要将取消的预定号（预定号绑定到了checkbox的value中）发送到后台，进行记录删除：
function cancelBook() {
var checkList = [];
var timeSpanUpList = [];
var checkbokContext = document.getElementsByName("checkbokRoom");
for (i = 0; i < checkbokContext.length; ++i) {
if (checkbokContext[i].checked) {
var dataStr = checkbokContext[i].value.split('-');
checkList.push(dataStr[0]);
timeSpanUpList.push(dataStr[1]);
}
}
if (checkList.length == 0) {
alert("请选择您需要取消预约的教室！");
return false;
}
var cancelListStr = checkList.join(','); //转成1,3,4这种形式，后台再解析
$.ajax({
type: 'post',
url: 'RoomBookHandler.ashx',
async: true,
data: {
action: 'cancelBook',
cancel: cancelListStr
},
success: function (result) {
alert(result);
//刷新本表
updateBookedTable();
//刷新foot
if (timeSpanUpList.indexOf(getSelectedRadioValue()) != -1) {
getRoomTimeSpan();
}
},
error: function () {
alert('连接失败!');
}
});
}
成功以后，更新该表格。但是需要注意的是，此外还做了一个小细节，取消某一时间段以后，如果恰好在场地展示页面选中的也是这个教室，那么下面的预约时间段也会同步更新，采用的同样为AJAX技术。
success: function (result) {
alert(result);
//刷新本表
updateBookedTable();
//刷新foot
if (timeSpanUpList.indexOf(getSelectedRadioValue()) != -1) {
getRoomTimeSpan();
}
},
历史预约表格的生成，采用的是aspx中嵌入脚本的形式生成的：
<table class="primary" style=" 100%">
<tr>
<th>教室号</th>
<th>教室类型</th>
<th>容纳人数</th>
<th>我的备注</th>
<th>日期</th>
<th>开始时间</th>
<th>结束时间</th>
<th>借用时长(小时)</th>
</tr>
<tbody>
<%
System.Data.DataSet ds3 = MyDBUtils.DBHelper.ExecuteQuery("select BookInfo.RoomNumber, RoomType, RoomPeople, MyRemark,BookDate,BookSt, " +
"BookEt, BookDuration from BookInfo join RoomInfo on " +
"BookInfo.RoomNumber = RoomInfo.RoomNumber " +
"where BookDate < '" + DateTime.Now.AddDays(1).ToString("yyyy-MM-dd") +"' and CustomerName='" + Request.Cookies["login_name"].Value + "'");
for (int i = 0; i < ds3.Tables[0].Rows.Count; i++)
{
Context.Response.Write("<tr>");
for (int j = 0; j < 8; j++)
{
Context.Response.Write("<td>");
Context.Response.Write(ds3.Tables[0].Rows[i][j].ToString());
Context.Response.Write("</td>");
}
Context.Response.Write("</tr>");
}
%>
</tbody>
</table>
检索的时候，系统将自动从预订表中检索该用户在今天之前的预约信息，并展示出来。
5.2 后台
登录页面
后台代码进行校验，需要先将密码转成MD5密文，然后实行字符串匹配：
string username = Request.Params["inputEmail"].ToString();
string password = MD5Helper.ToMD5(Request.Params["inputPassword"].ToString());
if (DBHelper.ExecuteQuery("select * from WebUser where username='" + username + "' and password='" + password + "'").Tables[0].Rows.Count > 0)
{
//放一个Cookie来指示是哪名用户登陆了
HttpCookie cookie = new HttpCookie("login_name", username);
Response.Cookies.Add(cookie);
Response.Redirect("indextem.aspx");
}
else
{
Response.Write("<script language=javascript>alert('用户名或密码错误');</script>");
}
注册页面的前端类似，后端代码以数据库插入为主，需要判断用户名是否重复，如下：
var name = Request["regName"];
if (!string.IsNullOrEmpty(name))
{
if (DBHelper.ExecuteQuery("select * from WebUser where username='" + name + "'").Tables[0].Rows.Count > 0)
{
//检测该用户名是否注册
Response.Write("<script language=javascript>alert('注册失败，用户名已被使用！');</script>");
}
else
{
var passwd = Request["regPassword"];
passwd = MD5Helper.ToMD5(passwd.ToString());
var telephone = Request["regTelephone"];
var sql = "INSERT INTO WebUser(username,password,telephone) VALUES ('{0}','{1}','{2}')";
sql = string.Format(sql, name, passwd, telephone);
if (SqlHelper.ExecuteSql(sql) > 0)
{
var str = "注册成功，您的用户名：" + name + " ，现在去登录试试吧~";
Response.Write("<script language=javascript>alert('" + str + "');</script>");
}
else
{
Response.Write("<script language=javascript>alert('注册失败，数据库出错！');</script>");
}
}
}
预约页面
预定的后台处理代码，后台需要做预定冲突的检测：
string[] bookTime = context.Request["bookTime"].Split('-');
string bookSt = bookTime[0].Trim();
string bookEt = bookTime[1].Trim();
string bookDate = DateTime.Now.AddDays(1).ToString("yyyy-MM-dd");
string roomNumber = context.Request["roomNo"];
//预定时间区间判断
var bookInfoSql = "select BookSt, BookSt from BookInfo where " +
"BookDate='{0}' And RoomNumber='{1}'";
bookInfoSql = string.Format(bookInfoSql, bookDate, roomNumber);
DataTable dtBookInfo = SqlHelper.getDataTable(bookInfoSql);
Boolean notOverlap = true;
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("该时间段已经有别人预约啦，请重新选择！");
}
else
{
string customerName = context.Request.Cookies["login_name"].Value;
string myRemark = context.Request["myRemark"];
if (string.IsNullOrEmpty(myRemark))
{
myRemark = "无";
}
DateTime dt1 = DateTime.Parse(bookDate + " " + bookSt);
DateTime dt2 = DateTime.Parse(bookDate + " " + bookEt);
TimeSpan ts = dt2.Subtract(dt1);
double bookDurationHours = Math.Round(ts.TotalHours, 2);
DataTable dtLastID = SqlHelper.getDataTable("select top 1 ID from BookInfo order by ID DESC");
string insIdStr = dtLastID.Rows[0][0].ToString();
int insId = int.Parse(insIdStr) + 1;
//插入到数据库中去
var bookSql = "INSERT INTO BookInfo(ID, CustomerName,MyRemark,BookDate,BookSt,BookDuration,RoomNumber,BookEt) " +
"VALUES ({0},'{1}','{2}','{3}','{4}','{5}','{6}','{7}')";
bookSql = string.Format(bookSql, insId, customerName, myRemark, bookDate, bookSt, bookDurationHours,
roomNumber, bookEt);
if (SqlHelper.ExecuteSql(bookSql) > 0)
{
context.Response.Write("预定成功！");
}
else
{
context.Response.Write("后台数据插入出错！");
}
}
获取预订时间段后台处理代码：
string roomNum = context.Request["roomNo"];
var sqlBookSp = "select BookSt, BookEt from BookInfo " +
"where BookDate = '" + DateTime.Now.AddDays(1).ToString("yyyy-MM-dd") + "' and RoomNumber = '{0}' order by BookSt";
sqlBookSp = string.Format(sqlBookSp, roomNum);
DataTable dtTimeSp = SqlHelper.getDataTable(sqlBookSp);
string sJson2 = JsonConvert.SerializeObject(dtTimeSp);
context.Response.Write(sJson2);
break;
取消预约的代码：
//删除预订的数据
string[] delListStr = context.Request["cancel"].Split(',');
int totalCancel = 0;
foreach(var delRoom in delListStr)
{
var delSql = "delete from BookInfo where ID = " + delRoom;
if (SqlHelper.ExecuteSql(delSql) > 0)
{
totalCancel++;
}
}
context.Response.Write("取消预订完成，共取消 " + totalCancel.ToString() + " 间教室！");
6、运行效果图
登录
注册：
预订（可以手动刷新教室信息）：
时间冲突：
我的预订：
取消预订（支持多个一起取消）：
取消以后自动刷新该场地下预约的时间段：
历史预约 && 我的信息显示：
7、小结
场地信息的发布应该还需要一个管理端，即管理员可以编辑场地信息，然后进行发布，但是由于个人能力有限，管理端没有进行设计。或者将系统与hub直接对接，检索空闲的教室场地等进行借用，也是可以的。不过需要学校方面的支持。
附录
数据库脚本【已附在程序目录】运行时可能需要修改文件存储目录，默认为D盘下的DataBase文件夹：
利用VS2019及其以上版本打开项目文件.sln:
运行login.aspx即可：
