二、购物车管理
2.1 添加购物车
提示:在商品详情页添加购物车使用局部刷新的效果。
新建carts子应用
2.1.1. 添加购物车接口设计和定义
1.请求方式
选项 | 方案 |
---|---|
请求方法 | POST |
请求地址 | /carts/ |
总路由:
# carts
url(r'^', include('carts.urls', namespace='carts')),
子路由:
from django.conf.urls import url
from . import views
urlpatterns = [
# 购物车管理
url(r'^carts/$', views.CartsView.as_view(), name='info'),
]
2.请求参数:JSON 【因为前端发送的ajax请求】
参数名 | 类型 | 是否必传 | 说明 |
---|---|---|---|
sku_id | int | 是 | 商品SKU编号 |
count | int | 是 | 商品数量 |
selected | bool | 否 | 是否勾选 |
3.响应结果:JSON
字段 | 说明 |
---|---|
code | 状态码 |
errmsg | 错误信息 |
4.后端接口定义
from django.shortcuts import render
from django.views import View
# Create your views here.
class CartsView(View):
"""购物车管理"""
def post(self, request):
"""添加购物车"""
# 接收和校验参数
# 判断用户是否登录
user = request.user
if user.is_authenticated:
# 用户已经登录,操作redis购物车
pass
else:
# 用户未登录,操作cookie购物车
pass
2.1.2. 添加购物车后端逻辑实现
1.接收和校验参数
class CartsView(View):
"""购物车管理"""
def post(self, request):
"""添加购物车"""
# 接收参数
json_dict = json.loads(request.body.decode())
sku_id = json_dict.get('sku_id')
count = json_dict.get('count')
selected = json_dict.get('selected', True)
# 判断参数是否齐全
if not all([sku_id, count]):
return http.HttpResponseForbidden('缺少必传参数')
# 判断sku_id是否存在
try:
models.SKU.objects.get(id=sku_id)
except models.SKU.DoesNotExist:
return http.HttpResponseForbidden('商品不存在')
# 判断count是否为数字
try:
count = int(count)
except Exception:
return http.HttpResponseForbidden('参数count有误')
# 判断selected是否为bool值
if selected:
if not isinstance(selected, bool):
return http.HttpResponseForbidden('参数selected有误')
# 判断用户是否登录
user = request.user
if user.is_authenticated:
# 用户已登录,操作redis购物车
pass
else:
# 用户未登录,操作cookie购物车
pass
2.添加购物车到Redis
from django_redis import get_redis_connection
from meiduo_mall.utils.response_code import RETCODE
class CartsView(View):
"""购物车管理"""
def post(self, request):
"""添加购物车"""
# 接收和校验参数
......
# 判断用户是否登录
user = request.user
if user.is_authenticated:
# 用户已登录,操作redis购物车
redis_conn = get_redis_connection('carts')
pl = redis_conn.pipeline()
# 新增购物车数据
pl.hincrby('carts_%s' % user.id, sku_id, count)
# 新增选中的状态
if selected:
pl.sadd('selected_%s' % user.id, sku_id)
# 执行管道
pl.execute()
# 响应结果
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '添加购物车成功'})
else:
# 用户未登录,操作cookie购物车
pass
3.添加购物车到cookie
import pickle
import base64
from meiduo_mall.utils import constants
class CartsView(View):
"""购物车管理"""
def post(self, request):
"""添加购物车"""
# 接收和校验参数
......
# 判断用户是否登录
user = request.user
if user.is_authenticated:
# 用户已登录,操作redis购物车
......
else:
# 用户未登录,操作cookie购物车
cart_str = request.COOKIES.get('carts')
# 如果用户操作过cookie购物车
if cart_str:
# 将cart_str转成bytes,再将bytes转成base64的bytes,最后将bytes转字典
cart_dict = pickle.loads(base64.b64decode(cart_str.encode()))
else: # 用户从没有操作过cookie购物车
cart_dict = {}
# 判断要加入购物车的商品是否已经在购物车中,如有相同商品,累加求和,反之,直接赋值
if sku_id in cart_dict:
# 累加求和
origin_count = cart_dict[sku_id]['count']
count += origin_count
cart_dict[sku_id] = {
'count': count,
'selected': selected
}
# 将字典转成bytes,再将bytes转成base64的bytes,最后将bytes转字符串
cookie_cart_str = base64.b64encode(pickle.dumps(cart_dict)).decode()
# 创建响应对象
response = http.JsonResponse({'code': RETCODE.OK, 'errmsg': '添加购物车成功'})
# 响应结果并将购物车数据写入到cookie
response.set_cookie('carts', cookie_cart_str, max_age=constants.CARTS_COOKIE_EXPIRES)
return response
2.2 展示购物车
2.2.1. 展示购物车接口设计和定义
1.请求方式
选项 | 方案 |
---|---|
请求方法 | GET |
请求地址 | /carts/ |
2.请求参数:
无
3.响应结果:HTML
cart.html
4.后端接口定义
class CartsView(View):
"""购物车管理"""
def get(self, request):
"""展示购物车"""
user = request.user
if user.is_authenticated:
# 用户已登录,查询redis购物车
pass
else:
# 用户未登录,查询cookies购物车
pass
2.2.2. 展示购物车后端逻辑实现
1.查询Redis购物车
class CartsView(View):
"""购物车管理"""
def get(self, request):
"""展示购物车"""
user = request.user
if user.is_authenticated:
# 用户已登录,查询redis购物车
redis_conn = get_redis_connection('carts')
# 获取redis中的购物车数据
redis_cart = redis_conn.hgetall('carts_%s' % user.id)
# 获取redis中的选中状态
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:
# 用户未登录,查询cookies购物车
pass
2.查询cookie购物车
class CartsView(View):
"""购物车管理"""
def get(self, request):
"""展示购物车"""
user = request.user
if user.is_authenticated:
# 用户已登录,查询redis购物车
......
else:
# 用户未登录,查询cookies购物车
cart_str = request.COOKIES.get('carts')
if cart_str:
# 将cart_str转成bytes,再将bytes转成base64的bytes,最后将bytes转字典
cart_dict = pickle.loads(base64.b64decode(cart_str.encode()))
else:
cart_dict = {}
3.查询购物车SKU信息
class CartsView(View):
"""购物车管理"""
def get(self, request):
"""展示购物车"""
user = request.user
if user.is_authenticated:
# 用户已登录,查询redis购物车
......
else:
# 用户未登录,查询cookies购物车
......
# 构造购物车渲染数据
sku_ids = cart_dict.keys()
skus = models.SKU.objects.filter(id__in=sku_ids)
cart_skus = []
for sku in skus:
cart_skus.append({
'id':sku.id,
'name':sku.name,
'count': cart_dict.get(sku.id).get('count'),
'selected': str(cart_dict.get(sku.id).get('selected')), # 将True,转'True',方便json解析
'default_image_url':sku.default_image.url,
'price':str(sku.price), # 从Decimal('10.2')中取出'10.2',方便json解析
'amount':str(sku.price * cart_dict.get(sku.id).get('count')),
})
context = {
'cart_skus':cart_skus,
}
# 渲染购物车页面
return render(request, 'cart.html', context)
4.渲染购物车信息
cart.html
<div class="total_count">全部商品<em>[[ total_count ]]</em>件</div>
<ul class="cart_list_th clearfix">
<li class="col01">商品名称</li>
<li class="col03">商品价格</li>
<li class="col04">数量</li>
<li class="col05">小计</li>
<li class="col06">操作</li>
</ul>
<ul class="cart_list_td clearfix" v-for="(cart_sku,index) in carts" v-cloak>
<li class="col01"><input type="checkbox" name="" v-model="cart_sku.selected" @change="update_selected(index)"></li>
<li class="col02"><img :src="cart_sku.default_image_url"></li>
<li class="col03">[[ cart_sku.name ]]</li>
<li class="col05">[[ cart_sku.price ]]元</li>
<li class="col06">
<div class="num_add">
<a @click="on_minus(index)" class="minus fl">-</a>
<input v-model="cart_sku.count" @blur="on_input(index)" type="text" class="num_show fl">
<a @click="on_add(index)" class="add fl">+</a>
</div>
</li>
<li class="col07">[[ cart_sku.amount ]]元</li>
<li class="col08"><a @click="on_delete(index)">删除</a></li>
</ul>
<ul class="settlements" v-cloak>
<li class="col01"><input type="checkbox" name="" @change="on_selected_all" v-model="selected_all"></li>
<li class="col02">全选</li>
<li class="col03">合计(不含运费):<span>¥</span><em>[[ total_selected_amount ]]</em><br>共计<b>[[ total_selected_count ]]</b>件商品</li>
<li class="col04"><a href="place_order.html">去结算</a></li>
</ul>