购物车实现分析及工程搭建、商品详情页面对加入购物车进行改造、添加购物车、展示购物车列表、修改购物车商品数量、删除购物车商品及购物车总结_包含1)添加商品到购物车2)修改购物车3)删除购物车中的商品4)展示购物车中的商-CSDN博客

本文链接：https://blog.csdn.net/athlenaa/article/details/100532755

购物车实现分析及工程搭建

关于购物车模块，京东和淘宝并不一样，京东允许用户在没有登录的情况下就使用购物车，而且加到购物车里面的商品可以一直保存着（其实是放到了Cookie当中，如果清空了Cookie也就清空购物车了）。而淘宝则是必须先登录才能将商品添加到购物车当中，就用户体验来说，京东的购物车模块用户体验更好。

我们看下京东购物车，如下图所示，可以看到域名是cart.jd.com，这与商品详情页面的item.jd.com是不一样的，说明京东的购物车模块是个单独的工程。

我们搭建购物车工程只需要搭建web工程就可以了，不需要服务端，这是因为购物车里面的商品信息，我们可以通过taotao-manager服务来获取。

下面我们便新建taotao-cart-web工程,打包方式是war

下面我们便配置下pom.xml文件，我们可以参考taotao-item-web工程的pom.xml文件，把freemarker和activemq的依赖去掉，因为购物车模块用不到这些。然后将tomcat插件的端口号改为8089

把spring目录下的springmvc-activemq.xml文件删除掉，然后修改springmvc.xml，配置包扫描目录并且在src/main/java目录下新建这个包，dubbo服务名称改为"taotao-cart-web"。引用的item服务不用动，因为我们查询商品刚好就是用的item服务。

下面我们把taotao-item-web工程下面的web.xml复制到taotao-cart-web工程的webapp目录下，只不过需要先建一个名为"WEB-INF"的目录，然后粘贴到WEB-INF目录下，如下图所示，我们将原来所有叫taotao-item-web名字地方都改为taotao-cart-web

这样，我们的taotao-cart-web工程便搭建完了。

商品详情页面对加入购物车进行改造

我们访问淘淘商城首页（前提是启动了所有的服务及工程，虽然有个别工程用不上，不过也没关系），在搜索框中输入要搜索的商品，我以前添加过"金立M2017"这款手机，我就搜索它。

我们再点击这款手机，查看详情

如果我们这时点击上图的"加入购物车"，如下图所示，可以看到地址并不正确，而且请求信息中没有商品数量信息，因此我们需要对原有商品详情页面购物车这一块进行改造。

我们找到taotao-item-web工程下的item.jsp文件，搜索"购物车"

为了在请求url中带上商品数量参数，我们定义一个函数addCart
function addCart(){
//加入购物车前先取商品数量
var num = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲buy-num").val()\dots$ {item.id}.html?num="+num;
}

其中商品数量是通过id选择器来获取的，关于商品数量的代码在下图所示的位置。
写好了addCart函数，我们回到关于购物车代码那块，将原来href里面的内容改为href=“javascript:addCart()”

修改完之后，我们来刷新商品详情页面，然后点击加入购物车，这时我们可以看到跳转后的地址栏中地址是：http://localhost:8089/cart/add/149365509502985.html?num=1，链接地址已经指向我们的购物车工程了，而且带上了商品数量参数，不过此时由于还没有实现购物车，因此页面显示"无法访问此网站"。

我们再到商品详情页面，将商品数量添加到3，然后点击"添加购物车"
这时跳转后地址栏中的地址是http://localhost:8089/cart/add/149365509502985.html?num=3，可以看到只是后面的num的值变成了3，这说明我们改造好了。