JavaWeb_13(购物车部分功能讲解)

最新推荐文章于 2023-07-19 22:34:16 发布
最新推荐文章于 2023-07-19 22:34:16 发布
阅读量77 收藏
点赞数
文章标签： java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hh20040224/article/details/124774093
版权
这是一个关于网页展示商品信息和购物车功能的代码实现。页面使用JSP和JSTL标签库，显示商品列表，包括编号、名称、类型、图片、价格、库存等，并提供加入购物车的按钮。购物车页面展示已选商品，支持数量增减、总价计算及商品删除和修改操作。代码中还包含了分页功能。
摘要由CSDN通过智能技术生成

前台主页

 代码：

<%@page import="com.zking.carts.entity.Goods"%>
<%@page import="java.util.List"%>
<%@page import="com.zking.carts.biz.GoodsBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="x" %>
<!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>
 
		<table border="1">
			<table border="1" width="100%" style="text-align: center;">
		<tr>
			<th>编号</th>
			<th>商品名</th>
			<th>类型</th>
			<th>图片</th>
			<th>价格</th>
			<th>库存</th>
			<th>描述</th>
			<th>操作</th>
		</tr>
		<x:if test="${empty listGoods}">
			<jsp:forward page="doindex.jsp"></jsp:forward>
		</x:if>
		
		<x:forEach items="${listGoods }" var="goods" >
				<tr>
					<td>${goods.getGid() } </td>
					<td>${goods.getGname() }</td>
					<td>${goods.getGtype() }</td>
					<td><img style="width: 70px;height:50px" alt="" src="${goods.getGimage() }"></td>
					<td>${goods.getGprice() }</td>
					<td>${goods.getGkc() }</td>
					<td>${goods.getGinfo() }</td>
					<td><button onclick="addShooping(${goods.getGid() })">加入购物车</button ></td>
				</tr>
			
		</x:forEach>
		
		</table>
		
		<script type="text/javascript">
			function addShooping(gid){
				 window.location.href="doshooping.jsp?gid="+gid+"";		 
			}
		</script>
</body>
</html>

 

 购物车

 

 

<%@page import="com.zking.carts.entity.Shooping"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!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>
	<table id="oTab" border="1" width="100%" style="text-align: center;">
		<tr>
			<th>商品编号</th>
			<th>商品名</th>
			<th>类型</th>
			<th>图片</th>
			<th>价格</th>
			<th>数量</th>
			<th>总价</th>
			<th>操作</th>
		</tr>
		
		
		<c:if test="${not empty list}">
		
		<c:forEach items="${list }" var="ls" begin="${start }" end="${end }">
			
			<tr>
				<td>${ls.getGoods().getGid() }</td>	
				<td>${ls.getGoods().getGname()}</td>
				<td>${ls.getGoods().getGtype() }</td>
				<td><img style="width: 70px; height: 50px" 
				src="${ls.getGoods().getGimage() }"></td>
				<td>${ls.getGoods().getGprice() }</td>	
				
				<td><button
					onclick="setCount('minus',${ls.getGoods().getGid() })">-</button>
				<input style="width: 50px" type="text"
				value="${ls.getGcount()}" />
			<button onclick="setCount('add',${ls.getGoods().getGid() })">+</button></td>
			<td>${ls.getGtotal() }</td>
			<td><button onclick="del(${ls.getGoods().getGid() })">删除</button>
				<button onclick="update(${ls.getGoods().getGid() })">修改</button></td>
			
			</tr>
		
		</c:forEach>
		
		</c:if>
		
		<%-- <%
			List<Shooping> list=(List<Shooping>)session.getAttribute("list");
		System.out.println(list);
				int pageIndex=1;
				int pageSize=3;
				
				String index=request.getParameter("pageIndex");
				if(index!=null){
					pageIndex=Integer.valueOf(index);
				}
				//统计购物车一共有多少件商品
				int max=0;
				//设置开始值
				int start=0;
				//设置结束
				int end=0;
				//最大页码
				int pageMax=0;
				//获取pageMax
				String pMax=request.getParameter("pageMax");
				if(pMax!=null){
					pageMax=Integer.valueOf(pMax);
				}
		
			
	if(list!=null){
		max=list.size();
		start=(pageIndex-1)*pageSize;
		end=pageIndex*pageSize>max?max:pageIndex*pageSize;
		pageMax=max%pageSize==0?max/pageSize:max/pageSize+1;
		
		
			list=list.subList(start, end);
		for (Shooping shooping : list) {
			%>
		<tr id="<%=shooping.getGoods().getGid()%>">
			<td><%=shooping.getGoods().getGname()%></td>
			<td><%=shooping.getGoods().getGtype()%></td>
			<td><img style="width: 70px; height: 50px" alt=""
				src="<%=shooping.getGoods().getGimage()%>"></td>
			<td><%=shooping.getGoods().getGprice() %></td>
			<td><button
					onclick="setCount('minus',<%=shooping.getGoods().getGid()%>)">-</button>
				<input style="width: 50px" type="text"
				value="<%=shooping.getGcount() %>" />
			<button onclick="setCount('add',<%=shooping.getGoods().getGid()%>)">+</button></td>
			<td><%=shooping.getGtotal() %></td>
			<td><button onclick="del(<%=shooping.getGoods().getGid()%>)">删除</button>
				<button onclick="update(<%=shooping.getGoods().getGid()%>)">修改</button></td>
		</tr>
 
		<%
		}
	}
		
		%> --%>
		
		
 
	</table>
	<div style="text-align: right;">
	《${pageIndex }/${pageMax }》
		<a href="doShooping_fy.jsp?pageIndex=${pageIndex-1<1?1:pageIndex-1 }">上一页</a> 
		<a href="doShooping_fy.jsp?pageIndex=${pageIndex+1>pageMax?pageMax:pageIndex+1 }">下一页</a>
	</div> 
	<%-- <div style="text-align: right;">
	《<%=pageIndex %>/<%=pageMax %>》
		<a href="Shooping.jsp?pageIndex=<%=pageIndex-1<1?1:pageIndex-1%>&pageMax=<%=pageMax%>">上一页</a> 
		<a href="Shooping.jsp?pageIndex=<%=pageIndex+1>pageMax?pageMax:pageIndex+1%>&pageMax=<%=pageMax%>">下一页</a>
	</div> --%>
 
	<script type="text/javascript">
			function del(gid){
				 window.location.href="dodel.jsp?gid="+gid+"";	
			}
			
			/* function update(gid){
				 window.location.href="doshooping.jsp?gid="+gid+"";	
			} */
			
			window.onload=function(){
				
			}
			function setCount(type,id){
				var count=document.getElementById(id).cells[4].children[1].value;
				if(type==="minus"){
					if(count<=1){
						
					}else{
						count--;
					}
				}
				if(type=="add"){
					count++;
				}
				document.getElementById(id).cells[4].children[1].value=count;
				setTotal();
			}
			
			function setTotal(){
				var tb=document.getElementById("oTab");
				var trs=tb.rows;
				  for(var i=1;i<trs.length;i++){
					  //价格
					var price=trs[i].cells[3].innerHTML;
					//数量
					var count=trs[i].cells[4].children[1].value;
					
					trs[i].cells[5].innerHTML=price*count;
					
					}  
			}
			
			function update(gid,count){
				var count=document.getElementById(gid).cells[4].children[1].value;
				 window.location.href="doupdate.jsp?gid="+gid+"&count="+count+"";
			}
 
			
		</script>
</body>
</html>

无用？吴用
关注
JavaWEB13购物车部分功能讲解
weixin_66277116的博客
04-15 613
一.购物车案例 1.加入购物车功能 （1）购物车界面：模块 （2）加入购物车代码实现功能 a.购物车显示功能 <c:if test="${not empty listCarts}"> <c:forEach items="${listCarts }" var="ls" begin="${start }" end="${end }"> <tr id="${ls.getGoods().getGid() }"> <td> &l
web前端进阶_vue_购物车（商品选择（全选或者单选）、增加减少商品数量、删除商品、计算商品总和、商品信息和网络绑定）-基础篇11
qq_17495489的博客
08-30 3042
购物车 1:购物车效果 2、购物车代码： html 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script src=
web前端做的一个购物商城
04-22
里面有登录注册页面，个人中心页面，购物车页面，实现搜索功能，欢迎下载
前端实战——实现购物车功能
qmqm33的博客
10-01 1万+
天猫实战——实现购物车功能 学习了一段时间前端，掌握了一些基本技能，只有进行实践操作，才能将自己学到的充分掌握。首页等一系列代码已经开源到github。 地址：https://github.com/qiaoj-ka 以下是对于购物车页面，以及一些交互。 ...
JavaWeb _13 session购物车部分功能讲解
m0_67888923的博客
04-11 260
文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings ...
【JavaWeb _13 session购物车部分功能讲解
weixin_67892741的博客
04-12 129
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、项目分析 二、编写步骤以及代码 总结 一、pandas是什么？ 一、项目分析 1、将购物车保存到数据库（永久的） --优点：只要你登录了，并且选购了，不管你换不换设备，数据仍然在，方便了用户。 --缺点：太占数据库的内存，性能差，效率低 2、将购物车保存到session中(临时的) --优点：性能佳 效率高 --缺点：会话具有时效性，超时数据会消失 ----提示语法： 存到sess.
JavaWEB【session购物车部分功能讲解】
m0_64522859的博客
04-13 1668
如需温习上一节的内容,请点击下方链接进行页面跳转： Javaweb之JSP标准标签&购物车项目布置_云彩123的博客-CSDN博客https://blog.csdn.net/m0_64522859/article/details/124089892 目录 需实现的功能： 1.商品加入购物车 2.购物车商品的删除 （1）点击删除按钮 将当前点击的id传递到do页面 （2）获取session 遍历 利用集合remove进行移除 （3）重新进行保存 3.购...
JSP实现购物商城（包括购物车）
04-18
基于JSP实现的简易购物商城，其中包括如下功能点： 1. 购物车功能 2. 商品的增加，删除 3. 将商城商品添加至购物车等
web前端——购物车模拟
ZPD_zpd的博客
12-16 1364
实现功能： ①模拟从数据库传输来的数据添加到页面， ②全选， ③单个商品删除， ④批量删除， ⑤数量增加删除按钮， ⑥金额随数量变化， ⑦总数量随选中商品变化， ⑧总金额随商品数量变化 ...
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
10-21
主要介绍了JS+HTML5实现的前端购物车功能插件,结合完整实例形式分析了JS结合HTML5的storage特性存储数据实现购物车功能的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
购物车完整功能代码
04-04
本代码实现了一套完整的购物车功能，批量选择、批量删除。真正告别了霸王购物车，提供完整的注释，简单易懂
web商城项目笔记-3.购物车功能
weixin_43611842的博客
01-04 1919
购物车方案: 使用Tomcat内置session机制 会话级别 (关闭浏览器,cookie没有了session也没有了) 购物车模型: 1.购物车实体: cart: 购物项 集合 总金额 cartItem: 购物项:要购买的商品信息和购买数量的总体描述 商品 数量 小计 充血式设计javaBean. 设计购物车javaBean 添加购物项 删除购物车项 清空购...
电商前台项目（五）：完成加入购物车功能和购物车页面
weixin_42044763的博客
01-30 5701
这里要注意，这个项目的接口给的都是params参数，而使用axios发请求，params参数只能拼接在url地址中，而query参数的配置项叫params，很奇怪。3、如果不写返回值，且await后是失败的Promise，那么就会抛出异常，既然抛出异常，那么async函数返回的就是一个失败的Promise。中遍历购物车数据并派发请求，（当然其实在组件中写也一样，就是这样规范点），用try-catch捕获，如果都请求成功，那么就使用。4、如果不写返回值，且await后是成功的Promise，那么就会返回。
购物车功能实现
热门推荐
张润东的博客
08-06 3万+
表有汇PC端购物车功能实现 加入购物车后的结算功能 购物车页面：     购物车页面html代码： [html] view plain copy div class="cart_box">                     h1 class="main_tit">         span>a onclick="
使用springboot+mybatis+jsp+javaWeb实现购物车功能
最新发布
z146315的博客
07-19 566
这个功能是一个蛋糕商城项目（仅用来学习和练习，采用springboot+mybatis+MySQL+Redis+Lombok+jsp）中的一个功能，之前这个购物车功能采用的是使用Hash Map这种形式来模拟购物车功能，并没有在数据库中去实现它，而且这是使用的一个成员变量，没有做事务隔离，bug比较多，在复习mybatis和springboot的相关知识之后，决定重新写一下这个项目。代码写的比较烂，但也是一点一点调试出来的，记录一下。
web前端实用案例-商城网站购物车抛物线效果
weixin_34250434的博客
03-17 280
知识点：静态布局技巧，定位，浮动，背景设置，CSS样式选择器javascript特效，jquery库调用，插件调用，如果使用插件，编程思维与技巧。 html代码： <div class="banner"></div> <!--头部banner制作 end--> <!--商品列表区域 start--> <div ...
JavaWeb - 小米商城：商品添加到购物车
qq_52029763的博客
05-16 2907
JavaWeb - 小米商城：商品添加到购物车 1.功能描述 接上篇 JavaWeb - 仿小米商城（5）：商品详情展示 本篇博客将分析和实现小米商城商品添加到购物车 和展示。如以下H5页面所示： 2.功能分析 2.1 功能逻辑抽象 商品购物车功能在逻辑上并不复杂：在商品界面每当点击商品 <img>标签或商品名称时，都会向后端提 交一个 GET 请求来将本商品数据内容添加到Session。后端在收到请求后查询数据库并以Map形式储存 内容到session。 商品购物车是面向数据库中的 tb_c
简单个人静态HTML网页设计作品 基于HTML+CSS+JavaScript仿小米手机网站 html静态在线购物商城网页制作
weixin_BJ050106的博客
12-05 239
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
尚硅谷佟刚JavaWEB案例：ATGUIGU网上书城功能详解
尚桂谷的JavaWEB案例PPT详细讲解了如何构建一个ATGUIGU网上书城的功能，该案例采用MVC设计模式，涉及到了Java Web开发的关键知识点。以下是主要内容概要： 1. **架构分析**：项目采用了MVC（Model-View-Controller...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值