4.29
• 所花时间：5
• 代码行数：132
• 博客容量：1
• 代码如下：
web实验报告1
一、实验目的
通过一个小型网站的开发，掌握JSP基础知识，加深对session，request，response，cookie等对象的理解，掌握其使用方法，进一步深入掌握HTML、CSS和JavaScript等知识。
二、实验内容和基本要求
1) 编写index.jsp文件，展示某一类物品或知识的介绍，可以是歌曲、人物、名胜古迹等。要求至少有三个条目，用户登录后才能浏览这三个条目的内容。如果用户尚未登录，需要显示用户为“游客”，否则显示用户名。页面下端设置超链接，指向login.jsp。如果用户尚未登录，单击了某一条目的内容，则系统自动转向login.jsp。
2) 编写login.jsp文件，该页面包含一个表单，表单中有两个input标记，分别让用户输入用户名和密码，还有一个登录按钮。当用户单击“登录”后，将表单数据以post的方式提交给check.jsp。
3) 编写check.jsp，该页面使用request对象获取客户端发送过来的用户名和密码，并对用户的合法性进行验证。如果用户输入的用户名和密码不相同，则提示用户登录失败，2秒钟之后自动转向login.jsp页面。如果用户输入的用户名和密码相同，则提示用户登录成功，2秒钟之后转入登录前页面。（提示：登录前页面的记录可以在用户单击的每个网页中，使用session对象的某个属性记录用户访问的当前网页）。
4) 编写三个条目的内容网页。每个网页的上端都需要展示登录的用户名。下端需要“回到首页”的超链接。这三个条目的内容网页只有用户登录后才能浏览。
5) 当用户合法登录后，客户端保留5分钟的Cookie。当用户关闭浏览器后，5分钟之内再次访问时可以免登陆。
6) 将网页源代码和浏览器截图写入实验报告。
三、实验步骤
1) 打开Eclipse软件，新建一个名为Lab02的Web项目，并设置其部署程序为Tomcat。
2) 在Lab02中添加文件，编写代码。
3) index. jsp文件代码
4) <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
input[type="submit"] {
width: 6%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
body {
background-image: url('background.jpg'); /* 替换 'background.jpg' 为你的背景图片路径 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #555;
}
</style>
</head>
<body>
<div class="container">
<%
// 检查用户是否已登录，如果已登录则显示用户名，否则显示游客
String username = (String)session.getAttribute("username");
if(username == null) {
// 检查是否存在名为"username"的Cookie
Cookie[] cookies = request.getCookies();
if(cookies != null) {
for(Cookie cookie : cookies) {
if(cookie.getName().equals("username")) {
username = cookie.getValue();
break;
}
}
}
// 如果存在有效的Cookie，则自动登录，并设置session
if(username != null) {
session.setAttribute("username", username);
} else {
username = "游客";
}
}
%>
<h1>欢迎您，<%= username %></h1>
<ul>
<li><a href="<%= (username == "游客") ? "login.jsp" : "poem1.jsp" %>">一剪梅·红藕香残玉簟秋</a></li>
<li><a href="<%= (username == "游客") ? "login.jsp" : "poem2.jsp" %>">醉花阴·薄雾浓云愁永昼</a></li>
<li><a href="<%= (username == "游客") ? "login.jsp" : "poem3.jsp" %>">声声慢·寻寻觅觅</a></li>
</ul>
</div>
<%
// 在用户登录成功后，创建一个名为"username"的Cookie，设置过期时间为5分钟后
if(username != null && !username.equals("游客")) {
Cookie usernameCookie = new Cookie("username", username);
usernameCookie.setMaxAge(5 * 60); // 设置过期时间为5分钟
response.addCookie(usernameCookie);
}
%>
<form action="check.jsp" method="post" style="text-align: center;">
<input type="submit" value="登录">
</form>
</body>
</html>
5) login. jsp文件代码
6) <%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/4/29
Time: 19:02
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
body {
background-image: url('background.jpg'); /* 替换 'background.jpg' 为你的背景图片路径 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 100px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
}
input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>用户登录</h2>
<form action="check.jsp" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
7) Check.jsp文件代码
8) <%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/4/29
Time: 19:06
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录验证</title>
<style>
body {
background-image: url('background.jpg'); /* 替换 'background.jpg' 为你的背景图片路径 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.message-box {
max-width: 400px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
text-align: center;
}
</style>
</head>
<body>
<%
// 获取客户端发送过来的用户名和密码
String username = request.getParameter("username");
String password = request.getParameter("password");
// 进行用户合法性验证
if (username != null && password != null && username.equals(password)) {
// 登录成功
session.setAttribute("username", username); // 记录用户登录状态
// 提示登录成功，并在2秒后返回登录前页面
out.println("<div class='message-box'>");
out.println("<h2>登录成功！</h2>");
out.println("<p>正在返回登录前页面...</p>");
out.println("</div>");
response.setHeader("Refresh", "2;url=index.jsp"); // 2秒后返回首页
} else {
// 登录失败
out.println("<div class='message-box'>");
out.println("<h2>登录失败！</h2>");
out.println("<p>用户名或密码错误。</p>");
out.println("<p>正在返回登录页面...</p>");
out.println("</div>");
response.setHeader("Refresh", "2;url=login.jsp"); // 2秒后返回登录页
}
%>
</body>
</html>
Poem1.jsp文件代码
<%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/4/29
Time: 19:08
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一剪梅·红藕香残玉簟秋</title>
<style>
body {
background-image: url('background.jpg'); /* 替换 background.jpg' 为你的背景图片路径 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.poem-container {
max-width: 600px;
margin: 50px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
text-align: center;
}
p {
margin-bottom: 20px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="poem-container">
<p>当前用户：<%= (String)session.getAttribute("username") %></p>
<h2>一剪梅·红藕香残玉簟秋</h2>
<p>红藕香残玉簟秋。</p>
<p>轻解罗裳，独上兰舟。</p>
<p>云中谁寄锦书来，雁字回时，月满西楼。</p>
<p>花自飘零水自流。</p>
<p>一种相思，两处闲愁。</p>
<p>此情无计可消除，才下眉头，却上心头。</p>
<a href="index.jsp">返回首页</a>
</div>
</body>
</html>
Poem2.jsp文件代码
<%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/4/29
Time: 19:08
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>醉花阴·薄雾浓云愁永昼</title>
<style>
body {
background-image: url('background.jpg'); /* 替换 background.jpg' 为你的背景图片路径 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.poem-container {
max-width: 600px;
margin: 50px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
text-align: center;
}
p {
margin-bottom: 20px;
line-height: 1.5;
}
</style>
</head>
<body>
<p>当前用户：<%= (String)session.getAttribute("username") %></p>
<div class="poem-container">
<h2>醉花阴·薄雾浓云愁永昼</h2>
<p>薄雾浓云愁永昼，瑞脑消金兽。</p>
<p>佳节又重阳，玉枕纱厨，半夜凉初透。</p>
<p>东篱把酒黄昏后，有暗香盈袖。</p>
<p>莫道不销魂，帘卷西风，人比黄花瘦。</p>
<a href="index.jsp">返回首页</a>
</div>
</body>
</html>
Poem3.jsp文件代码
<%--
Created by IntelliJ IDEA.
User: allofitisst
Date: 2024/4/29
Time: 19:08
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>声声慢·寻寻觅觅</title>
<style>
body {
background-image: url('background.jpg'); /* 替换 background.jpg' 为你的背景图片路径 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.poem-container {
max-width: 600px;
margin: 50px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
text-align: center;
}
p {
margin-bottom: 20px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="poem-container">
<p>当前用户：<%= (String)session.getAttribute("username") %></p>
<h2>声声慢·寻寻觅觅</h2>
<p>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。</p>
<p>乍暖还寒时候，最难将息。</p>
<p>三杯两盏淡酒，怎敌他、晚来风急！</p>
<p>雁过也，正伤心，却是旧时相识。</p>
<p>满地黄花堆积，憔悴损，如今有谁堪摘？</p>
<p>守着窗儿，独自怎生得黑！</p>
<p>梧桐更兼细雨，到黄昏、点点滴滴。</p>
<p>这次第，怎一个愁字了得！</p>
<a href="index.jsp">返回首页</a>
</div>
</body>
</html>
9) 程序截图
四、心得体会
在本次实验中，我学到了很多关于Web开发的重要知识和技能。首先，我了解了如何使用JSP（JavaServer Pages）技术来创建动态Web页面。通过在JSP页面中嵌入Java代码，我可以动态生成HTML内容，根据用户的操作和状态来实现不同的页面功能。
我学习了如何使用Session和Cookie来管理用户的登录状态。通过Session对象，我可以在用户登录成功后在服务器端保持用户的登录状态，从而实现用户的免登录功能。而通过Cookie，我可以在客户端存储一些用户信息，比如用户名，以便在用户关闭浏览器后仍然保持登录状态。
在实验中，我还学会了如何使用Servlet来处理Web页面的请求和响应。通过编写Servlet来处理用户的登录请求，我可以验证用户的身份，然后根据验证结果进行相应的操作，比如跳转到首页或者提示用户登录失败。
通过这次实验，我对Web开发有了更深入的了解，掌握了一些实用的技能和工具，这对我未来从事Web开发工作或者进行Web项目开发都是非常有帮助的。
五、自我评价
分数自评
序号 评分标准 总分 自评分
1 完成上述网站的基本功能 8 8
2 对整体网站进行CSS布局，使用JavaScript添加一些动态效果，使得页面美观、大方、统一 2 2
合计 10 10
浙公网安备 33010602011771号