index界面
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta charset="UTF-8">
<!-- 引入 Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
text-align: center;
padding: 20px;
}
.links {
margin: 15px 0;
}
.links a {
margin: 0 10px;
color: #2c6ac8;
}
table {
border-collapse: collapse;
width: auto;
margin: 20px auto;
}
td {
border: 1px solid #444;
padding: 8px 12px;
text-align: center;
white-space: nowrap;
color: red;
}
h2 {
color: #333;
}
</style>
</head>
<body>
<%
String loginUser = (String) session.getAttribute("loginUser");
if (loginUser != null) {
%>
<h2>欢迎你 <%= loginUser %></h2>
<%
}
%>
<div class="links">
<a href="login.jsp">去登录</a>
<a href="zhuce.jsp">去注册</a>
<a href="page1.jsp">page1</a>
<a href="page2.jsp">page2</a>
<a href="page3.jsp">page3</a>
<a href="page4.jsp">page4</a>
<a href="logout.jsp">退出登录</a>
</div>
<h2>信管2402康文恺九九乘法表</h2>
<table>
<%
for(int i=1;i<=9;i++){
%>
<tr>
<%
for(int j=1;j<=i;j++){
%>
<td><%=j%>×<%=i%>=<%=i*j%></td>
<%
}
%>
</tr>
<%
}
%>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
login界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
form {
width: 320px;
margin: 60px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fafafa;
}
.item {
margin: 12px 0;
}
label {
display: inline-block;
width: 90px;
}
input {
width: 190px;
padding: 6px;
}
button {
display: block;
margin: 0 auto;
padding: 6px 18px;
}
h2 {
color: #2c6ac8;
}
</style>
</head>
<body>
<h2 style="text-align: center">登录页面</h2>
<form action="loginCheck.jsp" method="post">
<div class="item">
<label>用户名：</label>
<input type="text" name="username" required />
</div>
<div class="item">
<label>密码：</label>
<input type="password" name="password" required />
</div>
<button type="submit">登录</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
loginCheck
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
// 统一请求编码，避免中文参数乱码
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
// 固定账号密码校验（本项目不连接数据库）
if ("admin".equals(username) && "admin".equals(password)) {
// 登录成功后把用户名写入 Session，供其他页面做权限判断
session.setAttribute("loginUser", username);
response.sendRedirect("index.jsp");
return;
}
%>
<!DOCTYPE html>
<html>
<head>
<title>登录结果</title>
</head>
<body style="text-align: center; margin-top: 60px">
<h2>登录不成功，用户名或者密码不正确。</h2>
<a href="login.jsp">返回登录</a>
</body>
</html>
logout
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
// 让当前会话失效，实现退出登录
session.invalidate();
%>
<!DOCTYPE html>
<html>
<head>
<title>退出登录</title>
<meta charset="UTF-8">
<!-- 引入Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
text-align: center;
margin-top: 80px;
}
h2 {
color: #2c6ac8;
margin-bottom: 20px;
}
a {
margin: 0 8px;
color: #0d6efd;
}
</style>
</head>
<body>
<h2>您已成功退出登录。</h2>
<div>
<a href="login.jsp">重新登录</a>
<a href="index.jsp">返回首页</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
page1
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>page1</title>
<meta charset="UTF-8">
<!-- 统一引入Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
text-align: center;
padding: 20px;
}
.links {
margin: 15px 0;
}
.links a {
margin: 0 10px;
color: #0d6efd;
}
table {
border-collapse: collapse;
width: auto;
margin: 20px auto;
}
td {
border: 1px solid #000;
padding: 8px 12px;
white-space: nowrap;
text-align: center;
color: red;
}
.no-auth {
margin-top: 80px;
font-size: 20px;
color: #dc3545;
}
h2,h3{
color: #333;
}
</style>
</head>
<body>
<%
String loginUser = (String) session.getAttribute("loginUser");
boolean loggedIn = "admin".equals(loginUser);
if (loggedIn) {
%>
<h2>欢迎您<%= loginUser %></h2>
<div class="links">
<a href="index.jsp">首页</a>
<a href="page2.jsp">page2</a>
<a href="page3.jsp">page3</a>
<a href="page4.jsp">page4</a>
<a href="logout.jsp">退出登录</a>
</div>
<h3>page1 - 九九乘法表</h3>
<table>
<%
for (int i = 1; i <= 9; i++) {
%>
<tr>
<%
for (int j = 1; j <= i; j++) {
%>
<td><%= j %>×<%= i %>=<%= j * i %></td>
<%
}
%>
</tr>
<%
}
%>
</table>
<%
} else {
%>
<div class="no-auth">您还没有登录，没有权限看到页面的内容。</div>
<div class="links">
<a href="login.jsp">去登录</a>
<a href="index.jsp">返回首页</a>
</div>
<%
}
%>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
zhuce
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户注册</title>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
form {
width: 380px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fafafa;
}
.item {
margin: 10px 0;
}
label {
display: inline-block;
width: 80px;
}
input[type="text"],
input[type="password"],
input[type="number"] {
padding: 5px;
width: 200px;
}
button {
padding: 6px 20px;
display:block;
margin:0 auto;
background:#0d6efd;
color:#fff;
border:none;
border-radius:3px;
}
.options {
display: inline-block;
}
.options label {
width: auto;
margin-right: 10px;
}
h1{
color:#2255aa;
text-align:center;
}
</style>
</head>
<body>
<h1>用户注册表单</h1>
<form action="zhuceCkeck.jsp" method="post">
<div class="item">
<label>姓名：</label>
<input type="text" name="name" required />
</div>
<div class="item">
<label>密码：</label>
<input type="password" name="password" required />
</div>
<div class="item">
<label>性别：</label>
<span class="options">
<label><input type="radio" name="gender" value="男" required /> 男</label>
<label><input type="radio" name="gender" value="女" /> 女</label>
</span>
</div>
<div class="item">
<label>年龄：</label>
<input type="number" name="age" min="1" max="120" required />
</div>
<div class="item">
<label>爱好：</label>
<span class="options">
<label><input type="checkbox" name="hobby" value="篮球" /> 篮球</label>
<label><input type="checkbox" name="hobby" value="音乐" /> 音乐</label>
<label><input type="checkbox" name="hobby" value="阅读" /> 阅读</label>
<label><input type="checkbox" name="hobby" value="旅行" /> 旅行</label>
</span>
</div>
<button type="submit">提交</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
zhuceCheck
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page
import="java.util.Arrays" %>
<html>
<head>
<title>注册结果</title>
<style>
body {
text-align: center;
margin-top: 50px;
}
.result {
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<h1>注册信息提交成功！</h1>
<div class="result">
<%-- 解决post提交中文乱码问题 --%> <%
request.setCharacterEncoding("UTF-8"); String name =
request.getParameter("name"); String password =
request.getParameter("password"); String gender =
request.getParameter("gender"); String age = request.getParameter("age");
String[] hobbies = request.getParameterValues("hobby"); String hobbyText =
(hobbies != null && hobbies.length > 0) ?
Arrays.toString(hobbies).replace("[", "").replace("]", "") : "未选择"; %>
<%-- 获取表单提交的数据 --%>
<p>姓名：<%= name %></p>
<p>密码：<%= password %></p>
<p>性别：<%= gender %></p>
<p>年龄：<%= age %> 岁</p>
<p>爱好：<%= hobbyText %></p>
<%-- 跳转回表单页面 --%>
<a href="zhuce.jsp">返回重新提交</a>
</div>
</body>
</html>
