1. 系统中所有页面，如果用户没登录，则让用户返回到登录页面login.jsp。
2. 留言板(message.jsp)页面中以表格形式显示所有用户留言，包括留言者用户名、留言标题、留言时间。点击标题后，在新页面(showmessage.jsp)中显示留言内容。
3. 用户可以在留言页面addMessage.jsp添加新的留言，留言包括标题和内容。
Login.jsp
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en"> <%--表示这个 HTML 文档的语言是英语--%>
<head>
<%--是一个 HTML 中的 <meta> 标签，用于指定文档的字符编码为 UTF-8,确保浏览器能够正确地显示文档中的文本内容，避免出现乱码问题--%>
<meta charset="UTF-8">
<title>山东科技大学系统登录</title>
<style>
/*这是一个通配选择器，表示选择页面中的所有元素*/
* {
/*将所有元素的外边距（margin）设置为 0，即去除元素周围的空白区域*/
margin: 0;
/*将所有元素的内边距（padding）设置为 0，即元素内部与内容之间的空白区域也被清除*/
padding: 0;
/*设置盒模型为 border-box,元素的宽度和高度包括了边框（border）和内边距（padding）*/
box-sizing: border-box;
}
body {
/*将网页主体的背景颜色设置为浅灰色*/
background-color: #f4f4f4;
/*设置网页主体的字体为 Arial*/
font-family: Arial, sans-serif;
/*将主体部分设置为网格布局模式*/
display: grid;
/*在网格布局中，将内容水平和垂直方向都居中对齐*/
place-items: center;
/*设置主体部分的高度为视口高度的 100%，即占据整个浏览器窗口的高度*/
height: 100vh;
}
/*定义了一个名为.login-container的类的样式*/
.login-container {
/*设置这个容器的背景颜色为白色*/
background-color: white;
/*在容器内部四周添加 20 像素的内边距，使内容与容器边缘有一定的间隔*/
padding: 20px;
/*边界半径：5p：将容器的四个角设置为半径为 5 像素的圆角，使容器看起来更加圆润*/
border-radius: 5px;
/*为容器添加一个阴影效果。水平偏移量为 0，垂直偏移量为 2 像素，
模糊半径为 5 像素，颜色为 rgba (0, 0, 0, 0.1)，即半透明的黑色。
这种阴影效果可以使容器看起来像是悬浮在页面上*/
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
/*将容器的宽度固定为500像素*/
width: 500px;
height: 400px;
}
/*这段 CSS 代码定义了<h1>元素的样式*/
h1 {
/*将一级标题的文本内容水平居中对齐*/
text-align: center;
/*设置<h1>元素的文本颜色为深灰色*/
color: #333;
/*在<h1>元素的底部添加 20 像素的外边距*/
margin-bottom: 20px;
}
/* CSS 代码定义了<label>标签的样式*/
label {
/*将<label>标签显示为块级元素，使其独占一行*/
display: block;
/*设置<label>标签中的文本为粗体，使其更加醒目*/
font-weight: bold;
/*在<label>标签的底部添加 5 像素的外边距*/
margin-bottom: 5px;
}
/*为<input>元素中类型为text和password的输入框设置了样式*/
input[type="text"],
input[type="password"] {
/*设置输入框的宽度为 100%，使其填满其父元素的宽度*/
width: 100%;
/*在输入框内部四周添加 10 像素的内边距，使输入的内容与输入框边缘有一定的间隔*/
padding: 10px;
/*边缘底部：15：在输入框的底部添加 15 像素的外边距，使其与下方的元素之间有一定的间隔。*/
margin-bottom:15px;
/*为输入框添加一个 1 像素宽的实线边框，颜色为浅灰色*/
border: 1px solid #ccc;
/*将输入框的四个角设置为半径为 3 像素的圆角，使输入框看起来更加圆润*/
border-radius: 3px;
}
/*为类型为 “submit” 的<input>元素（通常是提交按钮）设置了样式*/
input[type="submit"] {
/*将按钮的背景颜色设置为一种特定的绿色*/
background-color: #4CAF50;
/*设置按钮上文本的颜色为白色*/
color: white;
/*在按钮内部四周添加 10 像素的上下内边距和 15 像素的左右内边距*/
padding: 10px 15px;
/*去除按钮的边框*/
border: none;
/*将按钮的四个角设置为半径为 3 像素的圆角*/
border-radius: 3px;
/*当鼠标悬停在按钮上时，将鼠标指针变为手型*/
cursor: pointer;
/*为按钮的背景颜色添加一个过渡效果，当背景颜色发生变化时，
在 0.3 秒内以平滑的方式（“ease” 缓动函数）进行过渡，
使交互效果更加自然*/
transition: background-color 0.3s ease;
}
/*表示当鼠标悬停在类型为 “submit” 的输入框上时应用以下样式*/
input[type="submit"]:hover {
/*将按钮在鼠标悬停时的背景颜色设置为另一种绿色*/
background-color: #45a049;
}
</style>
</head>
<body>
<%String judge=(String) session.getAttribute("judge");%>
<%--定义了一个容器，用于包裹整个登录表单部分，通过 CSS 可以对这个容器进行统一的样式设置--%>
<div class="login-container">
<h1>山东科技大学系统登录</h1>
<%--表示表单数据将以 POST 方式提交到Message.jsp这个页面进行处理--%>
<form method="post" action="Message.jsp">
<%--分别为用户名和密码输入框提供了标签--%>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" required placeholder="请输入用户名">
<br>
<br>
<label for="password">密码：</label>
<input type="password" name="password" id="password" required placeholder="请输入密码">
<br>
<br>
<input type="submit" value="提交">
</form>
</div>
<% if(judge!=null) {
%>
<p style="color: red;"><%=judge%></p>
<%
}
%>
</body>
</html>
Message.jsp
<%--表示页面将输出 HTML 内容,指定字符编码为UTF - 8，页面使用的编程语言为 Java--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--导入了 Java 中用于数据库访问的java.sql包，该包包含了与数据库连接、执行 SQL 语句等相关的类和接口--%>
<%@ page import="java.sql.*" %>
<html>
<head>
<title>山东科技大学留言界面</title>
<script>
/*主要目的是根据用户在页面上选择的 “院系”，动态地更新 “专业” 下拉菜单的选项内容*/
function showMajors() {
/*获取页面上id为 “院系” 的元素*/
var departmentSelect = document.getElementById("院系");
/*获取id为 “专业” 的元素*/
var majorsSelect = document.getElementById("专业");
/*获取 “院系” 下拉菜单中当前被选中的值*/
var selectedDepartment = departmentSelect.value;
/*清空专业下拉选项*/
majorsSelect.innerHTML = "";
/*用于存储不同院系对应的专业数组*/
var majors;
/*根据选择的院系设置不同的专业*/
switch(selectedDepartment) {
case "计算机科学与工程学院":
majors = ["软件工程", "计算机科学与技术", "物联网工程", "信息安全"];
break;
case "电子信息工程学院":
majors = ["通信工程", "电子信息工程"];
break;
case "电气工程及其自动化学院":
majors = ["电气工程", "电气自动化", "能源与动力工程"];
break;
default:
majors = [];
}
for (var i = 0; i < majors.length; i++) {
/*在每次循环中，创建一个新的<option>元素，表示一个专业选项*/
var option = document.createElement("option");
/*设置<option>元素的文本内容为当前遍历到的专业名称*/
option.text = majors[i];
/*同时设置<option>元素的值也为专业名称*/
option.value = majors[i];
/*将创建的<option>元素添加到 “专业” 下拉菜单中*/
majorsSelect.add(option);
}
}
</script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
/*将页面的容器设置为弹性容器，它允许轻松地对齐和分布容器内的元素*/
display: flex;
/*在弹性容器中，设置主轴方向为垂直方向*/
flex-direction: column;
/*沿交叉轴将容器内的子元素居中对齐*/
align-items: center;
/*沿主轴方向将容器内的子元素居中对齐*/
justify-content: center;
height: 100vh;
}
.message-board {
width: 400px;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
textarea {
width: 100%;
/*允许用户仅在垂直方向上调整文本区域的大小*/
resize: vertical;
/*在文本区域的内部四周添加 10 像素的内边距*/
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
background-color: #23be2a;
color: white;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>
恭喜你成功登录山东科技大学学生系统！
</h1>
<br>
<form method="post" action="showmessage.jsp">
<p>
<label for="院系">院系:</label>
<%--当用户选择不同的院系选项时，会触发showMajors()函数，用于动态更新 “专业” 下拉菜单的内容--%>
<select id="院系" onchange="showMajors()" required>
<option value="">请选择院系</option>
<option value="计算机科学与工程学院">计算机科学与工程学院</option>
<option value="电子信息工程学院">电子信息工程学院</option>
<option value="电气工程及其自动化学院">电气工程及其自动化学院</option>
</select>
<br><%--用于在页面上插入一个换行--%>
<br>
<label for="专业">专业:</label>
<select id="专业" required>
<option value="">请选择专业</option>
</select>
</p>
<br>
<br><br><br><br>
<p>
<%--创建一个容器来放置留言相关的元素，如文本区域和提交按钮--%>
<div class="message-board">
<textarea placeholder="输入你的留言..."></textarea>
<button onclick="addMessage()">提交留言</button>
</div>
<script>
function addMessage() {
const textarea = document.querySelector('textarea');
const message = textarea.value;
if (message.trim()!== '') {
// 跳转到 Showmessage.jsp，并传递留言内容作为参数
window.location.href = 'Showmessage.jsp?message=' + encodeURIComponent(message);
}
}
</script>
</p>
</form>
</body>
</html>
<%
/*Connection对象代表与数据库的连接，
常会在后续的代码中使用DriverManager.getConnection()方法来获取实际的数据库连接，
并将其赋值给con变量*/
Connection con = null;
/*PreparedStatement是 Java 中用于执行预编译 SQL 语句的接口*/
PreparedStatement pstmt = null;
/*ResultSet是用于存储数据库查询结果的接口*/
ResultSet rs = null;
try {
/*加载 MySQL 的 JDBC 驱动程序*/
Class.forName("com.mysql.jdbc.Driver");
/*定义了指定数据库位置和名称等信息的字符串*/
String url = "jdbc:mysql://localhost:3306/system?useUnicode=true&characterEncoding=UTF-8";
/*建立与数据库的连接*/
con = DriverManager.getConnection(url,"root","asdqwezxc12345");
/*
* "select * from login"：这是一个 SQL 查询语句的基本部分，表示从名为 “login” 的表中选择所有列的数据
*"where username =?"：这是一个查询条件，表示只选择那些 “username” 列的值
* */
String sql = "select * from Login where username =?";
/*使用数据库连接对象con创建一个预编译的 SQL 语句对象pstmt*/
pstmt = con.prepareStatement(sql);
/*获取用户在前端页面提交的参数值*/
String username = request.getParameter("username");
String password = request.getParameter("password");
/*setString(1, username)方法将第一个占位符（索引从 1 开始）设置为变量username的值*/
pstmt.setString(1, username);
/*executeQuery()方法用于执行查询操作。如果 SQL 语句是一个查询语句（例
如SELECT语句），这个方法会执行该查询并返回一个ResultSet对象*/
rs = pstmt.executeQuery();
/*if (rs.next()) {：
这行代码检查ResultSet对象rs中是否有下一行数据。
如果有数据，即找到了与输入的用户名匹配的记录*/
if (rs.next()) {
System.out.println("111");
System.out.println("555");
/*从当前行的结果集中获取名为 “password” 列的值，并将其存储在pwd变量中*/
String pwd = rs.getString("password");
System.out.println("444");
if (!password.equals(pwd)) {
System.out.println("222");
/*这个属性可以在后续的页面中用于判断登录状态*/
session.setAttribute("judge", "账号或密码错误，请重新登录");
/*使用response对象将用户重定向到 “Login.jsp” 页面*/
response.sendRedirect("Login.jsp");
}
}
else{
System.out.println("333");
session.setAttribute("judge", "账号或密码错误，请重新登录");
response.sendRedirect("Login.jsp");
}
} catch (SQLException se) {
// 处理 JDBC 错误
out.println("jdbc");
se.printStackTrace();
} catch (Exception e) {
// 处理 Class.forName 错误
out.println("forname");
e.printStackTrace();
} finally {
// 关闭数据库连接资源
if (rs!= null) {
try {
rs.close();
} catch (SQLException ignored) {}
}
if (pstmt!= null) {
try {
pstmt.close();
} catch (SQLException ignored) {}
}
if (con!= null) {
try {
con.close();
} catch (SQLException ignored) {}
}
}
%>
扫一扫
3688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
