小米商城 购物车

该博客详细介绍了如何在Python的Django框架下实现购物车功能,包括路由配置、购物车视图的创建,以及前端操作购物车的接口,如添加商品、加载购物车数据、更新和删除商品。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

路由

from django.urls import path
from carts.views import *

urlpatterns = [
    # 加入购物车
    path("user/cart/", UserCartAPIView.as_view())
]

购物车视图

import redis
from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from collects.utils import check_login
from goods.models import Goods


# Create your views here.

# 自定义函数,组织购物车商品字典
def org_good_json(cart_key, good_id, num, check=False):
    """
    :param cart_key:购物车id  如cart_1,cart_2,...
    :param good_id: 购物车中商品id, int
    :param num: 当前商品加购的数量,int
    :param check: 当前商品的勾选状态  默认为 False
    :return: 商品字典列表 如[{},{},{}...]
    """
    # 根据商品id 查询商品对象
    try:
        good = Goods.objects.get(id=good_id)

    except:
        return {}

    return {
        "id": cart_key,
        "productID": good.id,
        "productName": good.sku_name,
        "productImg": good.img,
        "price": good.selling_price,
        "num": num,  # 该商品 在当前购物车中的数量
        "maxNum": good.stock,  # 限购数量
        "check": check,  # 购物车中该商品是否被勾选
    }


# 购物车的视图
class UserCartAPIView(APIView):
    # 添加购物车
    @check_login
    def post(self, request):
        # 1,接受前端数据
        good_id = request.data.get("productID")
        uid = request.uid
        # 2.根据商品id 查询商品对象
        good = Goods.objects.filter(id=good_id).first()
        if not good:
            return Response({"code": 400, "msg": "加购的商品不存在"})
        # 3.判断商品的库存
        conn = redis.Redis(host="localhost", port=6379, password="123456")
        # 构造用户的key
        cart_key = "cart_%s" % uid
        cart_selected_key = "cart_selected_%s" % uid
        if good.stock > 0:
            # 继续加够
            # 是否第一次加购
            num = conn.hget(cart_key, good_id)
            if num:
                # 不是第一次加购
                num = int(num.decode()) + 1
                if num <= good.stock:
                    # 可以正常加购
                    conn.hset(cart_key, good_id, num)
                    # 设置勾选状态
                    conn.sadd(cart_selected_key, good_id)
                    return Response({"code": 201, "msg": "该商品已经在购物车,数量+1"})
                else:
                    # 不可以加购
                    return Response({"code": 202, "msg": "加购达到限购数量!"})
            else:
                # 第一次加购
                conn.hset(cart_key, good_id, 1)
                conn.sadd(cart_selected_key, good_id)
                return Response({
                    "code": 200,
                    "msg": "新加入购物车成功",
                    "shoppingCartData": {
                        "id": cart_key,
                        "productID": good.id,
              
### 小米商城购物车 Vue.js 开发教程 #### 使用 Vue.js 构建小米商城购物车的核心概念 Vue.js 是一种流行的前端框架,其核心理念是组件化开发、数据绑定以及响应式编程。在构建小米商城购物车时,可以通过 Vue 的这些特性来管理商品列表、数量变化以及总价计算等功能。 为了更好地管理和维护状态,通常会引入 Vuex 来集中存储和处理购物车中的全局状态[^2]。以下是具体的实现方法: --- #### 1. 创建 Vuex Store 并定义模块 通过 Vuex 定义一个 `shoppingCart` 模块,该模块负责管理购物车的状态逻辑。以下是一个简单的 `store/index.js` 文件示例: ```javascript import Vue from 'vue'; import Vuex from 'vuex'; import shoppingCart from './modules/shoppingCart'; Vue.use(Vuex); export default new Vuex.Store({ strict: true, modules: { shoppingCart } }); ``` 此代码片段展示了如何初始化 Vuex,并加载名为 `shoppingCart` 的模块。 --- #### 2. 设计 Shopping Cart Module 在 `./modules/shoppingCart.js` 中设计具体的功能逻辑。例如,可以定义如下内容: - **State**: 存储当前购物车的商品及其属性。 - **Mutations**: 提供同步的方法更新 State 数据。 - **Actions**: 处理异步操作并调用 Mutations 更新 State。 - **Getters**: 计算派生的数据(如总价格)。 下面是一个完整的 `shoppingCart.js` 示例: ```javascript const state = { cartItems: [] }; const mutations = { ADD_TO_CART(state, item) { const existingItem = state.cartItems.find(i => i.id === item.id); if (existingItem) { existingItem.quantity += item.quantity; } else { state.cartItems.push(item); } }, REMOVE_FROM_CART(state, itemId) { state.cartItems = state.cartItems.filter(item => item.id !== itemId); } }; const actions = { addToCart({ commit }, newItem) { commit('ADD_TO_CART', newItem); }, removeFromCart({ commit }, id) { commit('REMOVE_FROM_CART', id); } }; const getters = { totalAmount: state => { return state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2); } }; export default { namespaced: true, state, mutations, actions, getters }; ``` 上述代码实现了向购物车添加商品、移除商品以及计算总价的功能。 --- #### 3. 组件间通信与展示 在实际应用中,需要将购物车功能嵌入到 Vue 组件中。例如,在产品详情页提供“加入购物车”的按钮;在购物车页面显示已选商品清单及总计金额。 ##### 加入购物车的按钮事件 可以在产品的详情页触发 `addToCart` 动作: ```html <template> <div> <button @click="handleAddToCart">加入购物车</button> </div> </template> <script> export default { methods: { handleAddToCart() { this.$store.dispatch('shoppingCart/addToCart', { id: 1, name: '小米手机', price: 2999, quantity: 1 }); } } }; </script> ``` 此处利用 `$store.dispatch` 方法调用了 Vuex 中的动作函数。 --- #### 4. 展示购物车内容 在购物车页面上动态渲染商品信息,并允许用户调整数量或删除商品: ```html <template> <div> <h2>我的购物车</h2> <ul v-if="$store.state.shoppingCart.cartItems.length"> <li v-for="(item, index) in $store.getters['shoppingCart/cartItems']" :key="index"> {{ item.name }} - 单价:{{ item.price }}元 × 数量:{{ item.quantity }} <button @click="removeFromCart(item.id)">移除</button> </li> </ul> <p>合计:{{ $store.getters['shoppingCart/totalAmount'] }}元</p> </div> </template> <script> export default { computed: {}, methods: { removeFromCart(id) { this.$store.dispatch('shoppingCart/removeFromCart', id); } } }; </script> ``` 这段代码展示了如何读取 Vuex 中的 Getter 和 State 数据,并将其呈现给用户。 --- #### 工具支持与扩展 如果希望进一步提升用户体验,还可以集成 Element UI 或其他类似的 UI 库[^3]。例如,使用表格组件展示购物车内的商品明细,或者借助弹窗提示成功加入购物车的消息。 对于移动端场景,则可以选择 uni-app 进行跨平台开发[^4]。它基于 Vue 技术栈,能够轻松适配小程序环境下的购物车需求。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值