实验项目名称：实验二 服务器端简单程序设计
一、实验目的
通过一个小型网站的开发，掌握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) 登陆界面代码denglu.html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type=submit]:hover {
background-color: #45a049;
}
h1 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #333;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>Login Page</h1>
<form action="zhujiemian.html" method="POST">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<input type="submit" value="Submit">
</form>
</body>
</html>
……
4) 主界面代码zhujiemian.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>诗词鉴赏</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.snow {
position: fixed;
font-size: 30px;
color: #fff;
text-shadow: 0px 0px 5px #fff;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.poems-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.poems-container h2 {
margin-top: 0;
}
.poems-container ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.poems-container li {
margin-bottom: 10px;
}
.poems-container a {
color: #333;
text-decoration: none;
}
.poems-container a:hover {
text-decoration: underline;
}
.poem-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.poem-container h2 {
margin-top: 0;
}
.poem-content {
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 20px;
font-size: 18px;
line-height: 1.5;
}
.translation {
background-color: #f5f5f5;
padding: 10px;
font-size: 16px;
line-height: 1.5;
}
.nav-buttons {
margin-top: 20px;
}
.nav-buttons a {
background-color: #333;
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-buttons a:hover {
background-color: #555;
}
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
font-size: 12px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1>诗词鉴赏</h1>
</div>
<div class="poems-container">
<h2>诗歌列表</h2>
<ul>
<li><a href="jingyesi.html">静夜思</a></li>
<li><a href="denggao.html">登高</a></li>
<li><a href="minnong.html">悯农</a></li>
<!-- 在这里添加更多诗歌的链接 -->
</ul>
</div>
<div class="footer">
<p>版权所有 © 2023 诗词鉴赏</p>
</div>
</body>
</html>
5）主界面之下的各个界面
1，静夜思jingyesi.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>静夜思 - 李白</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.poems-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.poems-container h2 {
margin-top: 0;
}
.poems-container ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.poems-container li {
margin-bottom: 10px;
}
.poems-container a {
color: #333;
text-decoration: none;
}
.poems-container a:hover {
text-decoration: underline;
}
.poem-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.poem-container h2 {
margin-top: 0;
}
.poem-content {
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 20px;
font-size: 18px;
line-height: 1.5;
}
.translation {
background-color: #f5f5f5;
padding: 10px;
font-size: 16px;
line-height: 1.5;
}
.nav-buttons {
margin-top: 20px;
}
.nav-buttons a {
background-color: #333;
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-buttons a:hover {
background-color: #555;
}
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
font-size: 12px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1>诗词鉴赏</h1>
</div>
<div class="poem-container">
<h2>静夜思</h2>
<div class="poem-content">
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</div>
<h3>译文</h3>
<div class="translation">
<p>明亮的月光洒在床前，好像铺满了一层白霜。</p>
<p>我抬起头，看见了那皎洁的明月，不禁低头怀念起远方的家乡。</p>
</div>
<div class="nav-buttons">
<a href="zhujiemian.html">返回诗歌列表</a>
</div>
</div>
<div class="footer">
<p>版权所有 © 2023 诗词鉴赏</p>
</div>
</body>
</html>
2，登高denggao.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>静夜思 - 李白</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.poems-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.poems-container h2 {
margin-top: 0;
}
.poems-container ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.poems-container li {
margin-bottom: 10px;
}
.poems-container a {
color: #333;
text-decoration: none;
}
.poems-container a:hover {
text-decoration: underline;
}
.poem-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.poem-container h2 {
margin-top: 0;
}
.poem-content {
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 20px;
font-size: 18px;
line-height: 1.5;
}
.translation {
background-color: #f5f5f5;
padding: 10px;
font-size: 16px;
line-height: 1.5;
}
.nav-buttons {
margin-top: 20px;
}
.nav-buttons a {
background-color: #333;
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-buttons a:hover {
background-color: #555;
}
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
font-size: 12px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1>诗词鉴赏</h1>
</div>
<div class="poem-container">
<h2>登高</h2>
<div class="poem-content">
<p>白日依山尽，黄河入海流。</p>
<p>欲窮千里目，更上一層樓。</p>
</div>
<h3>译文</h3>
<div class="translation">
<p>太阳从山峰后面升起，黄河流入大海。</p>
<p>如果想要看尽千里风光，就要再往上一层楼。</p>
</div>
<div class="nav-buttons">
<a href="zhujiemian.html">返回诗歌列表</a>
</div>
</div>
<div class="footer">
<p>版权所有 © 2023 诗词鉴赏</p>
</div>
</body>
</html>
3,悯农minnong.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>悯农-李绅</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
color: white;
padding: 20px;
text-align: center;
}
.poems-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.poems-container h2 {
margin-top: 0;
}
.poems-container ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.poems-container li {
margin-bottom: 10px;
}
.poems-container a {
color: #333;
text-decoration: none;
}
.poems-container a:hover {
text-decoration: underline;
}
.poem-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.poem-container h2 {
margin-top: 0;
}
.poem-content {
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 20px;
font-size: 18px;
line-height: 1.5;
}
.translation {
background-color: #f5f5f5;
padding: 10px;
font-size: 16px;
line-height: 1.5;
}
.nav-buttons {
margin-top: 20px;
}
.nav-buttons a {
background-color: #333;
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-buttons a:hover {
background-color: #555;
}
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
font-size: 12px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1>诗词鉴赏</h1>
</div>
<div class="poem-container">
<h2>悯农</h2>
<div class="poem-content">
<p>春種一粒粟，秋收萬顆子。</p>
<p>四海無閑田，農夫猶餓死。</p>
<p>锄禾日当午，汗滴禾下土。</p>
<p>誰知盘中餐，粒粒皆辛苦。</p>
</div>
<h3>译文</h3>
<div class="translation">
<p>春天种下一粒粟，秋天收获万颗子。</p>
<p>国土广阔却没有多余的田地，农民仍然饿死。</p>
<p>他们在中午劳作着，汗水滴落在禾苗之间。</p>
<p>谁能知道，在餐桌上享受的每一粒粮食都是来自于他们的艰辛劳动。</p>
</div>
<div class="nav-buttons">
<a href="zhujiemian.html">返回诗歌列表</a>
</div>
</div>
<div class="footer">
<p>版权所有 © 2023 诗词鉴赏</p>
</div>
</body>
</html>
6）程序截图
1,登录
2，主界面
3，静夜思
4，登高
5，悯农
四、心得体会
通过本次实验， 加深对session，request，response，cookie等对象的理解，掌握其使用方法，进一步深入掌握HTML、CSS和JavaScript等知识。通过对css的运用，掌握了美化界面的一些方法，对以后在完成项目时的前端开发有很大的帮助。
标签：web,container,color,text,padding,实验,div,margin From： https://www.cnblogs.com/zyzyzrp/p/17472527.html