实验项目名称：实验二 服务器端简单程序设计
一、实验目的
通过一个小型网站的开发，加深对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中添加文件，编写代码。
index.jsp
1 <%-- 2 Created by IntelliJ IDEA. 3 User: wanghongbing 4 Date: 2023/4/14 5 Time: 15:57 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <meta charset="UTF-8"> 12 <title>苏轼宋词欣赏</title> 13 </head> 14 <body background="images/背景图.jpg"> 15 <div style="text-align: center"> 16 <marquee width="500px" height="100px" behavior="alternate"style="border: 2px solid white"> 17 <marquee behavior="alternate" style="color: blue"> 18 欢迎游客进入本网页。 19 </marquee> 20 </marquee> 21 </div> 22 <dr> 23 <dr> 24 <dr> 25 <dr> 26 <div style="text-align: center"> 27 <li><a href ="login.jsp" style="color: brown">《念奴娇·赤壁怀古》</a></li> 28 <br> 29 <li> <a href ="login.jsp" style="color: brown">《水龙吟·次韵章行质夫杨花词》</a></li> 30 <br> 31 <li><a href="login.jsp" style="color: brown">《江城子·密州出猎》</a></li> 32 <br> 33 </div> 34 <div style="text-align: center"> 35 <a href="login.jsp"> 36 <button>登录</button> 37 </a> 38 </div> 39 </body> 40 </html>
1 <%-- 2 Created by IntelliJ IDEA. 3 User: wanghongbing 4 Date: 2023/4/14 5 Time: 15:57 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <meta charset="UTF-8"> 12 <title>登陆界面</title> 13 <style type="text/css"> 14 body { 15 background: url(images/背景图.jpg); 16 background-size: 1250px 800px; 17 } 18 19 div { 20 margin-top: 190px; 21 margin-left: 190px; 22 } 23 .submitButton { 24 font-size: 15px; 25 color: #844200; 26 text-shadow: 0 0 2px #000; 27 margin-left: 85px; 28 text-align: center; 29 background-color: transparent; 30 border-color: #844200; 31 border-width: 1px; 32 } 33 34 .i { 35 background-color: transparent; 36 border-color: #844200; 37 border-width: 1px; 38 } 39 </style> 40 </head> 41 <script> 42 function check() { 43 var name = document.getElementById("name").value; 44 var pass = document.getElementById("pass").value; 45 if (name == pass) { 46 alert("登入成功"); 47 window.document.f.action = "index1.jsp"; 48 window.document.f.submit(); 49 } else { 50 alert("用户名或密码错误"); 51 } 52 } 53 </script> 54 <div style="text-align: center"> 55 <form name="f" action="" style="color: white"> 56 用户名:<input type="text" NAME="" id="name"> 57 <br> 58 密码:<input type="password" NAME="" id="pass"> 59 <br> 60 <input type="button" value="登录" onclick="check()"> 61 </form> 62 </div> 63 </body> 64 65 </html>
index1.jsp
1 <%-- 2 Created by IntelliJ IDEA. 3 User: wanghongbing 4 Date: 2023/4/14 5 Time: 16:29 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <meta charset="UTF-8"> 12 <title>苏轼宋词欣赏</title> 13 </head> 14 <body background="images/背景图.jpg"> 15 <div style="text-align: center"> 16 <marquee width="500px" height="100px" behavior="alternate"style="border: 2px solid white"> 17 <marquee behavior="alternate" style="color: blue"> 18 欢迎Tom进入该网页 19 </marquee> 20 </marquee> 21 </div> 22 <dr> 23 <dr> 24 <dr> 25 <dr> 26 <div style="text-align: center" > 27 28 <li> 29 <a href="first.jsp" style="color: rgb(128, 64, 0)">《念奴娇·赤壁怀古》</a> 30 </li> 31 <br> 32 <li> 33 <a href="second.jsp" style="color: brown">《水龙吟·次韵章行质夫杨花词》</a> 34 </li> 35 <br> 36 <li> 37 <a href="third.jsp" style="color: rgb(128, 64, 0)">《江城子·密州出猎》</a> 38 39 </li> 40 <br> 41 </div> 42 </body> 43 </html>
first.jsp
1 <%-- 2 Created by IntelliJ IDEA. 3 User: wanghongbing 4 Date: 2023/4/14 5 Time: 16:37 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>《念奴娇·赤壁怀古》</title> 12 </head> 13 <body background="images/背景图.jpg"> 14 <div align="center" style="background: white" > 15 <h1 style="color: black;">《念奴娇·赤壁怀古》</h1> 16 17 <h5 style="color: black;">原文</h5> 18 <p> 19 大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。 20 </p> 21 <p> 22 遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。 23 </p> 24 25 <h5 style="color: black;">赏析</h5> 26 <p> 27 《念奴娇·赤壁怀古》通过对月夜江上壮美景色的描绘，借对古代战场的凭吊和对风流人物才略、气度、功业的追念，曲折地表达了作者怀才不遇、功业未就、老大未成的忧愤之情，同时表现了作者关注历史和人生的旷达之心。 28 </p> 29 <p> 30 该词气象磅礴，格调雄浑，高唱入云，境界宏大，前所未有，因此被称为此词须关西大汉手持铜琵琶、铁绰板进行演唱，是对传统词的一大突破，因而成为了豪放词的定鼎之作。胡仔《苕溪渔隐丛话》说：“大江东去赤壁词，语意高妙，真古今绝唱。” 31 </p> 32 33 </div> 34 <div style="text-align: center"> 35 <a href="index1.jsp"> 36 <button>回到首页</button> 37 </a> 38 </div> 39 </body> 40 </html>