淘淘商城系列——展示购物车商品列表

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yerenyuan_pku/article/details/73349779

通过上文的学习,想必大家都已经实现了添加购物车的功能,本文我们将一起实现展示购物车商品列表的功能。
我们访问淘淘商城首页(前提是启动了所有的服务及工程,虽然有个别工程用不上,不过也没关系),点击“去购物车结算”。
这里写图片描述
理应跳转到购物车商品列表页面,展示昨天我们添加的商品,但是可以看到会报404的错误,如下图所示,可知我们请求的地址并不正确,因此我们需要对淘淘商城首页中的“去购物车结算”超链接的href属性进行修改。
这里写图片描述
我们来到taotao-portal-web工程下的index.jsp页面,发现根本就搜索不到“去购物车结算”的超链接,那它在哪儿呢?很显然,它就在index.jsp页面包含的header.jsp页面中,如下图所示。
这里写图片描述
我们打开header.jsp页面,搜索”去购物车结算”,便可以搜索到如下图所示内容。
这里写图片描述
找到“去购物车结算”的超链接之后,将其href属性的值修改为http://localhost:8089/cart/cart.html,如下图所示。
这里写图片描述
我们试着再去买一款锤子手机,然后加入购物车,可以看到如下图所示界面。
这里写图片描述
我们点击上图中的”去购物车结算”按钮,可以看到会报404的错误,这是由于我们还没实现购物车列表展示功能,但是我们可以从地址栏中看到请求的url(请求的地址是正确的,可见我们没有必要去修改cartSuccess.jsp页面中“去购物车结算”超链接的href属性的值,如果大家一定要修改,可改为绝对地址,即http://localhost:8089/cart/cart.html),如下图所示。
这里写图片描述
我们首先看一下购物车商品列表的jsp页面,如下图所示,我们需要给这个jsp页面传一个集合”cartList”。
这里写图片描述
有了请求URL和页面需要的数据,我们现在来编写Controller层代码,如下图所示。
这里写图片描述
下面我们重启taotao-cart-web工程,重启成功后,刷新刚才报404错误的那个页面,可以看到如下图所示购物车列表,当前该手机数量是2(因为我一共向购物车添加了2个)
这里写图片描述
现在我们再回到商品详情页面,点那个”+”,让商品数量变成3,然后点击”加入购物车”,这样加上刚才添加的2个,购物车现在一共应该有5个。
这里写图片描述
点击上图的加入购物车会看到下图所示界面。
这里写图片描述
点击上图的”去购物车结算”,可以看到如下图所示界面,可以看到当前商品数量是5,与我们添加的数量刚好一致,说明我们的购物车列表没问题了。
这里写图片描述

没有更多推荐了,返回首页