購物車實現分析及工程搭建
關於購物車模塊，京東和淘寶並不一樣，京東允許用戶在沒有登錄的情況下就使用購物車，而且加到購物車裏面的商品可以一直保存着（其實是放到了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)是把”+“這個標籤轉換成jquery對象，因爲只有轉成jquery對象才能使用它的方法，.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爲準。