我正在尝试制作一个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,但没有进行任何更改。我完全没有尝试的想法,无法解决此错误。
答案 0 :(得分:0)
Linova在评论中回答了问题。 “网络选项卡允许您查看请求/响应内容”。就我而言,我在Google Chrome控制台中遇到了400 Bad Request错误,但我不知道从哪里获得有关出了什么问题的详细信息。
在“网络”标签中,我可以查看有关请求/响应的更多详细信息,因此我知道该怎么做。
这也适用于问题@ fluk3r的作者,如注释中所示