黑马淘淘商城第十二天 购物车实现、订单确认页面展示
1. 课程计划
第十二天：
1、购物车实现
2、订单确认页面展示
2. 购物车的实现
2.1. 功能分析
1、购物车是一个独立的表现层工程。
2、添加购物车不要求登录。可以指定购买商品的数量。
3、展示购物车列表页面
4、修改购物车商品数量
5、删除购物车商品
2.2. 工程搭建
Taotao-cart-web打包方式war
可以参考taotao-portal-web
2.2.1. Pom文件
<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><groupId>com.taotao</groupId><artifactId>taotao-cart-web</artifactId><version>0.0.1-SNAPSHOT</version><packaging>war</packaging><dependencies><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</g roupId><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><port>8089</port><path>/</path></configuration></plugin></plugins></build>
</project>2.2.2. 框架整合
2.3. 添加购物车
2.3.1. 功能分析
在不登陆的情况下也可以添加购物车。把购物车信息写入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：TT_CART
2）Value：购物车列表转换成json数据。需要对数据进行编码。
3）Cookie的有效期：保存7天。
商品列表：
List，每个商品数据使用TbItem保存。当根据商品id查询商品信息后，取第一张图片保存到image属性中即可。
读写cookie可以使用CookieUtils工具类实现。
2.3.2. Controller
@Controller
public class CartController {@Value("${TT_CART}")private String TT_CART;@Value("${CART_EXPIRE}")private Integer CART_EXPIRE;@Autowiredprivate ItemService itemService;@RequestMapping("/cart/add/{itemId}")public String addCartItem(@PathVariable Long itemId, Integer num,HttpServletRequest request, HttpServletResponse response) {// 1、从cookie中查询商品列表。List<TbItem> cartList = getCartList(request);// 2、判断商品在商品列表中是否存在。boolean hasItem = false;for (TbItem tbItem : cartList) {//对象比较的是地址，应该是值的比较if (tbItem.getId() == itemId.longValue()) {// 3、如果存在，商品数量相加。tbItem.setNum(tbItem.getNum() + num);hasItem = true;break;}}if (!hasItem) {// 4、不存在，根据商品id查询商品信息。TbItem tbItem = itemService.getItemById(itemId);//取一张图片String image = tbItem.getImage();if (StringUtils.isNoneBlank(image)) {String[] images = image.split(",");tbItem.setImage(images[0]);}//设置购买商品数量tbItem.setNum(num);// 5、把商品添加到购车列表。cartList.add(tbItem);}// 6、把购车商品列表写入cookie。CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartList), CART_EXPIRE, true);return "cartSuccess";}/*** 从cookie中取购物车列表* <p>Title: getCartList</p>* <p>Description: </p>* @param request* @return*/private List<TbItem> getCartList(HttpServletRequest request) {//取购物车列表String json = CookieUtils.getCookieValue(request, TT_CART, true);//判断json是否为nullif (StringUtils.isNotBlank(json)) {//把json转换成商品列表返回List<TbItem> list = JsonUtils.jsonToList(json, TbItem.class);return list;}return new ArrayList<>();}}2.4. 展示购物车商品列表
请求的url:/cart/cart
参数：无
返回值：逻辑视图
业务逻辑：
1、从cookie中取商品列表。
2、把商品列表传递给页面。
2.4.1. Controller
@RequestMapping("/cart/cart")public String showCartList(HttpServletRequest request, Model model) {//取购物车商品列表List<TbItem> cartList = getCartList(request);//传递给页面model.addAttribute("cartList", cartList);return "cart";}2.5. 修改购物车商品数量
2.5.1. 功能分析
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、响应TaoTaoResult。Json数据。
返回值：
TaoTaoResult。Json数据
2.5.2. Controller
@RequestMapping("/cart/update/num/{itemId}/{num}")@ResponseBodypublic TaotaoResult updateNum(@PathVariable Long itemId, @PathVariable Integer num,HttpServletRequest request, HttpServletResponse response) {// 1、接收两个参数// 2、从cookie中取商品列表List<TbItem> cartList = getCartList(request);// 3、遍历商品列表找到对应商品for (TbItem tbItem : cartList) {if (tbItem.getId() == itemId.longValue()) {// 4、更新商品数量tbItem.setNum(num);}}// 5、把商品列表写入cookie。CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartList), CART_EXPIRE, true);// 6、响应TaoTaoResult。Json数据。return TaotaoResult.ok();}2.5.3. 解决请求.html后缀无法返回json数据的问题*
在springmvc中请求*.html不可以返回json数据。
修改web.xml，添加url拦截格式。
2.6. 删除购物车商品
2.6.1. 功能分析
请求的url：/cart/delete/{itemId}
参数：商品id
返回值：展示购物车列表页面。Url需要做redirect跳转。
业务逻辑：
1、从url中取商品id
2、从cookie中取购物车商品列表
3、遍历列表找到对应的商品
4、删除商品。
5、把商品列表写入cookie。
6、返回逻辑视图：在逻辑视图中做redirect跳转。
2.6.2. Controller
RequestMapping("/cart/delete/{itemId}")public String deleteCartItem(@PathVariable Long itemId, HttpServletRequest request,HttpServletResponse response) {// 1、从url中取商品id// 2、从cookie中取购物车商品列表List<TbItem> cartList = getCartList(request);// 3、遍历列表找到对应的商品for (TbItem tbItem : cartList) {if (tbItem.getId() == itemId.longValue()) {// 4、删除商品。cartList.remove(tbItem);break;}}// 5、把商品列表写入cookie。CookieUtils.setCookie(request, response, TT_CART, JsonUtils.objectToJson(cartList), CART_EXPIRE, true);// 6、返回逻辑视图：在逻辑视图中做redirect跳转。return "redirect:/cart/cart.html";}淘淘静态页面
2.7. 小结
使用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为准。
- 订单系统
3.1. 功能分析
1、在购物车页面点击“去结算”按钮跳转到订单确认页面。
a) 展示商品列表
b) 配送地址列表
c) 选择支付方式
2、展示订单确认页面之前，应该确认用户身份。
a) 使用拦截器实现。
b) Cookie中取token
c) 取不到token跳转到登录页面
d) 取到token，根据token查询用户信息。
e) 如果没有用户信息，登录过期跳转到登录页面
f) 取到用户信息，放行。
3、提交订单
a) 生成订单
b) 展示订单提交成功页面。
订单系统系统：订单确认页面、订单提交成功页面。
订单服务系统
3.2. 工程搭建
创建一个订单服务系统：
Taotao-order
|–taotao-order-interface
|–taotao-order-Service
可以参考taotao-manager整合。
表现层工程：
Taotao-order-web打包方式war。
3.3. 展示订单确认页面
3.3.1. 功能分析
1、在购物车页面点击“去结算”按钮跳转到订单确认页面。
2、请求的url：
/order/order-cart
3、参数：没有参数。
4、购物车商品数据从cookie中取出来的。可以在订单系统中取到cookie中的购物车数据。
5、配送地址列表，需要用户登录。需要根据用户id查询收货地址列表。静态数据。
6、支付方式。静态数据。
7、返回值：逻辑视图String，展示订单确认页面。
3.3.2. Dao层、Service层（没有）
需要根据用户id查询收货地址列表。没有此功能。
3.3.3. 表现层
请求的url：/order/order-cart
参数：无
业务逻辑：
从cookie中取商品列表展示到页面。
返回值：逻辑视图。
@Controller
public class OrderController {@Value("${TT_CART}")private String TT_CART;/*** 展示订单确认页面。* <p>Title: showOrderCart</p>* <p>Description: </p>* @return*/@RequestMapping("/order/order-cart")public String showOrderCart(HttpServletRequest request) {//取用户id//从cookie中取token，然后根据token查询用户信息。需要调用sso系统的服务。//根据用户id查询收货地址列表//从cookie中取商品列表List<TbItem> cartList = getCartList(request);//传递给页面request.setAttribute("cartList", cartList);//返回逻辑视图return "order-cart";}/*** 从cookie中取购物车列表* <p>Title: getCartList</p>* <p>Description: </p>* @param request* @return*/private List<TbItem> getCartList(HttpServletRequest request) {//取购物车列表String json = CookieUtils.getCookieValue(request, TT_CART, true);//判断json是否为nullif (StringUtils.isNotBlank(json)) {//把json转换成商品列表返回List<TbItem> list = JsonUtils.jsonToList(json, TbItem.class);return list;}return new ArrayList<>();}
}3.4. 用户身份认证
在展示订单确认页面之前，需要对用户身份进行认证，要求用户必须登录。
3.4.1. 功能分析
1、使用springmvc的拦截器实现。需要实现一个接口HandlerInterceptor接口。
2、业务逻辑
a) 从cookie中取token。
b) 没有token，需要跳转到登录页面。
c) 有token。调用sso系统的服务，根据token查询用户信息。
d) 如果查不到用户信息。用户登录已经过期。需要跳转到登录页面。
e) 查询到用户信息。放行。
3、在springmvc.xml中配置拦截器。
3.4.2. 拦截器实现
public class LoginInterceptor implements HandlerInterceptor {@Value("${TT_TOKEN}")private String TT_TOKEN;@Value("${SSO_LOGIN_URL}")private String SSO_LOGIN_URL;@Autowiredprivate UserService userService;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)throws Exception {//执行Handler之前执行此方法// a)从cookie中取token。String token = CookieUtils.getCookieValue(request, TT_TOKEN);if (StringUtils.isBlank(token)) {//取当前请求的urlString url = request.getRequestURL().toString();// b)没有token，需要跳转到登录页面。response.sendRedirect(SSO_LOGIN_URL + "?redirectUrl=" + url);//拦截return false;}// c)有token。调用sso系统的服务，根据token查询用户信息。TaotaoResult result = userService.getUserByToken(token);if (result.getStatus() != 200) {// d)如果查不到用户信息。用户登录已经过期。需要跳转到登录页面。//取当前请求的urlString url = request.getRequestURL().toString();// b)没有token，需要跳转到登录页面。response.sendRedirect(SSO_LOGIN_URL + "?redirectUrl=" + url);//拦截return false;}// e)查询到用户信息。放行。return true;}@Overridepublic void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,ModelAndView modelAndView) throws Exception {// 执行Handler之后返回ModelAndView之前}@Overridepublic void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)throws Exception {// 返回ModelAndView之后，执行。异常处理。}}3.4.3. 配置拦截器
3.4.4. 实现sso系统的回调
黑马淘淘商城第十二天 购物车实现、订单确认页面展示相关推荐
- 淘淘商城第77讲——实现商品详情页面展示
我相信大家通过上文的学习已经搭建好了商品详情页面展示工程,本文我将带领大家一起实现商品详情页面的展示. 首先我们来看一下商品详情页面的内容,可以看到商品一般属性在TbItem实体类中都是存在的,只是图 ...
- 淘宝获取购买到的商品订单详情PHP展示
API 返回值说明 API接口名称: buyer_order_detail-获取购买到的商品订单详情 请求参数: order_id=&onlystatus=0 参数说明: order_id:订 ...
- day68_淘淘商城项目_01_电商介绍 + 互联网术语 + SOA + 分布式 + 集群介绍 + 环境配置 + 框架搭建_匠心笔记
淘淘商城项目_01 1.电商行业的背景介绍--电子商务 1.1.11.11 1.2.电商行业技术特点 2.淘淘商城的系统架构 2.1.淘淘商城介绍 2.2.功能介绍 2.3.系统架构 2.3.1.传统 ...
- day82_淘淘商城项目_15_项目总结 + 项目中的问题_匠心笔记
项目总结 第一天 1.电商行业的背景,b2b.b2c.b2b2c.c2c.o2o2. 2.系统的架构.基于SOA的架构. 3.工程搭建.使用maven管理工程. 4.svn的使用. 第二天 1.ssm ...
- 淘淘商城简介——淘淘商城
电商简介 淘淘商城简介 功能模块 技术架构的对比 传统架构 分布式架构 技术选型 工程总览 数据库 服务层 交互 开发过程目录 部署 项目源码 电商简介 技术特点: 技术新 技术范围广 分布式 高并发 ...
- 一个淘淘商城项目送给你，愿你有一个灿烂的前程！
写在前面 今天是2020年6月23日,星期二,天气晴.2020年已过一半,回想一下,这真是一个多灾多难的年份啊!可生活依然要继续,活着的人依然要继续前行.这是没道理的事情. 好了,回到主题,说说写这篇 ...
- 淘淘商城第113讲——生成订单
本讲我们将一起学习下如何生成订单. 数据库表设计分析 订单表 我们先来看下tb_order表的结构,如下图所示. 可以看到: 从订单表的结构中还可以看到create_time.buyer_nick.s ...
- 淘淘商城——生成订单
本文我们将一起学习下如何生成订单. 数据库表分析 我们先来看下tb_order表,如下图所示. 可以看到: 主键order_id是字符串类型,不是自增长的,因此我们需要自己生成订单编号,我们平时使用京 ...
- 淘淘商城--生成订单
数据库表分析 我们先来看下tb_order表,如下图所示. 可以看到: 主键order_id是字符串类型,不是自增长的,因此我们需要自己生成订单编号,我们平时使用京东.天猫等购物网站,发现人家的 ...
最新文章
- ATS线上报告个别日志过大无法写入问题的解决方法
- 为TextMate扩展全屏功能
- 四则运算 - java实现（叶尚文， 张鸿）
- 使用SHA256证书进行微软数字签名代码签名
- linux常用命令笔记(持续更新)
- 微信小程序开发打开另一个小程序的实现方法
- Springboot 传递 List「Long」 IdList
- mysql整站源码安装_MySQL入门01-MySQL源码安装
- garch预测 python_数据科学方面的Python库，实用！
- flutter PageView上下滑动切换视图
- 效率 用div做表格和tr_表格也能用Word做？别不信，利用这些小技巧分分钟做出完美表格...
- Android高级开发之【RxJava】详解（附项目源码）
- 模拟ArrayList扩容
- mysql增删改处理
- 线上支付之----网关支付、银联代扣通道、快捷支付、银行卡支付等网上常见支付方式接口说明！！
- pscc2019滤镜抽出_ps抽出滤镜(Extractplus.8bf)下载_ps抽出滤镜(Extractplus.8bf)官方下载-太平洋下载中心...
- 郑州园博园“私房照”曝光，8月试运营对市民免费开放！这可是咱郑州人家门口的“苏州园林”！...
- H3C UniServer R6900 G3 服务器介绍
- 作为面试官准备提问的问题及其答案
- 中国未来可能面临的第四次失业浪潮