三、展示商品页面简单购物车

需求：用户鼠标悬停在商品页面右上角购物车标签上，以下拉框形式展示当前购物车数据。

3.1. 简单购物车数据接口设计和定义

1.请求方式

选项	方案
请求方法	GET
请求地址	/carts/simple/

 #  展示商品右上角购物车url(r'^carts/simple/$', views.CartsSimpleView.as_view()),

2.请求参数：

无

3.响应结果：JSON

字段	说明
code	状态码
errmsg	错误信息
cart_skus[ ]	简单购物车SKU列表
id	购物车SKU编号
name	购物车SKU名称
count	购物车SKU数量
default_image_url	购物车SKU图片

{"code":"0","errmsg":"OK","cart_skus":[{"id":1,"name":"Apple MacBook Pro 13.3英寸笔记本 银色","count":1,"default_image_url":"http://image.meiduo.site:8888/group1/M00/00/02/CtM3BVrPB4GAWkTlAAGuN6wB9fU4220429"},......]
}

4.后端接口定义

class CartsSimpleView(View):"""商品页面右上角购物车"""def get(self, request):# 判断用户是否登录user = request.userif user.is_authenticated:# 用户已登录，查询Redis购物车passelse:# 用户未登录，查询cookie购物车pass# 构造简单购物车JSON数据pass

3.2. 简单购物车数据后端逻辑实现

1.查询Redis购物车

class CartsSimpleView(View):"""商品页面右上角购物车"""def get(self, request):# 判断用户是否登录user = request.userif user.is_authenticated:# 用户已登录，查询Redis购物车redis_conn = get_redis_connection('carts')redis_cart = redis_conn.hgetall('carts_%s' % user.id)cart_selected = redis_conn.smembers('selected_%s' % user.id)# 将redis中的两个数据统一格式，跟cookie中的格式一致，方便统一查询cart_dict = {}for sku_id, count in redis_cart.items():cart_dict[int(sku_id)] = {'count': int(count),'selected': sku_id in cart_selected}else:# 用户未登录，查询cookie购物车pass# 构造简单购物车JSON数据pass

2.查询Cookie购物车

class CartsSimpleView(View):"""商品页面右上角购物车"""def get(self, request):# 判断用户是否登录user = request.userif user.is_authenticated:# 用户已登录，查询Redis购物车......else:# 用户未登录，查询cookie购物车cart_str = request.COOKIES.get('carts')if cart_str:cart_dict = pickle.loads(base64.b64decode(cart_str.encode()))else:cart_dict = {}

3.构造简单购物车JSON数据

class CartsSimpleView(View):"""商品页面右上角购物车"""def get(self, request):# 判断用户是否登录user = request.userif user.is_authenticated:# 用户已登录，查询Redis购物车......else:# 用户未登录，查询cookie购物车......# 构造简单购物车JSON数据cart_skus = []sku_ids = cart_dict.keys()skus = models.SKU.objects.filter(id__in=sku_ids)for sku in skus:cart_skus.append({'id':sku.id,'name':sku.name,'count':cart_dict.get(sku.id).get('count'),'default_image_url': sku.default_image.url})# 响应json列表数据return http.JsonResponse({'code':RETCODE.OK, 'errmsg':'OK', 'cart_skus':cart_skus})

3.3. 展示商品页面简单购物车

1.商品页面发送Ajax请求

index.js、list.js、detail.js

get_carts(){let url = '/carts/simple/';axios.get(url, {responseType: 'json',}).then(response => {this.carts = response.data.cart_skus;this.cart_total_count = 0;for(let i=0;i<this.carts.length;i++){if (this.carts[i].name.length>25){this.carts[i].name = this.carts[i].name.substring(0, 25) + '...';}this.cart_total_count += this.carts[i].count;}}).catch(error => {console.log(error.response);})
},

2.商品页面渲染简单购物车数据

index.html、list.html、detail.html

<div @mouseenter="get_carts" class="guest_cart fr" v-cloak><a href="{{ url('carts:info') }}" class="cart_name fl">我的购物车</a><div class="goods_count fl" id="show_count">[[ cart_total_count ]]</div><ul class="cart_goods_show"><li v-for="sku in carts"><img :src="sku.default_image_url" alt="商品图片"><h4>[[ sku.name ]]</h4><div>[[ sku.count ]]</div></li></ul>
</div>

美多商城之购物车(展示商品页面简单购物车)相关推荐

阿语python美多商城-商品-购物车管理之第7.3节展示商品页面简单购物车
展示商品页面简单购物车需求:用户鼠标悬停在商品页面右上角购物车标签上,以下拉框形式展示当前购物车数据. 1. 简单购物车数据接口设计和定义 1.请求方式选项方案请求方法 GET 请求地址 /c ...
美多商城之用户注册(展示用户注册页面)
一.展示用户注册页面 1.创建用户模块子应用 1.1. 创建用户模块子应用 1.准备apps包,用于管理所有应用 2.在apps包下创建应用users $ cd ~/projects/meiduo_p ...
微信小程序|开发实战篇之十一---商品页面和购物车页面
products页面和cart页面 1.商品页面解构 2.购物车页面解构 1.商品页面解构修改数量这里使用picker组件: 加入购物车动画,使用css动画中的贝塞尔曲线作为运动速率,从点击起始位置 ...
android长按加入购物车,Android Studio实现简单购物车功能
本文实例为大家分享了Android Studio实现简单购物车的具体代码,供大家参考,具体内容如下 MainActivity的布局文件 xmlns:app="http://schemas.a ...
使用HttpClient和Jsoup爬取京东商城关键字搜索的商品页面
使用HttpClient可以创建浏览器对象,然后对页面数据进行抓取,另外再使用Jsoup库解析Html页面.因为Jsoup和JQuery一样有选择器获取元素的方式,所以抓取页面数据变得非常方便. 例如 ...
移动电子商务网站可用性-商品页面和购物车
原文链接: http://www.getelastic.com/mobile-commerce-usability-product-pages-and-cart-summary/ This is th ...
Python项目实战之欢迎来到美多商城！学习目录导航
1. 项目准备 1.1. 项目介绍 1.1.1. 项目需求分析 1.1.2. 项目架构设计 1.2. 工程创建和配置 1.2.1. 创建工程 1.2.2. 配置开发环境 1.2.3. 配置Jinja2 ...
模拟商城添加、查看商品和添加商品到购物车、查看购物车
//欢迎来到(模拟)京东商城代码编辑 //商城接口类:定义查询和添加商品的方法(修改和删除暂不写) package shopping.dao;import shopping.entity.Produc ...
小程序学习-购物车及商品清单功能实现
今天试着自己写了1页商品清单及购物车功能也,虽然还需要美观,但是基本功能应该算是实现了: 商品选择后添加到购物车,再次选择就将数字+1,同时显示该商品已添加: 点击购物车图标弹出自制弹出遮罩层(没有自 ...

美多商城之购物车(展示商品页面简单购物车)

三、展示商品页面简单购物车

3.1. 简单购物车数据接口设计和定义

3.2. 简单购物车数据后端逻辑实现

3.3. 展示商品页面简单购物车

美多商城之购物车(展示商品页面简单购物车)相关推荐

最新文章

热门文章