Django 错误，管道断开('127.0.0.1'，33609)

Question

我正在创建django项目并得到此错误。来自('127.0.0.1'，33609)的管道破裂。我一直在努力做的是，我使用auth_user表(django框架的默认用户认证表)创建了表，我创建了自己的表。当用户注册时，我将使用user .objects.create_user()将其记录在auth_user表中，然后创建自己的对象，然后将.save()保存到我的表中。在这一步中，我创建了嵌套属性，我认为我以正确的方式分配了每个属性。从我得到的，他们都是成功的，记录被保存到数据库。对于前端，我使用axios函数.then来接收来自服务器的响应，它给了我错误，说从('127.0.0.1'，33609)断开管道。我试过调试这许多方式和每一种方式，我尝试，这是没有意义的，因为两个对象都保存到数据库。此外，对象映射是正确的(这是我的想法)。下面是我的代码(很长，抱歉)

from django.http.response import JsonResponse
from django.shortcuts import render
from django.contrib.auth import authenticate , login
from django.contrib.auth.models import User
from application1.models import Customer , Status
def register_post(request):
try:
# return object {'status_code':  , 'result': "" }
if request.method == 'GET':
return JsonResponse({'result': 'invalid request'})
_name = request.POST.get('name',None)
_surname = request.POST.get('surname',None)
_mobile = int(request.POST.get('mobile',None))
_username = request.POST.get('username',None)
_password = request.POST.get('password',None)
_confirm_password = request.POST.get('confirm_password',None)
if User.objects.filter(username=_username).first() != None:
return JsonResponse({'status_code': 401 , 'result': 'fail , username already 
exist in database'})
print("This is name >>")
print(_name)
print("This is surname >>")
print(_surname)
print("This is mobile >>")
print(_mobile)
print("This is username >> ")
print(_username)
print("This is password >> ")
print(_password)
print("This is confirmed password >> ")
print(_confirm_password)

if _password != _confirm_password:
return JsonResponse({'status_code': 408 , 'result': "fail , password doesn't 
match with confrim password "})
# perform create user 
# insert this record in default django table along with newly created table
# ----------
customer_status = Status.objects.get(id = 3)
print("query customer status object >> ")
print(customer_status)
new_user = User.objects.create_user(username = _username , password = _password ,
first_name = _name , last_name = _surname)
print("new user created >> ")
print(new_user)
new_user.save()
# insert record along with newly created table


# query it from the database and then assign it to the new one
# just to make sure that it got correct model
user_query = User.objects.get(username = _username)
print("before object creation >> ")
print("This is name >> " + str(_name))
print("This is surname >> " + str(_surname))
print("This is mobile >> " )
print(int(_mobile))
print("This is customer status query result >> ")
print(model_to_dict(customer_status))
print("This is user query object >> ")
print(model_to_dict(user_query))
print("------------------- Then object creation --------------------")

new_customer = Customer(name = str(_name) , surname = str(_surname) , mobile = 
int(_mobile) , register = user_query ,status = customer_status)
print("new customer obj created >> ")
print(model_to_dict(new_customer))

print("before save -----")
new_customer.save()
print("everything is done")

return JsonResponse({'status_code': 200 , 'result': 'success'})
except:
return JsonResponse({'status_code': 403 , 'result': 'fail to save to database'})

后面是我的前端(使用Vuejs和Axios)

{% extends 'main.html' %}
{% block body %}
<br>
<div id="app1">
<div align="center">
<h3>Hello World welcome to register page</h3>
</div>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"placeholder="Name"
v-model="sending_obj.name" required />
</div>
<div class="form-group">
<label>Surname</label>
<input type="text" class="form-control"placeholder="Surname"
v-model="sending_obj.surname" required />
</div>
<div class="form-group">
<label>Mobile</label>
<input type="number" class="form-control"placeholder="mobile"
v-model="sending_obj.mobile" required />
</div>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control"placeholder="Enter username"
v-model="sending_obj.username" required />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"placeholder="Password"
v-model="sending_obj.password" required />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control"placeholder="Confirm-Password"
v-model="sending_obj.confirm_password" required />
</div>
<br>
<button type="submit" class="btn btn-button btn-outline-primary" @click="submit()">Submit</button>
</form>
</div>
{% endblock %}
{% block script %}
<script>
var component = {
delimiters: ["[[","]]"],
el: '#app1',
data: {
sending_obj: {
name: '',
surname: '',
mobile: '',
username: '',
password: '',
confirm_password: '',
},//end of sending_obj
},//end of data
methods: {
submit(){

var sender = new FormData();
sender.append('name',this.sending_obj.name);
sender.append('surname',this.sending_obj.surname);
sender.append('mobile',this.sending_obj.mobile);
sender.append('username' , this.sending_obj.username);
sender.append('password' , this.sending_obj.password);
sender.append('confirm_password' , this.sending_obj.confirm_password);
sender.append("csrfmiddlewaretoken", '{{csrf_token}}');

if(this.sending_obj.name == '' || this.sending_obj.surname == '' ||
this.sending_obj.mobile == '' || this.sending_obj.username == '' ||
this.sending_obj.password == '' || this.sending_obj.confirm_password == ''){
alert("please fill out every field");
return;
}//end of if

axios.post("{% url 'register_post' %}" , sender)
.then(response => {
console.log(response)
console.log(response.data);
if(response.data.status_code == 200){
alert("success");
window.location = "{% url 'home' %}";
}//end of if 
else if(response.data.status_code != 200){
alert(response.data.result);
}//end of else if
})
.catch(error => {
alert(error);
});

},//end of function
},//end of methods
};
var vueJs = new Vue(component);
</script>
{% endblock %}

和urlpatterns数组

urlpatterns = [
path('accounts/', include('django.contrib.auth.urls')),
path('', pages.home , name="home"),
path('adminpage/' , pages.admin_page , name='admin_page'),
path('register/' , pages.register , name='register'),
path('registerpost/' , controllers.register_post , name='register_post'),    
]
# controllers and pages are views in term of django , I use these words for my own understanding

请注意，我使用mysql作为数据库

Answer 1

我也能解决这个问题。

我的html按钮的类型是submit，

和i正在发送ajax(异步)请求，

python服务器在提交结束前完成ajax请求。

Solution:代替input type="submit"，使用input type="button"ajax调用

Answer 2

如果这对任何人都有帮助。

我有这样一个简单的形式:

<form class="collapse" id="collapsePredictionSettings">
<div class="row">
<div class="col-sm-3">
<div class="form-group pb-3">
<label for="predictInputModel" class="fs-5">Model</label>
<select name="predictInputModel" id="predictInputModel" class="form-control form-select">
<option selected>Choose...</option>
{% for model in models %}
<option value="{{model.id}}">{{model}}</option>
{% endfor %}
</select>
</div>
<hr />
<label for="predictInputBenchmark" class="fs-5">Benchmark</label>
<select name="predictInputBenchmark" id="predictInputBenchmark" class="form-control form-select">
<option value="{{sbl}}" selected>{{sbl}}</option>
<option>...</option>
</select>           
<input id="submitPrediction" class="btn btn-primary w-100 my-4" type="submit" value="Submit">
</div>
</div>
</form>

我的请求是以下AJAX请求:

$("#submitPrediction").click(function (){
const endpoint = '/ajax/prediction';
$.ajax({
method: "GET",
url: endpoint,
data: {
'benchmark': $( "#predictInputBenchmark option:selected" ).text(),
'modelSelected': $( "#predictInputModel option:selected" ).val(),
'action': 'predict'
},
dataType: 'json',
success: function (data){
alert('works')
chart.timeScale().fitContent();
},
error: function(xhr, errmsg, err) {
console.log(xhr.status + ":" + xhr.responseText)
}
});
});

问题是表单中的提交类型与ajax请求冲突，我的解决方案是简单地从表单中创建一个div。

<div class="collapse" id="collapsePredictionSettings">
...
<input id="submitPrediction" class="btn btn-primary w-100 my-4" type="submit" value="Submit">
</div>