发布于2026-07-22 阅读(0)
扫一扫,手机访问
运行环境这边,需要Ja va 6及以上版本,Tomcat 7.0以上,MySQL 5.5起步——这是目前比较主流的配置组合,兼容性和稳定性都经过了充分验证。
开发工具方面,不论是idea、eclipse还是MyEclipse,都能直接上手,没有特殊的工具依赖。
这套系统特别适合课程设计、大作业、毕业设计,当然,拿来练手或者做项目演示也完全够用。
功能模块上,其实覆盖了宿舍管理最核心的几个场景:从登录、注册到退出,再到用户、公告、宿管员、宿舍、学生这几个模块的增删改查,都给大家安排上了。
技术选型上,Ja vaWeb + Ja vaBean + JSP + MVC这个经典组合是主力,配合MySQL数据库、Tomcat服务器,再加上Ja vaScript交互、idea/eclipse这些开发工具,以及Servlet、SSM、Ma ven等进阶框架——说实话,这套技术栈放到现在也不算过时,很多学校项目还在用,实操性很强。
代码层面,前端验证逻辑写得比较细致。比如表单提交前,会先检查姓名、电话、楼栋这些必填项是否为空,如果为空就弹窗提醒并阻止提交。具体实现是这样的:
return false;
}
if (document.getElementById("add-administratorBuilding").value.trim().length == 0) {
alert("楼栋不能为空");
return false;
}
return true;
}
//编辑表单提交之前进行检查,如果return false,则不允许提交
function editCheck() {
//根据ID获取值
if (document.getElementById("edit-administratorName").value.trim().length == 0) {
alert("姓名不能为空");
return false;
}
if (document.getElementById("edit-administratorPhone").value.trim().length == 0) {
alert("电话不能为空");
return false;
}
页面布局上,左侧是导航菜单,右侧是内容区,典型的后台管理结构。搜索框支持按姓名模糊查询,旁边还放了一个“添加宿管员”按钮,不过权限控制得很清楚——非管理员用户是点不了这个按钮的。
列表页用的是表格展示,字段包括姓名、性别、电话、楼栋,操作栏里有详情、编辑、删除三个按钮——同样,非管理员用户只能看详情,编辑和删除按钮是灰色的。
姓名
性别
电话
楼栋
操作
${vo.administratorName}
${vo.administratorSex}
${vo.administratorPhone}
${vo.administratorBuilding}
框架层的导航栏也很清晰,品牌叫“学生宿舍管理系统”,右上角显示当前登录用户,还有退出功能入口。
页面头部引入了JSTL标签库,方便在JSP中做逻辑处理和循环输出,还引用了Bootstrap的CSS和JS文件,所以整体UI风格比较统一,响应式布局也照顾到了。
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://ja va.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://ja va.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://ja va.sun.com/jsp/jstl/fmt" %>
宿管员 管理
弹窗交互方面,编辑和详情功能都通过Ajax异步加载数据,页面体验比较流畅。比如编辑弹窗,点击后根据ID请求后端,拿到数据后自动填充到表单里,性别用单选按钮回显,楼栋、电话、备注也都一一对应。
let id = button.data('id');
let modal = $(this);
modal.find('#delete-id').val(id);
})
$('#modal-edit').on('show.bs.modal', function (event) {
let button = $(event.relatedTarget);
let id = button.data('id');
let modal = $(this);
$.ajax({
url: 'administratorGet?id=' + id,
type: "get",
success: function (voString) {
let vo = eval('(' + voString + ')');
modal.find('#edit-id').val(vo.id);
modal.find('#edit-administratorName').val(vo.administratorName);
for (let val of "男/女".split('/')) {
if (val == vo.administratorSex) {
modal.find('#edit-administratorSex_' + vo.administratorSex).prop("checked", true);
} else {
modal.find('#edit-administratorSex_' + vo.administratorSex).removeAttr("checked");
详情弹窗展示的是只读信息,包括姓名、性别、电话、楼栋、备注,数据同样通过Ajax获取,用户点开就能看到完整记录。删除功能则放在独立的弹窗里,二次确认防止误操作,设计上还是比较贴心的。
宿管员
姓名:
性别:
电话:
添加表单里的字段包括姓名、性别(单选)、电话、楼栋、备注,提交前会经过前端验证,确保必填项不为空。
整体来看,这套系统的代码结构清晰,JSP、Servlet、Ja vaBean的分层设计很典型,前端用了Bootstrap + jQuery,弹窗交互、Ajax数据加载、表单验证都齐全,非常适合作为学生的入门项目来学习。
};
modal.find('#edit-administratorPhone').val(vo.administratorPhone);
modal.find('#edit-administratorBuilding').val(vo.administratorBuilding);
modal.find('#edit-administratorText').val(vo.administratorText);
}
})
})
$('#modal-info').on('show.bs.modal', function (event) {
let button = $(event.relatedTarget);
let id = button.data('id');
let modal = $(this);
$.ajax({
url: 'administratorGet?id=' + id,
type: "get",
success: function (voString) {
let vo = eval('(' + voString + ')');
modal.find('#info-administratorName').text(vo.administratorName);
modal.find('#info-administratorSex').text(vo.administratorSex);
编辑弹窗的完整结构,注意里面的隐藏字段(action和id),以及表单提交时触发的验证函数。
aria-labelledby="myModalLabel">
最新发布
-
1
-
2
-
3
- C语言中\n是什么意思?换行转义字符详解
- 342天前
-
4
- 探析Spring Boot框架的优点和特色
- 657天前
-
5
- 深入比较PyCharm社区版和专业版的功能
- 595天前
-
6
- 专家观点:谷歌是否会继续支持Golang的探讨
- 571天前
-
7
-
8
- Python实战教程:批量转换多种音乐格式
- 1203天前
-
9
- 如何在在线答题中实现试卷的自动批改和自动评分
- 1031天前
相关推荐
热门关注
-
- PixPin
- ¥8.00-¥8.00
-
- Total Uninstall
- ¥29.00-¥29.00
-
- 酷呆桌面
- ¥31.50-¥35.00
-
- ByePhotos
- ¥31.50-¥45.00
-
- TTime
- ¥3.00-¥3.00