Vue + drf 打造前后端分离的生鲜电商平台 —— 周报 6

最新推荐文章于 2024-03-29 16:46:20 发布

MartinHub

最新推荐文章于 2024-03-29 16:46:20 发布

阅读量633

点赞数

分类专栏： Django项目笔记

本文链接：https://blog.youkuaiyun.com/weixin_40824913/article/details/86522362

版权

Django项目笔记专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了使用Django REST framework和Vue.js进行前后端分离开发的过程，包括商品详情页、热卖商品接口、用户收藏功能的实现，以及权限验证、错误日志监控等关键环节。

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

		                    ——————  学习周报 2019.2.24

在这里插入图片描述

掌握的技术：

Vue + Django REST framework 前后端分离技术
restful api 开发流程
Django REST framework 的功能实现和核心源码分析
Sentry 完成线上系统的错误日志的监控和警告
第三方登录和支付宝支付的集成
本地调试远程服务器代码技巧

完成情况：

一、课程计划

商品详情页功能

viewsets实现商品详情页接口
热卖商品接口实现
用户收藏接口实现
drf 的权限验证
用户收藏功能和vue联调

二、拓展知识计划

高级模板技术
Django模型的高级用法
通用视图

笔记：

1、viewsets实现商品详情页接口

仅仅需要在apps / goods / views.py 下对类class GoodsListViewset(mixins.ListModelMixin， viewsets.GenericViewSet):进行操作，改为class GoodsListViewset(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):即可实现商品详情页。
在 goods / Serializer中嵌套 Serializer :

class GoodsImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = GoodsImage
        fields = ("image", )


class GoodsSerializer(serializers.ModelSerializer):
    category = CategorySerializer()
    images = GoodsImageSerializer(many=True)
    
    class Meta:
        model = Goods
        fields = "__all__"

image、价格之类的信息全部显示：

2、热卖商品接口实现

在商品的过滤类中增加一个"is_hot"即可实现。

3、用户收藏接口实现

在apps / user_operation / views.py 下新建class UserFavViewset(mixins.CreateModelMixin, mixins.DestroyModelMixin, viewsets.GenericViewSet):

class UserFavViewset(mixins.CreateModelMixin, mixins.DestroyModelMixin, viewsets.GenericViewSet):
    """
用户收藏功能
    """
    queryset = UserFav.objects.all()
    serializer_class = UserFavSerializer

获取收藏列表：mixins.ListModelMixin
新建 Serializer.py :

class UserFavSerializer(serializers.ModelSerializer):
    user = serializers.HiddenField(
        default=serializers.CurrentUserDefault()  # 获取到当前用户
    )

    class Meta:
        model = UserFav
        validators = [
            UniqueTogetherValidator(
                queryset=UserFav.objects.all(),
                fields=('user', 'goods'),
                message="已经收藏"
            )
        ]

        fields = ("user", "goods", "id")

配置url：router.register(r'userfavs', UserFavViewset, base_name="userfavs")
设置当前用户进行收藏：https://www.django-rest-framework.org/api-guide/validators/#advanced-field-defaults
后端测试：
应注意收藏的逻辑，收藏一次后不能再重复进行收藏。
联合唯一：
设置后，重复收藏时显示“已经收藏”：

4、drf 的权限验证

关于用户操作数据的权限很重要，为了数据安全，应该在后端增加权限的验证。
“权限判断”文档：https://www.django-rest-framework.org/api-guide/permissions/
在util下新建permissions.py，自定义权限验证：

# -*- coding: utf-8 -*-
from rest_framework import permissions


class IsOwnerOrReadOnly(permissions.BasePermission):
    """
    Object-level permission to only allow owners of an object to edit it.
    Assumes the model instance has an `owner` attribute.
    """

    def has_object_permission(self, request, view, obj):
        # Read permissions are allowed to any request,
        # so we'll always allow GET, HEAD or OPTIONS requests.
        if request.method in permissions.SAFE_METHODS:
            return True

        # Instance must have an attribute named `owner`.
        return obj.user == request.user

对apps / user_operation / views.py 下class UserFavViewset(mixins.CreateModelMixin, mixins.DestroyModelMixin, viewsets.GenericViewSet):进行修改，增加权限验证：

class UserFavViewset(mixins.CreateModelMixin,  mixins.ListModelMixin, mixins.DestroyModelMixin, viewsets.GenericViewSet):
    """
用户收藏功能
    """
    permission_classes = (IsAuthenticated, IsOwnerOrReadOnly)
    serializer_class = UserFavSerializer
    authentication_classes = (JSONWebTokenAuthentication, SessionAuthentication)

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

5、用户收藏功能和vue联调

结合前端，对apps / user_operation / views.py 下的class UserFavViewset(mixins.CreateModelMixin, mixins.DestroyModelMixin, viewsets.GenericViewSet):进行修改，设置lookup_field = "goods_id" ；设置根据goods_id进行导入。
前端页面点击“收藏”进行测试：
后台数据库信息：