Web课实验作业-JSP，Cookie，Session

在昨天的web课上我们有一个实验二。

其实已经非常简单了,因此就稍微整点不一样的。

代码也放下面，就是几个简单的jsp

我顺便就做成了一个介绍角色的小网站页面。

能够实现以上图片中的功能，能保存用户名的cookie

页面展示：

代码：

<%--
  Created by IntelliJ IDEA.
  User: 23944
  Date: 2023/4/14
  Time: 16:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
</head>
<%
    String mess = (String)request.getAttribute("mess");         if(mess != null) {
%>
<script type="text/javascript" language="javascript">
    alert("<%=mess%>");                                            
    window.location='login.jsp' ;                            // 跳转到登录界面
</script>
<%
    }
%>
<link rel="stylesheet" type="text/css" href="css/indexss.css"/>
<body>
<br><br><br><br>
<h2>登录界面</h2>
<hr>

<form method="post" action="check.jsp">

    <input type="text" style="height:40px;width:300px;" placeholder="输入账号" name="username" align="center"/><br><br>

    <input type="text" style="height:40px;width:300px;" placeholder="输入密码" name="password" align="center"/><br><br>
    <input type="submit"  style="height:40px;width:300px;" value="登录" align="center"/>
</form>

<hr>
</body>
</html>

check.jsp

<%@ page import="java.net.URLEncoder" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>check</title>
</head>
<%
    String un = (String) request.getParameter("username");
    String pw = (String) request.getParameter("password");

    if (un.equals(pw)){
        // 编码，解决中文乱码
        String str = URLEncoder.encode(un,"utf-8");
        // 设置 name
        Cookie name = new Cookie("name", str);
        // 设置cookie过期时间为24小时
        name.setMaxAge(60*5);
        // 在响应头部添加cookie
        response.addCookie(name);

        String site = new String("http://localhost:8080/Lab2_war_exploded/index.jsp");
        response.setStatus(response.SC_MOVED_TEMPORARILY);
        response.setHeader("Location", site);
    }else {
        request.setAttribute("mess","密码错误,请重新登录");
        request.getRequestDispatcher("login.jsp").forward(request,response);
    }
%>
<body>

</body>
</html>

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.net.*" %>
<%
  String nam = "游客";
  Cookie cookie = null;
  Cookie[] cookies = null;
  // 获取 cookies 的数据,是一个数组
  cookies = request.getCookies();
  if( cookies != null ){

    for (int i = 0; i < cookies.length; i++){
      cookie = cookies[i];

      if (cookie.getName().equals("name")){
        nam = cookie.getValue();
      }

    }
  }
%>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>欢迎访问</title>
  <link rel="stylesheet" type="text/css" href="css/indexss.css"/>
</head>

<body>

<!-- 内容块 -->
<div class="page-block">
  <div class="page-1">
    <h1>角色介绍</h1>
    <h3>用户：<%=nam%></h3>
    <div class="article-hover">
      <div class="thumbnail">
        <img src="./image/yuuka.png" alt="">
      </div>

      <div class="info-content" onmouseover="light(this)" onmouseout="normal(this)">
        <div class="li-title">
          早濑优香
        </div>
        <div class="li-content">
          千年科技学园
        </div>
        <%
          if (nam.equals("游客")){
        %>
        <a href="login.jsp">查看详情</a>
        <%
          }else {
        %>
        <a href="page1.jsp">查看详情</a>
        <%
          }
        %>
      </div>
    </div>
    <hr/>
    <div class="article-hover">
      <div class="thumbnail">
        <img src="./image/xia.png" alt="">
      </div>

      <div class="info-content" onmouseover="light(this)" onmouseout="normal(this)">
        <div class="li-title">
          柚鸟夏
        </div>
        <div class="li-content">
          三一综合学园
        </div>
        <%
          if (nam.equals("游客")){
        %>
        <a href="login.jsp">查看详情</a>
        <%
        }else {
        %>
        <a href="page2.jsp">查看详情</a>
        <%
          }
        %>
      </div>
    </div>
    <hr/>
    <div class="article-hover">
      <div class="thumbnail">
        <img src="./image/hifumi.png" alt="">
      </div>

      <div class="info-content" onmouseover="light(this)" onmouseout="normal(this)">
        <div class="li-title">
          阿慈谷日富美
        </div>
        <div class="li-content">
          三一综合学园
        </div>
        <%
          if (nam.equals("游客")){
        %>
        <a href="login.jsp">查看详情</a>
        <%
        }else {
        %>
        <a href="page3.jsp">查看详情</a>
        <%
          }
        %>
      </div>
    </div>

    <hr>

    <a align="center" href="login.jsp">登录</a>
    
  </div>
</div>


</body>
</html>

page1.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>角色介绍</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        body{
            background-image: url(./image/bg.jpg);
            background-size: cover;
        }
        a {
            color: #000000;
            text-decoration: none;
            font-size: 15px;
        }

        a:hover {
            color: #000000;
            text-decoration: underline;
            font-size: 15px;
        }

        a:visited {
            color: #5086a5;
            font-size: 12px;
        }
        /*整个tab层居中，宽度为600px*/
        #tabDiv {
            width: 600px;
            margin: 1em auto;
            padding-bottom: 10px;
            border-right: #b2c9d3 1px solid;
            border-top: #b2c9d3 1px solid;
            border-left: #b2c9d3 1px solid;
            border-bottom: #b2c9d3 1px solid;
            background: #ffffff;
        }
        /*整个tab层居中，宽度为600px*/
        #tabDiv {
            width: 600px;
            margin: 1em auto;
            padding-bottom: 10px;
            border-right:     #1E90FF 1px solid;
            border-top:     #1E90FF 1px solid;
            border-left:     #1E90FF 1px solid;
            border-bottom:     #1E90FF 1px solid;
            background-color: #ffffff;
            border-radius: 2px;
            opacity:0.8;
        }
        /*tab头的样式*/
        #tabsHead {
            padding-left: 0px;
            height: 40px;
            background-color: #1E90FF;
            font-size: 1em;
            margin: 0px 0px 0px;
            color:     #1E90FF;
            line-height: 26px;
            border-radius: 2px;
        }
        /*已选tab头（超链接）的样式*/
        .curtab {
            padding-top: 0px;
            padding-right: 10px;
            padding-bottom: 0px;
            padding-left: 10px;
            border-right: #b2c9d3 1px solid;
            font-weight: bold;
            float: left;
            cursor: pointer;
            background:    #1E90FF;
            line-height: 40px;
            border-radius: 2px;
        }
        /*未选tab头（超链接）的样式*/
        .tabs {
            border-right: #c1d8e0 1px solid;
            padding-top: 0px;
            padding-right: 10px;
            padding-bottom: 0px;
            padding-left: 10px;
            font-weight: normal;
            float: left;
            cursor: pointer;
            background: #1E90FF;
            border-radius: 2px;
        }
        p {
            font-size: 12pt;
            text-indent: 2em;
        }
        li {
            border-bottom-style: solid;
            border-bottom-color: #EEE;
            border-bottom-width: thin;
            height: 25px;
            font-family: "宋体";
            font-size: 12pt;
        }
    </style>

</head>

<body>

<div style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt; ">角色介绍</div><br/>
<div id="localtime" style="text-align: center;"></div>
<div id="tabDiv" style="width: 1200px;">

    <div id="tabsHead" >
        <a id="tabs1" class="curtab" style="height:40px;width:229px;"  href="javascript:showTab('tabs1','tabContent1')">优香</a>
    </div>

    <div id="tabContent1" style="display: block">
        <table style="border-width: 0; width: 100%">
            <tr>
                <td rowspan="3" style="width: 300px; text-align: center"><img  src="image/page_yuuka.jpg" style="width: 450px" /></td>
                <td colspan="3" rowspan="3">
                    <table border="1" style="border-left-color: #B0C4DE; border-bottom-color:     #B0C4DE; width: 100%;border-top-style: solid; border-top-color:     #B0C4DE; border-right-style: solid; border-left-style: solid; height: 610px; border-right-color:     #B0C4DE; border-bottom-style: hidden">
                        <tr>
                            <td style="width: 50% "bgcolor="#f0f8ff">全名：早瀬 ユウカ</td>
                            <td style="width: 50%"bgcolor="#f0f8ff">译名：早濑优香</td>
                        </tr>
                        <tr>
                            <td style="width: 50%"bgcolor="#f0f8ff">年龄：16岁</td>
                            <td style="width: 50%"bgcolor="#f0f8ff">生日：3月14日</td>
                        </tr>
                        <tr>
                            <td style="width: 50%; height: 29px"bgcolor="#f0f8ff">身高：156cm</td>
                            <td style="width: 50%; height: 29px"bgcolor="#f0f8ff">兴趣爱好：计算</td>
                        </tr>
                        <tr>
                            <td style="width: 50%"bgcolor="#f0f8ff">画师：Yutokamizu</td>
                            <td style="width: 50%"bgcolor="#f0f8ff">声优：春花らん</td>
                        </tr>
                        <tr>
                            <td colspan="2" bgcolor="#FFFAFA">
                                <p>千禧科技学园所属，学生会【研讨会】的会计。</p>
                                <p>在充斥着理系学生的千禧科学学院里也是首屈一指的数学鬼才，负责管理千禧科学学院的预算部分。</p>
                                <p>特长是弹算盘，在被繁杂的事务缠身的时，有弹算盘冷静下来的习惯。</p>
                                <p>虽然因为准备千年主办的大活动事务缠身，但大会开幕前夕受其他的学生们照顾，睡了个好觉，从而能以最好的状态迎接大家。</p>
                                <p>作为主办学校的学生会成员兼执行委员的优香本打算以理性的态度对待这次大会，</p>
                                <p>但周围的学校对胜利的热情，似乎也刺激到了优香的胜负欲。</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>

</div>

</body>
</html>

css

body {
    text-align:center;
    background-image: url(../image/bg.jpg);
    background-size: cover;
}
.page-block {
    width: 1100px;

    margin: auto auto;

}
.page-block h1 {
    text-align: center;
}
.article-hover{
    height: 150px;
    background: #ffffff;
    opacity: 0.8;
}
.article-hover:hover{
    background: #f8f8f8;
}
.thumbnail {
    width: 180px;
    height: 152px;
    display: flex;
    align-items: center;
    float: left;
}
.thumbnail img {
    width: 134px;
    height: 152px;
    margin: 0 auto;
    opacity: 2;
}
.info-content {
    width: 850px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.info-content a {
    color: #000000;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #cdcdcd;
    padding:4px 10px 5px;
    border-radius: 10px;
}
.info-content a:hover {
    background: linear-gradient(to right,#FFCC00,#FF9900);
    color: #fff;
}
.li-title{
    width: 850px;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
}
.li-content{
    width: 830px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}
.page-icon{
    width: 1200px;
    margin: 35px auto 0;
    font-size:0;
    text-align:center;
}
.page-icon button {
    border: none;
    background-color: #efefef;
    padding:4px 10px 5px;
    font-size:20px;
}
.page-icon button:nth-child(3), .page-icon button:nth-child(4) {
    cursor: default;
}
.page-icon button img {
    width: 15px;
    height: 15px;
}
#totalPage, #currentPage {
    cursor: default;
    border: none;
    background-color: #efefef;
    padding:4px 10px 5px;
    font-size:20PX;
}
#currentPage {
    cursor: auto;
    text-align: center;
    width: 40px;
}
.page-1{
    display: block;
}
.page-2, .page-3{
    display: none;
}
hr {
    opacity: 50%;
}