实例解释遇到前端报错时如何排查问题

前端页面报错：

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个月整理的软件测试自学全栈，这些资料希望能给你前进的路上带来帮助。

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