当前位置: 首页 > news >正文

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

前端页面报错:

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

put接口代码:

class PutView(BaseView):def put(self, request):# Django 并没有处理PUT数据,不可以使用request.PUT# 实际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'# 需要导入 from django.http import QueryDict,QueryDict(request.body)} 处理下# 更新数据:需要告知是具体更新哪一条数据# 获取要更新哪条数据的主键idp_id = request.PUT.get('id')print('p_id',p_id)# 通过id 从数据库中取这条数据 objdata_obj = self.model.objects.get(id=p_id)# 第一个参数:前端传过来的数据# 第二个参数(instance):数据库获取的,要更新的对象form_obj = self.form(request.PUT, instance=data_obj)if form_obj.is_valid():# 通过 form中的save方法进行数据更新form_obj.save()return NbResponse()# return JsonResponse({"code": 200, "msg": "put接口数据更新成功"})else:return NbResponse(code=500,msg=form_obj.errors.get_json_data())
middle_wares.py:
class PutMethodMiddleware(MiddlewareMixin):def process_request(self, request):# 请求过来之后,先走到这里if request.method == 'PUT':request.PUT = QueryDict(request.body)

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

class PutMethodMiddleware(MiddlewareMixin):def process_request(self, request):# 请求过来之后,先走到这里if request.method == 'PUT':print('QueryDict(request.body)===',QueryDict(request.body))request.PUT = QueryDict(request.body)

结果:

QueryDict(request.body)=== <QueryDict: {'------WebKitFormBoundarycRPtgGxEmmEAlBmC\r\nContent-Disposition: form-data': [''], ' name': ['"name"\r\n\r\n继
续测试111\r\n------WebKitFormBoundarycRPtgGxEmmEAlBmC\r\nContent-Disposition: form-data', '"value"\r\n\r\n继续测试\r\n------WebKitFormBoundarycRPtgGxEmm
EAlBmC\r\nContent-Disposition: form-data', '"desc"\r\n\r\n继续测试\r\n------WebKitFormBoundarycRPtgGxEmmEAlBmC\r\nContent-Disposition: form-data', '"id"
\r\n\r\n19\r\n------WebKitFormBoundarycRPtgGxEmmEAlBmC--\r\n']}>

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

在这里插入图片描述

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

查验源码后,进行调整:

class PutMethodMiddleware(MiddlewareMixin):@staticmethoddef process_request(self, request):# 请求过来之后先走到这里,然后再去请求视图if request.method == 'PUT':if 'boundary' in request.content_params.kes():put_data,files = request.parse_file_upload(request.MEAT,request)request.PUT = put_datarequest._files = files # 是因为request.FILES 里面取值的时候,就是_fileselse:request.PUT = QueryDict(request.bady)

已可正常修改无报错:

在这里插入图片描述

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你! 

http://www.lryc.cn/news/233285.html

相关文章:

  • 微电影分销付费短剧小程序开发
  • 时间序列预测中的4大类8种异常值检测方法(从根源上提高预测精度)
  • Android---Gradle 构建问题解析
  • 02-2解析JsonPath
  • Git拉取远程指定分支
  • 使用Ant Design Pro开发时的一个快速开发接口请求的技巧
  • m1 rvm install 3.0.0 Error running ‘__rvm_make -j8‘
  • 对产品实现汇率换算服务(将两个CompletableFuture对象整合起来,无论它们是否存在依赖)
  • 数据库期末考前复习题(单选+多选+判断+解答)
  • Ubuntu22.04源码安装ROS-noetic(ROS1非ROS2),编译运行VINS-MONO
  • 窗口管理工具 Mosaic mac中文版功能特点
  • Sql Prompt 10下载安装图文教程
  • VB.net webbrowser 自定义下载接口实现
  • Android 启动优化案例-WebView非预期初始化排查
  • 【MATLAB源码-第80期】基于蚯蚓优化算法(EOA)的无人机三维路径规划,输出做短路径图和适应度曲线
  • 树状图怎么画?推荐这个好用的在线树状图软件!
  • C#学习相关系列之Linq用法---where和select用法(二)
  • 后端返回 date 时间日期格式为 UTC 格式字符串,形如 2022-08-11T10:50:31.050+00:00前端如何修改为yyyy-mm-dd
  • 【万字长文】前端性能优化实践 | 京东云技术团队
  • WPF位图效果
  • CFI(Common Flash Interface)简介
  • linux、windows 查看java等进程占用资源情况
  • 听GPT 讲Rust源代码--library/core/src(7)
  • html:lang属性设置为中文zh-CN
  • 滴滴 Redis 异地多活的演进历程
  • 前端实现页面内容的截图与下载(html2canvas)
  • VS2017 IDE 编译时的 X86、x64位 是干什么的
  • 微信小程序 解决tab页切换过快 数据出错问题
  • Taro编译警告解决方案:Error: chunk common [mini-css-extract-plugin]
  • 基于JavaWeb+SpringBoot+Vue电子商城微信小程序系统的设计和实现