购物车实现分析及工程搭建、商品详情页面对加入购物车进行改造、添加购物车、展示购物车列表、修改购物车商品数量、删除购物车商品及购物车总结

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

关于购物车模块，京东和淘宝并不一样，京东允许用户在没有登录的情况下就使用购物车，而且加到购物车里面的商品可以一直保存着（其实是放到了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()…{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，这说明我们改造好了。

添加购物车

上节课我们一起改造了下商品详情页面关于购物车的部分，这节课我们一起分析下添加购物车功能。

我们以京东为例，比如我们选了一款手机，然后点击"加入购物车"，注意，此时我们并没有登录。

我们会看到如下图所示界面，可以看到，我们并没有直接进入购物车列表，而是到了一个中间页面，只是提醒我们成功加入购物车。如果想进购物车列表的话，就点击那个"去购物车结算"按钮。

我们模仿京东的购物车功能，既然要展示成功加入购物车页面，我们就要先把相关静态资源文件添加到taotao-cart-web工程当中。将css、images、js复制粘贴到taotao-cart-web工程的webapp目录下，把jsp粘贴到webapp目录下的WEB-INF目录下。

下面我们再看下我们的商品详情页面以及添加购物车的情况，我们首先要启动所有服务，然后启动除了taotao-cart-web工程之外的所有工程，商品详情页面如下

我们点击上图的"加入购物车"，会看到如下图所示界面，可以看到加入购物车的请求当中包含了商品ID以及商品数量。我们可以根据商品ID查询出商品详情。

下面我们来完成添加购物车的功能，由于查询商品详情我们的taotao-manager服务已经实现过了，因此我们只需完成web工程即可。我们在taotao-cart-web工程中添加一个Controller，如下图所示，在Controller中处理逻辑并最终返回逻辑视图。CartController

其中用到了常量，常量我们都放到配置文件当中

下面我们来测试一下，我们启动taotao-cart-web加入"clean tomcat7:run"

taotao-cart-web工程启动后，我们再到商品详情页面点击"加入购物车"，可以看到如下图所示界面，可以看到正常显示了"成功添加商品到购物车"的页面。

展示购物车列表

上节课我们一起学习了下添加购物车功能，这节课我们一起学习下展示购物车列表。

我们点击下图的"去购物车结算"。

可以看到会报404的错误，这是由于我们还没实现购物车列表展示功能，但是我们可以从地址栏中看到请求的url，如下图所示。

我们首先看一下购物车商品列表的jsp文件，如下图所示。我们需要给这个jsp页面传一个集合"cartList"

有了请求URL和页面需要的数据，我们现在来写Controller

下面我们重启taotao-cart-web工程，重启后，刷新刚才报404错误的那个页面，可以看到如下图所示购物车列表，当前该手机数量是1（因为我就向购物车添加了一个）

现在我们再回到商品详情页面，点那个"+"，让商品数量变成2，然后点击"加入购物车"，这样加上刚才添加的1，购物车现在一共应该有3个。

点击上图的加入购物车会看到下图所示界面。

点击上图的"去购物车结算"，可以看到如下图所示界面，可以看到当前商品数量是3，与我们添加的数量刚好一致，说明我们的购物车列表没问题了。

修改购物车商品数量

上节课我们一起学习了展示购物车列表，这节课我们继续完善购物车，实现购物车商品数量的修改功能。

当前购物车列表，如果我们修改商品数量，总价格不变，而且页面刷新后还会回到原来的数字

我们首先看看上节课我们展示的购物车列表，如下图所示，当前商品数量是3，总价格是20997元。

下面我们点击那个"+"让商品数量加1，发现商品数量变成4了，但是商品总价格依然是20997元。

我们再刷新下这个页面，发现又回到了初始状态，这说明我们的购物车还不能真正修改商品数量，我们修改商品数量的同时还要修改商品总价格以及修改Cookie中的信息。

下面我们便来实现购物车商品数量的修改功能，页面上的"-“和”+“图标显然都是由js控制的，我们得到cart.jsp页面去查找，打开cart.jsp页面，搜索”+“便可以收到在第82行，如下图所示。可以看到”-“和”+"并没有显示的指定onclick事件，那么肯定是用id或class来绑定事件的，而这里定义的id和class是相同的，因此我们拿"increment"去js中去查找。

查找的话，我们使用Ctrl+H打开搜索对话框，点击"File Search"，在搜索框中输入要搜索的内容，下面的文件类型指定搜索.js文件，然后点击"Search"进行搜索，如下图所示

搜索到的结果如下图所示，我们双击它进入cart.js文件。

那么cart.jsp页面到底有没有引用cart.js呢？我们到cart.jsp最下方，可以看到确实引用了cart.js文件，因此，我们可以知道，上图定义的事件就是我们要处理的事件。

下面我们便来分析下下面的js代码，$(".increment").click(function(){的意思很明显是给class为"increment"的那个"+“号按钮绑定了一个事件，var _thisInput = $(this).siblings("input");这句代码的意思是，$(this)是把”+“这个标签转换成jquery对象，因为只有转成jquery对象才能使用它的方法，$(this).siblings("input");的意思是找到兄弟节点中是<input>的标签{。}_{t}hisInput.val(eval{(}_{t}hisInput.val())+1);这句代码的意思是找到input标签后，将数字加1，$.post(”/cart/update/num/"+_thisInput.attr(“itemId”)+"/"+_thisInput.val() + “.action”,function(data){这句代码的意思是，点击"+“会向服务端发送post请求，请求的url的形式是：./cart/update/num/{itemId}/{num}.action，这里需要注意的是，url的结尾不能是.html，因为我们从服务端返回的结果是个Map，如果请求是以”.html"结尾的话，浏览器会认为返回的结果是个静态页面，浏览器去尝试将Map转成html，发现根本没法转换，因此便会报406的错误。至于"-“操作，与”+"一样，我就不再啰嗦一遍了。

由于目前我们的taotao-cart-web工程的web.xml文件中只拦截了".html"结尾的请求，没有拦截".action"结尾的请求，因此我们需要在web.xml文件当中添加对"*.action"的拦截。

下面我们便来写Controller接口

修改完了代码，现在我们开始测试，我们重启taotao-cart-web工程，重启后，我们刷新http://localhost:8089/cart/cart.html，然后点击"-“或者”+"，可以看到总价现在可以跟着变化了。而且我们再刷新页面，也不会回到原来的数量3及原来的总价了！说明我们的商品修改数量功能完成了。

删除购物车商品及购物车总结

上节课我们一起学习了修改购物车商品数量，这节课我们一起学习下删除购物车商品。

我们在购物车列表页面点击"删除"链接

我们会看到如下图所示界面，可以看到请求的url是/cart/delete/{itemId}.html，与购物车列表页面的url地址/cart/cart.html不一致，但是我们点击"删除"链接后页面应该仍然留在当前页面，我们怎么做呢？我们可以在Controller接口中指定/cart/delete/{itemId}的请求，处理完逻辑后重定向到我们的购物车列表页面，这样就好像页面一直在当前页面一样的效果。

我们来写Controller接口

下面我们便重启taotao-cart-web工程，重启后，我们点击购物车列表页面的"删除"链接，可以看到如下图所示结果，说明购物车中的该商品已经被删除掉了。至于库存还显示1件以及全选、删除选中商品、继续购物我们都没有实现，有兴趣的同学可以自己去实现，我们做到目前这种情况就行了。

购物车总结：
我们当前实现的购物车是以Cookie的方式实现的，这样做的优点有以下两点：
1、实现简单
2、不需要占用服务端存储空间

缺点也很明显，主要有以下两点：
1、存储容量有限（Cookie中保存的数据量毕竟是比较有限的）
2、更换设备后，购物车信息不能同步。

那么针对上面的缺点，我们应该怎样解决呢？这里给大家提供一下思路：
1、要求用户登录。
2、把购物车商品列表保存到数据库中。推荐使用redis。
3、如果存到redis的话，key最好用用户的ID，value便是购物车中商品列表。在redis中存储有五种存储方式，我们比较适合使用hash方式，规定一个hash，然后key是商品ID，value是商品基本信息。这样做的好处是存储的内容不是很长，效率比较高。
4、在用户未登录的情况下写入cookie当中，当用户登录后，访问购物车列表时
a} 把cookie中的数据同步到redis。
b} 把cookie中的数据删除
c) 展示购物车列表时以redis为准。
d) 如果redis中有数据cookie中也有数据，需要做数据合并。相同的商品数量相加，不同商品添加一个新商品。
5、如果用户登录状态，展示购物车列表以redis为准。如果未登录，以cookie为准。