每日总结-23.10.21
cookie和session在传值中的作用，能够让我们十分方便的对于这些用户名和密码很多地方都需要的变量一直传值的问题，还使用了一些关于css布局的问题，将背景换成自己喜欢的图片，使得整个项目变得更加的好看，还学会了使用<a>进行传值，还有jsp:forward jsp:param这两个的传值和使用
Login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录界面</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="iconfont/style.css" type="text/css" rel="stylesheet">
<style>
body{color:#fff; font-family:"微软雅黑"; font-size:14px;}
.wrap1{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto }/*把整个屏幕真正撑开--而且能自己实现居中*/
.main_content{background:url(images/main_bg.png) repeat; margin-left:auto; margin-right:auto; text-align:left; float:none; border-radius:8px;}
.form-group{position:relative;}
.login_btn{display:block; background:#3872f6; color:#fff; font-size:15px; width:100%; line-height:50px; border-radius:3px; border:none; }
.login_input{width:100%; border:1px solid #3872f6; border-radius:3px; line-height:40px; padding:2px 5px 2px 30px; background:none;}
.icon_font{position:absolute; bottom:15px; left:10px; font-size:18px; color:#3872f6;}
.font16{font-size:16px;}
.mg-t20{margin-top:20px;}
@media (min-width:200px){.pd-xs-20{padding:20px;}}
@media (min-width:768px){.pd-sm-50{padding:50px;}}
#grad {
background: -webkit-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Firefox 3.6 - 15 */
background: linear-gradient(#4990c1, #52a3d2, #6186a3); /* 标准的语法 */
}
</style>
</head>
<body style="background:url(images/bg.jpg) no-repeat;">
<%
String username="";
String password="";
String pages=request.getParameter("pages");
session.setAttribute("pages", pages);
out.print(pages);
//获取cookie里面的值
Cookie [] cookies = request.getCookies();
if(cookies!=null){
//遍历cookie
for(int i = 0;i<cookies.length;i++){
if(cookies[i].getName().equals("username")){
//获取cookie里面的用户名
username = cookies[i].getValue();
}else if(cookies[i].getName().equals("password")){
//获取密码
password = cookies[i].getValue();
}
}
}
%>
<div class="container wrap1" style="height:450px;">
<h2 class="mg-b20 text-center">听歌通行证</h2>
<div class="col-sm-8 col-md-5 center-auto pd-sm-50 pd-xs-20 main_content">
<p class="text-center font16">用户登录</p>
<form action = "Check.jsp" method = "post">
<div class="form-group mg-t20">
<i class="icon-user icon_font"></i>
<input type="text" class="login_input" id="Email1" name="username" value="<%=username %>" placeholder="请输入用户名" />
</div>
<div class="form-group mg-t20">
<i class="icon-lock icon_font"></i>
<input type="password" class=" login_input" id="Password1" name="password" value="<%=username %>" placeholder="请输入密码" />
</div>
<div class="checkbox mg-b25">
<label>
<input type="checkbox" />记住我的登录信息
</label>
</div>
<button style="submit" class="login_btn">登 录</button>
<a href="index.jsp">返回首页</a>
</form>
</div><!--row end-->
</div><!--container end-->
</body>
</html>
check.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录界面</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String password=request.getParameter("password");
String username=request.getParameter("username");
HttpSession sessions = request.getSession();
String pages=(String)sessions.getAttribute("pages");
if(password.equals(username))
{
//将信息保存在cookie中
Cookie usernameCookie = new Cookie("username", username);
Cookie passwordCookie = new Cookie("password", password);
//设置Cookie的有效时间
usernameCookie.setMaxAge(60*5);
passwordCookie.setMaxAge(60*5);
response.addCookie(usernameCookie);
response.addCookie(passwordCookie);
if(pages.equals("1")){
%>
<jsp:forward page="first.jsp">
<jsp:param value="<%=password%>" name="password"/>
<jsp:param value="<%=username%>" name="username"/>
</jsp:forward>
<%}
else if(pages.equals("2"))
{
%>
<jsp:forward page="second.jsp">
<jsp:param value="<%=password%>" name="password"/>
<jsp:param value="<%=username%>" name="username"/>
</jsp:forward>
<%
}
else if(pages.equals("3"))
{
%>
<jsp:forward page="third.jsp">
<jsp:param value="<%=password%>" name="password"/>
<jsp:param value="<%=username%>" name="username"/>
</jsp:forward>
<%
}
}
else{
%>
<script>
alert("登录失败")
</script>
<jsp:forward page="Login.jsp">
<jsp:param value="<%=pages%>" name="pages"/>
</jsp:forward>
<%
}
%>
</body>
</html>
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>歌曲界面</title>
<style>
a{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 40px;
color: #1068f5;
text-decoration: none;
}
</style>
</head>
<body style="background:url(images/bg.jpg) no-repeat;">
<%
String username=null;
String password="";
Cookie [] cookies = request.getCookies();
if(cookies!=null){
//遍历cookie
for(int i = 0;i<cookies.length;i++){
if(cookies[i].getName().equals("username")){
//获取cookie里面的用户名
username = cookies[i].getValue();
}else if(cookies[i].getName().equals("password")){
//获取密码
password = cookies[i].getValue();
}
}
}
%>
<a href="#">当前身份：<%
if(username==null)
{
out.print("未登录");
}else
{
out.print(username);
}
%></a>
<div style="margin-top: 300px; margin-left: 700px;">
<%
if(username!=null)
{
%><a href="first.jsp?pages=1">兰亭序</a><br><br><br><br>
<a href="second.jsp?pages=2">稻香</a><br><br><br><br>
<a href="third.jsp?pages=3">反方向的钟</a><br><br><br><br><%
}
else
{
%>
<a href="Login.jsp?pages=1">兰亭序</a><br><br><br><br>
<a href="Login.jsp?pages=2">稻香</a><br><br><br><br>
<a href="Login.jsp?pages=3">反方向的钟</a><br><br><br><br>
<%
}
%>
</div>
</body>
</html>
浙公网安备 33010602011771号