Django 错误，来自 ('127.0.0.1', 33609) 的管道损坏

Question

我正在创建 django 项目并收到此错误。 ('127.0.0.1', 33609) 的管道损坏。我一直在尝试做的是使用 auth_user 表（django 框架的默认用户身份验证表）创建表，并创建了自己的表。当用户注册时，我将使用 User.objects.create_user() 将其记录在 auth_user 表中，然后创建自己的对象，然后将 .save() 保存到我的表中。在这一步中，我创建了嵌套属性，并且我认为我以正确的方式分配了每个属性。据我所知，他们都成功了，记录都保存到了数据库中。对于前端，我使用带有函数 .then 的 axios 来接收来自服务器的响应，它给了我错误，说 Broken pipe from ('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

去掉form标签，解决问题

Answer 2

我也能解决这个问题。

我的 html 按钮是 submit，

我正在发送ajax(async) 请求，

python 服务器在提交结束前处理了我的 ajax 请求。

因此，这个错误。

Solution: 不是使用input type="submit"，而是使用input type="button" 进行ajax 调用。