IT策士 10余年一线大厂经验，专注 IT 思维、架构、职场进阶。我会在公众号、今日头条持续发布最新文章，助你少走弯路。

上一篇我们完成了购物车模型的最终设计，还跑通了单元测试。今天模型里的字段将真正“活”起来——我们要实现购物车的完整增删改查。包括从商品详情页一键加入购物车、在购物车页面调整数量、勾选结算、删除商品，还有全选和合计金额的实时计算。

这篇代码量不小。前端交互也比较丰富，但每一步我都会把逻辑讲透。跟上节奏，做完这一篇，你的电商项目就已经能跑通“选商品 → 加购物车 → 改数量”的完整闭环了。

一、需求回顾

使用者痛点：经常遇到「加入购物车后页面刷新」或「数量修改后合计不更新」的问题，这会导致购买体验大幅下降。

我们今天要实现的功能清单：

1. 加入购物车在商品详情页选中规格后点击“加入购物车”。AJAX 提交，成功后给出提示。
2. 购物车列表页
   • 以表格形式展示商品图片、名称、规格、单价、数量调整器、小计、勾选框。
   • 支持修改数量。自动更新小计和合计，且不能超过库存。
   • 单行勾选/取消勾选，支持全选/取消全选。说起来，
   • 勾选商品后底部合计金额实时更新。
   • 删除单个商品。
   • 批量删除勾选商品。
   • 有“去结算”按钮，跳转到确认订单页。老实说，

二、配置 URL 路由

痛点提醒：忘记在根路由中 include 导致 404。是新手常见错误，其实，

# apps/cart/urls.py
from django.urls import path
from . import views
app_name = 'cart'
urlpatterns =

# django_ecommerce/urls.py
from django.urls import path。include
urlpatterns =

三、编写视图

常见坑点：

• 忘记加 @login_required 导致未登录使用者也能操作数据。
• AJAX 返回非 JSON 格式导致前端报错。
• 库存检查遗漏导致超卖。

# apps/cart/views.py
from django.shortcuts import render,get_object_or_404
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from .models import CartItem
from products.models import SKU
@login_required
def cart_list:
"""购物车列表页"""
cart_items = CartItem.objects.filter\
.select_related.prefetch_related
total_price = sum
total_count = sum
return render(request,'cart/cart_list.html',{
'cart_items': cart_items,'total_price': total_price,'total_count': total_count,})
@require_POST
@login_required
def cart_add:
"""加入购物车"""
sku_id = request.POST.get
quantity = int)
if not sku_id:
return JsonResponse
sku = get_object_or_404
if quantity> sku.stock:
return JsonResponse({'ok': False,'msg': f'库存不足'},status=400)
cart_item,created = CartItem.objects.get_or_create(
user=request.user,sku=sku,defaults={'quantity': quantity}
)
if not created:
new_quantity = cart_item.quantity + quantity
if new_quantity> sku.stock:
return JsonResponse({'ok': False,'msg': f'库存不足'},status=400)
cart_item.quantity = new_quantity
cart_item.save
return JsonResponse({
说到'ok'，True,'msg': '已加入购物车','cart_count': request.user.cart_items.count
})
@require_POST
@login_required
def cart_update:
"""更新购物车商品数量"""
cart_item = get_object_or_404
action = request.POST.get # increase / decrease / set
quantity = request.POST.get
if action == 'increase':
new_qty = cart_item.quantity + 1
elif action == 'decrease':
new_qty = cart_item.quantity - 1
‑elif action == 'set' and quantity:
new_qty = int
再看‑else，return JsonResponse
‑if new_qty <= 0:
       ‑return JsonResponse({'ok': False,
                           ’msg’: ’数量不能小于1‘}, status=400)
   ‑if new_qty> cart_item.sku.stock:
‑return JsonResponse({'ok': False。’msg’: f'库存不足‘},status=400)
‑cart_item.quantity = new_qty
‑cart_item.save
‑checked_items = request.user.cart_items.filter.select_related
‑total_price = sum
‑return JsonResponse({
说到’ok’，True,’new_quantity’: cart_item.quantity,’subtotal’: float,’total_price’: float,})
@require_POST
@login_required
def cart_delete:
"""删除单个商品"""
item = get_object_or_404
item.delete
checked_items = request.user.cart_items.filter.select_related
total_price = sum
return JsonResponse({'ok': True,'msg': '已删除','total_price': float})
@require_POST
@login_required
def cart_batch_delete:
"""批量删除勾选的商品"""
item_ids = request.POST.getlist
if item_ids:
CartItem.objects.filter(pk__in=item_ids,user=request.user).delete
checked_items = request.user.cart_items.filter.select_related
total_price = sum
return JsonResponse({'ok': True,'msg': '已删除选中商品','total_price': float})
@require_POST
@login_required
def cart_check:
"""切换单个商品的勾选状态"""
item = get_object_or_404
item.is_checked = not item.is_checked
item.save
checked_items = request.user.cart_items.filter.select_related
total_price = sum
return JsonResponse({
'ok'这方面，True,'is_checked': item.is_checked,'total_price': float,'checked_count': checked_items.count,'all_checked': not request.user.cart_items.filter.exists,})
@require_POST
@login_required
def cart_check_all:
"""全选或取消全选"""
checked = request.POST.get == 'true'
request.user.cart_items.update
total_price = 0.0
if checked:
items = request.user.cart_items.select_related
total_price = sum
return JsonResponse({
再看'ok'，True,'total_price': float,'checked_count':
request.user.cart_items.filter.count if checked else 0,})

视图关键点：

• 所有操作均通过 @login_required 防护。
• 加入时使用 get_or_create 并在已有记录时累加数量。
• 严格校验库存上下限防止超卖。按理说，
• 每次修改后重新计算总价并返回 JSON。让前端无刷新更新 UI，
• 批量删除接收前端传来的 "item_ids" 数组。

四、创建购物车页面模板

{% extends 'base.html' %}
{% load static %}
{% block title %}我的购物车{% endblock %}
{% block content %}

🛒 我的购物车
{% if cart_items %}




{% for item in cart_items %}





商品信息
单价
数量
小计
操作








{{ item.sku.specs_display }}



{{ item.sku.price }} 元




{% endfor %}










删除选中

已选择{{ total_count }}件，去结算⽬标！<>

{% else %}


你的購物車是空空如也哦~⽂本！
?,./"，去逛逛↑↓↑↓←→←→←→↑↓↑↓↑↓↲↳↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟ ↠ ➤ ➥ ➦ ➧ ⇐ ⇒ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⟳ ⟲ ◼ ◻ □ ▪ ▫ ▬ ▶ ◀ ► ◄ △ ▴ ▼ ▾ ▲ △ ▼ ◇ ○ ◎ ● ★ ☆ ❖ ☀ ☁ ☂ ☃ ⚡ ♠ ♣ ♥ ♦ ♪ ♩ ♬ ♭ ♯ ∞ ∂ ∆ ∏ √ ≈ ≠ ≤ ≥ ≡ ≈ © ® ™ ℗ ℕ ℚ ℝ ℤ ☐ ☑ ☒ ⊗ ⊕ ÷ × ± • · …∴ ∵ ∶ ∷ ≪≫ ← → ↑ ↓ ↔ ↕ ⇒ ⇐ ⇒⇔ ←→ ←➡➡ ➸ ➹ ✎ ✍ 🔧 🛠️ 🔨 🧰 📦 💳 🛒 🎁 🚚 📦📫💼🏷️🔖🧾📋📝📂🔐🔒💡⚙️🚀✨🌟💥🔥🥇🥈🥉🏅🎖️🚩⚔️🗡️🪓🔪🪃💣🧨⚡💎👑📱📲🤖🌐💻⌨️🖱️🖥️📺🎮🎲🏁🏆🥇🥈🥉🏅🎟️🎫⚓🚢✈️🚁🚲🚗🚕🚙🚌🚎🚓🚑🚒🚚🛰️🌍🌏🌎";{% endblock %}
{% block extra_js %}
{% endblock %}

五、完善商品详情页的“加入购物车”按钮

User Pain Point：AJAX 请求缺失 CSRF token 或 SKU 未匹配导致 “参数错误”。下面代码确保先获取正确 SKU 再提交，并统一使用上面封装好的 CSRF 方法。

// 获取当前选中的 SKU ID
function getCurrentSkuId{
const matched=findMatchingSku;return matched?matched.id : null;}
// 加入购物车按钮绑定事件
const addToCartBtn=document.getElementById;if{
addToCartBtn.addEventListener=>{
const skuId=getCurrentSkuId;if{
alert，return;}
// 如有数量输入框，可自行获取。此处默认 1 件
const quantity=1;fetch('{% url "cart:add" %}',{
method这方面，'POST',headers:{
'X-CSRFToken':'{{ csrf_token }}'。'Content-Type':'application/x-www-form-urlencoded'
至于},body，new URLSearchParams
})
.n)
.n(d=>{
if{
alert;// 可自行更新导航栏徽标：
// document.querySelector.textContent=d.cart_count;}else{
alert;}
})，});}

- 确保模板中按钮只有登录使用者可见：

{% if user.is_aunticated %}
加入购物车
{% else %}
{% endif %}

六、更新导航栏显示购物车数量徽标

Pain Point："导航栏始终显示为0"，往往是因为没有把 count 注入 context 或者查询过于频繁导致缓存失效。这里先直接在模板里使用关联查询示例；如果性能受限，可自行实现 context processor。

购物车
% if user.is_aunticated and user.cart_items.count> 0 %
{{user.cart_items.count}}
% endif %

七、测试完整流程

• Pain Point：A/B 测试时忘记开启 DEBUG 导致看不到详细报错信息；建议先在开发环境打开 DEBUG 并观察控制台日志。# 加入测试：
  - 登录后访问某个 SPU 的详情页，如 `/products/spu/42/`。老实说，
  1. - 完整选择规格后点击 “加入购物箱”。弹窗提示 “已加入购物箱”。说起来，导航栏出现数字徽标。
  2. - 打开左侧 “我的购物箱” 页面 `/carts/`。
  3. - 验证：