![](/img/trans.png)
[英]i am trying to connect reactjs axios with django rest framework to make the post request. but i am getting POST 400 (Bad Request)
[英]Getting Bad Request 400 when sending data to django rest framework through axios
我正在嘗試制作一個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)
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組件的form屬性對象正在正確獲取值,並且也正確地傳遞到了DashboardDetailPost
但是當我運行包含針對PUT請求的axios塊的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_parent是PositiveIntegerField,並且遇到了相同的錯誤,因此在刷新數據庫后將其更改為CharField,但未進行任何更改。 我完全沒有嘗試的想法,無法解決此錯誤。
Linova在評論中回答了這個問題。 “網絡選項卡允許您查看請求/響應內容”。 以我為例,我在Google Chrome控制台中遇到了400 Bad Request錯誤,但我不知道從哪里獲得有關出了什么問題的詳細信息。
在“網絡”標簽中,我能夠查看有關請求/響應的更多詳細信息,因此就知道該怎么做。
如注釋所示,這也適用於問題@ fluk3r的作者
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.