Django 前後端分離實戰項目 生鮮超市（十二）之購物車功能

購物車功能

前言

所有vue接口全部在src/api/api.js檔案下

代碼已上傳至github：https://github.com/kalipoison/fresh-market

此項目僅學習用途

要求

Package Version

certifi 2020.4.5.1

chardet 3.0.4

coreapi 2.3.1

coreschema 0.0.4

Django 1.11.3

django-cors-headers 2.1.0

django-crispy-forms 1.6.1

django-filter 1.0.4

django-formtools 2.0

django-guardian 1.4.9

django-reversion 2.0.9

djangorestframework 3.6.3

djangorestframework-jwt 1.11.0

future 0.16.0

httplib2 0.9.2

idna 2.9

itypes 1.2.0

Jinja2 2.11.2

Markdown 2.6.8

MarkupSafe 1.1.1

mysqlclient 1.3.10

olefile 0.46

Pillow 4.2.1

pip 20.0.2

PyJWT 1.7.1

pytz 2019.3

requests 2.23.0

setuptools 46.1.3

six 1.10.0

uritemplate 3.0.1

urllib3 1.25.9

wheel 0.34.2

XlsxWriter 0.9.8

xlwt 1.2.0

流程

在trade檔案夾下建立serializers.py代碼如下：

serializers.py

from rest_framework import serializers

from goods.models import Goods
from .models import ShoppingCart
from goods.serializers import GoodsSerializer

class ShopCartDetailSerializer(serializers.ModelSerializer):
    goods = GoodsSerializer(many=False, read_only=True)
    class Meta:
        model = ShoppingCart
        fields = ("goods", "nums")


class ShopCartSerializer(serializers.Serializer):
    user = serializers.HiddenField(
        default=serializers.CurrentUserDefault()
    )
    nums = serializers.IntegerField(required=True, label="數量",min_value=1,
                                    error_messages={
                                        "min_value":"商品數量不能小于一",
                                        "required": "請選擇購買數量"
                                    })
    goods = serializers.PrimaryKeyRelatedField(required=True, queryset=Goods.objects.all())

    def create(self, validated_data):
        user = self.context["request"].user
        nums = validated_data["nums"]
        goods = validated_data["goods"]

        existed = ShoppingCart.objects.filter(user=user, goods=goods)

        if existed:
            existed = existed[0]
            existed.nums += nums
            existed.save()
        else:
            existed = ShoppingCart.objects.create(**validated_data)

        return existed

    def update(self, instance, validated_data):
        #修改商品數量
        instance.nums = validated_data["nums"]
        instance.save()
        return instance


           

在trade檔案夾下views.py代碼如下：

views.py

from rest_framework import viewsets
from rest_framework.permissions import IsAuthenticated
from rest_framework_jwt.authentication import JSONWebTokenAuthentication
from rest_framework.authentication import SessionAuthentication


from .serializers import ShopCartSerializer,ShopCartDetailSerializer

from utils.permissions import IsOwnerOrReadOnly

from .models import ShoppingCart



class ShoppingCartViewset(viewsets.ModelViewSet):
    """
    購物車功能
    list:
        擷取購物車詳情
    create：
        加入購物車
    delete：
        删除購物記錄
    """
    permission_classes = (IsAuthenticated, IsOwnerOrReadOnly)
    authentication_classes = (JSONWebTokenAuthentication, SessionAuthentication)
    serializer_class = ShopCartSerializer
    lookup_field = "goods_id"

    def get_serializer_class(self):
        if self.action == 'list':
            return ShopCartDetailSerializer
        else:
            return ShopCartSerializer

    def get_queryset(self):
        return ShoppingCart.objects.filter(user=self.request.user)


           

url.py

from django.conf.urls import url,include
# from django.contrib import admin
import xadmin
from Mxshop.settings import MEDIA_ROOT
from django.views.static import serve
from rest_framework.documentation import include_docs_urls
from rest_framework.routers import DefaultRouter
from rest_framework.authtoken import views
from rest_framework_jwt.views import obtain_jwt_token

from goods.views import GoodsListViewSet,CategoryViewset,HotSearchsViewset
from users.views import SmsCodeViewset,UserViewset
from user_operation.views import UserFavViewset, LeavingMessageViewset, AddressViewset
from trade.views import ShoppingCartViewset

router = DefaultRouter()

#配置goods的url
router.register(r'goods', GoodsListViewSet, base_name="goods")

#配置category的url
router.register(r'categorys', CategoryViewset, base_name="categorys")

router.register(r'codes', SmsCodeViewset, base_name="codes")

router.register(r'hotsearchs', HotSearchsViewset, base_name="hotsearchs")

router.register(r'users', UserViewset, base_name="users")

#收藏
router.register(r'userfavs', UserFavViewset, base_name="userfavs")

#留言
router.register(r'messages', LeavingMessageViewset, base_name="messages")

#收貨位址
router.register(r'address', AddressViewset, base_name="address")

#購物車url
router.register(r'shopcarts', ShoppingCartViewset, base_name="shopcarts")

goods_list = GoodsListViewSet.as_view({
    'get': 'list',
})

urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),
    url(r'^media/(?P<path>.*)$', serve, {"document_root": MEDIA_ROOT}),

    url(r'^', include(router.urls)),

    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),

    url(r'docs/',include_docs_urls(title='GOHB生鮮')),

    # drf自帶的token認證模式
    url(r'^api-token-auth/', views.obtain_auth_token),

    # jwt的認證接口
    url(r'^login/', obtain_jwt_token),
]
           

修改api.js檔案下購物車相關操作ip

在頁面選擇加入購物車，成功操作

檢視購物車資料，購物車内商品正常顯示，并能實作增删等操作