模拟淘宝登陆和购物车功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟淘宝登陆和购物车功能相关的知识，希望对你有一定的参考价值。
登陆页面代码;
<%@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的使用，所以页面只是做了功能，没有美化，其次，购物车方面，任何一个账户都是通用的且现在只能添加一件商品到购物车。
以上是关于模拟淘宝登陆和购物车功能的主要内容，如果未能解决你的问题，请参考以下文章
模拟淘宝登录和购物车功能：使用cookie记录登录名，下次登录时能够记得上次的登录名，使用cookie模拟购物车功能，使用session记住登录信息并验证是否登录，防止利用url打开网站，并实现退出登
模拟淘宝登录和购物车功能：使用cookie记录登录名，下次登录时能够记得上次的登录名，使用cookie模拟购物车功能，使用session记住登录信息并验证是否登录，防止利用url打开网站，并实现退出登