JavaWeb购物车项目二[通俗易懂]

Java (68) 2023-06-29 21:12

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说JavaWeb购物车项目二[通俗易懂],希望能够帮助你!!!。

🛑此篇文章是根据上篇购物车一进行的完善 上期回顾链接如下：

JavaWeb购物车项目一JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第1张https://blog.csdn.net/weixin_62270300/article/details/124159838

主要实现功能

一、购物车商品显示

二、商品的加减

三、输入框数字改变

四、商品删除

五、清空购物车

六、退出登录

一、购物车商品显示

将选中的添加到购物车的商品显示在购物车页面中

首先从首页点击图标🛒(a标签)进入购物车界面，代码如下

<a class="btn btn-primary" href="car.jsp">🛒</a>

 JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第2张

 

购物车页面如下：

JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第3张

 购物车代码如下：

<%@page import="com.zking.vo.CarItem"%>
<%@page import="java.util.List"%>
<%@page import="com.zking.pojo.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
td:nth-child(4)::before, small {
	content: "$";
}

* {
	outline: none !important;
}

td, th {
	text-align: center;
}

input {
	text-align: center;
}
</style>
</head>
<%
Object obj = session.getAttribute("user");
if (obj == null) {
	response.sendRedirect("login.jsp");
	return;
}
%>
<body>
	<div class="jumbotron">
		<div class="container">
			<h1>欢迎光临购物车🛒</h1>
			<p>尊贵的<%=((User) obj).getAccount()%></p>
		    <p>
		       <a href="doExit.jsp" class="btn btn-warning">退出登录</a>
		    </p>
		</div>
	</div>

	<table class="table">
		<tr>
			<th>商品序号</th>
			<th>商品名称</th>
			<th>商品个数</th>
			<th>商品总价</th>
			<th>操作</th>
		</tr>
		<%
		   int sum=0;
		   List<CarItem>car=(List<CarItem>)session.getAttribute("car");
		   for(CarItem carItem:car){
		   //每个购物条目都有自己的价格
		   sum+=carItem.getSum();
		%>
		<tr>
			<td style="line-height: 30.5px;"><%=carItem.getGoods().getId() %></td>
			<td style="line-height: 30.5px;"><%=carItem.getGoods().getName() %></td>
			<td>
				<div class="input-group" style="width: 120px; margin: auto;">
					<span class="input-group-btn">
						<a href="doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&type=0" class="btn btn-default" type="button">-</a>
					</span> <input type="number" onblur="location.href='doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&count='+this.value" value="<%=carItem.getCount() %>"  class="form-control"> <span
						class="input-group-btn">
						<a href="doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&type=1" class="btn btn-default" type="button">+</a>
					</span>
				</div>
			</td>
			<td style="line-height: 30.5px;"><%=carItem.getSum()%></td>
			<td style="line-height: 30.5px;">
				<a href="doDelCar.jsp?id=<%=carItem.getGoods().getId() %>" class="btn btn-primary">删除</a>
			</td>
		</tr>
        <%
		   }
        %>

	</table>

	<h1 class="alert alert-info">
		当前购物车总价 <small><%=sum %></small>
		<a href="doClear.jsp" class="btn btn-danger">点我结算</a>
	</h1>
</body>
</html>

二、商品的加减

当点击两旁的➕、➖按钮时 数量进行变化的同时价格也要跟着变化

doUpdCar.jsp(处理修改购物车的页面)

<%@page import="com.zking.vo.CarItem"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
   //拿到购物车
   List<CarItem>car=(List<CarItem>)session.getAttribute("car");
   //商品id
   Integer id=Integer.parseInt(request.getParameter("id"));
   //拿类型
   String type=request.getParameter("type");
   
   CarItem i=null;
   for(CarItem item:car){
	   if(item.getGoods().getId()==id){
		 i=item;
		 break;
	   }
   }
   
   if(type!=null){
	 //去修改购物车中对应的选项
	     i.setCount(i.getCount()+(type.equals("0")?-1:1));
   }else{
	     i.setCount((int)Double.parseDouble(request.getParameter("count")==null?"1":request.getParameter("count")));
   }
	 i.setCount(i.getCount()>0?i.getCount():1);
     i.setSum(i.getCount()*i.getGoods().getPrice());

   //更新购物车
   session.setAttribute("car", car);
   //跳回购物车
   response.sendRedirect("car.jsp");
%>

type对应car.jsp(购物车页面)中给➕、➖定义的type=“1”、type=“0”，界面重要代码如下：

<a href="doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&type=0" class="btn btn-default" type="button">-</a>

<input type="number" onblur="location.href='doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&count='+this.value" value="<%=carItem.getCount() %>"  class="form-control"> <span
class="input-group-btn">

<a href="doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&type=1" class="btn btn-default" type="button">+</a>

效果如下：

JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第4张 

三、输入框数字改变

将输入框的type改为number ，如果失去焦点的时候跳doUpdCar.jsp界面（注意带上id和输入框的值）

重要代码如下：

<input type="number" onblur="location.href='doUpdCar.jsp?id=<%=carItem.getGoods().getId() %>&count='+this.value" value="<%=carItem.getCount() %>"  class="form-control"> <span
class="input-group-btn">

效果如下：

JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第5张

 JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第6张

 

四、商品删除

当选中删除时 移除商品

与实现的功能一做比较删除了第五行的商品

界面如下：

JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第7张

 处理删除的代码如下：

<%@page import="com.zking.vo.CarItem"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
      List<CarItem>car=(List<CarItem>)session.getAttribute("car");
      //商品的id      
      Integer id=Integer.parseInt(request.getParameter("id"));
      //去删除购物车中对应的选项
      for(CarItem item:car){
    	  if(item.getGoods().getId()==id){
    		  car.remove(item);
    		  break;
    	  }
      }
       
      /**
      for(int i=0;i<car.size();i++){
    	  if(car.get(i).getGoods().getId()==id){
    		  car.remove(car.get(i));
    		  break;
    	  }
      }
      **/
      //更新购物车
      session.setAttribute("car", car);
      //跳回购物车
      response.sendRedirect("car.jsp");
%>

注意：在写foreach循环的时候有可能会报错 记得加上break。用for循环就不会报错

五、清空购物车

点击下方的点击结算清空购物车

界面效果如下：

JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第8张

 处理清空购物车的代码如下：

<%@page import="java.util.List"%>
<%@page import="com.zking.vo.CarItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
     //session.setAttribute("car", new ArrayList<CarItem>());
     List<CarItem>car=(List<CarItem>)session.getAttribute("car");
     car.clear();
     
     //更新购物车
     session.setAttribute("car", car);
     //跳回购物车
     response.sendRedirect("car.jsp");

%>

六、退出登录

点击退出登录跳转到登录界面

JavaWeb购物车项目二[通俗易懂]_https://bianchenghao6.com/blog_Java_第9张

 处理退出的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  session.invalidate();//让session失效
  response.sendRedirect("login.jsp");
%>

今天的分享就到这里结束啦！!✌

以上就是关于JavaWeb购物车项目二的一些内容！！📚

期待下次再见！！😊

上一篇

javac不是内部命令或外部命令[通俗易懂]

下一篇

Java实现文件上传详细教程，如此简单[亲测有效]

发表回复

相关推荐

Java-System.currentTimeMillis() 存在性能问题

（附源码课件）10款Java小游戏满足你各种需求

Javaweb学生信息管理系统(源码)

Java之路：this关键字的用法

最新文章

更多>

Java-System.currentTimeMillis() 存在性能问题

8小时前 3

（附源码课件）10款Java小游戏满足你各种需求

1天前 3

Javaweb学生信息管理系统(源码)

2天前 3

Java之路：this关键字的用法

2天前 2

JAVA 新手入门

2天前 2

java实现5毛钱特效

3天前 2

java生成二维码图片

3天前 2

快速搭建一个自己的服务器详解（java环境）

3天前 2

Java案例：实现九九乘法表

3天前 3

java冒泡排序详解

3天前 3