購物車的實現

功能分析

1、購物車是一個獨立的表現層工程；

2、添加購物車不要求登錄，可以指定購買課程的數量；

3、展示購物車列表頁面；

4、修改購物車課程數量；

5、刪除購物車課程。

工程搭建

ecourses-cart-web 打包方式 war

可以參考

易課寄在線購課系統開發筆記（七）–后臺管理系統工程搭建分析

ecourses-bms-web

pom 文件

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>cn.ecourses</groupId><artifactId>ecourses-parent</artifactId><version>1.0-SNAPSHOT</version></parent><groupId>cn.ecourses</groupId><artifactId>ecourses-cart-web</artifactId><version>1.0-SNAPSHOT</version><packaging>war</packaging><dependencies><dependency><groupId>cn.ecourses</groupId><artifactId>ecourses-cart-interface</artifactId><version>1.0-SNAPSHOT</version></dependency><dependency><groupId>cn.ecourses</groupId><artifactId>ecourses-bms-interface</artifactId><version>1.0-SNAPSHOT</version></dependency><dependency><groupId>cn.ecourses</groupId><artifactId>ecourses-sso-interface</artifactId><version>1.0-SNAPSHOT</version></dependency><!-- Spring --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jms</artifactId></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId></dependency><!-- JSP相關 --><dependency><groupId>jstl</groupId><artifactId>jstl</artifactId></dependency><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><scope>provided</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jsp-api</artifactId><scope>provided</scope></dependency><!-- dubbo相關 --><dependency><groupId>com.alibaba</groupId><artifactId>dubbo</artifactId><exclusions><exclusion><groupId>org.springframework</groupId><artifactId>spring</artifactId></exclusion><exclusion><groupId>org.jboss.netty</groupId><artifactId>netty</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.apache.zookeeper</groupId><artifactId>zookeeper</artifactId></dependency><dependency><groupId>com.github.sgroschupf</groupId><artifactId>zkclient</artifactId></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId></dependency></dependencies><!-- 配置tomcat插件 --><build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><path>/</path><port>8090</port></configuration></plugin></plugins></build> </project>

添加購物車

功能分析

在不登錄的情況下也可以添加購物車，把購物車信息寫入 Cookie 。

優點：

1、不占用服務端存儲空間；

2、用戶體驗好；

3、代碼實現簡單。

缺點：

1、Cookie 中保存的容量有限，最大4k；

2、把購物車信息保存在 Cookie 中，更換設備購物車信息不能同步。

改造課程詳情頁面

請求的url：/cart/add/{itemId}

參數：

1）課程id： Long itemId
2）課程數量： int num

業務邏輯：

1、從 Cookie 中查詢課程列表；

2、判斷課程在課程列表中是否存在；

3、如果存在，課程數量相加；

4、不存在，根據課程 id 查詢課程信息；

5、把課程添加到購車列表；

6、把購車課程列表寫入cookie。

返回值：邏輯視圖

Cookie 保存購物車

1）key：cart

2）Value：購物車列表轉換成 JSON 數據，需要對數據進行編碼。

3）Cookie的有效期：保存7天。

課程列表：

List<EcoursesItem>，每個課程數據使用 EcoursesItem 保存。當根據課程 id 查詢課程信息后，取第一張圖片保存到 image 屬性中即可。

讀寫 Cookie 可以使用 CookieUtils 工具類實現。

Controller

package cn.ecourses.cart.controller; //購物車處理Controller @Controller public class CartController {@Value("${COOKIE_CART_EXPIRE}")private Integer COOKIE_CART_EXPIRE;@Autowiredprivate ItemService itemService;@Autowiredprivate CartService cartService;@RequestMapping("/cart/add/{itemId}")public String addCart(@PathVariable Long itemId, @RequestParam(defaultValue="1")Integer num,HttpServletRequest request, HttpServletResponse response) {//判斷用戶是否登錄EcoursesUser user = (EcoursesUser) request.getAttribute("user");//如果是登錄狀態，把購物車寫入redisif (user != null) {//保存到服務端cartService.addCart(user.getId(), itemId, num);//返回邏輯視圖return "cartSuccess";}//如果未登錄使用cookie//從cookie中取購物車列表List<EcoursesItem> cartList = getCartListFromCookie(request);//判斷課程在課程列表中是否存在boolean flag = false;for (EcoursesItem ecoursesItem : cartList) {//如果存在數量相加if (ecoursesItem.getId() == itemId.longValue()) {flag = true;//找到課程，數量相加ecoursesItem.setNum(ecoursesItem.getNum() + num);//跳出循環break;}}//如果不存在if (!flag) {//根據課程id查詢課程信息。得到一個EcoursesItem對象EcoursesItem ecoursesItem = itemService.getItemById(itemId);//設置課程數量ecoursesItem.setNum(num);//取一張圖片String image = ecoursesItem.getImage();if (StringUtils.isNotBlank(image)) {ecoursesItem.setImage(image.split(",")[0]);}//把課程添加到課程列表cartList.add(ecoursesItem);}//寫入cookieCookieUtils.setCookie(request, response, "cart", JsonUtils.objectToJson(cartList), COOKIE_CART_EXPIRE, true);//返回添加成功頁面return "cartSuccess";}//從cookie中取購物車列表的處理private List<EcoursesItem> getCartListFromCookie(HttpServletRequest request) {String json = CookieUtils.getCookieValue(request, "cart", true);//判斷json是否為空if (StringUtils.isBlank(json)) {return new ArrayList<>();}//把json轉換成課程列表List<EcoursesItem> list = JsonUtils.jsonToList(json, EcoursesItem.class);return list;}//展示購物車列表@RequestMapping("/cart/cart")public String showCatList(HttpServletRequest request, HttpServletResponse response) {//從cookie中取購物車列表List<EcoursesItem> cartList = getCartListFromCookie(request);//判斷用戶是否為登錄狀態EcoursesUser user = (EcoursesUser) request.getAttribute("user");//如果是登錄狀態if (user != null) {//從cookie中取購物車列表//如果不為空，把cookie中的購物車課程和服務端的購物車課程合并。cartService.mergeCart(user.getId(), cartList);//把cookie中的購物車刪除CookieUtils.deleteCookie(request, response, "cart");//從服務端取購物車列表cartList = cartService.getCartList(user.getId());}//把列表傳遞給頁面request.setAttribute("cartList", cartList);//返回邏輯視圖return "cart";}//更新購物車課程數量@RequestMapping("/cart/update/num/{itemId}/{num}")@ResponseBodypublic ECoursesResult updateCartNum(@PathVariable Long itemId, @PathVariable Integer num, HttpServletRequest request ,HttpServletResponse response) {//判斷用戶是否為登錄狀態EcoursesUser user = (EcoursesUser) request.getAttribute("user");if (user != null) {cartService.updateCartNum(user.getId(), itemId, num);return ECoursesResult.ok();}//從cookie中取購物車列表List<EcoursesItem> cartList = getCartListFromCookie(request);//遍歷課程列表找到對應的課程for (EcoursesItem ecoursesItem : cartList) {if (ecoursesItem.getId().longValue() == itemId) {//更新數量ecoursesItem.setNum(num);break;}}//把購物車列表寫回cookieCookieUtils.setCookie(request, response, "cart", JsonUtils.objectToJson(cartList), COOKIE_CART_EXPIRE, true);//返回成功return ECoursesResult.ok();}//刪除購物車課程@RequestMapping("/cart/delete/{itemId}")public String deleteCartItem(@PathVariable Long itemId, HttpServletRequest request,HttpServletResponse response) {//判斷用戶是否為登錄狀態EcoursesUser user = (EcoursesUser) request.getAttribute("user");if (user != null) {cartService.deleteCartItem(user.getId(), itemId);return "redirect:/cart/cart.html";}//從cookie中取購物車列表List<EcoursesItem> cartList = getCartListFromCookie(request);//遍歷列表，找到要刪除的課程for (EcoursesItem ecoursesItem : cartList) {if (ecoursesItem.getId().longValue() == itemId) {//刪除課程cartList.remove(ecoursesItem);//跳出循環break;}}//把購物車列表寫入cookieCookieUtils.setCookie(request, response, "cart", JsonUtils.objectToJson(cartList), COOKIE_CART_EXPIRE, true);//返回邏輯視圖return "redirect:/cart/cart.html";} }

展示購物車課程列表

請求的 url: /cart/cart

參數：無

返回值：邏輯視圖

業務邏輯：

1、從 Cookie 中取課程列表；

2、把課程列表傳遞給頁面。

Controller

//展示購物車列表 @RequestMapping("/cart/cart") public String showCatList(HttpServletRequest request, HttpServletResponse response) {//從cookie中取購物車列表List<EcoursesItem> cartList = getCartListFromCookie(request);//判斷用戶是否為登錄狀態EcoursesUser user = (EcoursesUser) request.getAttribute("user");//如果是登錄狀態if (user != null) {//從cookie中取購物車列表//如果不為空，把cookie中的購物車課程和服務端的購物車課程合并。cartService.mergeCart(user.getId(), cartList);//把cookie中的購物車刪除CookieUtils.deleteCookie(request, response, "cart");//從服務端取購物車列表cartList = cartService.getCartList(user.getId());}//把列表傳遞給頁面request.setAttribute("cartList", cartList);//返回邏輯視圖return "cart"; }

修改購物車課程數量

功能分析

1、在頁面中可以修改課程數量；

2、重新計算小計和總計；

3、修改需要寫入 Cookie ；

4、每次修改都需要向服務端發送一個 AJAX 請求，在服務端修改 Cookie 中的課程數量。

請求的 url：/cart/update/num/{itemId}/{num}

參數：long itemId、int num

業務邏輯：

1、接收兩個參數；

2、從 Cookie 中取課程列表；

3、遍歷課程列表找到對應課程；

4、更新課程數量；

5、把課程列表寫入 Cookie；

6、響應ecoursesResult。JSON 數據；

返回值：

ECoursesResult。JSON 數據

Controller

//更新購物車課程數量 @RequestMapping("/cart/update/num/{itemId}/{num}") @ResponseBody public ECoursesResult updateCartNum(@PathVariable Long itemId, @PathVariable Integer num, HttpServletRequest request ,HttpServletResponse response) {//判斷用戶是否為登錄狀態EcoursesUser user = (EcoursesUser) request.getAttribute("user");if (user != null) {cartService.updateCartNum(user.getId(), itemId, num);return ECoursesResult.ok();}//從cookie中取購物車列表List<EcoursesItem> cartList = getCartListFromCookie(request);//遍歷課程列表找到對應的課程for (EcoursesItem ecoursesItem : cartList) {if (ecoursesItem.getId().longValue() == itemId) {//更新數量ecoursesItem.setNum(num);break;}}//把購物車列表寫回cookieCookieUtils.setCookie(request, response, "cart", JsonUtils.objectToJson(cartList), COOKIE_CART_EXPIRE, true);//返回成功return ECoursesResult.ok(); }

解決請求 *.html 后綴無法返回 JSON 數據的問題

在 SpringMVC 中請求 *.html 不可以返回 JSON 數據。

修改 web.xml，添加 url 攔截格式。

<servlet-mapping><servlet-name>ecourses-cart-web</servlet-name><url-pattern>*.action</url-pattern> </servlet-mapping>

刪除購物車課程

功能分析

請求的 url：/cart/delete/{itemId}

參數：課程 id

返回值：展示購物車列表頁面。url 需要做 redirect 跳轉。

業務邏輯：

1、從 url 中取課程 id；

2、從 Cookie 中取購物車課程列表；

3、遍歷列表找到對應的課程；

4、刪除課程；

5、把課程列表寫入 Cookie；

6、返回邏輯視圖：在邏輯視圖中做 redirect 跳轉。

Controller

//刪除購物車課程 @RequestMapping("/cart/delete/{itemId}") public String deleteCartItem(@PathVariable Long itemId, HttpServletRequest request,HttpServletResponse response) {//判斷用戶是否為登錄狀態EcoursesUser user = (EcoursesUser) request.getAttribute("user");if (user != null) {cartService.deleteCartItem(user.getId(), itemId);return "redirect:/cart/cart.html";}//從cookie中取購物車列表List<EcoursesItem> cartList = getCartListFromCookie(request);//遍歷列表，找到要刪除的課程for (EcoursesItem ecoursesItem : cartList) {if (ecoursesItem.getId().longValue() == itemId) {//刪除課程cartList.remove(ecoursesItem);//跳出循環break;}}//把購物車列表寫入cookieCookieUtils.setCookie(request, response, "cart", JsonUtils.objectToJson(cartList), COOKIE_CART_EXPIRE, true);//返回邏輯視圖return "redirect:/cart/cart.html"; }

小結

使用 Cookie 實現購物車：

優點：

1、實現簡單；

2、不需要占用服務端存儲空間。

缺點：

1、存儲容量有限；

2、更換設備購車信息不能同步。

實現購車課程數據同步：

1、要求用戶登錄；

2、把購物車課程列表保存到數據庫中，推薦使用 Redis；

3、Key：用戶 id，value：購車課程列表。推薦使用 hash，hash 的 field：課程 id，value：課程信息；

4、在用戶未登錄情況下寫 Cookie 。當用戶登錄后，訪問購物車列表時，

a) 把 Cookie 中的數據同步到 Redis；

b) 把 Cookie 中的數據刪除；

c) 展示購物車列表時以 Redis 為準；

d) 如果 Redis 中有數據 Cookie 中也有數據，需要做數據合并。相同課程數量相加，不同課程添加一個新課程；

5、如果用戶登錄狀態，展示購物車列表以 Redis 為準。如果未登錄，以 Cookie 為準。

總結

以上是生活随笔為你收集整理的易课寄在线购课系统开发笔记（三十三）--完成购物车系统的开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。