购物车案例简单版

Posted Java3y

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了购物车案例简单版相关的知识,希望对你有一定的参考价值。

前言

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

①构建开发环境

导入需要用到的开发包

建立程序开发包


②设计实体

书籍实体


 

购物车与购物项实体

可能我们会这样设计购物车


 

上面的做法是不合适的,试想一下:如果我要购买两本相同的书,购物车的页面上就出现了两本书,而不是书*2。买三本相同的书就在购物页面上出现三本书,而不是书*3.

因此,Map集合的值不能是Book对象,那我们怎么才能解决上面所说的问题呢?我们最常用的就是,再写一个实体CartItem(代表购物项)

  • 好的,我们先来写购物项实体吧,等会再写购物车!


 
  • 购物车实体


 

③数据库

这里就直接用集合模拟数据库了,简单的domo而已。


 

④开发dao

dao层应该至少提供获取所有的书籍和根据关键字获取得到书籍


 

⑤开发service

service层就是对DAO层的一个封装


 

⑥开发web

列出所有的书

开发提供JSP页面的Servlet


 

开发显示所有书籍的jsp


 

购买操作

作为购物车的案例,怎么能没有购买的操作呢?于是乎就增加购买的操作

开发处理购买的Servlet


 
  • 在我们前面开发BusinessService时,是没有buyBook()这个方法的!下面更新了BusinessService的代码


 

购物车的页面

  • 初步把购物项的信息显示出来


 
  • 效果是这样子的:


删除购物车商品

想要删除购物车中的商品,也很简单,把删除操作挂在超链接上,超链接指向DeleteCartServlet,并将想要删除的书本的id带过去(不将id带过去,服务器哪知道你要删除的是哪个)


 

开发DeleteCartBook的Servlet


 
  • BusinessService又多了一个功能


 

效果:

多本一起购买

从上面的gif我们就可以发现,如果我重复买一本书,需要一本一本地点!这样会非常麻烦!

我们要怎么实现:用户想要买多少本,购物车的数量就修改为多少本呢

在购物车上,数量的值改成是输入框


 

效果:

好的,现在我们已经能够把数量随自己想要多少本,就改成是多少了。现在主要的问题就是,怎么在改的同时,数据也及时地更新?

javascript代码,让输入框的信息提交给服务器

我们写javascript的代码,监控着输入框的变动,如果有变动,就响应事件,将变动的数据传递给服务器,更新数据!


 

编写UpdateQuantity的Servlet


 

BusinessService增添了updateQuantity()方法


 

清空购物车

清空购物车的做法和上面是类似的!也是首先通过javaScript代码询问用户是否要清空,如果要清空就跳转到相对应的Servlet中把购物车的数据清空了!

在清空购物车的链接上绑定事件


 

javaScript代码做逻辑判断


 

编写ClearCart代码


 

在BusinessService中添加清空购物车功能

总结

  1. 购物车的应该是一个以id作为key,以购物项作为value的一个Map集合。这样设计的话,我们在显示商品的时候,就不会重复显示同一种类型的商品了。

  2. 购物项代表着该商品,并且应该给予购物项 数量和价钱的属性。购物项的价钱应该是数量*单价

  3. 购物车应该提供把商品添加到购物车的功能。当然啦,购物项代表着商品,所以首先要判断该购物车是否有同类的商品,如果有,直接在购物项的数量上+1即可的。如果没有,就设置该购物项的属性,并把购物项添加到购物车中

  4. 购物车的总价就是所有购物项的总价

  5. 无论是增删改查购物车的数据,其实就是操作这个集合


如果文章有错的地方欢迎指正,大家互相交流。习惯在微信看技术文章的同学,可以关注微信公众号:Java3y


以上是关于购物车案例简单版的主要内容,如果未能解决你的问题,请参考以下文章

用户购物(数据库)案例

购物车JavaWeb小项目简单版

angular-入门案例

Android -- 购物车

python购物小票的案例

VUE学习笔记:6.阶段练习之购物车案例讲解