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) 打开idea软件，新建一个名为javaweb-test3的Web项目，并设置其部署程序为Tomcat。
2) 在javaweb-test3中添加文件，编写代码。
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>
</head>
<style>
body
{
background-image: url(/image/gb1.jpg);
background-size:100% 100% ;
background-attachment: fixed ;
}
table
{
border-spacing: 10px 20px;
border
: solid 1px red;
margin-top:300px;
}
.font
{
letter-spacing:6px;
}
</style>
<script>
function
jump(adress, a) {
if (adress === 's1') {
if (a == "1") {
window.location.href = 'login.jsp';
} else
if (a == "2") {
window.location.href = 's1.jsp';
}
} else
if (adress === 's2') {
if (a == "1") {
window.location.href = 'login.jsp';
} else
if (a == "2") {
window.location.href = 's2.jsp';
}
} else
if (adress === 's3') {
if (a == "1") {
window.location.href = 'login.jsp';
} else
if (a == "2") {
window.location.href = 's3.jsp';
}
}
}
</script>
<body class="font">
<%! String a="1";%>
<%! String b="亲爱的游客"; %>
<%
Cookie[] cookies = request.getCookies();
if (cookies != null && cookies.length > 0) {
for (Cookie c : cookies) {
if (c.getName().equals("username")) {
b = c.getValue();
}
if (c.getName().equals("id")) {
a = c.getValue();
}
}
}
%>
<marquee scrollAmount="20" direction="left" scrollDelay="90" behavior="alternate" loop="-1"
onmouseover="this.stop()"
onm ouseout="this.start()"
hspace="20%">
<a style="color: red; font-family: 黑体; font-size: 15pt; text-align: center;"><%=b %>,欢迎访问本网站</a>
</marquee>
<div style="text-align: center;">
<h1>李商隐诗词欣赏</h1>
</div>
<table align="center"
valign="middle">
<tr> <td align="center"><a href="javascript:void(0);" onclick="jump('s1', '<%=a %>')">无题</a></td></tr>
<tr> <td align="center"><a href="javascript:void(0);" onclick="jump('s2', '<%=a %>')">乐游原</a></td></tr>
<tr> <td align="center"><a href="javascript:void(0);" onclick="jump('s3', '<%=a %>')">锦瑟</a></td></tr>
<tr> <td align="center" > <a href="login.jsp">登录</a></td></tr>
</table>
</body>
</html>
5) Login.jsp文件代码
6)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<style>
body
{
background: url(/image/gb1.jpg);
background-size:100% 100% ;
background-attachment: fixed
}
</style>
<script type="text/javascript">
window.onload = function check( )
{
document.getElementById("submit_login").onclick = function()
{
var str1 = form1.username.value;
var str2 = form1.password.value;
if (str1 == ""||str2 == "") {
alert("用户名或者密码为空！");
form1.username.focus();
}
return;
};
};
</script>
<body>
<form action="check.jsp" method="post" id="form1" name = "form1" onsubmit="">
<table align="center" valign="middle">
<tr><td id="top">用户登录 </td></tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id = "username"value=""> </td>
</tr>
<tr>
<td> 密码：</td>
<td><input type="password" name="password" id = "password"> </td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="确定" name="submit_login" id="submit_login">
<input type="reset" > </td>
</tr>
</table>
</form>
</body>
</html>
7) First.jsp文件代码
8)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<style>
body
{
background: url(/image/gb1.jpg);
background-size:100% 100% ;
background-attachment: fixed
}
</style>
<script type="text/javascript">
window.onload = function check( )
{
document.getElementById("submit_login").onclick = function()
{
var str1 = form1.username.value;
var str2 = form1.password.value;
if (str1 == ""||str2 == "") {
alert("用户名或者密码为空！");
form1.username.focus();
}
return;
};
};
</script>
<body>
<form action="check.jsp" method="post" id="form1" name = "form1" onsubmit="">
<table align="center" valign="middle">
<tr><td id="top">用户登录 </td></tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id = "username"value=""> </td>
</tr>
<tr>
<td> 密码：</td>
<td><input type="password" name="password" id = "password"> </td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="确定" name="submit_login" id="submit_login">
<input type="reset" > </td>
</tr>
</table>
</form>
</body>
</html>
标签：web,用户名,登录,用户,实验,background,jsp,login From： https://www.cnblogs.com/bdsz/p/18257427