Django+Vue开发生鲜电商平台之5.使用DRF实现商品列表页和过滤(下)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 先了解Django中实现Json数据传递的基本方法,可以查看中文文档

三、DRF的使用

1.DRF的Request和Response类

DRF对Django的Request和Response类进行了进一步的封装,因此使用起来更方便。

request.data返回请求正文的解析内容,代替了标准request.POST和request.FILES属性,具体如下:

它包括所有已解析的内容,包括文件和非文件输入;

它支持解析除以外的HTTP方法的内容POST,这意味着您可以访问PUT和PATCH请求的内容;

它支持REST框架的灵活请求解析,而不仅仅是支持表单数据。例如,可以以处理传入表单数据的相同方式处理传入JSON数据。

request.query_params代替了request.GET,有助于使代码库更加正确和明显,任何HTTP方法类型都可以包括查询参数,而不仅仅是GET请求。

request.parsers用于解析数据。DRF包括许多内置的Parser类,以保证可以接收各种媒体类型的请求并解析,包括JSONParser、FormParser、MultiPartParser等。还支持定义自己的自定义解析器,这使您可以灵活地设计API接受的媒体类型。

request.user通常会返回的实例django.contrib.auth.models.User,尽管其行为取决于所使用的身份验证策略。

DRF通过提供一个Response类来支持HTTP内容协商,该类允许您根据客户端请求返回可以呈现为多种内容类型的内容。

也可以根据需要从视图中返回常规HttpResponse或StreamingHttpResponse对象。使用Response类只是为返回内容协商的Web API响应提供了一个更好的接口,该响应可以呈现为多种格式。

2.DRF过滤器

DRF提供了过滤功能,来实现简单高效的过滤。

views.py如下:

class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
    '''商品列表页'''
    # queryset = Goods.objects.all()
    serializer_class = GoodsSerializer
    pagination_class = GoodsPagination
    def get_queryset(self):
        queryset = Goods.objects.all()
        price_min = self.request.query_params.get('price_min', default=0)
        if price_min:
            queryset = queryset.filter(shop_price__gt=int(price_min))
        return queryset

显示:

image.jpeg

显然,在传入price_min参数后,显示到前端的数据量也会发生变化。

但是这显得很麻烦,可以用更简单的方式实现,即使用django-filter实现,包括DjangoFilterBackend(与后台管理系统表现相同)、SearchFilter、OrderingFilter等,即字段过滤、搜索、排序3种方式。

过滤的使用

通过django-filters的DjangoFilterBackend类实现字段过滤。

先实现精确过滤,views.py如下:

class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
    '''商品列表页'''
    queryset = Goods.objects.all()
    serializer_class = GoodsSerializer
    pagination_class = GoodsPagination
    filter_backends = [DjangoFilterBackend]
    filterset_fields = ['name', 'market_price']

settings.py中进行配置:

# DRF配置
REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': ['django_filters.rest_framework.DjangoFilterBackend']
}

显示:

image.jpeg

此时,可以根据字段进行过滤,但是只能精确比配,对于字符串型字段不能模糊匹配,对于数值型字段也不能匹配区间,因此需要自定义filters,新建filters.py如下:

import django_filters
from .models import Goods
class GoodsFilter(django_filters.rest_framework.FilterSet):
    '''商品过滤类'''
    name = django_filters.CharFilter(field_name="name", lookup_expr='contains')
    min_price = django_filters.NumberFilter(field_name="market_price", lookup_expr='gte')
    max_price = django_filters.NumberFilter(field_name="market_price", lookup_expr='lte')
    class Meta:
        model = Goods
        fields = ['name', 'min_price', 'max_price']

vies.py修改如下:

from rest_framework import mixins, viewsets
from rest_framework.pagination import PageNumberPagination
from django_filters.rest_framework import DjangoFilterBackend
from .models import Goods
from .serializers import GoodsSerializer
from .filters import GoodsFilter
# Create your views here.
class GoodsPagination(PageNumberPagination):
    page_size = 10
    page_size_query_param = 'page_size'
    page_query_param = 'p'
    max_page_size = 100
class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
    '''商品列表页'''
    queryset = Goods.objects.all()
    serializer_class = GoodsSerializer
    pagination_class = GoodsPagination
    filter_backends = [DjangoFilterBackend]
    filter_class = GoodsFilter

显示:

image.jpeg

此时可以进行更加个性化的过滤。

除此之外,还可以自定义过滤的方法来满足个性化的需求。

搜索的使用

DRF的SearchFilter类基于Django-admin的搜索功能,支持简单的基于单个查询参数的搜索。

views.py如下:

from rest_framework import mixins, viewsets, filters
from rest_framework.pagination import PageNumberPagination
from django_filters.rest_framework import DjangoFilterBackend
from .models import Goods
from .serializers import GoodsSerializer
from .filters import GoodsFilter
# Create your views here.
class GoodsPagination(PageNumberPagination):
    page_size = 10
    page_size_query_param = 'page_size'
    page_query_param = 'p'
    max_page_size = 100
class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
    '''商品列表页'''
    queryset = Goods.objects.all()
    serializer_class = GoodsSerializer
    pagination_class = GoodsPagination
    filter_backends = [DjangoFilterBackend, filters.SearchFilter]
    filter_class = GoodsFilter
    search_fields = ['name', 'goods_brief', 'goods_desc']

显示:

2345_image_file_copy_18.jpg

显然,实现了搜索,在给定的字段中搜索,匹配到关键字则展示到前台。

还可以通过在字段前面加上各种字符来限制搜索行为search_fields:

  • '^'开始搜索
  • '='完全匹配
  • '@'全文搜索(当前仅支持Django的MySQL后端)
  • '$'正则表达式搜索

如修改如下:

class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
    '''商品列表页'''
    queryset = Goods.objects.all()
    serializer_class = GoodsSerializer
    pagination_class = GoodsPagination
    filter_backends = [DjangoFilterBackend, filters.SearchFilter]
    filter_class = GoodsFilter
    search_fields = ['=name', 'goods_brief', 'goods_desc']

显示:

2345_image_file_copy_17.jpg

显然,字符限制只是对指定的字段起作用,其他字段并不受影响,可以根据需要选择。

排序的使用

一般需要对商品根据销量、价格等排序,通常使用DRF的OrderingFilter类,它支持简单的查询参数控制的结果排序。

在views.py中增加属性:

class GoodsListViewSet(mixins.ListModelMixin, viewsets.GenericViewSet):
    '''商品列表页,并实现分页、搜索、过滤、排序'''
    queryset = Goods.objects.all()
    serializer_class = GoodsSerializer
    pagination_class = GoodsPagination
    filter_backends = [DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter]
    filter_class = GoodsFilter
    search_fields = ['name', 'goods_brief', 'goods_desc']
    ordering_fields = ['sold_num', 'market_price']

显示:

2345_image_file_copy_16.jpg

此时实现了按照指定字段进行排序。

相关文章
|
22天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
65 0
|
1月前
|
Web App开发 人工智能 JavaScript
开发时遇到的问题以及一些实用小技巧(vue)
开发时遇到的问题以及一些实用小技巧
|
30天前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【8月更文挑战第17天】vue全局公共组件自动引入并注册,开发效率直接起飞!
32 3
|
30天前
|
设计模式 JavaScript 前端开发
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
40 1
|
1月前
|
JavaScript API
Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
这篇博客文章讲解了Vue中列表排序的方法,使用`filter`、`sort`和`indexOf`等数组方法进行数据的过滤和排序,并探讨了Vue检测数据变化的原理,包括Vue如何通过setter和数组方法来实现数据的响应式更新。
Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
|
1月前
|
JavaScript
Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
这篇博客文章详细介绍了Vue中列表渲染的基础知识、`v-for`指令的使用、`key`的原理和列表过滤的实现。通过代码实例和测试效果,展示了如何遍历数组和对象、使用`key`属性优化渲染性能,以及如何实现列表的动态过滤功能。
Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
|
1月前
|
JavaScript UED
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
|
22天前
|
JavaScript 开发者 UED
Vue.js 错误处理与调试:跟上技术潮流,摆脱开发困扰,成为代码大神不是梦!
【8月更文挑战第30天】在 Vue.js 开发中,错误处理与调试至关重要。本文将对比 Vue 的全局错误捕获机制 `Vue.config.errorHandler` 和组件内 `watch` 监听数据变化的方式,并介绍 Vue 开发者工具、控制台打印 (`console.log`) 以及代码断点 (`debugger`) 等调试方法。此外,还将探讨如何通过自定义错误页面提升用户体验。通过这些技巧的对比,帮助开发者灵活选择适合的策略,确保应用稳定性和开发效率。
39 0
|
22天前
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
45 0
|
22天前
|
JavaScript 前端开发 UED
揭秘Vue.js高效开发:Vue Router如何让单页面应用路由管理变得如此简单?
【8月更文挑战第30天】随着Web应用复杂性的增加,单页面应用(SPA)因出色的用户体验和高效的页面加载性能而备受青睐。Vue.js凭借简洁的语法和灵活的组件系统成为构建SPA的热门选择,其官方路由管理器Vue Router则简化了路由管理。本文通过实战示例介绍如何利用Vue Router实现高效的SPA路由管理,包括命名路由、动态路由及其核心优势。
12 0