Python Django和React在提交时总是错误的请求
我正在使用Django Rest框架和引导React开发一个电子处方Web应用程序。 但我面临一个错误，即POST 400（错误请求） 如何解决这个问题？顺便说一句，这是我的代码： 设置.pyPython Django和React在提交时总是错误的请求,python,reactjs,django,django-rest-framework,django-react,Python,Reactjs,Django,Django Rest Framework,Django React,我正在使用Django Rest框架和引导React开发一个电子处方Web应用程序。 但我面临一个错误，即POST 400（错误请求） 如何解决这个问题？顺便说一句，这是我的代码： 设置.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.c
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'prescribe_app',
]
CORS_ORIGIN_ALLOW_ALL = True
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
@api_view(['GET', 'POST'])
def prescription_view(request):
if request.method == 'GET':
prescription = Prescription.objects.all()
serializer = PrescriptionSerializerView(prescription, many=True)
return Response(serializer.data)
elif request.method == 'POST' :
serializer = PrescriptionSerializerView(data=request.data)
if serializer.is_valid():
serializer.save()
else:
content = {'Error': 'Invalid data'}
return Response(content,status=status.HTTP_400_BAD_REQUEST)
return Response(serializer.data)
class PrescriptionSerializerView(serializers.ModelSerializer):
class Meta:
model = Prescription
fields = ['drug_name' , 'dosage' , 'route', 'frequency', 'amount_dispensed', 'no_of_refills']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'prescribe_app',
]
CORS_ORIGIN_ALLOW_ALL = True
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
@api_view(['GET', 'POST'])
def prescription_view(request):
if request.method == 'GET':
prescription = Prescription.objects.all()
serializer = PrescriptionSerializerView(prescription, many=True)
return Response(serializer.data)
elif request.method == 'POST' :
serializer = PrescriptionSerializerView(data=request.data)
if serializer.is_valid():
serializer.save()
else:
content = {'Error': 'Invalid data'}
return Response(content,status=status.HTTP_400_BAD_REQUEST)
return Response(serializer.data)
class PrescriptionSerializerView(serializers.ModelSerializer):
class Meta:
model = Prescription
fields = ['drug_name' , 'dosage' , 'route', 'frequency', 'amount_dispensed', 'no_of_refills']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'prescribe_app',
]
CORS_ORIGIN_ALLOW_ALL = True
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
@api_view(['GET', 'POST'])
def prescription_view(request):
if request.method == 'GET':
prescription = Prescription.objects.all()
serializer = PrescriptionSerializerView(prescription, many=True)
return Response(serializer.data)
elif request.method == 'POST' :
serializer = PrescriptionSerializerView(data=request.data)
if serializer.is_valid():
serializer.save()
else:
content = {'Error': 'Invalid data'}
return Response(content,status=status.HTTP_400_BAD_REQUEST)
return Response(serializer.data)
class PrescriptionSerializerView(serializers.ModelSerializer):
class Meta:
model = Prescription
fields = ['drug_name' , 'dosage' , 'route', 'frequency', 'amount_dispensed', 'no_of_refills']
import React from 'react';
import { Row, Card, Col, Table, Form, Button} from 'react-bootstrap';
class FormPage extends React.Component{
constructor(props){
super(props);
this.state = {
prescriptionList: [],
activeItem: {
id:null,
drug_name:'',
dosage:'',
route:'',
frequency:'',
amount_dispensed:'',
no_of_refills:''
},
editing:false,
}
this.viewPrescription = this.viewPrescription.bind(this)
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.getCookie = this.getCookie.bind(this)
// this.deleteItem = this.deleteItem.bind(this)
// this.startEdit = this.startEdit.bind(this)
// this.strikeUnstrike = this.strikeUnstrike.bind(this)
};
getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
// R E T R I E V I N G D A T A F R O M A P I
componentDidMount(){
this.viewPrescription()
}
viewPrescription(){
console.log('Fetching ...' )
fetch('http://127.0.0.1:8000/api/prescription-view/')
.then(response => response.json())
.then(data =>
// console.log("Prescription" , data)
this.setState({
prescriptionList:data
})
)
}
handleChange(e){
var name = e.target.name
var value = e.target.value
console.log('Name:', name)
console.log('Value:', value)
this.setState({
activeItem:{
...this.state.activeItem,
title:value
}
})
}
// S U B M I T T I N G D A T A T O A P I
handleSubmit(e){
e.preventDefault()
// console.log('Prescription : ', this.state.achieveItem)
var csrftoken = this.getCookie('csrftoken')
// var url = 'http://127.0.0.1:8000/api/prescription-view/'
fetch('http://127.0.0.1:8000/api/prescription-view/', {
method: 'POST' ,
headers: {
'Content-type' : 'application/json',
'X-CSRFToken' : csrftoken,
},
body: JSON.stringify(this.state.activeItem)
}).then((response) => {
this.viewPrescription()
this.setState({
activeItem: {
id:null,
drug_name:'',
dosage:'',
route:'',
frequency:'',
amount_dispensed:'',
no_of_refills:'',
}
})
}).catch(function(error){
console.log('ERROR', error)
})
}
render(){
var prescriptionView = this.state.prescriptionList
// var self = this
return(
<div style={{padding: '1rem'}}>
<Card style={{ marginTop: '5px' }}>
<Card.Header style={{backgroundColor: '#00A0DC', color: 'white'}}>Patient Information</Card.Header>
<Card.Body>
<Row>
<Col>
<h4>Donald Biden</h4>
<Card style={{padding: '10px', fontSize: '12px'}}>
<Table borderless size="sm">
<tbody>
<tr>
<td>Age</td>
<td>:</td>
<td>55 yrs old</td>
</tr>
<tr>
<td>Address</td>
<td>:</td>
<td>San Pablo, Laguna</td>
</tr>
<tr>
<td>Birthday</td>
<td>:</td>
<td>September 09, 1965</td>
</tr>
</tbody>
</Table>
</Card>
</Col>
<Col>
{prescriptionView.map(function(prescriptionView, index){
return(
<div key={index}>
<Card style={{ marginTop: '5px' , fontSize: '12px'}}>
<Card.Header>Medication Information</Card.Header>
<Card.Body>
<Table borderless size="sm">
<tbody>
<tr>
<td>Drug Name</td>
<td>:</td>
<td>{prescriptionView.drug_name}</td>
</tr>
<tr>
<td>Dosage</td>
<td>:</td>
<td>{prescriptionView.dosage} mgs</td>
</tr>
<tr>
<td>Route Taken</td>
<td>:</td>
<td>{prescriptionView.route}</td>
</tr>
<tr>
<td>Frequency</td>
<td>:</td>
<td>{prescriptionView.frequency}</td>
</tr>
<tr>
<td>Amount Dispensed</td>
<td>:</td>
<td>{prescriptionView.amount_dispensed}</td>
</tr>
<tr>
<td>No of Refills</td>
<td>:</td>
<td>{prescriptionView.amount_dispensed}</td>
</tr>
</tbody>
</Table>
</Card.Body>
</Card>
</div>
)
})}
</Col>
</Row>
</Card.Body>
</Card>
<Card style={{ marginTop: '1rem', marginBottom: '5rem' }}>
<Card.Header style={{backgroundColor: '#00A0DC', color: 'white'}}>Prescription Information</Card.Header>
<Card.Body style={{fontSize: '11px'}}>
<Form onSubmit={this.handleSubmit} id="form">
<Row>
<Col>
<Form.Group as={Row}>
<Form.Label column sm="2">
Medicine Name
</Form.Label>
<Col sm="10">
<Form.Control size="sm" placeholder="Medicine Name" id="drug_name" type="text" onCha />
</Col>
</Form.Group>
<Form.Group as={Row}>
<Form.Label column sm="2">
Dosage
</Form.Label>
<Col sm="10">
<Form.Control size="sm" type="number" placeholder="Dosage" id="dosage" />
</Col>
</Form.Group>
<Form.Group as={Row}>
<Form.Label column sm="2">
Route Taken
</Form.Label>
<Col sm="10">
<Form.Control size="sm" placeholder="" id="route" type="text" />
</Col>
</Form.Group>
<Form.Group as={Row}>
<Form.Label column sm="2">
Frequency
</Form.Label>
<Col sm="10">
<Form.Control size="sm" placeholder="" id="frequency" type="text" />
</Col>
</Form.Group>
</Col>
<Col>
<Form.Group as={Row}>
<Form.Label column sm="2">
Amount Dispensed
</Form.Label>
<Col sm="10">
<Form.Control size="sm" type="number" id="amount_dispensed" placeholder="Medicine Name" />
</Col>
</Form.Group>
<Form.Group as={Row}>
<Form.Label column sm="2">
Number of Refills
</Form.Label>
<Col sm="10">
<Form.Control size="sm" type="number" id="no_of_refills" placeholder="Dosage" />
</Col>
</Form.Group>
<Button variant="primary" size="sm" md={{ span: 4, offset: 4 }} id="submit" type="submit" >
Submit
</Button>
</Col>
</Row>
</Form>
</Card.Body>
</Card>
</div>
)
}
};
export default FormPage;
从“React”导入React；
从“react bootstrap”导入{行、卡、列、表、窗体、按钮}；
类FormPage扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
处方医生：[]，
活动项目：{
id:null，
药物名称：“”，
剂量：''，
路由：“”，
频率：''，
分配的金额：''，
没有\u次重新填充：“”
},
编辑：错，
}
this.viewPrescription=this.viewPrescription.bind（this）
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
this.getCookie=this.getCookie.bind（this）
//this.deleteItem=this.deleteItem.bind（this）
//this.startEdit=this.startEdit.bind（this）
//this.strikeUnstrike=this.strikeUnstrike.bind（this）
};
getCookie（名称）{
让cookieValue=null；
if（document.cookie&&document.cookie！=''）{
常量cookies=document.cookie.split（“；”）；
for（设i=0；iresponse.json（））
。然后（数据=>
//console.log（“处方”，数据）
这是我的国家({
处方医生：数据
})
)
}
手变（e）{
var name=e.target.name
var值=e.target.value
console.log（'Name:'，Name）
console.log（'Value:'，Value）
这是我的国家({
活动项目：{
…this.state.activeItem，
标题：价值
}
})
}
//S U B M I T T I T A T A T A P I
handleSubmit（e）{
e、 预防默认值（）
//console.log（'Prescription:'，this.state.achieveItem）
var csrftoken=this.getCookie（'csrftoken'）
//var url='1〕http://127.0.0.1:8000/api/prescription-视图/'
取（'http://127.0.0.1:8000/api/prescription-视图/'{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
“X-CSRFToken”：CSRFToken，
},
正文：JSON.stringify（this.state.activeItem）
})。然后（（响应）=>{
this.viewPrescription（）
这是我的国家({
活动项目：{
id:null，
药物名称：“”，
剂量：''，
路由：“”，
频率：''，
分配的金额：''，
没有\u次重新填充：“”，
}
})
}).catch（函数（错误）{
console.log（'ERROR'，ERROR）
})
}
render（）{
var prescriptionView=this.state.prescriptionList
//var self=这个
返回(
患者信息
唐纳德·拜登
年龄
:
55岁
地址
:
圣帕布洛，拉古纳
生日
:
1965年9月9日
{prescriptionView.map（函数（prescriptionView，索引）{
返回(
药物信息
药名
:
{处方视图.药物名称}