购物车模块系统的开发

爱被打了一巴掌 2022-06-15 11:20 220阅读 0赞

## 一、购物车的需求描述和基本流程 ##

### 1、需求描述 ###

1、 用户可以在登录状态下将商品添加到购物车  
2、 用户可以在未登录状态下将商品添加到购物车  
3、 用户可以使用购物车一起结算下单  
4、 用户可以查询自己的购物车  
5、 用户可以在购物车中可以修改购买商品的数量。  
6、 用户可以在购物车中删除商品。

### 2、基本流程图 ###

![这里写图片描述][20170601160612131]

## 二、搭建购物模块项目 ##

1、创建maven工程，pom.xml内容如下

<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>com.enjoyshop.parent</groupId>
            <artifactId>enjoyshop-parent</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </parent>
        <groupId>com.enjoyshop.cart</groupId>
        <artifactId>enjoyshop-cart</artifactId>
        <version>1.0.0</version>
        <packaging>war</packaging>
    
        <dependencies>
            <dependency>
                <groupId>com.enjoyshop.common</groupId>
                <artifactId>enjoyshop-common</artifactId>
                <version>1.0.0-SNAPSHOT</version>
            </dependency>
            
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <scope>test</scope>
            </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.mybatis</groupId>
                <artifactId>mybatis</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mybatis</groupId>
                <artifactId>mybatis-spring</artifactId>
            </dependency>
            
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
            </dependency>
            <dependency>
                <groupId>com.github.jsqlparser</groupId>
                <artifactId>jsqlparser</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.github.abel533</groupId>
                <artifactId>mapper</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.slf4j</groupId>
                <artifactId>slf4j-log4j12</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.jolbox</groupId>
                <artifactId>bonecp-spring</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.apache.httpcomponents</groupId>
                <artifactId>httpclient</artifactId>
            </dependency>
    
            
            <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>
    
            
            <dependency>
                <groupId>org.apache.commons</groupId>
                <artifactId>commons-lang3</artifactId>
            </dependency>
            <dependency>
                <groupId>org.apache.commons</groupId>
                <artifactId>commons-io</artifactId>
            </dependency>
    
        </dependencies>
        <build>
            
            <plugins>
                <plugin>
                    <groupId>org.apache.tomcat.maven</groupId>
                    <artifactId>tomcat7-maven-plugin</artifactId>
                    <configuration>
                        <port>8086</port>
                        <path>/</path>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    
    </project>

### 2、web.xml配置如下： ###

<?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns="http://java.sun.com/xml/ns/javaee"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
        id="WebApp_ID" version="2.5">
        <display-name>enjoyshop-cart</display-name>
    
        <context-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring/applicationContext*.xml</param-value>
        </context-param>
    
        
        <listener>
            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
        </listener>
    
        
        <filter>
            <filter-name>encodingFilter</filter-name>
            <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
            <init-param>
                <param-name>encoding</param-name>
                <param-value>UTF8</param-value>
            </init-param>
        </filter>
        <filter-mapping>
            <filter-name>encodingFilter</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>
    
        
        <servlet>
            <servlet-name>enjoyshop-cart</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>classpath:spring/enjoyshop-cart-servlet.xml</param-value>
            </init-param>
            <load-on-startup>1</load-on-startup>
        </servlet>
    
        <servlet-mapping>
            <servlet-name>enjoyshop-cart</servlet-name>
            <url-pattern>*.html</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>enjoyshop-cart</servlet-name>
            <url-pattern>/service/*</url-pattern>
        </servlet-mapping>
    
        <welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>
    
    </web-app>

其他配置内容不作列举，可参考具体源码。

## 三、购物车功能的实现 ##

### 1、相关表结构 ###

CREATE TABLE `tb_cart` (  
      `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '自增ID',  
      `user_id` bigint(20) DEFAULT NULL COMMENT '用户ID',  
      `item_id` bigint(20) DEFAULT NULL COMMENT '商品ID',  
      `item_title` varchar(100) DEFAULT NULL COMMENT '商品标题',  
      `item_image` varchar(200) DEFAULT NULL COMMENT '商品主图',  
      `item_price` bigint(20) DEFAULT NULL COMMENT '商品价格，单位为：分',  
      `num` int(10) DEFAULT NULL COMMENT '购买数量',  
      `created` datetime DEFAULT NULL,  
      `updated` datetime DEFAULT NULL,  
      PRIMARY KEY (`id`),  
      KEY `userId_itemId` (`user_id`,`item_id`) USING BTREE,  
      KEY `created` (`created`)  
    ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COMMENT='购物车模块'

### 2、使用拦截器判断用户登录状态 ###

*  定义threadlocal用来获取用户信息

package com.enjoyshop.cart.threadlocal;
    
    import com.enjoyshop.cart.bean.User;
    
    public class UserThreadLocal {
    
        private static final ThreadLocal<User> LOCAL = new ThreadLocal<User>();
    
        public static void set(User user) {
            LOCAL.set(user);
        }
    
        public static User get() {
            return LOCAL.get();
        }
    
    }

*  自定义拦截器

package com.enjoyshop.cart.handlerInterceptor;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.servlet.HandlerInterceptor;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.enjoyshop.cart.bean.User;
    import com.enjoyshop.cart.service.UserService;
    import com.enjoyshop.cart.threadlocal.UserThreadLocal;
    import com.enjoyshop.common.utils.CookieUtils;
    
    public class UserHandlerInterceptor implements HandlerInterceptor {
        
    
        public static final String COOKIE_NAME = "TT_TOKEN";
    
        @Autowired
        private UserService userService;
    
        @Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
                throws Exception {
    
            UserThreadLocal.set(null);//清空当前线程中的User对象
    
            String token = CookieUtils.getCookieValue(request, COOKIE_NAME);
            if (StringUtils.isEmpty(token)) {
                // 未登录状态,放行
                return true;
            }
    
            User user = this.userService.queryUserByToken(token);
            if (null == user) {
                // 未登录状态,放行
                return true;
            }
            //处于登录状态
            UserThreadLocal.set(user); //将User对象放置到ThreadLocal中
            return true;
        }
    
        @Override
        public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                ModelAndView modelAndView) throws Exception {
    
        }
    
        @Override
        public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler,
                Exception ex) throws Exception {
    
        }
    
    }

*  配置拦截器

<mvc:interceptors>
            <mvc:interceptor>
                <mvc:mapping path="/cart/**"/>
                <bean class="com.enjoyshop.cart.handlerInterceptor.UserHandlerInterceptor"></bean>
            </mvc:interceptor>
        </mvc:interceptors>

### 3、购物车cookie的设置 ###

对于未登录状态下用户实现购物车功能，需要使用cookie。有一个问题是以什么样数据格式保存购物车数据到cookie？答案是使用json数据格式。

package com.enjoyshop.cart.service;
    
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.enjoyshop.cart.bean.Item;
    import com.enjoyshop.cart.pojo.Cart;
    import com.enjoyshop.common.utils.CookieUtils;
    import com.fasterxml.jackson.databind.ObjectMapper;
    
    @Service
    public class CartCookieService {
        
    
        public static final String COOKIE_NAME = "TT_CART";
    
        public static final Integer COOKIE_TIME = 60 * 60 * 24 * 30 * 12;
    
        private static final ObjectMapper MAPPER = new ObjectMapper();
    
        @Autowired
        private ItemService itemService;
    
        public void addItemToCart(Long itemId, HttpServletRequest request, HttpServletResponse response) {
            List<Cart> carts = queryCartList(request);
    
            // 判断该商品在购物车中是否存在
            Cart cart = null;
            for (Cart c : carts) {
                if (c.getItemId().longValue() == itemId.longValue()) {
                    cart = c;
                    break;
                }
            }
    
            if (null == cart) {
                // 不存在
                Item item = this.itemService.queryItemById(itemId);
                if (null == item) {
                    // TODO 给出用户提示
                    return;
                }
    
                cart = new Cart();
                cart.setCreated(new Date());
                cart.setUpdated(cart.getCreated());
                cart.setItemId(itemId);
                cart.setItemImage(item.getImages()[0]);
                cart.setItemPrice(item.getPrice());
                cart.setItemTitle(item.getTitle());
                cart.setNum(1); // TODO 默认为1
    
                carts.add(cart);// 加入到购物车
            } else {
                // 该商品存在购物车中，数量相加，默认为1 TODO
                cart.setNum(cart.getNum() + 1);
                cart.setUpdated(new Date());
            }
    
            // 将集合写入到cookie
            try {
                CookieUtils.setCookie(request, response, COOKIE_NAME, MAPPER.writeValueAsString(carts),
                        COOKIE_TIME, true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
        public List<Cart> queryCartList(HttpServletRequest request) {
            String cookieValue = CookieUtils.getCookieValue(request, COOKIE_NAME, true);
            List<Cart> carts = null;
            if (StringUtils.isEmpty(cookieValue)) {
                carts = new ArrayList<Cart>();
            } else {
                try {
                    carts = MAPPER.readValue(cookieValue,
                            MAPPER.getTypeFactory().constructCollectionType(List.class, Cart.class));
                } catch (Exception e) {
                    e.printStackTrace();
                    carts = new ArrayList<Cart>();
                }
            }
            return carts;
        }
    
        public void updateNum(Long itemId, Integer num, HttpServletRequest request, HttpServletResponse response) {
            List<Cart> carts = queryCartList(request);
            // 判断该商品在购物车中是否存在
            for (Cart c : carts) {
                if (c.getItemId().longValue() == itemId.longValue()) {
                    c.setNum(num);
                    c.setUpdated(new Date());
                    break;
                }
            }
    
            // 将集合写入到cookie
            try {
                CookieUtils.setCookie(request, response, COOKIE_NAME, MAPPER.writeValueAsString(carts),
                        COOKIE_TIME, true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
        public void deleteItem(Long itemId, HttpServletRequest request, HttpServletResponse response) {
            List<Cart> carts = queryCartList(request);
            // 判断该商品在购物车中是否存在
            for (Cart c : carts) {
                if (c.getItemId().longValue() == itemId.longValue()) {
                    carts.remove(c);
                    break;
                }
            }
    
            // 将集合写入到cookie
            try {
                CookieUtils.setCookie(request, response, COOKIE_NAME, MAPPER.writeValueAsString(carts),
                        COOKIE_TIME, true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
    }

### 4、将商品加入购物车 ###

*  service实现

public void addItemToCart(Long itemId) {
            // 判断该商品是否存在购物车中
            User user = UserThreadLocal.get();
    
            Cart record = new Cart();
            record.setItemId(itemId);
            record.setUserId(user.getId());
            Cart cart = this.cartMapper.selectOne(record);
            if (null == cart) {
                // 购物车中不存在该商品
                Item item = this.itemService.queryItemById(itemId);
                if (null == item) {
                    // TODO 给出用户提示
                    return;
                }
    
                cart = new Cart();
                cart.setCreated(new Date());
                cart.setUpdated(cart.getCreated());
                cart.setItemId(itemId);
                cart.setItemImage(item.getImages()[0]);
                cart.setItemPrice(item.getPrice());
                cart.setItemTitle(item.getTitle());
                cart.setNum(1); // TODO 默认为1
                cart.setUserId(user.getId());
                this.cartMapper.insert(cart);
            } else {
                // 该商品存在购物车中，数量相加，默认为1 TODO
                cart.setNum(cart.getNum() + 1);
                cart.setUpdated(new Date());
                this.cartMapper.updateByPrimaryKeySelective(cart);
            }
        }

*  controller层实现

/**
         * 加入商品到购物车
         * 
         * @param itemId
         * @return
         */
        @RequestMapping(value = "{itemId}", method = RequestMethod.GET)
        public String addItemToCart(@PathVariable("itemId") Long itemId, HttpServletRequest request,
                HttpServletResponse response) {
            User user = UserThreadLocal.get();
            if (null == user) {
                // 未登录状态
                this.cartCookieService.addItemToCart(itemId, request, response);
            } else {
                // 登录状态
                this.cartService.addItemToCart(itemId);
            }
            // 重定向到购物车列表页面
            return "redirect:/cart/list.html";
        }

### 5、查询购物车列表详情 ###

*  service层

public List<Cart> queryCartList() {
            User user = UserThreadLocal.get();
            return this.queryCartList(user.getId());
        }
    public List<Cart> queryCartList(Long userId) {
            Example example = new Example(Cart.class);
            example.createCriteria().andEqualTo("userId", userId);
            example.setOrderByClause("created DESC");// 根据创建时间倒序排序
            return this.cartMapper.selectByExample(example); 
        }

*  controller层

/**
         * 显示购物车列表
         * 
         * @return
         */
        @RequestMapping(value = "list", method = RequestMethod.GET)
        public ModelAndView showCartList(HttpServletRequest request) {
            ModelAndView mv = new ModelAndView("cart");
            List<Cart> cartList = null;
            User user = UserThreadLocal.get();
            if (null == user) {
                // 未登录状态
                cartList = this.cartCookieService.queryCartList(request);
            } else {
                // 登录状态
                cartList = this.cartService.queryCartList();
            }
            mv.addObject("cartList", cartList);
            return mv;
        }
    
        /**
         * 对外提交接口，根据用户id查询购物车列表（数据库查询）
         * 
         * @param userId
         * @return
         */
        @RequestMapping(method = RequestMethod.GET, params = "userId")
        public ResponseEntity<List<Cart>> queryCartListByUserId(@RequestParam("userId") Long userId) {
            try {
                List<Cart> carts = this.cartService.queryCartList(userId);
                if (null == carts || carts.isEmpty()) {
                    return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
                }
                return ResponseEntity.ok(carts);
            } catch (Exception e) {
                e.printStackTrace();
            }
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }

### 6、修改商品的购买数量实现 ###

*  service层

public void updateNum(Long itemId, Integer num) {
            User user = UserThreadLocal.get();
            // 更新的数据对象
            Cart record = new Cart();
            record.setNum(num);
            record.setUpdated(new Date());
    
            // 更新的条件
            Example example = new Example(Cart.class);
            example.createCriteria().andEqualTo("itemId", itemId).andEqualTo("userId", user.getId());
            this.cartMapper.updateByExampleSelective(record, example);
        }

*  controller层

/**
         * 修改购买商品的数量
         * 
         * @param itemId
         * @param num 最终购买的数量
         * @return
         */
        @RequestMapping(value = "update/num/{itemId}/{num}", method = RequestMethod.POST)
        public ResponseEntity<Void> updateNum(@PathVariable("itemId") Long itemId, @PathVariable("num") Integer num,
                HttpServletRequest request, HttpServletResponse response) {
            User user = UserThreadLocal.get();
            if (null == user) {
                // 未登录状态
                this.cartCookieService.updateNum(itemId, num, request, response);
            } else {
                // 登录状态
                this.cartService.updateNum(itemId, num);
            }
            // 204
            return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
        }

### 7、购物车中的商品删除 ###

*  service层

public void deleteItem(Long itemId) {
            Cart record = new Cart();
            record.setUserId(UserThreadLocal.get().getId());
            record.setItemId(itemId);
            this.cartMapper.delete(record);
        }

*  controller层

/**
         * 删除购物车中的商品
         * 
         * @param itemId
         * @return
         */
        @RequestMapping(value = "delete/{itemId}", method = RequestMethod.GET)
        public String deleteItem(@PathVariable("itemId") Long itemId, HttpServletRequest request,
                HttpServletResponse response) {
            User user = UserThreadLocal.get();
            if (null == user) {
                // 未登录状态
                this.cartCookieService.deleteItem(itemId, request, response);
            } else {
                // 登录状态
                this.cartService.deleteItem(itemId);
            }
            // 重定向到购物车列表页面
            return "redirect:/cart/list.html";
        }

## 四、前台系统集成购物车模块 ##

*  service层

public List<Cart> queryCartListByUserId(Long userId) {
            // 查询购物车系统提供的接口获取购物车列表
            try {
                String url = ENJOYSHOP_CART_URL + "/service/cart?userId=" + userId;
                String jsonData = this.apiService.doGet(url);
                if (StringUtils.isEmpty(jsonData)) {
                    return null;
                }
                return MAPPER.readValue(jsonData,
                        MAPPER.getTypeFactory().constructCollectionType(List.class, Cart.class));
            } catch (Exception e) {
                e.printStackTrace();
            }
            return null;
        }

*  controller层

/**
         * 基于购物车下单
         * 
         * @return
         */
        @RequestMapping(value = "create", method = RequestMethod.GET)
        public ModelAndView toCartOrder() {
            ModelAndView mv = new ModelAndView("order-cart");
            User user = UserThreadLocal.get();
            List<Cart> carts = this.cartService.queryCartListByUserId(user.getId());
            mv.addObject("carts", carts);
            return mv;
        }

[20170601160612131]: /images/20220615/78dea8aeaba14bbc8c4fdfb8023c4968.png