实现购物车功能

最新推荐文章于 2023-11-02 00:28:43 发布
最新推荐文章于 2023-11-02 00:28:43 发布
阅读量3.7k 收藏 17
点赞数 4
分类专栏： Web 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/www_chinese_com/article/details/88932710
版权

本篇博客所完成的购物车应用重点主要落在页面之间的转换和数据的传递，对于前端界面设计并不多加分析。属于初学 Web 编程阶段。

该购物车应用主要有四个功能：查看商品列表、查看商品详情、将商品加入购物车、显示购物车信息、将商品从购物车中移除。

 

目录

准备工作

设置映射即每个功能对应方法

查看商品列表

查看商品详情

将商品加入购物车

显示购物车信息

将商品从购物车中移除

准备工作

该购物车应用有两个主要对象，商品 和 购物车，所以需要构建 Product 类来存储商品的信息，构建 ShoppingItem 来存储购物车列表信息。

Product 类中包含商品的基本信息（如下），还有各个属性的 set 和 get 方法。

        private int id;//商品编号
	private String name;//商品名称
	private String description;//商品描述
	private float price;//商品价格

ShoppingItem 类存储购物车信息，所以该类中包含相应商品及其购买数量，同样不要忘记属性的 set 和 get 方法。

	private Product product;//商品信息
	private int quantity;//商品数量

在我们功能的实现中，会将 Product 和 ShoppingItem 都存储到 List 中（List<Product> products 和 List<ShoppingItem> cart），但是不同的的是，商品的信息是固定的，所以我们可以将存储商品的信息的 List 放在Servlet 中，然而，客户的购物车信息会在客户的活动中发生变化，因此每个客户需要有一个单独的对象将其的购物车信息进行存储，我们可以通过会话机制 HttpSession 实现。

当用户登陆购物网站时，Web 服务器会为客户创建一个 HttpSession 对象，实现购物车的 Servlet 使用该会话对象存储用户的购物车对象 cart ，购物车中存储着用户购买的商品列表，当客户向购物车中添加或删除商品时， Servlet 就更新该列表，当客户结账时， Servlet 就会从会话中检索购物车对象，从购物车中检索商品列表并计算总价格。一旦客户结算完成，容器就会关闭会话。如果客户再发送另一个请求，就会创建一个新的会话。

在我们的功能实现之前，我们还要初始化我们的商品列表 products 。创建一个 ShoppingCartServlet 类，我们的所有功能都会在这里实现，在 ShoppingCartServlet 的 init() 方法中初始化列表。

 
      private List<Product> products = new ArrayList<Product>();  // products 存放所有商品的List对象
      public void init() throws ServletException {
		products.add(new Product(1, "单反相机", "尼康性价比最高的单反相机", 4159.95F));
		products.add(new Product(2, "华为手机", "华为手机的最新手机P30", 3998.95F));
		products.add(new Product(3, "笔记本电脑", "Mac新一代产品", 15000.51F));
		products.add(new Product(4, "平板电脑", "苹果公司新产品", 12000F));
	}

设置映射即每个功能对应方法

ShoppingCartServlet 类时一个控制类，处理各种信息。我们刚刚已经在 init() 方法中初始化了商品列表，现在要在 web.xml 中设置映射和每个功能对应的方法了。

在 web.xml 中设置 ShoppingCartServlet 类 的映射

  <servlet-mapping>
    <servlet-name>ShoppingCartServlet</servlet-name>
    <url-pattern>/ShoppingCartServlet</url-pattern>       
    <url-pattern>/products</url-pattern>                 显示商品列表
    <url-pattern>/viewProductDetails</url-pattern>       显示商品详细内容
    <url-pattern>/viewCart</url-pattern>                 查看购物车
    <url-pattern>/deleteItem</url-pattern>               从购物车中移除商品
    <url-pattern>/addToCart</url-pattern>                向购物车中加入商品
  </servlet-mapping>

在 doGet() 方法中设置每个功能对应的方法，因为当我们按下 enter 键进行界面跳转的时候就会触发 doGet() 方法，在这个方法中就进行判断显然合情合理。

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
	String uri = request.getRequestURI();// 得到当前界面的URI
	if (uri.endsWith("/products"))
		showProductList(response);
	else if (uri.endsWith("/viewProductDetails"))
		showProductDetails(request, response);
	else if (uri.endsWith("/viewCart"))
		showCart(request, response);
	else if (uri.endsWith("/deleteItem"))
		deleteItem(request, response);
	else
		showProductList(response);// 发送请求，调用get方法后首先显示商品列表信息
}

由于在这里触及了几个知识点，不禁想提出来，给大家思考回顾。

1. request 和 response 的区别。

2. URI 的结构、发展，以及URI 和 URL 、URN 的联系。(一篇比较详细的博客： URI 详解 )

查看商品列表

查看商品列表会看见以下页面（括号中的时商品价格）

 

主要步骤：

1. 设置response 中的内容类型和所使用的字符集，得到 PrintWriter 对象。

2. 遍历商品列表并将信息显示出来，其中 ”详细信息“ 采用超文本链接，并将商品的 id 号传过去。（注意，id=product.getId() 中，等号和product.getId() 之间不可以出现空格，否则读取 id 号时会出错  ，即 NumberFormatException 错误）

// 超链接到商品详情目录
out.println("(<a href = 'viewProductDetails?id=" + product.getId()+ "'>详细信息</a>)");

在显示 商品详细信息的方法中可以用以下语句得到传过去的 id 号

productId = Integer.parseInt(request.getParameter("id"));

3. 设置 查看购物车 链接。

out.println("<a href = 'viewCart'>查看购物车</a>");//查看购物车链接

具体代码如下：

	private void showProductList(HttpServletResponse response)throws IOException {
		response.setContentType("text/html;charset = UTF-8");//设置数据的内容类型和使用的字符集
		PrintWriter out = response.getWriter();
		out.println("<html><head><title>商品列表</title></head>");
		out.println("<body><p>商品列表</p>");
		out.println("<ul>");
		for (Product product : products) {
			// 显示商品名称和价格
			out.println("<li>" + product.getName() + "(" + product.getPrice()+ ")");
			// 超链接到商品详情目录
			out.println("(<a href = 'viewProductDetails?id=" + product.getId()+ "'>详细信息</a>)");
		}
		out.println("</ul>");
		out.println("<a href = 'viewCart'>查看购物车</a>");//查看购物车链接
		out.println("</body></html>");
	}

查看商品详情

查看商品详情的页面如下：

其中，让我们看看这个页面的URI 

其中我们在查看商品列表的方法中设置了”详细信息“ 链接的URI，即查看商品详情的URI 的 path 最后为 viewProductDetails ，并且把商品的 id 一并传了过来，由于我们按的是 ”单反相机“ ，所以显示的 id 号为 1。

主要步骤：

1.  得到传过来的 id 号。

	int productId = 0; // 商品的Id号，用来检索商品
	//得到传过来的 id 号
	try {
		productId = Integer.parseInt(request.getParameter("id"));
	} catch (NumberFormatException e) {
		e.printStackTrace();
	}

2. 根据 id 号检索 products 列表得到相应的商品。

	private Product getProduct(int id) {
		for (Product product : products) {
			if (product.getId() == id)
				return product;
		}
		return null;
	}

3. 显示商品的信息

4. 设置购买按钮

out.println("<td><input name = 'quantity'/></td>");  //输入商品数量
out.println("<td><input type = 'submit' value = '购买'/></td></tr>");

5. 设置商品列表链接

out.println("<tr><td colspan = '2'>"+ "<a href = 'products'>商品列表</a></td></tr>");

详细代码如下：

	private void showProductDetails(HttpServletRequest request,HttpServletResponse response) throws IOException {

		response.setContentType("text/html;charset = UTF-8");
		PrintWriter out = response.getWriter();
		int productId = 0; // 商品的Id号，用来检索商品
		//得到传过来的 id 号
		try {
			productId = Integer.parseInt(request.getParameter("id"));
		} catch (NumberFormatException e) {
			e.printStackTrace();
		}
		// 根据商品id返回商品对象
		Product product = getProduct(productId);

		if (product != null) {

			out.println("<html><head><title>商品详细信息</title></head>");
			out.println("<body><p>商品详细信息</p>");
			out.println("<form method = 'post' action = 'addToCart'>");
			// 这里使用隐藏表单域存储商品号信息
			out.println("<input type = 'hidden' name = 'id' value = '"
					+ productId + "'/>");
			out.println("<table>");
			out.println("<tr><td>商品名:</td><td>" + product.getName()
					+ "</td></tr>");
			out.println("<tr><td>说明:</td><td>" + product.getDescription()
					+ "</td></tr>");
			out.println("<tr><td>价格:</td><td>" + product.getPrice()
					+ "</td></tr>");
			out.println("<tr><tr>");
			out.println("<td><input name = 'quantity'/></td>");  //输入商品数量
			out.println("<td><input type = 'submit' value = '购买'/></td></tr>");
			out.println("<tr><td colspan = '2'>"+ "<a href = 'products'>商品列表</a></td></tr>");
			out.println("</table>");
			out.println("</form></body>");
		} else {
			out.println("No product found");
		}
	}

将商品加入购物车

当我们在商品的详细信息页面中输入商品数量并点击购买按钮时，我们会触发该 Servlet 的 doPost() 方法，因此，我们可以在doPost()方法中将商品加入购物车。

具体步骤如下：

1. 得到要加入购物车的商品的 id 和 数量

	int productId = 0;
	int quantity = 0;
	// 得到要加入购物车中的商品ID和数量
	try {
		productId = Integer.parseInt(request.getParameter("id"));
		quantity = Integer.parseInt(request.getParameter("quantity"));
	} catch (NumberFormatException e) {
		e.printStackTrace();
	}

2. 得到 id 对应的商品

Product product = getProduct(productId);

3. 得到会话对象，并在会话对象中查找购物车对象 cart 

// 在会话对象中查找购物车对象
HttpSession session = request.getSession();
List<ShoppingItem> cart = (ArrayList<ShoppingItem>) session.getAttribute("cart");

4. 检查该 cart 对象是否为 null ，若为null 则创建一个 cart 列表对象（ArrayList<ShoppingItem>）

if (cart == null) {
	// 若购物车为空，则创建购物车并将其加入到session中
	cart = new ArrayList<ShoppingItem>();
	session.setAttribute("cart", cart);
}

   若不为 null ，则检查购物车之前是否添加过同一种商品， 若有，将item中的quantity更新，并移除上一条信息

else {
	for (int i = 0; i < cart.size(); i++) {
		ShoppingItem subItem = cart.get(i);  //得到购物车列表消息
		int subProductId = subItem.getProduct().getId();  
		if(subProductId == productId){  //若购物车中以加入过该商品
			quantity += subItem.getQuantity();  //更新商品数量
			cart.remove(subItem);//移除上一条信息
			break;
		}		
	}
}

5.  建立购物车条目，并将其加入到 cart 对象中

ShoppingItem item = new ShoppingItem(product, quantity);
cart.add(item);

同样，这里也有很有意思的问题，在这里我们使用了 HttpSession ，虽然没有使用 Cookie ，但是，我认为大家可以同样思考清楚

HttpSession 和 Cookie 的具体功能分别是什么，有什么不同，两者有哪些优缺点。

6. 最后可以考虑跳回商品列表页面

具体代码如下：

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		int productId = 0;
		int quantity = 0;
		// 得到要加入购物车中的商品ID和数量
		try {
			productId = Integer.parseInt(request.getParameter("id"));
			quantity = Integer.parseInt(request.getParameter("quantity"));
		} catch (NumberFormatException e) {
			e.printStackTrace();
		}
		// 得到该ID对应的商品
		Product product = getProduct(productId);
		if (product != null && quantity >= 0) {
			// 在会话对象中查找购物车对象
			HttpSession session = request.getSession();
			List<ShoppingItem> cart = (ArrayList<ShoppingItem>) session.getAttribute("cart");

			if (cart == null) {
				// 若购物车为空，则创建购物车并将其加入到session中
				cart = new ArrayList<ShoppingItem>();
				session.setAttribute("cart", cart);
			} else {
				// 不为空时，检查购物车之前是否添加过同一种商品
				// 若有，将item中的quantity更新，并移除上一条信息，退出循环
				// 若无，则直接加入
				for (int i = 0; i < cart.size(); i++) {
					ShoppingItem subItem = cart.get(i);  //得到购物车列表消息
					int subProductId = subItem.getProduct().getId();
					if(subProductId == productId){  //若购物车中以加入过该商品
						quantity += subItem.getQuantity();  //更新商品数量
						cart.remove(subItem);//移除上一条信息
						break;
					}
						
				}
			}
			// 建立购物车条目，并将其加入到 cart 对象中
			ShoppingItem item = new ShoppingItem(product, quantity);
			cart.add(item);
		}
		// 添加成功后返回商品列表
		showProductList(response);
	}

显示购物车信息

查看购物车页面内容如下：

具体步骤如下：

1. 得到 httpSession 对象和 cart 购物车对象

2. 设置商品列表链接

out.println("<body><a href = 'products'>商品列表</a>");

3. 设置第一行信息并设置列宽

out.println("<table>");
out.println("<tr><td style='width:50px'>数量</td>");
out.println("<td style='width:80px'>商品</td>");
out.println("<td style='width:80px'>价格</td>");
out.println("<td style='width:80px'>小计</td>");
out.println("<td style='width:80px'>是否删除</td></tr>");

4. 从购物车对象中得到商品信息并打印出来，还要计算其总价格 ( total )和 小计

    在设置删除链接时记的把要删除商品的 id 号传过去

out.println("<td><a href = 'deleteItem?id="+ product.getId() + "'>删除</a></td>");

具体代码如下：

	private void showCart(HttpServletRequest request,HttpServletResponse response) throws IOException {

		response.setContentType("text/html;charset = UTF-8");
		PrintWriter out = response.getWriter();
		HttpSession session = request.getSession();	// 得到会话对象
		List<ShoppingItem> cart = (ArrayList<ShoppingItem>) session.getAttribute("cart");//得到 cart
		//第一行的信息
		out.println("<html?<head><title>购物车</title></head>");
		out.println("<body><a href = 'products'>商品列表</a>");
		out.println("<table>");
		out.println("<tr><td style='width:50px'>数量</td>");
		out.println("<td style='width:80px'>商品</td>");
		out.println("<td style='width:80px'>价格</td>");
		out.println("<td style='width:80px'>小计</td>");
		out.println("<td style='width:80px'>是否删除</td></tr>");
		// 从购物车对象中得到商品信息并打印出来
		if (cart != null) {
			double total = 0.0;
			for (int i = 0; i < cart.size(); i++) {
				ShoppingItem item = cart.get(i);
				Product product = item.getProduct();
				int quantity = item.getQuantity();
				if (quantity != 0) {
					out.println("<tr><td>" + quantity + "</td>");
					out.println("<td>" + product.getName() + "</td>");
					out.println("<td>" + product.getPrice() + "</td>");
					double subtotal = product.getPrice() * quantity;// 得到该商品的价格小计
					out.println("<td>" + subtotal + "</td>");
					out.println("<td><a href = 'deleteItem?id="+ product.getId() + "'>删除</a></td>");
					out.println("</tr>");
					total += subtotal;
				}
			}

			out.println("<tr><td colspan='4' style='text-align:right'>总计:"+ total + "</td></tr>");
			out.println("</table>");
		}
		out.println("</table></body></html>");
	}

将商品从购物车中移除

这个功能的实现较为简单

1. 得到 会话对象，再得到 cart 购物车列表对象

2. 得到传过来的商品 id 

3. 遍历购物车中的商品，找到与删除商品id号相同的购物车商品信息，并将之移除出购物车

具体代码如下：

	private void deleteItem(HttpServletRequest request,HttpServletResponse response) throws IOException {
		// 得到会话对象
		HttpSession session = request.getSession();
		// 得到购物车对象
		List<ShoppingItem> cart = (ArrayList<ShoppingItem>)session.getAttribute("cart");
		// 得到删除商品的id号
		int productId = Integer.parseInt(request.getParameter("id"));
		// 遍历购物车中的商品，找到与删除商品id号相同的购物车商品信息，并将之移除出购物车
		for (int i = 0; i < cart.size(); i++) {
			ShoppingItem item = cart.get(i);
			Product product = item.getProduct();
			int subProductId = product.getId();
			if (subProductId == productId) {
				cart.remove(item);
				break;
			}
		}
		showCart(request, response);
	}
  • 到这里，这个购物车应用的基本功能就实现了，当然，这个应用还非常的粗糙，但是千里之行始于足下，一步步学习终会越来越好。如果各位发现什么问题或者有什么可以一起交流欢迎留言。
葡萄籽PP
关注
专栏目录
简易的购物车功能实现 --- 19/03/20
HimeYui的博客
03-20 547
本次使用的JS包为JQuery2.0版本 简单的实现界面： 以下为实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ ...
js实现购物车功能
06-14
原生js实现简单购物车功能，方便简单，可直接使用到web
购物车功能实现
最新发布
Emporor的博客
11-02 2710
当用户点击“添加到购物车”按钮时，我们需要将该商品添加到购物车的数据结构中。例如，如果用户已经将一个商品添加到购物车中，我们只需要增加商品的数量；它允许用户浏览商品，选择他们想要购买的商品，并将它们添加到购物车中，然后在准备结账时一次性支付。为了方便用户查看他们的购物车中总共有多少商品，我们需要实现一个函数来计算购物车的总价。当用户点击“从购物车中移除”按钮时，我们需要从购物车的数据结构中删除相应的商品。当用户更改购物车中商品的数量时，我们需要更新购物车数据结构中的相应部分。
js代码 实现购物车功能
weixin_44388672的博客
04-11 6957
@购物车
简易购物车实现
热门推荐
dream_s_a的博客
04-12 1万+
将购物车实现分成三部分分别实现： 第一部分：简单购物车功能实现； 第二部分：将商品序号改为勾选框； 第三部分：添加商店对商品进行分类。
layui使用数据表格实现购物车功能
10-16
总结起来，layui使用数据表格实现购物车功能的关键在于利用layui.js的事件监听和数据操作API。开发者需要理解表格的事件模型，如`on('click')`、`on('edit')`等，以及如何通过表格的API如`layui.table.data()`获取和...
Vuejs实现购物车功能
10-19
### Vue.js实现购物车功能知识点总结 Vue.js是一种构建用户界面的渐进式框架，专注于视图层。它易于上手，并且提供了丰富的功能以满足更复杂的应用场景。购物车功能是电商网站中必不可少的一部分，实现购物车功能...
vuex实现购物车功能
10-15
在介绍如何使用Vuex实现购物车功能的过程中，首先需要掌握几个关键的技术要点。Vuex是一个专门为Vue.js应用程序开发的集中式状态管理库，它可以让我们在多个组件之间共享状态。在购物车这种具有全局状态变化的场景中...
Cookie的使用及保存中文并用Cookie实现购物车功能
01-08
设置Cookie 代码如下: //设置cookie Cookie cookie = new Cookie(“TOM”,”111″); //设置有效期，默认秒为单位 cookie. setMaxAge(7*24*60*60); //添加cookie到客户端 response.addCookie(cookie);...
html实现仿淘宝购物车功能
04-16
实现了淘宝的购物车功能，可添加购物车，删除商品，等等功能，界面美观
购物车系统
07-20
购物车系统，功能发布前已经经过测试。欢迎大家下载使用，
Javascript实现购物车功能的详细代码
12-09
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。 现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采用三层架构方式对购物车进行设计，对javascript的综合应用较强，对javascript初学者进阶有一定的益处。 请看主页效果图： 现在读者已
带你快速实现购物车功能
qq_40665861的博客
04-06 2760
一、熟悉购物车 所谓熟悉购物车，是指对购物车的所有商品的操作熟知。如：商品的单选、全选、数量的增加、规格的变化、商品的管理、收藏商品、删除失效商品等相关的逻辑操作。对全部的流程做到心中有数，实现的时候才会轻而易举。 UI图 二、具体购物车功能 在本次代码中实现的功能包括商品的单选、全选、根据商品的类型判断不同类型的商品不能同时选中、不同的店铺也不可同时选中。同时也包括也数量、规格的变化，还...
实现购物车功能php,php 购物车功能实现代码(入门例子)
weixin_29498577的博客
04-05 1046
1、文件 car.php 显示所有商品分类复制代码 代码示例://商品分类页session_start();//开启session环境//判断该用户是否点击过“放入购物车”按钮if(isset($_POST['cart'])){//循环方式赋值foreach($_POST['cart'] as $value){//购物车里如果有该商品//条件：//点击过“放入购物车”---存在数组$_SESSIO...
案例补充、购物车基本功能的实现
飞翔的企鹅的博客
06-18 629
商品的基本属性：价格、名称、购物车编号、购买数量 二、定义购物车对象 由于购物车中存放的是商品类，并且不清楚购物车中到底有多少商品，因此我们需要创建一个商品类的数组来存放商品对象，将商品对象进行封装然后存储在购物车数组(商品类数组)中。当前知识有限，只能定义一个数组存储并且规定商品数不超过100。 三、搭建用户架构，询问用户操作 因为用户可能进行的不止一种操作，所以系统需要不断询问用户的操作，所以需要将操作放在死循环中进行。按照用户输入的指令进行相应操作。 依次询问用户要添加商品的属性信
前端——使用JQuery 实现点击加入购物车（一）
tingyu_的博客
07-13 7179
在本篇文章中，主要实现的功能的是：点击 加入购物车 实现效果：点击屏幕上的加入购物车按钮，右侧购物车上面的数字增加1 首先，先上图： 一、上图中左侧数据来源： 这个HTML页面中的数据是写在JSON文件中的，，然后使用JQuery的ajax异步加载，将JSON数据解析出来。 JSON文件中的数据如下： 【注】上面这些数据是单独写在JSON文件里面的，（不要直接将全部数据复制到页面上哦） 二、...
自定义购物车控件，使用起来就是这么丝滑
ItStepMore的博客
04-19 1397
本购物车自定义控件包括了购物车的抛物线动画效果，根据需求可设置是否需要。本控件自定义view，详细实现，代码注释较详细，请参考注释。 首先过下效果图 按照自定义控件三部曲，首先创建attr属性文件，定义相关属性。 res/values/attrs.xml
java实现简单购物车，主要用到了集合知识，实现了增删改查
churuisui0202的博客
11-30 2113
源代码如下： 商品类： package org.jsoft.shoppingcar; public class Goods { private String name; private double price; private int num; priv...
使用Cookie实现购物车功能
"本文主要介绍了如何使用Cookie技术来实现一个购物车功能，包括...使用Cookie实现购物车功能是一个基础的Web开发技术实践，它体现了HTTP协议无状态特性的应对策略，并展示了如何在客户端存储和管理用户状态的一种方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值