Получение Bad Request 400 при отправке данных в django rest framework через axios - PullRequest
Новая
       28

Получение Bad Request 400 при отправке данных в django rest framework через axios

0 голосов
/ 05 ноября 2018

Я пытаюсь создать веб-приложение, в котором django с django-rest-framework обслуживает API, а Vuejs2 используется для целей внешнего интерфейса.

Вот модели.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)

serializers.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')

views.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

Но когда я запускаю метод addPaymentEntry (), который содержит блок axios для запроса PUT, я всегда получаю ошибку Bad Request в django 

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

Изначально мой amount_recovered_parent был PositiveIntegerField, и я получил ту же ошибку, поэтому после очистки базы данных я изменил ее на CharField, но ничего не изменилось. У меня совершенно нет идей, чтобы попытаться и не смог решить эту ошибку.

1 Ответ

0 голосов
/ 22 января 2019

Линова ответила на вопрос в комментариях. msgstr "вкладка сети позволяет просматривать содержимое запроса / ответа". В моем случае я получал ошибку 400 Bad Request в консоли Google Chrome, но я не знал, где можно получить подробную информацию о том, что пошло не так.

Заходя на вкладку «Сеть», я смог увидеть более подробную информацию о запросе / ответе и, следовательно, смог узнать, что делать.

Это также сработало для автора вопроса @ fluk3r, как показано в комментариях

...