淘淘商城27_购物车_01添加购物车和将购物车保存到cookie

一、需求分析

购物车大概分两种:京东样式的和淘宝样式的

京东:在用户不用登录的情况下也可以将商品放入到购物车

淘宝:用户必须登录成功后才能将商品放入到购物车

我们要做的类似京东:购物车在用户不登陆的情况下也可以使用购物车。需要把购物车的商品信息写入cookie中。所有对购物车的操作都是操作cookie。有效的降低数据库的压力。

缺点:换一台电脑后购物车的商品不能同步。

 

1、购物车是一个独立的表现层工程。

2、添加购物车不要求登录。可以指定购买商品的数量。

3、展示购物车列表页面

4、修改购物车商品数量

5、删除购物车商品

二、添加购物车

1. 流程

在商品详情页面点击“加入购物车”按钮提交一个请求把商品id传递给Controller,Controller接收id,Controller调用Service根据商品id查询商品基本信息。把商品写入cookie中,加入cookie之前先从cookie中把购物车的商品取出来判断当前购物车商品列表中是否有此商品,如果有数量加一,如果没有添加一个商品,数量为1。展示给用户购物车列表。

2. 创建taotao-cart-web工程

2.1 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.taotao</groupId>
    <artifactId>taotao-parent</artifactId>
    <version>0.0.1-SNAPSHOT</version>
  </parent>
  <artifactId>taotao-cart-web</artifactId>
  <packaging>war</packaging>
  
  <dependencies>
     	
		<dependency>
			<groupId>com.taotao</groupId>
			<artifactId>taotao-common</artifactId>
			<version>0.0.1-SNAPSHOT</version>
		</dependency>
		<dependency>
  			<groupId>com.taotao</groupId>
		    <artifactId>taotao-manager-interface</artifactId>
		    <version>0.0.1-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>
					<artifactId>spring</artifactId>
					<groupId>org.springframework</groupId>
				</exclusion>
				<exclusion>
					<artifactId>netty</artifactId>
					<groupId>org.jboss.netty</groupId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.apache.zookeeper</groupId>
			<artifactId>zookeeper</artifactId>
		</dependency>
		<dependency>
			<groupId>com.github.sgroschupf</groupId>
			<artifactId>zkclient</artifactId>
		</dependency>
		
		<!-- httpclient -->
			<dependency>
				<groupId>org.apache.httpcomponents</groupId>
				<artifactId>httpclient</artifactId>
			</dependency>
			
			<!-- 单元测试 -->
			<dependency>
				<groupId>junit</groupId>
				<artifactId>junit</artifactId>
				<scope>test</scope>
			</dependency>
	</dependencies>
	
	
	<build>
		<!-- 配置插件 -->
		<plugins>
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<configuration>
					<port>8089</port>
					<path>/</path>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

2.2 配置文件

2.2.1 spingmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
      	http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">
	<!-- 配置注解驱动 -->
	<mvc:annotation-driven />
	<!-- 视图解析器 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>
	<!-- 配置包扫描器,扫描@Controller注解的类 -->
	<context:component-scan base-package="com.taotao.cart.controller"/>
	<!-- 配置静态资源 -->
	<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
	<mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>
	
	<!-- 引用dubbo服务 -->
	<dubbo:application name="taotao-cart"/>
	<dubbo:registry protocol="zookeeper" address="172.18.34.94:2181"/>
	<!-- 发布dubbo服务 -->
	<!-- <dubbo:reference interface="com.taotao.content.service.ItemCatService"  id="itemCatService""  timeout = "300000" /> -->
</beans>      

参考taotao-portal工程 

2.2.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>taotao-cart-web</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <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>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <servlet>
    <servlet-name>taotao-cart-web</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring/springmvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>taotao-cart-web</servlet-name>
    <url-pattern>*.html</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>taotao-cart-web</servlet-name>
    <url-pattern>*.action</url-pattern>
  </servlet-mapping>
</web-app>

3. 添加购物车的功能

4. controller层CartController.java

4.1 逻辑:

  1.从cookie中取出商品信息,购物车中的商品信息保存在cookie中

  2.判断选择的商品是否存在于购物车中

  3.若存在,则购物车中商品数量加1

  4.若不存在,则直接添加商品

  5.将购物车保存到cookie中,设置生命周期,通常是7天,按秒算

  6.返回成功页面

package com.taotao.cart.controller;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.taotao.pojo.TbItem;
import com.taotao.service.ItemService;
import com.taotao.utils.CookieUtils;
import com.taotao.utils.ExceptionUtil;
import com.taotao.utils.JsonUtils;

@Controller
public class CartController {
	private static final Logger LOGGER = LoggerFactory.getLogger(CartController.class);
	@Autowired
	private ItemService itemService;
	
	@Value("${TT_CART}")
	private String TT_CART;
	@Value("${COOKIE_CART_EXPIRE}")
	private Integer COOKIE_CART_EXPIRE;
	
	/**
	 * 添加商品到购物车
	 * @param itemId
	 * @param num
	 * @param request
	 * @param response
	 * @return
	 */
	@RequestMapping("/cart/add/{itemId}")
	public String addCart(@PathVariable Long itemId, @RequestParam(defaultValue="1") Integer num, HttpServletRequest request, HttpServletResponse response){
		try {
			//1.从cookie中取出商品信息,购物车中的商品信息保存在cookie中
			List<TbItem> cartList = getCartList(request, response);
			//2.判断选择的商品是否存在于购物车中
			boolean flag = false ;
		    for (TbItem tbItem : cartList) {//3.若存在,则购物车中商品数量加1,
		    	//注意封装类的转换Long
		    	//由于tbItem的ID与参数中的itemId都是包装类型的Long,要比较是否相等不要用==,
                // 因为那样比较的是对象的地址而不是值,为了让它们比较的是值,那么可以使用.longValue来获取值 

				if (tbItem.getId()==itemId.longValue()) {
					tbItem.setNum(tbItem.getNum()+num);
					flag = true;
					break;//跳出循环
				} 
			}
		  //4.若不存在,则直接添加商品,
		    if (! flag) {
				//先从tb_item中查询出商品信息
		    	TbItem item = itemService.getItemById(itemId);
		    	//图片
		    	if (item.getImage() !=null) {
		    		String images = item.getImage();
		    		String[] imageArr = images.split(",");
		    		item.setImage(imageArr[0]);
				}
		    	item.setNum(num);//购买数量
		    	cartList.add(item);//将商品添加到购物车
			}
			//5.将购物车保存到cookie中,设置生命周期,通常是7天,按秒算
		    CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartList), COOKIE_CART_EXPIRE);
		} catch (Exception e) {
			LOGGER.error("添加购物车失败", e);
			return "cartError";
		}
		return "cartSuccess";
	}
	
	/**
	 * 从cookie中查询购物车中商品信息
	 * cookie中保存商品的名称,id,图片,价格
	 * @param request
	 * @param response
	 * @return
	 */
	private List<TbItem> getCartList(HttpServletRequest request, HttpServletResponse response){
		String jsonData = CookieUtils.getCookieValue(request, TT_CART, true);//取出的是json格式的字符串
		if (StringUtils.isNotEmpty(jsonData)) {//不为空,说明cookie中存在数据
			List<TbItem> list = JsonUtils.jsonToList(jsonData, TbItem.class);
			return list;
		}
		return new ArrayList<>();
	}
}

4.2. Dubbo配置

springmvc.xml

applicationContext-service.xml

我们在taotao-manager-service工程中有配置

4.3 resource.properties

#购物车取商品的key
TT_CART=TT_CART
#cookie生命周期,通常是7天,604800秒
COOKIE_CART_EXPIRE=604800

4.4 cartSuccess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" type="text/css"
	href="/css/base.css">
<link href="/css/initcart.css" type="text/css"
	rel="stylesheet">
<title>商品已成功加入购物车</title>
<style id="style-1-cropbar-clipper">
/* Copyright 2014 Evernote Corporation. All rights reserved. */
.en-markup-crop-options {
	top: 18px !important;
	left: 50% !important;
	margin-left: -100px !important;
	width: 200px !important;
	border: 2px rgba(255, 255, 255, .38) solid !important;
	border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
	margin-left: 0px !important;
}
</style>
</head>
<body class="root61">

    <jsp:include page="commons/header.jsp" />
	<!--main start-->
	<div class="w main">
		<div class="left">
			<div class="m" id="succeed">

				<div class="corner tl"></div>
				<div class="corner tr"></div>
				<div class="corner bl"></div>
				<div class="corner br"></div>
				<div class="success">
					<div class="success-b">
						<h3>商品已成功加入购物车!</h3>
						<span id="flashBuy" style="display: none">商品数量有限,请您尽快下单并付款!</span>
					</div>
					<span id="initCart_next_go"> <a class="btn-1"
						href="/cart/cart.html"
						id="GotoShoppingCart">去购物车结算</a> <span class="ml10">您还可以 <a
							class="ftx-05" href="javascript:history.back();">继续购物</a></span>
					</span>
				</div>
			</div>
			<!--succeed end-->

		</div>
	</div>
   <jsp:include page="commons/footer.jsp" />


</body>
</html>

è¿éåå¾çæè¿°

猜你喜欢

转载自blog.csdn.net/fjz_lihuapiaoxiang/article/details/85319079