实例解释遇到前端报错时如何排查问题
2026/6/2 3:06:02 网站建设 项目流程

前端页面报错:

1、页面报错500,首先我们可以知道是服务端的问题,需要去看下服务端的报错信息:

2、首先我们查看下前端是否给后端传了id:

我们可以看到接口是把ID返回了,就需要再看下p_id是什么情况了。

3、我们再次请求,把p_id进行打印,看下具体是什么:

put接口代码:

  1. class PutView(BaseView):

  2. def put(self, request):

  3. # Django 并没有处理PUT数据,不可以使用request.PUT

  4. # 实际put传过来的数据是在request.body中,而获取到的数据是:b'name=%E5%8F%82%E6%95%B06&desc=%E5%8F%82%E6%95%B06%E6%8F%8F%E8%BF%B0&value=100866'

  5. # 需要导入 from django.http import QueryDict,QueryDict(request.body)} 处理下

  6. # 更新数据:需要告知是具体更新哪一条数据

  7. # 获取要更新哪条数据的主键id

  8. p_id = request.PUT.get('id')

  9. print('p_id',p_id)

  10. # 通过id 从数据库中取这条数据 obj

  11. data_obj = self.model.objects.get(id=p_id)

  12. # 第一个参数:前端传过来的数据

  13. # 第二个参数(instance):数据库获取的,要更新的对象

  14. form_obj = self.form(request.PUT, instance=data_obj)

  15. if form_obj.is_valid():

  16. # 通过 form中的save方法进行数据更新

  17. form_obj.save()

  18. return NbResponse()

  19. # return JsonResponse({"code": 200, "msg": "put接口数据更新成功"})

  20. else:

  21. return NbResponse(code=500,msg=form_obj.errors.get_json_data())

middle_wares.py:

  1. class PutMethodMiddleware(MiddlewareMixin):

  2. def process_request(self, request):

  3. # 请求过来之后,先走到这里

  4. if request.method == 'PUT':

  5. request.PUT = QueryDict(request.body)

分析:因Django中没有PUT 方法,是我们在 middle_wares.py 中分装了后实现的PUT 方法,所以我们就需要看下【QueryDict(request.body)】返回的是什么:

  1. class PutMethodMiddleware(MiddlewareMixin):

  2. def process_request(self, request):

  3. # 请求过来之后,先走到这里

  4. if request.method == 'PUT':

  5. print('QueryDict(request.body)===',QueryDict(request.body))

  6. request.PUT = QueryDict(request.body)

结果:

  1. QueryDict(request.body)=== <QueryDict: {'------WebKitFormBoundarycRPtgGxEmmEAlBmC\r\nContent-Disposition: form-data': [''], ' name': ['"name"\r\n\r\n继

  2. 续测试111\r\n------WebKitFormBoundarycRPtgGxEmmEAlBmC\r\nContent-Disposition: form-data', '"value"\r\n\r\n继续测试\r\n------WebKitFormBoundarycRPtgGxEmm

  3. EAlBmC\r\nContent-Disposition: form-data', '"desc"\r\n\r\n继续测试\r\n------WebKitFormBoundarycRPtgGxEmmEAlBmC\r\nContent-Disposition: form-data', '"id"

  4. \r\n\r\n19\r\n------WebKitFormBoundarycRPtgGxEmmEAlBmC--\r\n']}>

我们可以发现数据格式并不是我们以往的那样,我就需要回到前端中查看下【Request Headers】中的信息:

Content-Type发生了变化,所以传过来的数据也发生了变化,所以后端代码就需要把代码进行调整,兼容这种传递的方式。

查验源码后,进行调整:

  1. class PutMethodMiddleware(MiddlewareMixin):

  2. @staticmethod

  3. def process_request(self, request):

  4. # 请求过来之后先走到这里,然后再去请求视图

  5. if request.method == 'PUT':

  6. if 'boundary' in request.content_params.kes():

  7. put_data,files = request.parse_file_upload(request.MEAT,request)

  8. request.PUT = put_data

  9. request._files = files # 是因为request.FILES 里面取值的时候,就是_files

  10. else:

  11. request.PUT = QueryDict(request.bady)

已可正常修改无报错:

最后作为一位过来人也是希望大家少走一些弯路,在这里我给大家分享一些软件测试的学习资料和我花了3个月整理的软件测试自学全栈,这些资料希望能给你前进的路上带来帮助。

视频文档获取方式:
这份文档和视频资料,对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴我走过了最艰难的路程,希望也能帮助到你!以上均可以分享,点下方小卡片即可自行领取。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询