4.15

web实验2:

实验项目名称：实验二 服务器端简单程序设计

一、实验目的

通过一个小型网站的开发，加深对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)login.jsp(登录界面)
<%@ 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(images/background.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>
(2)index.jsp(主界面)
<%@ 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(images/background.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 type="text/jscript">
    request.setCharacterEncoding("utf-8");
    function jump(adress,a)
    {
        if(adress=='s1')
        {
            if (a=="1")
            window.location.href='login.jsp';
            if (a=="2")
            window.location.href='s1.jsp';
        }
        if(adress=='s2')
        {
            if (a=="1")
            window.location.href='login.jsp';
            if (a=="2")
            window.location.href='s2.jsp';
        }
        if(adress=='s3')
        {
        if (a=="1")
            window.location.href='login.jsp';
        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().toString().equals("username"))
        {
            b = c.getValue().toString();    
        }
        if(c.getName().toString().equals("id"))
        {
                a = c.getValue().toString();    
        }
}}

    %>
<marquee  scrollAmount="20" direction="left" scrollDelay="90" behavior="alternate" loop="-1" onmouseover="this.stop()"
        onmouseout="this.start()"   hspace="20%"> 
        <a  style="color: red; font-family: 黑体; font-size: 15pt; text-align: center;"><%=b  %>,欢迎访问本网站</a>
    </marquee> 
<table align="center" valign="middle">
<tr> <td align="center"> <a href="javascript:jump('s1',<%=a %>)">Just Dance</a></td></tr>
<tr> <td align="center"><a href="javascript:jump('s2',<%=a %>)">无感</a></td></tr>
<tr> <td align="center"><a href="javascript:jump('s3',<%=a %>)">年少心事</a></td></tr>
<tr> <td align="center" > <a href="login.jsp">登录</a></td></tr>
</table>
</body>
</html>
(3)check.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
    request.setCharacterEncoding("utf-8");//解决中文乱码的问题
    String name = request.getParameter("username");
    String password = request.getParameter("password");
    session.setAttribute("name", name);
    Cookie cookie = new Cookie("name",name);
    cookie.setMaxAge(300); //设置cookie有效期为30s
    response.addCookie(cookie);
if(name.equals(password))
    {%>
        <h1>用户登录成功两秒后为您跳转</h1>
    <%
    response.setHeader("refresh", "2;url=index.jsp");
    }
    else{%>    
    <h1>用户登录失败两秒后跳转请重新登录</h1>
        <% response.setHeader("refresh", "2;url=login.jsp");
    }
%>
</body>
</html>
(4)歌曲展示界面
S1:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
        <audio src="01.mp3" controls id="audio"></audio>
        <br>
        <img src="images/s11.pgn" style="width: 490px" />
        <img src="images/s12.png" style="width: 490px" />
        <img src="images/s13.png" style="width: 490px" />
        <img src="images/s14.png" style="width: 490px" />
</body>
</html>
S2:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
        <audio src="02.mp3" controls id="audio"></audio>
        <br>
        <img src="images/s21.pgn" style="width: 490px" />
        <img src="images/s22.png" style="width: 490px" />
        <img src="images/s23.png" style="width: 490px" />
        <img src="images/s24.png" style="width: 490px" />
</body>
</html>
S3:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
        <audio src="03.mp3" controls id="audio"></audio>
        <br>
        <img src="images/s31.pgn" style="width: 490px" />
        <img src="images/s32.png" style="width: 490px" />
        <img src="images/s33.png" style="width: 490px" />
        <img src="images/s34.png" style="width: 490px" />
</body>
</html>

posted @ 2022-04-16 00:00 _Pi 阅读(510) 评论(1) 收藏举报

刷新页面返回顶部

4.15

公告