Web实验二 服务器端简单程序设计
实验项目名称：实验二 服务器端简单程序设计
一、实验目的
通过一个小型网站的开发，掌握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.html文件代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>万叶</title>
</head>
<body background="images/fengyuan.jpg" marginheight="200" marginwidth="200" >
<div style="text-align: center">
<h1 style="color: brown;">万叶</h1>
<h3 style="color: black;">语录</h3>
<span>
<p>
总有地上的生灵，敢于直面雷霆的威光！
</p>
<p>
飘摇风雨中，带刀归来赤脚行”，我的名字是枫原万叶，游历四方的浪人。既然你我都在旅行的路上，这段路不妨结伴同行。
</p>
</span>
<style>
span{
font-size: 20px;
}
</style>
</div>
<div style="text-align: center">
<a href="check.html">
<button>回到首页</button>
</a>
</div>
</body>
</html>
4) Check.html文件代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原神超燃语录</title>
</head>
<style type="text/css">
body {
background: url(images/index.jpg);
background-size: 1360px 720px;
}
</style>
<div style="text-align: center">
<marquee width="500px" height="100px" behavior="alternate"style="border: 2px solid white">
<marquee behavior="alternate" style="color: blue">
欢迎Tom进入本网页。
</marquee>
</marquee>
</div>
<p align="center"><font size="30" color="#a52a2a">原神超燃语录</font></p>
<dr>
<dr>
<dr>
<dr>
<div style="text-align: center">
<li><a href ="first.html" style="color: black" style="font-size: 20px">胡 桃</a></li>
<br>
<li> <a href ="second.html"style="color: black" style="font-size: 20px">纳西妲</a></li>
<br>
<li><a href="third.html" style="color: black" style="font-size: 20px">枫原万叶</a></li>
<br>
</div>
</dr></dr></dr></dr>
</body>
</html>
5) Login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<style type="text/css">
body {
background: url(images/index.jpg);
background-size: 1360px 720px;
}
</style>
<script>
function check() {
var name = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
if (name == pass) {
alert("登入成功");
window.document.f.action = "check.html";
window.document.f.submit();
} else {
alert("用户名或密码错误");
}
}
</script>
<div style="text-align: center">
<form name="f" action="" style="color: white">
用户名:<INPUT TYPE="text" NAME="" id="name">
<br>
密码:<INPUT TYPE="password" NAME="" id="pass">
<br>
<INPUT TYPE="button" value="登录" onclick="check()">
</form>
</div>
</body>
</html>
6) Hutao.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>胡桃</title>
</head>
<body background="images/hutao.jpg" marginheight="200" marginwidth="200" >
<div style="text-align: center">
<h1 style="color: brown;">胡桃</h1>
<h3 style="color: wheat;">语录</h3>
<span>
<p>
在夜空所有星星熄灭的时候，所有梦想、所有溪流，都能汇入同一片大海中，那时我们终会相见。
</p>
<p>
阴阳有序，命运无常。死亡难以预测，却也有它的规矩。记住了，无论何时何地，无论有何原因。人都不该轻易挑衅，唯有认识它尊重它才能明白活着的价值。
</p>
</span>
<style>
span{
font-size: 20px;
color: aliceblue;
}
</style>
</div>
<div style="text-align: center">
<a href="check.html">
<button>回到首页</button>
</a>
</div>
</body>
</html>
7) Naxida.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纳西妲</title>
</head>
<body background="images/纳西妲.jpg" marginheight="200" marginwidth="200" >
<div style="text-align: center">
<h1 style="color:green;">纳西妲</h1>
<h3 style="color: black;">语录</h3>
<span>
<p>
你不需要变成飞鸟或者游鱼，只要你努力地生活，你所珍视的一切都会是你幸福的源泉。
</p>
<p>
能在年少时拥有坚定的梦想并为之奋斗，是一件非常不错的事。唯有打磨自己，才能克服接连不断的困境。
</p>
</span>
<style>
span{
font-size: 20px;
color: black;
}
</style>
</div>
<div style="text-align: center">
<a href="check.html">
<button>回到首页</button>
</a>
</div>
</body>
</html>
8) Wanye.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>万叶</title>
</head>
<body background="images/fengyuan.jpg" marginheight="200" marginwidth="200" >
<div style="text-align: center">
<h1 style="color: brown;">万叶</h1>
<h3 style="color: black;">语录</h3>
<span>
<p>
总有地上的生灵，敢于直面雷霆的威光！
</p>
<p>
飘摇风雨中，带刀归来赤脚行”，我的名字是枫原万叶，游历四方的浪人。既然你我都在旅行的路上，这段路不妨结伴同行。
</p>
</span>
<style>
span{
font-size: 20px;
}
</style>
</div>
<div style="text-align: center">
<a href="check.html">
<button>回到首页</button>
</a>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）