模拟淘宝登陆和购物车功能

首页 > 代码库 > 模拟淘宝登陆和购物车功能

模拟淘宝登陆和购物车功能

2024-08-18 06:19:23 220人阅读

登陆页面代码;

<%@page import="java.net.URLDecoder"%>
<%@ 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>
<style>
.a
{
    width:380px;
    height:380px;
    position:relative;
    margin-top:100px;
    margin-left:850px;
    border:1px solid #666;
    border-radius:8px;
    background-color:#FFF;
}    
.b
{
    width:240px;
    height:40px;
    position:relative;
    float:left;
    margin-left:70px;
    margin-top:40px;
    border:1px solid #CCC;
}    
.c
{
    width:240px;
    height:40px;
    position:relative;
    float:left;
    margin-left:70px;
    margin-top:40px;
    font-size:1.2em;
    border:0px;
}    
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body background="E:\IO\952.jpg">
<%
//接收cookie,并把值传给userid

Cookie[] cks = request.getCookies();

String str =null;

for(Cookie ck:cks)
{
    if(ck.getName().equals("userid"))
    str = URLDecoder.decode(ck.getValue());    
}

%>
<div class="a">
   <form action="check3.jsp" method="post">
      <input class="c" type="text" value="账户密码登陆" />
      <input class="b" type="text" name="userid" placeholder="手机号/会员名/邮箱" value = <%=str %> />
      <input class="b" type="password" name="password" placeholder="请输入密码" />
      <input class="b" type="submit" value="登陆" style="background-color:#F60; color:white; font-size:1.1em" />
   </form>
</div>
</body>
</html>

截图:

技术分享

check3页面代码，该部分用于判断输入的账户名和密码是否有效，如果有效，进入菜单选择，无效则退回到登陆界面，同时，创建cookie和session，保存登陆成功的账户名，并维持该账户的有效登录时长，如果，登陆成功后连续一分钟都没有任何请求，则登陆失效：

<%@page import="java.net.URLEncoder"%>
<%@page import="com.hanqi.web.Player"%>
<%@ 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>Insert title here</title>
</head>
<body>
<%
String userid = new String(request.getParameter("userid").getBytes("ISO-8859-1"),"UTF-8");
String password = request.getParameter("password");

if(userid==null||password==null ||userid.equals("")||password.equals(""))
{
    out.print("请正确登陆系统！");
    response.setHeader("refresh", "2;URL=http://localhost:8080/javaweb_3/taobaologin.jsp");
}
else
{
    Player pl = new Player();
    
    if(pl.checklogin(userid, password))
    {
        out.print("登陆成功");
        //设置cookie
        Cookie ck = new Cookie("userid",URLEncoder.encode(userid));//利用cookie记住用户名
        //设置cookie的生命周期为一小时
        ck.setMaxAge(60*60);
        //发送cookie
        response.addCookie(ck);
        
        
        //创建session,保持有效的登录时长
        session.setAttribute("userid", URLEncoder.encode(userid));
        
        //设置session的超时时间为1分钟
        session.setMaxInactiveInterval(60);
        
        //跳转页面到菜单选择
        response.sendRedirect("xuanze.jsp");
        
    }
    else
    {
        out.print("登陆失败...");
        //跳回原页面
        response.setHeader("refresh", "2;URL=http://localhost:8080/javaweb_3/taobaologin.jsp");
    }
    
    }

%>

</body>
</html>

菜单选择界面：

<%@ 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>Insert title here</title>
</head>
<body>
<form action="gouwuche.jsp" method="post">
   <input type="submit" value="查看购物车">
</form>
<form action="buying.jsp" method="post">
   <input type="submit" value="选购商品">
</form>
<form action="tuichu.jsp" method="post">
   <input type="submit" value="退出登录">
</form>
</body>
</html>

技术分享

点击退出，则销毁session，重新载入登陆界面

销毁session的代码如下：

技术分享

点击选购商品，进入如下界面：

<%@ 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>Insert title here</title>
</head>
<body>
请选择您喜欢的商品：<br>
<form action="buy.jsp" method="post">
<input type="radio" name="thing" value="maoyi">圆领男士毛衣<br>
<input type="radio" name="thing" value="yurongfu">女士红色羽绒服<br>
<input type="radio" name="thing" value="yaodai">男士七匹狼腰带<br>
<input type="radio" name="thing" value="majia">森马最新款马甲<br>
<input type="submit" value="加入购物车" />
</form>
</body>
</html>

技术分享

选择好商品，可以点击加入购物车：

点击后，首先判断登陆中的账户是否失效，失效提示重新登录，不失效则加入成功并退回到菜单选择：

<%@ 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>Insert title here</title>
</head>
<body>
<%
Object userid = session.getAttribute("userid");

if(userid==null)
{
   out.print("登陆超时，请重新登陆！");
   response.setHeader("refresh", "2;URL=taobaologin.jsp");
}
else
{
String thing = request.getParameter("thing");

//设置cookie
Cookie ck = new Cookie("thing",thing);//利用cookie记住购物车内的物品
//设置cookie的生命周期为10分钟
ck.setMaxAge(600);
//发送cookie
response.addCookie(ck);
//跳转页面到菜单选择
response.sendRedirect("xuanze.jsp");

}
 %>
</body>
</html>

技术分享

在登陆超时的情况下，可以看到，退回登陆界面时刷新页面，仍然保留了上次登陆成功的账户，说明cookie生效，

点击查看购物车，可以看到刚刚加入购物车的商品name:

技术分享

说一下不完善的部分：这次主要是练习cookie和session的使用，所以页面只是做了功能，没有美化，其次，购物车方面，任何一个账户都是通用的且现在只能添加一件商品到购物车。

模拟淘宝登陆和购物车功能

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 模拟淘宝登陆和购物车功能

模拟淘宝登陆和购物车功能

看完仍有疑问？有类似问题直接问程序猿