一、【项目简介】
本项目是基于Tomcat+Servlet+MySql+JSP实现的学生宿舍管理系统,适合大一初学Java web的期末小项目,增删改查
- 开发工具:IDEA 2022.2
- 开发环境:JDK 1.8 + Tomcat 9.0.55 +MySql 8.0(Navicat)
二、【项目结构】
三、【前期准备】
- 新建数据库
- 输入数据库代码
DROP TABLE IF EXISTS `t_employee`; CREATE TABLE `t_employee` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID', `emp_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '员工姓名', `emp_gender` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '员工性别', `emp_dept` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '员工部门', `emp_salary` double DEFAULT NULL COMMENT '员工薪资', PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic; INSERT INTO `t_employee` VALUES (1, '张三', '男', '软件部', 3000); INSERT INTO `t_employee` VALUES (2, '小辉', '男', '软件部', 2500); INSERT INTO `t_employee` VALUES (3, '王五', '女', '软件部', 3000);
- 配置JDK和Tomcat:
四、【前端代码】
- 登录页代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: url('https://www.fjpit.edu.cn/_upload/article/images/85/0a/ace6605245f7aa03c4f70daef565/4859390e-bc87-42e1-896f-44386bc14740.png') no-repeat center center fixed; background-size: cover; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .login_box { text-align: center; width: 40%; background: rgba(255, 255, 255, 0.85); padding: 30px; border-radius: 10px; color: black; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .login_box h2 { margin-bottom: 20px; text-align: center; } input[type="text"], input[type="password"] { width: 60%; font-size: 20px; color: black; background: transparent; padding: 8px 10px; margin-top: 10px; border: none; border-bottom: 0.5px solid black; outline: none; } .button-box{ display: flex; justify-content: center; } button { margin-top: 20px; width: 60%; height: 40px; background-color: #0073e6; color: white; border: none; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #005bb5; } .footer{ text-align: center; } .footer img{ margin-top: 20px; width: 200px; height: 35px; } </style> </head> <body> <div class="login_box"> <h2>学生宿舍管理系统</h2> <form action="loginServlet" method="POST"> <div class="input_box"> 账号:<input type="text" name="account"><br> </div> <div class="input_box"> 密码:<input type="password" name="password"><br> </div> <div class="button-box"><button>登录</button></div> </form> <div class="footer"> 这里放置logo<img src="https://cas.paas.fjpit.cn/cas/file/png/logo.png?cas-server-site-ui__20240411__fe9a3bfc-24dc-42ef-8610-9ff46ac9a0d8__lQLPJyDFBuzsWEnM8M0F-rAunPjPBWF25gYEiP2J_fYA_1530_240.png"> </div> </div> </body> </html>
-
主页代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生宿舍管理系统</title> <style> * { text-decoration: none; color: inherit; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box; } body { background: url('https://www.fjpit.edu.cn/_upload/article/images/85/0a/ace6605245f7aa03c4f70daef565/4859390e-bc87-42e1-896f-44386bc14740.png') no-repeat center center fixed; background-size: cover; margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-blend-mode: overlay; } .main { width: 943px; height: 618px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; } .header { background: #0073e6; color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; border-top-left-radius: 20px; border-top-right-radius: 20px; } .header .title { font-size: 1.8em; font-weight: bold; } .header .user { font-size: 1.2em; } .content { padding: 30px; text-align: center; flex-grow: 1; } .content h2 { margin-top: 0; color: #0073e6; font-size: 3em; } .menu { margin: 20px 0; display: flex; justify-content: center; gap: 60px; } .menu a { background: #0073e6; color: white; padding: 20px 40px; border-radius: 10px; text-decoration: none; transition: background 0.3s, transform 0.3s; font-size: 1.2em; } .menu a:hover { background: #005bb5; transform: scale(1.1); } .search-box { margin: 20px auto; text-align: center; } .search-box input[type="text"] { width: 70%; padding: 15px; font-size: 1.1em; border: 2px solid #0073e6; border-radius: 10px; } .footer { background: #0073e6; color: white; padding: 20px; text-align: center; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; font-size: 1.1em; } .footer img { width: 270px; height: 50px; } </style> </head> <body> <div class="main"> <div class="header"> <div class="title">福信学生宿舍管理系统</div> <div class="user">欢迎您,管理员 <a href="adminCenter.jsp">管理员中心</a></div> </div> <div class="content"> <h2>欢迎登录学生宿舍管理系统</h2> <div class="menu"> <a href="empList">宿舍信息</a> <a href="addEmp.html">添加宿舍</a> </div> <div class="search-box"> <input type="text" placeholder="请输入学生姓名 宿舍号"> </div> <p>请从上方菜单中选择您需要的操作</p> </div> <div class="footer"> 这里放置logo<img src="https://cas.paas.fjpit.cn/cas/file/png/logo.png?cas-server-site-ui__20240411__fe9a3bfc-24dc-42ef-8610-9ff46ac9a0d8__lQLPJyDFBuzsWEnM8M0F-rAunPjPBWF25gYEiP2J_fYA_1530_240.png"> </div> </div> </body> </html>
-
信息列表代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学生宿舍信息</title> <style> * { text-decoration: none; color: inherit; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box; } body { background: url('https://www.fjpit.edu.cn/_upload/article/images/85/0a/ace6605245f7aa03c4f70daef565/4859390e-bc87-42e1-896f-44386bc14740.png') no-repeat center center fixed; background-size: cover; margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-blend-mode: overlay; } .main { width: 85%; max-width: 1400px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);