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

登陆页面代码;

<%@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的使用,所以页面只是做了功能,没有美化,其次,购物车方面,任何一个账户都是通用的且现在只能添加一件商品到购物车。

时间: 2024-10-03 06:53:14

模拟淘宝登陆和购物车功能的相关文章

模拟淘宝登录和购物车功能:使用cookie记录登录名,下次登录时能够记得上次的登录名,使用cookie模拟购物车功能,使用session记住登录信息并验证是否登录,防止利用url打开网站,并实现退出登录功能

<%@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" &

jquery模拟淘宝购物车

今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中. 2.当所有商品前的复选框选中时,“全选”复选框被选中,否则“全选”复选框取消选中. 3.单击图标-的时候数量减一而且不能让物品小于0并且商品总价与积分随之改变. 4.单击图标+的时候数量增加并且商品总价与积分随之改变. 5.单击删除所选将删除用户选中商品,单

从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能

前言 之前在 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记 这篇随笔中介绍了一下 UWP 淘宝的“比较”新功能呱呱坠地的过程.在鲜活的文字背后,其实都是程序员不眠不休的血泪史(有血有泪有史)……所以我们这次就要在看似好玩的 UWP 多窗口实现背后,挖掘一些我们也是首次接触的干活“新鲜热辣”地放松给大家.希望能使大家在想要将自己的 APP 开新窗口的时候,能从本文中得到一些启发,而不是总是发现 C# 关于 UWP 开新窗口可供参考的文章只有 Is it possible to open

模拟淘宝购物,运用cookie,记录登录账号信息,并且记住购物车内所选的商品

1.登录界面 <%@ 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"&

iOS开发——仿淘宝添加到购物车的动画效果实现

这篇博文实在不知道该起什么名字才能概况我的意思...挫语文水平 类似于淘宝一样,我们在写一些购物.订餐之类的app的时候,在用户选择购买或者加入购物车时可以添加一个商品飞到购物车中的动画效果,如下图所示: 实现这个效果还是不算难的,但涉及的问题比较多,还是挺有学习价值的.主要面对的问题有以下几点 1.cell中有button,如何获得该button,即如何知道用户点击的是哪一个button. 2.坐标系的转换,这里频繁使用坐标系转换,主要原因是这里需要涉及三个视图--cell.tableView

Python 模拟淘宝登录的两种方法

方法一.urllib的post登录 import urllib import urllib2 import cookielib def taobao(username,password): cj = cookielib.CookieJar() print cj post_data = urllib.urlencode( { 'TPL_password':password, 'TPL_username':username, }) path = 'https://login.taobao.com/m

剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记

前言 网购已经不再是现在的时髦,而变成了我们每天的日常生活.上网已经和买买买紧密地联系在了一起,成为了我们的人生信条.而逛街一词,越来越多地变成了一种情怀.有时候我们去逛街,要么是为了打发时间,要么是想亲手摸摸商品本身,要么就是想看看不同的商品,放在眼前或者在脑海里比较一下.毕竟现在网上琳琅满目的商品让人眼花缭乱,一次展示一个,看完这个,忘了上一个:看完了最后一个,已经没有力气再打开长长的历史列表一个一个看回去.如果没有石猴的火眼金睛,如何万里挑一,找到自己中意的那个‘它’呢?毕竟我们大多数人,

iOS手机淘宝加入购物车动画分析

本文转载至 http://www.jianshu.com/p/e77e3ce8ee24 1.最终效果 仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] initWithFrame:CGRectMake(_propView.frame.size.height*0.025,_propView.frame.size.height* -0.025 , _propView.frame.size.height*0.2, _propView.frame.size.

iOS 手机淘宝加入购物车动画分析

1.最终效果 仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] initWithFrame:CGRectMake(_propView.frame.size.height*0.025,_propView.frame.size.height* -0.025 , _propView.frame.size.height*0.2, _propView.frame.size.height*0.2)]; [self.view addSubview:_cartAni