Django REST framework+Vue 打造生鲜超市（五）

六、商品类别数据展示

6.1. 商品类别数据接口

（1）商品分类有两个接口：

一种是全部分类：一级二级三级

一种是某一类的分类以及商品详细信息：

开始写商品分类的接口

（2）序列化

给分类添加三级分类的serializer

goods/serializers.py

from rest_framework import serializers
from .models import Goods,GoodsCategory

class CategorySerializer3(serializers.ModelSerializer):
    ‘‘‘三级分类‘‘‘
    class Meta:
        model = GoodsCategory
        fields = "__all__"

class CategorySerializer2(serializers.ModelSerializer):
    ‘‘‘
    二级分类
    ‘‘‘
    #在parent_category字段中定义的related_name="sub_cat"
    sub_cat = CategorySerializer3(many=True)
    class Meta:
        model = GoodsCategory
        fields = "__all__"

class CategorySerializer(serializers.ModelSerializer):
    """
    商品一级类别序列化
    """
    sub_cat = CategorySerializer2(many=True)
    class Meta:
        model = GoodsCategory
        fields = "__all__"

（3）views.py

class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
    ‘‘‘
    list:
        商品分类列表数据
    ‘‘‘

    queryset = GoodsCategory.objects.filter(category_type=1)
    serializer_class = CategorySerializer

说明：

  • 注释的内容，在后面生成drf文档的时候会显示出来，所有要写清楚
  • 要想获取某一个商品的详情的时候，继承 mixins.RetrieveModelMixin  就可以了

（4）url配置

# 配置Category的url
router.register(r‘categorys‘, CategoryViewSet, base_name="categorys")

6.2.vue展示商品分类数据

接口相关代码都放在src/api/api.js里面，调试接口的时候我们首先需要新建一个自己的host，然后替换要调试的host

（1）新建local_host

let local_host = ‘http://127.0.0.1:8000‘

（2）替换商品类别默认的host

//获取商品类别信息
export const getCategory = params => {
  if(‘id‘ in params){
    return axios.get(`${local_host}/categorys/`+params.id+‘/‘);
  }
  else {
    return axios.get(`${local_host}/categorys/`, params);
  }
};

这个时候访问 http://127.0.0.1:8080/#/app/home/index

发现不显示商品分类了，是因为这涉及到了跨域问题，接下来就解决跨域的问题

drf跨域问题

后端服务器解决跨域问题的方法

（1）安装模块

pip install django-cors-headers

django-cors-headers 使用说明：https://github.com/ottoyiu/django-cors-headers

（2）添加到INSTALL_APPS中

INSTALLED_APPS = (
    ...
    ‘coreschema‘,
 ... )

（3）添加中间件

下面添加中间件的说明：

CorsMiddleware should be placed as high as possible, especially before any middleware that can generate responses such as Django‘s CommonMiddleware or Whitenoise‘s WhiteNoiseMiddleware. If it is not before, it will not be able to add the CORS headers to these responses.

Also if you are using CORS_REPLACE_HTTPS_REFERER it should be placed before Django‘s CsrfViewMiddleware (see more below).

意思就是 要放的尽可能靠前，必须在CsrfViewMiddleware之前。我们直接放在第一个位置就好了

MIDDLEWARE = [
    ‘corsheaders.middleware.CorsMiddleware‘,
    ‘django.middleware.security.SecurityMiddleware‘,
    ‘django.contrib.sessions.middleware.SessionMiddleware‘,
    ‘django.middleware.common.CommonMiddleware‘,
    ‘django.middleware.csrf.CsrfViewMiddleware‘,
    ‘django.contrib.auth.middleware.AuthenticationMiddleware‘,
    ‘django.contrib.messages.middleware.MessageMiddleware‘,
    ‘django.middleware.clickjacking.XFrameOptionsMiddleware‘,
]

（4）设置为True

CORS_ORIGIN_ALLOW_ALL = True

现在再访问 http://127.0.0.1:8080/#/app/home/index   数据就可以填充进来了

在一级分类中设置为True

6.3.vue展示商品列表页数据

商品列表页会判断我们是serach还是getGoods

getListData() {
                if(this.pageType==‘search‘){
                  getGoods({
                    search: this.searchWord, //搜索关键词
                  }).then((response)=> {
                    this.listData = response.data.results;
                    this.proNum = response.data.count;
                  }).catch(function (error) {
                    console.log(error);
                  });
                }else {
                  getGoods({
                    page: this.curPage, //当前页码
                    top_category: this.top_category, //商品类型
                    ordering: this.ordering, //排序类型
                    pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间
                    pricemax: this.pricemax // 价格最高 默认为‘’
                  }).then((response)=> {

                    this.listData = response.data.results;
                    this.proNum = response.data.count;
                  }).catch(function (error) {
                    console.log(error);
                  });
                }

            },

说明：

（1）page分页

page_size数量与前端一致

页码参数与起前端一致"page"

class GoodsPagination(PageNumberPagination):
    ‘‘‘
    商品列表自定义分页
    ‘‘‘
    #默认每页显示的个数
    page_size = 12
    #可以动态改变每页显示的个数
    page_size_query_param = ‘page_size‘
    #页码参数
    page_query_param = ‘page‘
    #最多能显示多少页
    max_page_size = 100

（2）过滤

top_category是商品的一级分类，需要传入参数：一级分类的id

pricemin和pricemax与前端保持一致

获取一级分类下的所有商品

# goods/filters.py

import django_filters

from .models import Goods
from django.db.models import Q

class GoodsFilter(django_filters.rest_framework.FilterSet):
    ‘‘‘
    商品过滤的类
    ‘‘‘
    #两个参数，name是要过滤的字段，lookup是执行的行为，‘小与等于本店价格’
    pricemin = django_filters.NumberFilter(name="shop_price", lookup_expr=‘gte‘)
    pricemax = django_filters.NumberFilter(name="shop_price", lookup_expr=‘lte‘)
    top_category = django_filters.NumberFilter(name="category", method=‘top_category_filter‘)

    def top_category_filter(self, queryset, name, value):
        # 不管当前点击的是一级分类二级分类还是三级分类，都能找到。
        return queryset.filter(Q(category_id=value) | Q(category__parent_category_id=value) | Q(
            category__parent_category__parent_category_id=value))

    class Meta:
        model = Goods
        fields = [‘pricemin‘, ‘pricemax‘]

（3）排序

GoodsListViewSet中ording与前端要一致

　　 #排序
    ordering_fields = (‘sold_num‘, ‘shop_price‘)

（4）替换为local_host

//获取商品列表
export const getGoods = params => { return axios.get(`${local_host}/goods/`, { params: params }) }

（5）搜索

 　　#搜索
    search_fields = (‘name‘, ‘goods_brief‘, ‘goods_desc‘)

现在就可以从后台获取商品的数据了，主要功能

  • 分类过滤
  • 价格区间过滤
  • 显示商品数量
  • 分页
  • 搜索

所有代码：

按 Ctrl+C 复制

# MxShop/urls.py
__author__ = ‘derek‘

from django.urls import path,include,re_path
import xadmin
from django.views.static import serve
from MxShop.settings import MEDIA_ROOT
# from goods.view_base import GoodsListView

from rest_framework.documentation import include_docs_urls
from goods.views import GoodsListViewSet,CategoryViewSet
from rest_framework.routers import DefaultRouter

router = DefaultRouter()

#配置goods的url
router.register(r‘goods‘, GoodsListViewSet,base_name=‘goods‘)
# 配置Category的url
router.register(r‘categorys‘, CategoryViewSet, base_name="categorys")

urlpatterns = [
path(‘xadmin/‘, xadmin.site.urls),
path(‘api-auth/‘,include(‘rest_framework.urls‘)),
path(‘ueditor/‘,include(‘DjangoUeditor.urls‘ )),
#文件
path(‘media/<path:path>‘,serve,{‘document_root‘:MEDIA_ROOT}),
#drf文档，title自定义
path(‘docs‘,include_docs_urls(title=‘仙剑奇侠传‘)),
#商品列表页
re_path(‘^‘, include(router.urls)),
]

MxShop/urls.py

代码

按 Ctrl+C 复制代码

# goods/filters.py

import django_filters

from .models import Goods
from django.db.models import Q

class GoodsFilter(django_filters.rest_framework.FilterSet):
‘‘‘
商品过滤的类
‘‘‘
#两个参数，name是要过滤的字段，lookup是执行的行为，‘小与等于本店价格’
pricemin = django_filters.NumberFilter(name="shop_price", lookup_expr=‘gte‘)
pricemax = django_filters.NumberFilter(name="shop_price", lookup_expr=‘lte‘)
top_category = django_filters.NumberFilter(name="category", method=‘top_category_filter‘)

def top_category_filter(self, queryset, name, value):
# 不管当前点击的是一级分类二级分类还是三级分类，都能找到。
return queryset.filter(Q(category_id=value) | Q(category__parent_category_id=value) | Q(
category__parent_category__parent_category_id=value))

class Meta:
model = Goods
fields = [‘pricemin‘, ‘pricemax‘]

goods/filters.py

# goods/serializers.py

from rest_framework import serializers
from .models import Goods,GoodsCategory

class CategorySerializer3(serializers.ModelSerializer):
‘‘‘三级分类‘‘‘
class Meta:
model = GoodsCategory
fields = "__all__"

class CategorySerializer2(serializers.ModelSerializer):
‘‘‘
二级分类
‘‘‘
#在parent_category字段中定义的related_name="sub_cat"
sub_cat = CategorySerializer3(many=True)
class Meta:
model = GoodsCategory
fields = "__all__"

class CategorySerializer(serializers.ModelSerializer):
"""
商品一级类别序列化
"""
sub_cat = CategorySerializer2(many=True)
class Meta:
model = GoodsCategory
fields = "__all__"

#ModelSerializer实现商品列表页
class GoodsSerializer(serializers.ModelSerializer):
#覆盖外键字段
category = CategorySerializer()
class Meta:
model = Goods
fields = ‘__all__‘

goods/serializers.py

# googd/views.py

from rest_framework.views import APIView
from goods.serializers import GoodsSerializer,CategorySerializer
from .models import Goods,GoodsCategory
from rest_framework.response import Response
from rest_framework import mixins
from rest_framework import generics
from rest_framework.pagination import PageNumberPagination
from rest_framework import viewsets
from .filters import GoodsFilter
from django_filters.rest_framework import DjangoFilterBackend
from rest_framework import filters

class GoodsPagination(PageNumberPagination):
‘‘‘
商品列表自定义分页
‘‘‘
#默认每页显示的个数
page_size = 12
#可以动态改变每页显示的个数
page_size_query_param = ‘page_size‘
#页码参数
page_query_param = ‘page‘
#最多能显示多少页
max_page_size = 100

class GoodsListViewSet(mixins.ListModelMixin,viewsets.GenericViewSet):
‘‘‘
商品列表，分页，搜索，过滤，排序
‘‘‘

#这里必须要定义一个默认的排序,否则会报错
queryset = Goods.objects.all()
# 分页
pagination_class = GoodsPagination
#序列化
serializer_class = GoodsSerializer
filter_backends = (DjangoFilterBackend,filters.SearchFilter,filters.OrderingFilter)

# 设置filter的类为我们自定义的类
#过滤
filter_class = GoodsFilter
#搜索
search_fields = (‘name‘, ‘goods_brief‘, ‘goods_desc‘)
#排序
ordering_fields = (‘sold_num‘, ‘shop_price‘)

class CategoryViewSet(mixins.ListModelMixin, mixins.RetrieveModelMixin, viewsets.GenericViewSet):
‘‘‘
list:
商品分类列表数据
‘‘‘

queryset = GoodsCategory.objects.filter(category_type=1)
serializer_class = CategorySerializer

goods/views.py

原文地址：https://www.cnblogs.com/daluozi/p/9467344.html

时间： 2024-07-31 16:09:40

Django REST framework+Vue 打造生鲜超市（五）的相关文章

Django REST framework+Vue 打造生鲜超市（一）

一.项目介绍 1.1.掌握的技术 Vue + Django Rest Framework 前后端分离技术 彻底玩转restful api 开发流程 Django Rest Framework 的功能实现和核心源码分析 Sentry 完成线上系统的错误日志的监控和告警 第三方登录和支付宝支付的集成 本地调试远程服务器代码的技巧 1.2.课程系统构成 vue前端项目 django rest framework 系统实现前台功能 xadmin后台管理系统 vue部分: API 接口 Vue 组件 与a

Django REST framework+Vue 打造生鲜超市（十三）

十四.social_django 集成第三方登录 14.1.申请应用 进入微博开放平台,首先要经过认证,然后才可以创建应用 地址:http://open.weibo.com/authentication 创建应用 写上应用的名字,创建好后,会有个“App Key”,这个非常重要  OAuth2.0 授权设置 正常情况下,必须经过审核才可以让第三方登录,我们可以先用测试模式来完成. (1)添加测试用户,可以测试登录 (2)高级信息  14.2.第三方登录 我们用social_django第三方库来

Django REST framework+Vue 打造生鲜超市（九）

十.购物车.订单管理和支付功能 10.1.添加商品到购物车 (1)trade/serializer.py # trade/serializer.py __author__ = 'derek' from .models import ShoppingCart from rest_framework import serializers from goods.models import Goods class ShopCartSerializer(serializers.Serializer): #

Django REST framework+Vue 打造生鲜超市（三）

四.xadmin后台管理 4.1.xadmin添加富文本插件 (1)xadmin/plugins文件夹下新建文件ueditor.py 代码如下: # xadmin/plugins/ueditor.py import xadmin from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView from DjangoUeditor.models import UEditor

Django REST framework+Vue 打造生鲜超市（二）

三.Models设计 3.1.项目初始化 (1)进虚拟环境下安装 django2.0.2 djangorestframework和相关依赖mark,filter pillow  图片处理 pip install djangorestframework pip install -i https://pypi.douban.com/simple django==2.0.2 pip install markdown pip install django-filter pip install pillo

3- vue django restful framework 打造生鲜超市 - model设计和资源导入

3- vue django restful framework 打造生鲜超市 - model设计和资源导入 使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, 支持第三方登录.集成了sentry错误监控系统. 本小节内容: model设计与资源引入 资源初始化 数据库设计,数据表结构 新建虚拟环境 mkvirtualenv -p=D:\softEnv

Django rest framework + Vue简单示例

一.创建Vue项目 修改源:npm config set registry https://registry.npm.taobao.org         (建议修改) 创建脚手架:vue init webpack Vue项目名称 基本插件: axios,发送Ajax请求 vuex,保存所有组件共用的变量 vue-cookies,操作cookie 二.流程 vue项目基本目录结构 1.创建脚手架 vue init webpack Vue项目名称 运行 npm run dev 2.App.Vue中

DRF Django REST framework 之 认证组件（五）

引言 很久很久以前,Web站点只是作为浏览服务器资源(数据)和其他资源的工具,甚少有什么用户交互之类的烦人的事情需要处理,所以,Web站点的开发这根本不关心什么人在什么时候访问了什么资源,不需要记录任何数据,有客户端请求,我即返回数据,简单方便,每一个http请求都是新的,响应之后立即断开连接. 而如今,互联网的世界发生了翻天覆地的变化,用户不仅仅需要跟其他用户沟通交流,还需要跟服务器交互,不管是论坛类.商城类.社交类.门户类还是其他各类Web站点,大家都非常重视用户交互,只有跟用户交互了,才能

引爆潮流技术 Vue+Django REST framework打造生鲜电商项目

引爆潮流技术Vue+Django REST framework打造生鲜电商项目 1.Django REST framework框架介绍 Django REST framework框架是一个功能强大且灵活的工具包,用于构建Web API,且Django Rest Framework 是 Django 依赖扩展 Restful Api 的框架,与Django的使用风格类似,它的官方网站是:https://www.django-rest-framework.org/ 2.设计API 我们先选择一个AP