摘要
本文设计并实现了一个基于B/S架构的学生住宿管理系统，该系统作为Web应用软件，服务器端采用MySQL作为后台数据库，并使用Java语言进行服务器端应用程序的开发。前端界面则利用HTML、CSS和JavaScript等网页技术构建。在开发过程中，主要运用了Intellij IDEA作为Java集成开发环境，Navicat作为数据库连接工具，以及Visio进行绘图设计。系统采用了Spring Boot和JPA技术作为服务器端编程框架，前端UI框架则选择了layui。
系统主要功能包括用户登录访问、查询学生宿舍分配情况、学生自选寝室、处理学生入住申请、住宿解约、后台信息管理以及用户修改个人信息等。宿舍管理员和学生可以通过浏览器访问系统，并根据各自角色拥有不同的操作权限。学生可以查看自己被分配的寝室，提交入住申请，并在申请通过后查看分配结果。宿舍管理员可以处理学生的入住申请，执行解约操作，管理用户、学生和寝室信息，并支持查询结果的导出。系统还为学生自动创建账户，并允许用户和管理员修改个人信息，其中密码进行单向加密保存。
关键词：学生住宿管理系统；B/S架构；Spring Boot；JPA；宿舍分配；入住申请
目录
摘要 1
Abstract 2
前言 4
1.1选题背景及意义 4
1.2国内外研究现状 4
1.3研究主要内容 4
1系统分析 6
1.1问题说明 6
1.2功能需求 6
1.2.1主要功能描述 6
1.2.2用例图 8
1.3数据需求 8
1.3.1数据结构 8
1.3.2数据处理要求 10
1.4性能需求 11
1.5开发环境与工具软件 12
2系统设计 13
2.1总体设计 13
2.2数据库表结构 15
2.3输入/输出设计 17
2.3.1输入设计 17
2.3.2输出设计 17
2.4用户界面设计 18
2.5处理过程设计 21
3系统实现与测试 25
3.1单元测试 25
(5)测试用例5：宿舍管理员登录系统，通过张明的入住申请。 25
3.2集成测试 26
4设计的特点、不足、体会 27
4.1设计的特点与不足 27
总结 28
致谢 29
参考文献 30
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生住宿管理系统前台</title>
<link rel="icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
<!--导入网页图标 -->
<link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
<!--导入网页图标 -->
<script src="../static/lib/jQuery/jquery-3.5.1.min.js" th:src="@{/lib/jQuery/jquery-3.5.1.min.js}"></script>
<!--导入jQuery库 -->
<script src="../static/lib/layui/layui.js" th:src="@{/lib/layui/layui.js}"></script>
<!--导入layUI库 -->
<script src="../static/lib/cookie/js.cookie-2.2.1.min.js" th:src="@{/lib/cookie/js.cookie-2.2.1.min.js}"></script>
<!--导入cookie库 -->
<link rel="stylesheet" href="../static/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}" media="all">
<!--导入layUI css库 -->
<link rel="stylesheet" href="../static/css/common.css" th:href="@{/css/common.css}">
<!--导入公共的css，其中可定义整个网页的配色方案 -->
<link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">
</head>
<body>
<div>
<ul class="layui-nav" lay-filter="" style="position: fixed;top:0;left: 0;right: 0;z-index: 1000;">
<li class="layui-nav-item"><a href="" id="hover_div" style="font-size:large"> 学生住宿管理系统</a></li>
<li class="layui-nav-item "><a href="javascript:void(0)"><span id="i_room"
th:text="${currentRoom==null?'未安排宿舍':'我的寝室:'+currentRoom.name}">XXX</span></a>
<dl class="layui-nav-child">
<dd><img src="../static/images/default.ico"
th:src="${currentRoom==null?'/images/no.png':((currentRoom.picture==null||currentRoom.picture=='')?'/images/no.png':currentRoom.picture)}"
alt="">
</dd>
</dl>
</li>
<li class="layui-nav-item layui-layout-right" style="margin-right: 100px;">
<a href="javascript:void(0)">
<img src="../static/images/default.ico"
th:src="${(session.currentUser==null||session.currentUser.avatar==null||session.currentUser.avatar=='')?'/images/avatar.jpg':session.currentUser.avatar}"
class="layui-nav-img" alt="">
<span th:text="${session.currentUser==null?'未登录':(session.currentUser.username==null?'':session.currentUser.username)}">用户名</span>
</a>
<dl class="layui-nav-child">
<dd><a href="" th:href="@{/user}">个人中心</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-layout-right"><a href="/logout">安全退出</a></li>
</ul>
</div>
<div style="position: absolute;left: 60px;right:60px;top:0;bottom:0;padding-top: 10px;background-color: rgb(246, 251, 255);">
<div class="layui-col-md12"
style="padding: 30px;">
<!-- 内容主体区域 -->
<div style="padding-left: 15px;padding-top: 10px">
<div id="search_div" style="margin-top: 10px;padding-top: 10px;">
<div class="layui-form layui-form-item layui-inline" style="margin-bottom: 0">
<label for="search_by_key_word"></label>
<input class="layui-input" name="searchName" placeholder="请输入寝室名" id="search_by_key_word"
autocomplete="off">
</div>
<div class="layui-form layui-form-item layui-inline" style="margin-bottom: 0">
<label for="search_by_select"></label>
<select class="layui-input" id="search_by_select" style="width: 200px;">
<option value="" selected="selected">不限类型</option>
<option value="" th:each="category:${categories}" th:value="${category.id}"
th:text="${category.name}">四人寝
</option>
</select>
</div>
<button class="layui-btn" id="search_by_room_name_btn" data-type="reload">
<i class="layui-icon layui-icon-search"></i>
</button>
</div>
<!-- layUI渲染的表格组件 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<input id="student_id" type="hidden" th:value="${session.currentUser==null?'未登录':session.currentUser.username}">
</div>
</div>
<div class="layui-footer" id="sdms-footer"></div>
<script src="../static/js/footer.js" th:src="@{/js/footer.js}"></script>
<!-- 表格组件内部的操作按钮 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit"> 申请入住 </a>
</script>
<!-- layUI执行脚本,预先加载 -->
<script>
layui.use(['element', 'layer', 'form', 'table'], function () {
var table = layui.table;
var layer = layui.layer;
table.render({
elem: '#test',
url: "/admin/rooms",
method: 'post',
contentType: 'application/json',
limit: 10,
title: '寝室数据表',
cols: [
[{
type: 'checkbox',
fixed: 'left'
}, {
field: 'id',
title: '寝室ID',
width: 150
}, {
field: 'categoryName',
title: '类型',
width: 150,
sort: true
}, {
field: 'name',
title: '寝室名',
width: 150,
sort: true
}, {
field: 'address',
title: '地址'
}, {
fixed: 'right',
title: '操作',
toolbar: '#barDemo',
width: 100
}]
],
page: true,
id: 'table_id'
});
//表格渲染重载,通过where字段传递查询条件 searchName
var $ = layui.$;
var active = {
reload: function () {
//执行重载
table.reload('table_id', {
page: {
curr: 1 //重新从第 1 页开始
},
where: {
//查询条件
queryType: 0,
param: {
roomId: "",
keyWord: $("#search_by_key_word").val(),
categoryId: $("#search_by_select").val(),
}
//这里可以传对象
}
});
}
};
//搜索框点击事件
$('#search_by_room_name_btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
if ($("#i_room").text() !== '未安排宿舍') {
layer.msg("您已经被安排了宿舍，不要重复申请", {icon: 2, offset: 't', time: 1000})
} else {
$.get("/room-request/new?studentId=" + $("#student_id").val() + "&" + "roomId=" + data.id, function (resp) {
if (resp.code === 0) {
layer.msg("申请发送成功", {icon: 1, offset: 't', time: 2000});
} else {
layer.msg("申请发送失败", {icon: 2, offset: 't', time: 2000});
}
});
}
}
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
