Skip to main content
 首页 » 编程设计

python之通过 axios 将数据发送到 django rest 框架时获取错误请求 400

2024年09月03日11zhujiabin

我正在尝试制作一个 Web 应用程序，其中带有 django-rest-framework 的 django 提供 API，而 Vuejs2 用于前端目的。

这里是models.py

class ClientEntry(models.Model): 
  id = models.AutoField(primary_key=True) 
  parent_name = models.CharField( 
    max_length=30, 
    blank=False, 
    help_text="Enter parent's name" 
  ) 
  student_name = models.CharField( 
    max_length=30, 
    blank=True, 
    help_text="Enter student's name" 
  ) 
  tutor_name = models.CharField( 
    max_length=30, 
    blank=False, 
    help_text="Enter tutor's name" 
  ) 
  mode_payment = models.CharField( 
    "mode of payment", 
    max_length=30, 
    blank=False, 
    help_text="how are we getting paid" 
  ) 
  amount_recieved_parent = ArrayField( 
    models.CharField( 
      max_length=30 
    ), 
    blank=True, 
    null=True 
  ) 
  payment_mode_parent = ArrayField( 
    models.CharField( 
      max_length=30 
    ), 
    blank=True, 
    null=True 
  ) 
  date_payment_parent = ArrayField( 
    models.DateField(), 
    blank=True, 
    null=True 
  ) 
  amount_payed_tutor = ArrayField( 
    models.CharField( 
      max_length=30 
    ), 
    blank=True, 
    null=True 
  ) 
  payment_mode_tutor = ArrayField( 
    models.CharField( 
      max_length=30 
    ), 
    blank=True, 
    null=True 
  ) 
  date_payment_tutor = ArrayField( 
    models.DateField(), 
    blank=True, 
    null=True 
  ) 
  payment_status = models.CharField( 
    max_length=30, 
    blank=True, 
    null=True 
  ) 
  tuition_status = models.CharField( 
    max_length=30, 
    blank=True, 
    null=True 
  ) 
  payment_due_date = models.DateField( 
    blank=True, 
    null=True 
  ) 
  class Meta: 
    ordering = ['id'] 
    verbose_name_plural = "Client entries" 
 
  def __str__(self): 
    return str(self.parent_name)

序列化器.py

class ClientEntrySerializer(serializers.HyperlinkedModelSerializer): 
  class Meta: 
    model = ClientEntry 
    fields = ('url', 'id', 'parent_name','student_name', 'tutor_name', 
      'mode_payment', 'amount_recieved_parent', 'payment_mode_parent', 
      'date_payment_parent', 'amount_payed_tutor', 'payment_mode_tutor',  
      'date_payment_tutor', 'payment_status', 'tuition_status',  
      'payment_due_date')

View .py

class ClientEntryViewSet(viewsets.ModelViewSet): 
  queryset = ClientEntry.objects.all() 
  serializer_class = ClientEntrySerializer

这是与我的问题直接相关的三个 vue 组件

DashboardDetail.vue

export default { 
  name: 'DashboardDetail', 
  components: { 
    DashboardDetailEdit, 
    DashboardDetailPost 
  }, 
  data () { 
    return { 
      entry: {}, 
      paymentEntry: { 
        url: '', 
        amountRecievedParentArray: [], 
        paymentModeParentArray: [], 
        datePaymentParentArray: [], 
        amountPaidTutorArray: [], 
        paymentModeTutorArray: [], 
        datePaymentTutorArray: [] 
      } 
    } 
  }, 
  methods: { 
    getEntry() { 
      axios({ 
        method: 'get', 
        url: 'http://127.0.0.1:8000/api/dashboard/' + this.$route.params.id + '/' 
      }).then(response => this.entry = response.data); 
    } 
  }, 
  created () { 
    this.getEntry() 
  }, 
  computed: { 
    paymentEntryComputed: function () { 
      if (this.entry !== null && this.entry.hasOwnProperty("amount_recieved_parent") && this.entry.amount_recieved_parent !== null) 
        this.paymentEntry.amountRecievedParentArray = this.entry.amount_recieved_parent 
      if (this.entry !== null && this.entry.hasOwnProperty("payment_mode_parent") && this.entry.payment_mode_parent !== null) 
        this.paymentEntry.paymentModeParentArray = this.entry.payment_mode_parent 
      if (this.entry !== null && this.entry.hasOwnProperty("date_payment_parent") && this.entry.date_payment_parent !== null) 
        this.paymentEntry.datePaymentParentArray = this.entry.date_payment_parent 
      if (this.entry !== null && this.entry.hasOwnProperty("amount_payed_tutor") && this.entry.amount_payed_tutor !== null) 
        this.paymentEntry.amountPaidTutorArray = this.entry.amount_payed_tutor 
      if (this.entry !== null && this.entry.hasOwnProperty("payment_mode_tutor") && this.entry.payment_mode_tutor !== null) 
        this.paymentEntry.paymentModeTutorArray = this.entry.payment_mode_tutor 
      if (this.entry !== null && this.entry.hasOwnProperty("date_payment_tutor") && this.entry.date_payment_tutor !== null) 
        this.paymentEntry.datePaymentTutorArray = this.entry.date_payment_tutor 
      if (this.entry !== null && this.entry.hasOwnProperty("url")) 
        this.paymentEntry.url = this.entry.url 
      return this.paymentEntry 
    } 
  } 
} 
</script>

DashboardDetailPost.vue

<template> 
  <dashboard-detail-form @submit-query="addPaymentEntry" 
  :paymentEntry="clonePaymentEntry" 
  ref="dashDetailForm"></dashboard-detail-form> 
</template> 
 
<script> 
 
export default { 
  components: { 
    DashboardDetailForm 
  }, 
  name: 'DashboardDetailPost', 
  props: { 
    paymentEntry: Object 
  }, 
  data(){ 
    return { 
      clonePaymentEntry: {} 
    } 
  }, 
  methods: { 
    addPaymentEntry (data) { 
      axios({ 
        method: 'put', 
        url: this.paymentEntry.url, 
        data: { 
          amount_recieved_parent: data.amountRecievedParentArray, 
          payment_mode_parent: data.paymentModeParentArray, 
          date_payment_parent: data.datePaymentParentArray, 
          amount_payed_tutor: data.amountPaidTutorArray, 
          payment_mode_tutor: data.paymentModeTutorArray, 
          date_payment_tutor: data.datePaymentTutorArray 
        } 
      }) 
      .then(() => { 
        this.$refs.dashDetailForm.resetForm() 
      }) 
      .catch((error) => { 
        console.log(error) 
      }) 
    } 
  }, 
  created () { 
    this.clonePaymentEntry = this.paymentEntry 
  } 
} 
</script>

DashboardDetailForm.vue

export default { 
  components: { 
    FormDropdown, 
    FormInput 
  }, 
  name: 'DashboardDetailForm', 
  props: { 
    editDetailForm: Object, 
    paymentEntry: Object 
  }, 
  data () { 
    return { 
      showForm: false, 
      form: { 
        amountRecievedParent: null, 
        paymentModeParent: '', 
        datePaymentParent: '', 
        amountPaidTutor: null, 
        paymentModeTutor: '', 
        datePaymentTutor: '' 
      }, 
      paymentModeArray: [ 
        { value: "cash", text: "Cash" }, 
        { value: "paytm", text: "PayTM" }, 
        { value: "bank seth", text: "Bank Seth" }, 
        { value: "bank anuj", text: "Bank Anuj" }, 
        { value: "kotak", text: "Kotak" } 
      ] 
    } 
  }, 
  created () { 
    if (typeof this.editDetailForm !== "undefined") { 
      this.form.amountRecievedParent = this.editDetailForm.amountRecievedParent 
      this.form.paymentModeParent = this.editDetailForm.paymentModeParent 
      this.form.datePaymentParent = this.editDetailForm.datePaymentParent 
      this.form.amountPaidTutor = this.editDetailForm.amountPaidTutor 
      this.form.paymentModeTutor = this.editDetailForm.paymentModeTutor 
      this.form.datePaymentTutor = this.editDetailForm.datePaymentTutor 
    } 
  }, 
  methods: { 
    formToggle () { 
      this.showForm = !this.showForm 
    }, 
    resetDetailForm () { 
      this.form.amountRecievedParent = null, 
      this.form.paymentModeParent = '', 
      this.form.datePaymentParent = '', 
      this.form.amountPaidTutor = null, 
      this.form.paymentModeTutor = '', 
      this.form.datePaymentParent = '' 
    }, 
    computePaymentEntry () { 
      this.paymentEntry.amountRecievedParentArray.push(this.form.amountRecievedParent) 
      this.paymentEntry.paymentModeParentArray.push(this.form.paymentModeParent) 
      this.paymentEntry.datePaymentParentArray.push(this.form.datePaymentParent) 
      this.paymentEntry.amountPaidTutorArray.push(this.form.amountPaidTutor) 
      this.paymentEntry.paymentModeTutorArray.push(this.form.paymentModeTutor) 
      this.paymentEntry.datePaymentTutorArray.push(this.form.datePaymentTutor) 
      this.validateBeforeSubmit() 
    }, 
    validateBeforeSubmit () { 
      this.$validator.validateAll().then(() => { 
        if(!this.errors.any()) { 
          this.$emit('submit-query', this.paymentEntry) 
          this.formToggle() 
        } 
      }) 
    } 
  } 
 
} 
</script>

现在我的 DashboardDetailForm 组件的表单属性对象可以正确地获取值，并且它也可以正确地传递给 DashboardDetailPost

但是当我运行包含用于 PUT 请求的 axios block 的 addPaymentEntry() 方法时，我总是在 django 中收到 Bad Request Error 

Bad Request: /api/dashboard/1/ 
[05/Nov/2018 20:50:27] "PUT /api/dashboard/1/ HTTP/1.1" 400 414

最初我的 amount_recieved_pa​​rent 是一个 PositiveIntegerField 并且我得到了同样的错误所以我在刷新数据库后将它更改为 CharField 但它没有改变任何东西。我完全没有想法尝试但无法解决此错误。

请您参考如下方法:

Linova 在评论中回答了这个问题。 “网络选项卡允许您查看请求/响应内容”。就我而言，我在 Google Chrome 控制台中收到 400 Bad Request 错误，但我不知道从哪里获取有关错误原因的详细信息。

检查网络选项卡，我能够看到有关请求/响应的更多详细信息，因此我能够知道该怎么做。

这也适用于评论中显示的问题@fluk3r 的作者


  文章来源：
  https://blog.windname.com/post/hhhdh2b8.html
阅读延展