购物车案例【简单版】

柔情只为你懂 2021-09-30 17:54 419阅读 0赞

# 前言 #

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

# ①构建开发环境 #

## 导入需要用到的开发包 ##

![640?wx\_fmt=png][640_wx_fmt_png]

## 建立程序开发包 ##

![640?wx\_fmt=png][640_wx_fmt_png 1]

--------------------

# ②设计实体 #

## 书籍实体 ##

## 购物车与购物项实体 ##

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

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

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

*  好的，**我们先来写购物项实体吧，等会再写购物车！**

*  **购物车实体**

# ③数据库 #

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

# ④开发dao #

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

# ⑤开发service #

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

# ⑥开发web #

## 列出所有的书 ##

### 开发提供JSP页面的Servlet ###

### 开发显示所有书籍的jsp ###

--------------------

## 购买操作 ##

作为购物车的案例，怎么能没有购买的操作呢？**于是乎就增加购买的操作**！

![640?wx\_fmt=png][640_wx_fmt_png 2]

### 开发处理购买的Servlet ###

*  **在我们前面开发BusinessService时，是没有buyBook()这个方法的！下面更新了BusinessService的代码**：

--------------------

### 购物车的页面 ###

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

*  效果是这样子的：

![640?wx\_fmt=gif][640_wx_fmt_gif]

--------------------

## 删除购物车商品 ##

![640?wx\_fmt=png][640_wx_fmt_png 3]

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

### 开发DeleteCartBook的Servlet ###

*  **BusinessService又多了一个功能**：

效果：

![640?wx\_fmt=gif][640_wx_fmt_gif 1]

## 多本一起购买 ##

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

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

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

效果：![640?wx\_fmt=gif][640_wx_fmt_gif 2]

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

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

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

### 编写UpdateQuantity的Servlet ###

### BusinessService增添了updateQuantity()方法 ###

--------------------

## 清空购物车 ##

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

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

### javaScript代码做逻辑判断 ###

### 编写ClearCart代码 ###

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

# 总结 #

1.  购物车的应该是一个以id作为key，以购物项作为value的一个Map集合。这样设计的话，我们在显示商品的时候，就不会重复显示同一种类型的商品了。
2.  购物项代表着该商品，并且应该给予购物项 数量和价钱的属性。购物项的价钱应该是数量\*单价
3.  购物车应该提供把商品添加到购物车的功能。当然啦，购物项代表着商品，所以首先要判断该购物车是否有同类的商品，如果有，直接在购物项的数量上+1即可的。如果没有，就设置该购物项的属性，并把购物项添加到购物车中
4.  购物车的总价就是所有购物项的总价
5.  无论是增删改查购物车的数据，其实就是操作这个集合

--------------------

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

[640_wx_fmt_png]: /images/20210827/747f548669ee4cf7aaedfd666eb8b183.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/3081ca8ea38e4293b3fe72067263d985.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/cf877749ef6d42a1b42141ec5558025e.png?wx_fmt=png
[640_wx_fmt_gif]: /images/20210827/4e1beae45173428fb6b70d4df46b0f89.png?wx_fmt=gif
[640_wx_fmt_png 3]: /images/20210827/35bbc5bbdf684954913f33b9657b1ea8.png?wx_fmt=png
[640_wx_fmt_gif 1]: /images/20210827/3ac38baaf8b54506b418c6204089cb11.png?wx_fmt=gif
[640_wx_fmt_gif 2]: /images/20210827/a1478d811ea24c1f94142db253087cbd.png?wx_fmt=gif