一、要用到的 js 和 css 文件

二、数据库表+实体类+Dao类

1、数据库表

2、实体类

3、Dao类方法(GoodsDao)

四、商品主页面（index.jsp）

1、代码分析

2、完整代码

五、购物车页面（spcar.jsp）

1、代码分析

2、完整代码

3、删除方法（dodelete.jsp）

session为每个浏览器独创一个区域，有一个key，通过key可以找到独享的区域

下面这个代码利用的就是session，每个购物车是一个map集合，然后把这个map集合放到session中作为每个浏览器独享的区域

一、要用到的 js 和 css 文件

css文件：bootstrap.min.css 或 bootstrap.css

js文件：bootstrap.js

二、数据库表+实体类+Dao类

1、数据库表

2、实体类

商品类（Goods）
gid	商品编号
gname	商品名称
gprice	商品单价
ginfo	商品描述
gface	商品图片

小订单（OrderItem）
Goods 类型（对象)	商品对象
gnumber	商品数量
gnumprice	商品总价

3、Dao类方法(GoodsDao)

查询所有商品方法：在页面显示所有商品

   /*** 查询所有商品* @return 返回商品集合*/public ArrayList<Goods> getAll(){ArrayList<Goods> glist=new ArrayList<>();Connection con=null;PreparedStatement ps=null;ResultSet rs=null;try {con=DBHelper.getCon();String sql="select * from Goods";ps=con.prepareStatement(sql);rs=ps.executeQuery();while(rs.next()) {glist.add(new Goods(rs.getInt(1), rs.getString(2), rs.getDouble(3), rs.getString(4), rs.getString(5)));}} catch (Exception e) {e.printStackTrace();} finally {DBHelper.closeDb(con, ps, rs);}return glist;}

查询单个商品：根据编号查询到商品所有信息

   /*** 查询单个* @param gid* @return*/public Goods getById(int gid){Goods g=null;Connection con=null;PreparedStatement ps=null;ResultSet rs=null;try {con=DBHelper.getCon();String sql="select * from Goods where gid="+gid;ps=con.prepareStatement(sql);rs=ps.executeQuery();if(rs.next()) {g=new Goods(rs.getInt(1), rs.getString(2), rs.getDouble(3), rs.getString(4), rs.getString(5));}} catch (Exception e) {e.printStackTrace();} finally {DBHelper.closeDb(con, ps, rs);}return g;}

四、商品主页面（index.jsp）

1、代码分析

调用Dao类查询所有的方法，遍历集合，给页面绑定数据

      <%GoodsDao gd=new GoodsDao();ArrayList<Goods> glist=gd.getAll();for(Goods g:glist){%><tr><td><%=g.getGid() %></td><td><%=g.getGname() %></td><td><%=g.getGprice() %></td><td><%=g.getGinfo() %></td><td><img alt="" src="<%=g.getGface()%>"></td><td><button onclick="gm(<%=g.getGid()%>)" class="btn btn-info">加入购物车</button></td></tr><%} %>

2、完整代码

index.jsp

<%@page import="entity.Goods"%>
<%@page import="java.util.ArrayList"%>
<%@page import="dao.GoodsDao"%>
<%@ 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>
<!-- 引用jQuery库 -->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript">function gm(gid) {//跳转到do页面 顺便传个编号location.href="dogwc.jsp?gid="+gid;}
</script>
</head>
<body><table class="table table-hover"><tr><td>商品编号</td><td>商品名称</td><td>商品单价</td><td>商品介绍</td><td>商品图片</td><td>操作</td></tr><%GoodsDao gd=new GoodsDao();ArrayList<Goods> glist=gd.getAll();for(Goods g:glist){%><tr><td><%=g.getGid() %></td><td><%=g.getGname() %></td><td><%=g.getGprice() %></td><td><%=g.getGinfo() %></td><td><img alt="" src="<%=g.getGface()%>"></td><td><button onclick="gm(<%=g.getGid()%>)" class="btn btn-info">加入购物车</button></td></tr><%} %></table></body>
</html>

五、购物车页面（spcar.jsp）

1、代码分析

获取到session中的订单集合，遍历集合获取到集合内的值，绑定到页面

    <%//获取到session中的订单集合ArrayList<OrderItem> olist=(ArrayList<OrderItem>)session.getAttribute("olist");//把订单绑定到页面for(int i=0;i<olist.size();i++){%><tr><td><img alt="" src="<%=olist.get(i).getGoods().getGface() %>"></td><td><%=olist.get(i).getGoods().getGname() %></td><td><%=olist.get(i).getGoods().getGprice() %></td><td><%=olist.get(i).getGoods().getGinfo() %></td><td><button class="btn" onclick="j('-',<%=olist.get(i).getGoods().getGid()%>)">-</button><input id="<%=olist.get(i).getGoods().getGid()%>" onblur="xg(this,<%=olist.get(i).getGoods().getGid() %>)" style="width:40px;text-align:center;" type="text" value="<%=olist.get(i).getGnumber() %>"><button class="btn" onclick="j('+',<%=olist.get(i).getGoods().getGid()%>)">+</button></td><td><%=olist.get(i).getSumPrice() %></td><td><a href="dodelete.jsp?gid=<%=olist.get(i).getGoods().getGid()%>"><span class="glyphicon glyphicon-trash"></span></a></td></tr><%} %></table>

文本框修改商品数量

跳转到dogwc.jsp对商品的数量，小订单总价，所有订单总价进行修改
  function xg(obj,gid) {var gnumber = obj.value;location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}
在input标签中给方法传值（onblur焦点消失事件，焦点消失后，商品的总价随数量加减）
<input id="<%=olist.get(i).getGoods().getGid()%>" onblur="xg(this,<%=olist.get(i).getGoods().getGid() %>)" style="width:40px;text-align:center;" type="text" value="<%=olist.get(i).getGnumber() %>">

点击加“+” 减“-” 对商品的数量进行加减

判断值：减到小于1的值，直接复制等于1

判断完后，跳转到dogwc.jsp对商品的数量，小订单总价，所有订单总价进行修改
     function $(id){return document.getElementById(id);} function j(j,gid){var gnumber=$(gid).value;if(j=="-"){gnumber--;if(gnumber<1){gnumber=1;/* location.href="dodelete.jsp?gid="+gid+"&gnum="+gnumber; */}location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}else if(j=="+"){gnumber++;location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}}
给按钮添加点击事件onclick，并传值
<button class="btn" onclick="j('-',<%=olist.get(i).getGoods().getGid()%>)">-</button><button class="btn" onclick="j('+',<%=olist.get(i).getGoods().getGid()%>)">+</button>

在dogwc.jsp对订单总价的计算用session传值

session.getAttribute("sumPrice")

<button class="btn btn-success">总价：<%=session.getAttribute("sumPrice")%></button>

 double sumPrice = 0;for(OrderItem oit:olist){sumPrice+=oit.getSumPrice();}   //把集合放到session中session.setAttribute("olist", olist);session.setAttribute("sumPrice", sumPrice);

2、完整代码

购物车页面（spcar.jsp）

<%@page import="entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ 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>
<!-- 引用jQuery库 -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript">function xg(obj,gid) {var gnumber = obj.value;location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}function $(id){return document.getElementById(id);} function j(j,gid){var gnumber=$(gid).value;if(j=="-"){gnumber--;if(gnumber<1){gnumber=1;/* location.href="dodelete.jsp?gid="+gid+"&gnum="+gnumber; */}location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}else if(j=="+"){gnumber++;location.href="dogwc.jsp?gid="+gid+"&gnum="+gnumber;}}
</script>
</head>
<body><h1 align="center"><a href="index.jsp"><span class="glyphicon glyphicon-home"></span></a></h1><table class="table table-hover"><tr><td>商品图片</td><td>商品名称</td><td>商品单价</td><td>商品介绍</td><td>商品数量</td><td>订单总价</td><td><span class="glyphicon glyphicon-cog"></span></td></tr><%//获取到session中的订单集合ArrayList<OrderItem> olist=(ArrayList<OrderItem>)session.getAttribute("olist");//把订单绑定到页面for(int i=0;i<olist.size();i++){%><tr><td><img alt="" src="<%=olist.get(i).getGoods().getGface() %>"></td><td><%=olist.get(i).getGoods().getGname() %></td><td><%=olist.get(i).getGoods().getGprice() %></td><td><%=olist.get(i).getGoods().getGinfo() %></td><td><button class="btn" onclick="j('-',<%=olist.get(i).getGoods().getGid()%>)">-</button><input id="<%=olist.get(i).getGoods().getGid()%>" onblur="xg(this,<%=olist.get(i).getGoods().getGid() %>)" style="width:40px;text-align:center;" type="text" value="<%=olist.get(i).getGnumber() %>"><button class="btn" onclick="j('+',<%=olist.get(i).getGoods().getGid()%>)">+</button></td><td><%=olist.get(i).getSumPrice() %></td><td><a href="dodelete.jsp?gid=<%=olist.get(i).getGoods().getGid()%>"><span class="glyphicon glyphicon-trash"></span></a></td></tr><%} %></table><p align="right" style="margin-right:40px"><button class="btn btn-success">总价：<%=session.getAttribute("sumPrice") %></button></p>
</body>
</html>

dogwc.jsp

<%@page import="dao.GoodsDao"%>
<%@page import="entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%//获取商品订单的数量String number = request.getParameter("gnum");int count = 1;if(number!=null){count= Integer.valueOf(number);}//接收商品的编号String id = request.getParameter("gid");int gid = Integer.valueOf(id);//构造小订单对象OrderItem oi = new OrderItem();//给属性赋值oi.setGoods(new GoodsDao().getById(gid));//订单中的商品数量oi.setGnumber(1);//订单总价oi.setSumPrice();//获取session中的订单集合ArrayList<OrderItem> olist = (ArrayList<OrderItem>)session.getAttribute("olist");if(olist==null){//创建订单集合olist = new ArrayList<OrderItem>();}boolean b = true;//表示默认 没有相同的订单//遍历订单集合，判断是否已存在相同商品订单for(int i=0;i<olist.size();i++){if(gid==olist.get(i).getGoods().getGid()){//number为空说明是从index页面过来的if(number==null){//修改数量：原来的数量+1olist.get(i).setGnumber(olist.get(i).getGnumber()+1);//修改总价olist.get(i).setSumPrice();}else{//number不为空 说明是 从spcar页面过来的//修改数量：原来的数量修改为countolist.get(i).setGnumber(count);//修改总价olist.get(i).setSumPrice();}//表示有相同订单b = false;}}if(b){//把订单放到ArrayList集合中olist.add(oi);}//遍历订单集合double sumPrice = 0;for(OrderItem oit:olist){sumPrice+=oit.getSumPrice();}   //把集合放到session中session.setAttribute("olist", olist);session.setAttribute("sumPrice", sumPrice);//跳转页面response.sendRedirect("spcar.jsp");//request.getRequestDispatcher("spcar.jsp").forward(request, response);%>

3、删除方法（dodelete.jsp）

这里最好是用for循环

<%@page import="dao.GoodsDao"%>
<%@page import="entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%//接收商品的编号String id = request.getParameter("gid");int gid = Integer.valueOf(id);//获取session中的集合ArrayList<OrderItem> olist = (ArrayList<OrderItem>)session.getAttribute("olist");for(OrderItem oi:olist){if(oi.getGoods().getGid()==gid){//根据id找商品olist.remove(oi);break;}}response.sendRedirect("spcar.jsp");%>

“少年心动是仲夏夜的荒原

割不完烧不尽

长风一吹野草就连了天”

jsp购物车（session版）相关推荐

购物车（session版）
目录: 一:详解购物车 1.1:购物车页面数据绑定 1.2:购物车功能(添加,删除,结算) 二:项目美化小知识一:详解购物车注:session版购物车它是在eclipse项目中利用Java Res ...
jsp中session 失效设置
jsp中session 失效设置一般web系统都需要控制session自动失效的时间,从而控制用户访问系统超时.设置session失效有以下三种方式: 1.在主页面或者公共页面中加入:session ...
韩顺平 mysql sqlhelper类_(最全)韩顺平jsp购物车源代码(包含数据库)
[实例简介] 韩顺平的jsp购物车项目,所有源码都在,包含数据库,是网络上最全的 [实例截图] [核心代码] myshopping └── myshopping ├── myshopping │ ...
较为周全的Asp.net提交验证方案(Session版)
此前我介绍了使用数据库实现的提交验证方案,一些朋友怀疑其效率不佳,认为Session是更好的方案. 的确使用Session也不会消耗太多内存,而且如今内存白菜价,最不济就随手买个2G的插上也就够了,所 ...
php购物车面试题,PHP 购物车 session（非框架）
这篇文章是非框架来完成购物车功能的,我还有一篇文章是ThinkPHP框架下完成购物车功能的.点击打开链接这是我的一次面试中的面试题,简单写商城的购物车功能,要求是: 1.自己写简单的前台 2.用户登 ...
Java商品规格添加购物车_关于java+jsp购物车添加商品的有关问题，来哦
关于java+jsp购物车添加商品的有关问题,来哦热度:9587 发布时间:2013-02-25 21:44:20 关于java+jsp购物车添加商品的问题,,高手进来哦提示错误: An er ...
购物车的实现（jsp的session+Java的Map的结合）
1:电商如此发达的现在,作为一个web开发程序猿,如果不会写购物车,真是有点不好意思找工作.所以抓紧练习啊,从上篇博客中抽离出如何实现购物车的功能. 2:首先需要理解购物车实现的一些基本步骤. 2.1 ...
JSP中session的简单应用——以购物车为例
题目编写两个页面,一个显示一些历史图书的名称和价格,一个显示一些计算机书名的名称和价格.每本书后面都有一个链接--购买,单击该链接,能够将该书本加到购物车:每个页面上都有链接,单击该链接,将该图书从 ...
面向对象中的session版的购物车
先设置一个product类,用来存储和获取数据,使用LIst集合存储所有商品即(ProductDao类),在ShowProductServlet类查看商品信息,然后将数据提交到AddCarServle ...
jsp的session介绍 (转)
摘要:虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术.本文将详细讨论session的工作机制并且对在Java ...

jsp购物车（session版）

一、要用到的 js 和 css 文件

二、数据库表+实体类+Dao类

1、数据库表

2、实体类

3、Dao类方法(GoodsDao)

四、商品主页面（index.jsp）

1、代码分析

2、完整代码

五、购物车页面（spcar.jsp）

1、代码分析

2、完整代码

3、删除方法（dodelete.jsp）

jsp购物车（session版）相关推荐

最新文章

热门文章