購(gòu)物車的實(shí)現(xiàn)

功能分析

1、購(gòu)物車是一個(gè)獨(dú)立的表現(xiàn)層工程；

2、添加購(gòu)物車不要求登錄，可以指定購(gòu)買課程的數(shù)量；

3、展示購(gòu)物車列表頁(yè)面；

4、修改購(gòu)物車課程數(shù)量；

5、刪除購(gòu)物車課程。

工程搭建

ecourses-cart-web 打包方式 war

可以參考

易課寄在線購(gòu)課系統(tǒng)開(kāi)發(fā)筆記（七）–后臺(tái)管理系統(tǒng)工程搭建分析

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相關(guān) --><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相關(guān) --><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>

添加購(gòu)物車

功能分析

在不登錄的情況下也可以添加購(gòu)物車，把購(gòu)物車信息寫(xiě)入 Cookie 。

優(yōu)點(diǎn)：

1、不占用服務(wù)端存儲(chǔ)空間；

2、用戶體驗(yàn)好；

3、代碼實(shí)現(xiàn)簡(jiǎn)單。

缺點(diǎn)：

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

2、把購(gòu)物車信息保存在 Cookie 中，更換設(shè)備購(gòu)物車信息不能同步。

改造課程詳情頁(yè)面

請(qǐng)求的url：/cart/add/{itemId}

參數(shù)：

1）課程id： Long itemId
2）課程數(shù)量： int num

業(yè)務(wù)邏輯：

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

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

3、如果存在，課程數(shù)量相加；

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

5、把課程添加到購(gòu)車列表；

6、把購(gòu)車課程列表寫(xiě)入cookie。

返回值：邏輯視圖

Cookie 保存購(gòu)物車

1）key：cart

2）Value：購(gòu)物車列表轉(zhuǎn)換成 JSON 數(shù)據(jù)，需要對(duì)數(shù)據(jù)進(jìn)行編碼。

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

課程列表：

List<EcoursesItem>，每個(gè)課程數(shù)據(jù)使用 EcoursesItem 保存。當(dāng)根據(jù)課程 id 查詢課程信息后，取第一張圖片保存到 image 屬性中即可。

讀寫(xiě) Cookie 可以使用 CookieUtils 工具類實(shí)現(xiàn)。

Controller

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

展示購(gòu)物車課程列表

請(qǐng)求的 url: /cart/cart

參數(shù)：無(wú)

返回值：邏輯視圖

業(yè)務(wù)邏輯：

1、從 Cookie 中取課程列表；

2、把課程列表傳遞給頁(yè)面。

Controller

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

修改購(gòu)物車課程數(shù)量

功能分析

1、在頁(yè)面中可以修改課程數(shù)量；

2、重新計(jì)算小計(jì)和總計(jì)；

3、修改需要寫(xiě)入 Cookie ；

4、每次修改都需要向服務(wù)端發(fā)送一個(gè) AJAX 請(qǐng)求，在服務(wù)端修改 Cookie 中的課程數(shù)量。

請(qǐng)求的 url：/cart/update/num/{itemId}/{num}

參數(shù)：long itemId、int num

業(yè)務(wù)邏輯：

1、接收兩個(gè)參數(shù)；

2、從 Cookie 中取課程列表；

3、遍歷課程列表找到對(duì)應(yīng)課程；

4、更新課程數(shù)量；

5、把課程列表寫(xiě)入 Cookie；

6、響應(yīng)ecoursesResult。JSON 數(shù)據(jù)；

返回值：

ECoursesResult。JSON 數(shù)據(jù)

Controller

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

解決請(qǐng)求 *.html 后綴無(wú)法返回 JSON 數(shù)據(jù)的問(wèn)題

在 SpringMVC 中請(qǐng)求 *.html 不可以返回 JSON 數(shù)據(jù)。

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

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

刪除購(gòu)物車課程

功能分析

請(qǐng)求的 url：/cart/delete/{itemId}

參數(shù)：課程 id

返回值：展示購(gòu)物車列表頁(yè)面。url 需要做 redirect 跳轉(zhuǎn)。

業(yè)務(wù)邏輯：

1、從 url 中取課程 id；

2、從 Cookie 中取購(gòu)物車課程列表；

3、遍歷列表找到對(duì)應(yīng)的課程；

4、刪除課程；

5、把課程列表寫(xiě)入 Cookie；

6、返回邏輯視圖：在邏輯視圖中做 redirect 跳轉(zhuǎn)。

Controller

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

小結(jié)

使用 Cookie 實(shí)現(xiàn)購(gòu)物車：

優(yōu)點(diǎn)：

1、實(shí)現(xiàn)簡(jiǎn)單；

2、不需要占用服務(wù)端存儲(chǔ)空間。

缺點(diǎn)：

1、存儲(chǔ)容量有限；

2、更換設(shè)備購(gòu)車信息不能同步。

實(shí)現(xiàn)購(gòu)車課程數(shù)據(jù)同步：

1、要求用戶登錄；

2、把購(gòu)物車課程列表保存到數(shù)據(jù)庫(kù)中，推薦使用 Redis；

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

4、在用戶未登錄情況下寫(xiě) Cookie 。當(dāng)用戶登錄后，訪問(wèn)購(gòu)物車列表時(shí)，

a) 把 Cookie 中的數(shù)據(jù)同步到 Redis；

b) 把 Cookie 中的數(shù)據(jù)刪除；

c) 展示購(gòu)物車列表時(shí)以 Redis 為準(zhǔn)；

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

5、如果用戶登錄狀態(tài)，展示購(gòu)物車列表以 Redis 為準(zhǔn)。如果未登錄，以 Cookie 為準(zhǔn)。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。