使用django+drv+axios+vue构建系统

在你的项目架构中,POST方式传递查询参数时,参数通常放在请求体(body)中,Django REST framework(DRF)可以通过多种方式接收处理。以下是详细的实现方案:

一、前端Axios POST请求传递参数

前端通过Axios发送POST请求时,将页码、页面大小及其他查询参数放入请求体:

javascript 复制代码
// Vue组件中示例
async fetchData() {
  try {
    const params = {
      page: 1,        // 页码
      page_size: 10,  // 页面大小
      keyword: '搜索关键词',
      status: 1       // 其他筛选条件
    };
    const response = await this.$axios.post('/api/data-list/', params);
    this.dataList = response.data.results;
    this.total = response.data.count;
  } catch (error) {
    console.error('请求失败:', error);
  }
}

二、后端DRF接收POST参数的方式

方式1:使用Request.data直接获取

DRF的Request对象会自动解析请求体中的JSON数据,可直接通过request.data获取:

python 复制代码
# views.py
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.pagination import PageNumberPagination

class DataListView(APIView):
    def post(self, request):
        # 获取分页参数
        page = request.data.get('page', 1)
        page_size = request.data.get('page_size', 10)
        
        # 获取其他查询参数
        keyword = request.data.get('keyword', '')
        status = request.data.get('status', None)
        
        # 构建查询集
        queryset = YourModel.objects.all()
        if keyword:
            queryset = queryset.filter(name__icontains=keyword)
        if status is not None:
            queryset = queryset.filter(status=status)
        
        # 手动分页
        paginator = PageNumberPagination()
        paginator.page_size = page_size
        paginated_queryset = paginator.paginate_queryset(queryset, request)
        serializer = YourModelSerializer(paginated_queryset, many=True)
        
        return paginator.get_paginated_response(serializer.data)
方式2:使用序列化器验证参数

通过DRF序列化器对请求参数进行验证和解析,更规范且便于处理复杂参数:

python 复制代码
# serializers.py
from rest_framework import serializers

class DataListQuerySerializer(serializers.Serializer):
    page = serializers.IntegerField(default=1, min_value=1)
    page_size = serializers.IntegerField(default=10, min_value=1, max_value=100)
    keyword = serializers.CharField(required=False, allow_blank=True)
    status = serializers.IntegerField(required=False, allow_null=True)

# views.py
class DataListView(APIView):
    def post(self, request):
        # 验证参数
        query_serializer = DataListQuerySerializer(data=request.data)
        if not query_serializer.is_valid():
            return Response(query_serializer.errors, status=400)
        
        # 获取验证后的参数
        validated_data = query_serializer.validated_data
        page = validated_data['page']
        page_size = validated_data['page_size']
        keyword = validated_data.get('keyword', '')
        status = validated_data.get('status')
        
        # 业务逻辑处理(同方式1)
        # ...
方式3:自定义分页类适配POST参数

若需全局统一处理POST分页参数,可自定义分页类:

python 复制代码
# pagination.py
from rest_framework.pagination import PageNumberPagination

class PostPageNumberPagination(PageNumberPagination):
    def get_page_number(self, request, paginator):
        # 从POST数据中获取页码
        page_number = request.data.get(self.page_query_param, 1)
        return page_number
    
    def get_page_size(self, request):
        # 从POST数据中获取页面大小
        page_size = request.data.get(self.page_size_query_param, self.page_size)
        return page_size

# views.py
class DataListView(APIView):
    pagination_class = PostPageNumberPagination
    
    def post(self, request):
        # 获取其他查询参数
        keyword = request.data.get('keyword', '')
        queryset = YourModel.objects.filter(name__icontains=keyword)
        
        # 使用分页器
        paginator = self.pagination_class()
        paginated_queryset = paginator.paginate_queryset(queryset, request)
        serializer = YourModelSerializer(paginated_queryset, many=True)
        
        return paginator.get_paginated_response(serializer.data)

三、路由配置

python 复制代码
# urls.py
from django.urls import path
from .views import DataListView

urlpatterns = [
    path('api/data-list/', DataListView.as_view(), name='data-list'),
]

四、注意事项

  1. Content-Type :Axios默认以JSON格式发送POST数据(Content-Type: application/json),DRF会自动解析request.data。若使用表单格式(application/x-www-form-urlencoded),需用request.POST获取参数。
  2. 参数验证:建议使用序列化器验证参数,避免非法参数导致错误。
  3. 分页兼容性 :若同时支持GET和POST,可在分页类中兼容两种参数获取方式(优先从request.data,其次从request.query_params)。

通过以上方式,后端可灵活接收POST请求中的查询参数及分页参数,结合DRF的序列化和分页功能实现高效的数据查询。

相关推荐
前端不太难24 分钟前
《Vue 项目路由 + Layout 的最佳实践》
前端·javascript·vue.js
小智RE0-走在路上26 分钟前
Python学习笔记(8) --函数的多返回值,不同传参,匿名函数
笔记·python·学习
老华带你飞36 分钟前
物流信息管理|基于springboot 物流信息管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
ZHSH.40 分钟前
2026蓝桥杯备赛 | 赛事介绍及python基础(未完)
python·蓝桥杯·数据结构与算法
长安牧笛40 分钟前
设计残疾人出行路线规划工具,输入起点终点,自动筛选无障碍通道,电梯,盲道路线,避开台阶和陡坡。
python
想学后端的前端工程师1 小时前
【Vue3组合式API实战指南:告别Options API的烦恼】
前端·javascript·vue.js
程序员佳佳2 小时前
2025年大模型终极横评:GPT-5.2、Banana Pro与DeepSeek V3.2实战硬核比拼(附统一接入方案)
服务器·数据库·人工智能·python·gpt·api
刘某的Cloud3 小时前
列表、元组、字典、集合-组合数据类型
linux·开发语言·python
毕设源码-邱学长3 小时前
【开题答辩全过程】以 基于VUE的藏品管理系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
ys~~3 小时前
git学习
git·vscode·python·深度学习·学习·nlp·github