购物车案例【简单版】

最新推荐文章于 2023-07-18 19:45:01 发布
最新推荐文章于 2023-07-18 19:45:01 发布
阅读量1k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_3y/article/details/98867098
版权

前言

为了巩固MVC的开发模式，下面就写一个购物车的小案例..

①构建开发环境

导入需要用到的开发包

640?wx_fmt=png

建立程序开发包

640?wx_fmt=png

②设计实体

书籍实体

 
 
购物车与购物项实体
 
 
可能我们会这样设计购物车
 
 
 
 
上面的做法是不合适的，试想一下：如果我要购买两本相同的书，购物车的页面上就出现了两本书，而不是书*2。买三本相同的书就在购物页面上出现三本书，而不是书*3.
 
 
因此，Map集合的值不能是Book对象，那我们怎么才能解决上面所说的问题呢？我们最常用的就是，再写一个实体CartItem（代表购物项）
 
 
  • 好的，我们先来写购物项实体吧，等会再写购物车！
 
 
 
 
  • 购物车实体
 
 
 
 
③数据库
 
 
这里就直接用集合模拟数据库了，简单的domo而已。
 
 
 
 
④开发dao
 
 
dao层应该至少提供获取所有的书籍和根据关键字获取得到书籍
 
 
 
 
⑤开发service
 
 
service层就是对DAO层的一个封装
 
 
 
 
⑥开发web
 
 
列出所有的书
 
 
开发提供JSP页面的Servlet
 
 
 
 
开发显示所有书籍的jsp
 
 
 
 
 
 
购买操作
 
 
作为购物车的案例，怎么能没有购买的操作呢？于是乎就增加购买的操作！
 
 
640?wx_fmt=png
 
 
开发处理购买的Servlet
 
 
 
 
  • 在我们前面开发BusinessService时，是没有buyBook()这个方法的！下面更新了BusinessService的代码：
 
 
 
 
 
 
购物车的页面
 
 
  • 初步把购物项的信息显示出来
 
 
 
 
  • 效果是这样子的：
 
 
640?wx_fmt=gif
 
 
 
 
删除购物车商品
 
 
640?wx_fmt=png
 
 
想要删除购物车中的商品，也很简单，把删除操作挂在超链接上，超链接指向DeleteCartServlet，并将想要删除的书本的id带过去（不将id带过去，服务器哪知道你要删除的是哪个）！
 
 
 
 
开发DeleteCartBook的Servlet
 
 
 
 
  • BusinessService又多了一个功能：
 
 
 
 
效果：
 
 
640?wx_fmt=gif
 
 
多本一起购买
 
 
从上面的gif我们就可以发现，如果我重复买一本书，需要一本一本地点！这样会非常麻烦！
 
 
我们要怎么实现：用户想要买多少本，购物车的数量就修改为多少本呢？
 
 
在购物车上，数量的值改成是输入框
 
 
 
 
效果：640?wx_fmt=gif
 
 
好的，现在我们已经能够把数量随自己想要多少本，就改成是多少了。现在主要的问题就是，怎么在改的同时，数据也及时地更新？
 
 
写javascript代码，让输入框的信息提交给服务器
 
 
我们写javascript的代码，监控着输入框的变动，如果有变动，就响应事件，将变动的数据传递给服务器，更新数据！
 
 
 
 
编写UpdateQuantity的Servlet
 
 
 
 
BusinessService增添了updateQuantity()方法
 
 
 
 
 
 
清空购物车
 
 
清空购物车的做法和上面是类似的！也是首先通过javaScript代码询问用户是否要清空，如果要清空就跳转到相对应的Servlet中把购物车的数据清空了！
 
 
在清空购物车的链接上绑定事件
 
 
 
 
javaScript代码做逻辑判断
 
 
 
 
编写ClearCart代码
 
 
 
 
在BusinessService中添加清空购物车功能
 
 
 
 
 
 
总结
 
 
  1. 购物车的应该是一个以id作为key，以购物项作为value的一个Map集合。这样设计的话，我们在显示商品的时候，就不会重复显示同一种类型的商品了。
  2. 购物项代表着该商品，并且应该给予购物项 数量和价钱的属性。购物项的价钱应该是数量*单价
  3. 购物车应该提供把商品添加到购物车的功能。当然啦，购物项代表着商品，所以首先要判断该购物车是否有同类的商品，如果有，直接在购物项的数量上+1即可的。如果没有，就设置该购物项的属性，并把购物项添加到购物车中
  4. 购物车的总价就是所有购物项的总价
  5. 无论是增删改查购物车的数据，其实就是操作这个集合
 
 
 
 
 
  
如果文章有错的地方欢迎指正，大家互相交流。习惯在微信看技术文章的同学，可以关注微信公众号:Java3y
 
 
 
 

 


                

        

        

    




    

      

        

            

              
                
                  Java3y
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jQuery 属性操作——案例：购物车案例模块

				
			

			

				

					qq_39368007的博客
				

				

					11-29
					
					1388
					
				

			

		

		

			
				
案例：购物车案例模块-全选




































			
		

	



                

              
                



	

		

			

				
					
购物车案例分析（初学三层架构）

				
			

			

				

					梦亦无痕
				

				

					07-31
					
					3736
					
				

			

		

		

			
				
备注：具体实现的流程步骤！构建JavaBean：对基本的数据进行封装！Book（书），Cart（购物车），CartItem（购物项（购物车里面的内容））等！起初只是定义用的到的数据，没有用到或者暂时没有想到的就先不定义。用到再定义！构建数据库：BooDb，利用Map创建数据库（备注：有查询需求的时候选择Map），并且添加数据！向外提供获取方法和查找的方法！备注：向外提供方法是因为没有用到JDBC，

			
		

	



                


  
              

                


	

		

			

				
					
购物车小案例【简单版】

				
			

			

				

					3y
				

				

					02-22
					
					1192
					
				

			

		

		

			
				

前言


  为了巩固MVC的开发模式，下面就写一个购物车的小案例.




①构建开发环境



导入需要用到的开发包





建立程序开发包




②设计实体



书籍实体




    public class Book {

        private String id;
        private String name;
        private String...

			
		

	





	

		

			

				
					
购物车列表案例

				
			

			

				

					JamesLi_CS的博客
				

				

					11-14
					
					819
					
				

			

		

		

			
				
1.项目介绍: 把物品添加到 购物车中进行添加 删除  清空 关闭浏览器可把购物车中的数据存到Cookiez中下次登录是还可以查看购物车中的数据 另外显示上平时 可以进行分页.

			
		

	



		

			
		



	

		

			

				
					
购物车案例分析

				
			

			

				

					11-14
				

			

		

		

			
				
使用图解的方法简单明了的方式说明购物车的设计

			
		

	





	

		

			

				
					
Android实现一个简易版本的购物车小案例

				
			

			

				

					10-21
				

			

		

		

			
				
Android实现一个简易版本的购物车小案例。 （1）主要功能 1、用户注册、用户登录。 2、商品、购物车列表 （2）android 1、ViewPager2 + Fragment实现页面的切换。 2、SQLite数据库、基础组件的使用。 3、shape和...

			
		

	





	

		

			

				
					
vue实现购物车小案例

				
			

			

				

					12-13
				

			

		

		

			
				
Vue.js 是一个流行的轻量级前端框架，用于构建用户界面。...总的来说，这个购物车案例展示了 Vue.js 如何结合 HTML、CSS 和 JavaScript 来构建一个简单的交互式应用，通过数据驱动视图，简化了前端开发过程。

			
		

	





	

		

			

				
					
购物车案例【简单版】.rar

				
			

			

				

					07-05
				

			

		

		

			
				
这个"购物车案例【简单版】.rar"文件包含了一个使用JSP、Servlet、Tomcat服务器和数据库技术实现的简单购物车系统。下面将详细讲解这个系统的核心知识点。  1. **JSP (JavaServer Pages)**：JSP是一种动态网页技术，...

			
		

	





	

		

			

				
					
vue实现购物车案例

				
			

			

				

					10-15
				

			

		

		

			
				
在本教程中，我们将探讨如何使用Vue.js框架来实现一个购物车案例。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的方式来构建用户界面，使得代码更易于理解和维护。  首先，我们看到HTML结构中引入了...

			
		

	





	

		

			

				
					
JavaScript案例-js购物车

				
			

			

				

					02-16
				

			

		

		

			
				
一个简单的购物车应该具备以下几点：  1. **添加商品**：用户可以通过点击商品页面上的“添加到购物车”按钮将商品添加到购物车。这通常涉及到发送一个AJAX请求到服务器，将商品ID和数量等信息传递过去。  2. **显示...

			
		

	





	

		

			

				
					
购物车订单处理实例  [精]

				
			

			

				

					06-16
				

			

		

		

			
				
这个是针对于，购物网客户购买商品后，传给管理员后台的商品订单的数据处理过程,实例共大家参考,谢谢

			
		

	





	

		

			

				
					
Vue第三篇：最简单的vue购物车示例

				
			

			

				

					benben044的专栏
				

				

					07-18
					
					1965
					
				

			

		

		

			
				
vue创建购物车最基本的示例

			
		

	





	

		

			

				
					
购物车简单案例

				
			

			

				

					涂文远的博客
				

				

					12-19
					
					392
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
Vue——简易购物车案例分析

				
			

			

				

					Bonsoir777的博客
				

				

					10-15
					
					1040
					
				

			

		

		

			
				
本文主要介绍如何利用vue2实现简易购物车的具体功能

			
		

	





	

		

			

				
					
面向对象案例购物车模块模拟

				
			

			

				

					peihj的博客
				

				

					01-12
					
					692
					
				

			

		

		

			
				
面向对象编程之购物车系统模拟，本文主要对购物车的加购，查询，更改，支付功能做了简单的撰写并附上了对应的代码极其演示给读者在java的学习提供帮助。

			
		

	





	

		

			

				
					
jQuery 内容文本值|| 案例：购物车案例模块-增减商品数量 || 案例：购物车案例模块-修改商品小计

				
			

			

				

					qq_39368007的博客
				

				

					11-29
					
					413
					
				

			

		

		

			
				
jQuery 内容文本值






<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


			
		

	





	

		

			

				
					
购物车案例

				
			

			

				

					qq_53479185的博客
				

				

					10-20
					
					410
					
				

			

		

		

			
				
JavaWeb实现一个简单的购物系统
1、 首先创建一个图书的实体类
这里使用的是lombok，就不需要这么麻烦的生成get，set，以及构造方法了。
当然你也可以像以前一样生成这些方法，这个无所谓。
Book.java
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Book {
    private Integer id;//书的id
    private String name;//书的名字
}

2，创建一个数据库模拟类
因为这

			
		

	





	

		

			

				
					
jquery实现购物车案例模块全选

				
			

			

				

					weixin_45147894的博客
				

				

					10-22
					
					2639
					
				

			

		

		

			
				
文章目录

一、jQuery属性操作:
	
	1. 元素固有属性prop():
		2. 元素自定义属性 attr()
		3. 数据缓存 data():
		4. 演示代码:
	
	二、jQuery 文本属性值:
	
	1. jQuery内容文本值
		
		1.1 语法:
			1.2 演示代码:
		
	
	三、jQuery元素操作:
	
	1. 遍历元素
		2. 语法:
		
		2.1 语法1:
			2.2 语法2:
			2.3 演示代码:
		
		2. 创建、添加、删除:
		
		2.

			
		

	





	

		

			

				
					
Vue + jQuery学习案例【购物车订单管理】

				
			

			

				

					迟到滴滴
				

				

					12-29
					
					555
					
				

			

		

		

			
				
目录一、题目要求二、效果演示三、完整代码1、shopping-cart.html2、shopping-cart.css四、问题总结1、取消table第一行的外边框不生效2、总价格的小数点超过2位也会展示3、H5的table没有cellspacing属性4、实现div的显示与隐藏效果5、日期、价格、数量的格式校验6、如何处理每一个订单信息7、如何传递指定的一条记录进行删除操作
一、题目要求

题目要求:
1.作出如图的展示效果
2.点击购买加号则数量增加,总价格随之更变
3.如果书本数量为1则不能减少
4.点

			
		

	





	

		

			

				
					
vue简单实习购物车案例

					
最新发布

				
			

			

				

					08-19
				

			

		

		

			
				
当然可以！下面是一个简单的 Vue.js 实现的购物车案例：

```html
<!DOCTYPE html>
<html>
<head>
  <title>Vue Shopping Cart</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cartItems">
        {{ item.name }} - ${{ item.price }}
        <button @click="removeItem(item)">删除</button>
      </li>
    </ul>
    <h3>总计: ${{ total }}</h3>
    <input type="text" v-model="newItem.name" placeholder="商品名称">
    <input type="number" v-model="newItem.price" placeholder="商品价格">
    <button @click="addItem">添加到购物车</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        cartItems: [
          { name: '商品1', price: 10 },
          { name: '商品2', price: 20 }
        ],
        newItem: {
          name: '',
          price: 0
        }
      },
      methods: {
        addItem: function() {
          this.cartItems.push({
            name: this.newItem.name,
            price: this.newItem.price
          });
          this.newItem.name = '';
          this.newItem.price = 0;
        },
        removeItem: function(item) {
          var index = this.cartItems.indexOf(item);
          this.cartItems.splice(index, 1);
        }
      },
      computed: {
        total: function() {
          var sum = 0;
          for (var i = 0; i < this.cartItems.length; i++) {
            sum += this.cartItems[i].price;
          }
          return sum;
        }
      }
    });
  </script>
</body>
</html>
```

这是一个简单的购物车案例，使用了 Vue.js 实现。用户可以通过输入商品名称和价格，然后点击"添加到购物车"按钮，将商品添加到购物车中。购物车中的商品可以显示出来，并且可以通过点击"删除"按钮来移除商品。页面上还会显示购物车中商品的总价。

注意：这只是一个简单的示例，实际项目中可能需要更多的功能和逻辑处理。希望对你有帮助！如果有任何疑问，请随时提问。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值