电子商城项目(七)商品详情页面和购物车模块

项目已上传GitHub,请点击这里访问下载

当看到自己喜欢的商品后,需要进一步的了解商品信息。点击商品后,就会跳到商品详情页面。在商品详情页面,当选中自己的商品后,输入数量就可以加入购物车。在购物车中就会显示出即将要买的商品信息,以及价格等信息。

一、商品详情页面

1. 前端代码的写法

在这里插入图片描述
当我们点击商品的图片或者商品的name时,就会去项服务器发送一个请求,这个请求的功能时根据当前商品的pid来获取这个商品的所有信息。

2.Servlet的代码

在这里插入图片描述servlet通过调用Service层,返回商品的所有信息,然后将商品信息存放在request中,转发到商品信息页面。这里就不写dao层的代码,比较简单,前面也写过,就是对数据库的查询操作。

3. 商品详情页面

现在商品详情页面已经有了商品的所有信息(servlet中将商品信息存储到request)。需要将商品信息展示出来。红色细线画出来的就是我们展示的地方。蓝色和红的的粗线涉及到下一个功能的操作。

在这里插入图片描述

4.效果图

在这里插入图片描述

二、购物车模块

1.前端代码的编写

其实就是上一张代码图中红色粗线和蓝色线圈出来的地方。蓝色线将商品的pid添加到form中,上面的那行代码是将商品的数量添加到form中。这里没有submit的功能。可以用js代码完成submit的功能。红色粗线那端代码的意思是,点这个按钮不触发超链接。
通过js完成表单的提交。
在这里插入图片描述

2.Servlet代码

为了对数据的操作方便,在这里定义一个JavaBean,专门用来存取商品的信息以及商品的数量和该类商品的总价。

在这里插入图片描述

这是购物项,现在还需要一个可以放购物项的容器,因为,我们希望在购物车看到我们要买的所有物品。因此定义了一个Cart类。当然这里也可以将map换成list,但没有map操作起来简单。

在这里插入图片描述

接下来就是Servlet中的代码
当有请求过来时,先判断session中是否存在Cart,如果有的话,就将我们点击的商品直接添加到session中,如果没有就获取session,然后再将我们的东西存入session中。仔细理解一下这块的逻辑。
后面还有删除购物项、清空购物车功能,直接调取了Cart类中的方法。

在这里插入图片描述
这里存在一个问题,仔细思考,答案在尾部

3. 购物车界面

已经将Cart存入到Session中,需要将Cart中的内容展示出来。

在这里插入图片描述

4.效果图

在这里插入图片描述

当关闭浏览器器后,session的Cart就不存在,当用户下次登录的时候,就没有办法看到自己的购物车里的商品了。

猜你喜欢

转载自blog.csdn.net/Time__Lc/article/details/88525357