Hello World - 2023年12月
type: channel
link: https://blog.xunbaidu.com/2023/12/
description: ----------------------------------------------------------------------------------------
items: 为什么Payload会不显示？
items: Swiper踩坑经历

为什么Payload会不显示？
type: item
date: 2023-12-17T18:18:28+08:00
description: 问题背景在一次使用Chrome开发者工具调试中，发现找不到接口参数了，但仔细检查代码后以及结合接口响应数据来看确确实实是传参数了的，并且后端也正常接收到了请求数据，当时没有深入探究原因，现在对这个问题进行一下复盘。接口数据传输的方式Payload和Form Data是接口数据传输的两种方式，浏览器通过Content-Type来进行区分使用哪种方式：当值为application/x-www-form-urlencoded或multipart/form-data时，是Form Data方式当值为application/json时，是Request Payload方式Request Payload如下代码所示，使用axios发起post请求，设置请求头'Content-Type':'application/json'，成功发起请求后可在调试工具Payload Tab面板中看到请求参数。Request Payload通常用于发送JSON 或 XML格式的数据。axios.post(host + '/payload', { username: 'admin', password: 'admin', }, { headers: { 'Content-Type': 'application/json' } }).then((res) => { console.log(res) }).catch((err) => { console.log(err) })Form Data如下代码所示，设置请求头'Content-Type':'application/x-www-form-urlencoded'，请求参数使用Qs插件进行序列化后使用axios发送，在调试工具Payload Tab面板中可看到请求参数为Form Data类型。Form Data类型通常用于发送表单数据，并且可用来进行上传文件。axios.post(host + '/payload', Qs.stringify({ username: 'admin', password: 'admin', }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => { console.log(res) }).catch((err) => { console.log(err) })如上图所示，再点击view source后，可看到实际上传输的数据是一个字符串，由于设置了正确的Content-Type，可以被浏览器正常识别。但如果请求参数不进行序列化，还是用Form Data方式进行请求，浏览器依然是能够正常发送出请求的，并且浏览器的Payload将会显示：但是如果Server端如果仍按照Form Data方式对请求参数处理，那么可能会出错。所以，请求参数一定要和Content-Type是对应的，否则可能会影响Server端对请求参数的正常解析。Query String Parameters另外在Chrome中，Query参数也会被放到Payload中，如下图所示：注：Chrome 96版本前，Request Payload和Form Data信息是在HeadersTab中的，96版本之后它们都被放到了PayloadTab中。问题复现所发生问题的接口参数是Request Payload格式的，并且注意到其中有个对象数据量是很大的，因此根据这一特征构造一个请求尝试复现问题：如图所示，通过循环构造了一个长字符串作为对象data属性值，经过调整不同的循环次数进行测试，确定了当Content-Length超过10000000字节时Payload Tab就会消失，并且Preview和Response显示“Failed to load response data: request content was evicted from inspector cache”。这句话翻译为中文意思是“未能加载响应数据：请求内容已从检查器缓存中收回”，大概意思就是由于超出缓存限制，请求参数以及响应参数都不能正常显示了。通过观察后端接口的请求以及浏览器请求状态码（200 OK）可知，虽然调试工具不显示请求以及响应数据，但实际上是没有影响接口的正常请求以及响应的，并且前端也能够正常接收到后端响应数据，也就是说这个问题是不影响项目的正常运行的。另外通过测试发现，当Server端的响应数据过长时，在浏览器调试工具中也会发生同样的事情，而且也不会实际影响接口数据的响应。问题原因通过查询发现以下一些情况都可能导致此问题：请求的请求数据超过了浏览器的缓存限制请求的响应数据超过了浏览器的缓存限制在浏览器的开发者工具中查看了大量的…

Swiper踩坑经历
type: item
date: 2023-12-03T23:23:00+08:00
description: 背景有个移动端项目用了Vant组件库进行开发，其中有个需求要实现一个轮播图的效果，但是Vant组件库自带的轮播图组件功能有限，只能实现一些很基础的效果，而且在其基础上只进行一些样式的调整也难以实现想要的效果，所以就考虑使用其它的插件。Swiper是很著名的一个用于轮播图及移动动画的插件，面向手机、平板电脑等移动终端，并且开源免费。在网上进行搜索之后发现大多数的用法都是用原生js方式所实现的，并且Swiper官方在7版本之前也是没有适配Vue的，因此为了在Vue中能以组件方式进行调用Swiper，还诞生了一个12.7k star的第三方开源项目vue-awesome-swiper。另外在Vant的官网上也提到，如果需要更复杂的轮播效果，可以使用vue-awesome-swiper，因此就开始了一系列的踩坑之旅。遇到的问题（坑）安装模块点击进入vue-awesome-swiper的github主页，就可看到黄色的提示以及官方介绍，说是由于Swiper官网对vue的支持，这个库已经弃用了，当时看到这个提示的时候并没有细想（确实是有点急），看了如下的版本兼容性列表后发现 vue-awesome-swiper是支持项目所使用的Vue2的，于是就想着那就用它了。Swiper 5-6 vue-awesome-swiper@4.1.1 (Vue2)Swiper 4.x vue-awesome-swiper@3.1.3 (Vue2)Swiper 3.x vue-awesome-swiper@2.6.7 (Vue2)点击进去vue-awesome-swiper@4.1.1的github主页之后，看到了官方给的安装指令，心想真好，一顿CV执行了命令yarn add swiper vue-awesome-swiper，甚至都没有多看一眼但是很顺利安装上了vue-awesome-swiper。组件调用根据官方的引导进入了示例网站Examples (Vue2)，在里面找到了一个与想要效果类似的示例，并将代码复制到项目中测试运行，首先是导入组件：import { Swiper, SwiperSlide } from 'vue-awesome-swiper' import 'swiper/css/swiper.css'然后IDE报错，说是swiper.css找不到，其实这时就应该有所察觉的，但当时就想着怎么官网实例都有问题呢，可真不靠谱。在晚上一顿搜索说是，Swiper不同的版本swiper.css的位置可能是不一样的（这会竟然还没意识到Swiper的版本有问题），然后修改了正确的地址，没报错了。 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 接着把上面的代码复制进行了项目中，也成功运行了，并且没有任何报错，但是出来的效果没有和官网效果图一样，代码中slidesPerView设置3含义是容器中同时会出现3个swiper-slide，如下图所示。但实际上运行出的效果只有一个swiper-slide，之后又对比了与官方代码的区别，并没有什么不同，这就导致对官方代码暂时失去了信任。初步实现效果于是就在网上搜索了vue-awesome-swiper的相关用法，最终找到了能实现类似效果的一篇文章，那篇文章中的代码和官方代码相比，除了swiperOption配置外，最大的区别就是添加了一些自定义的css样式，使其实现了想要的效果。但是一个最大的问题就是分页器不显示，配置中的pagination属性就描述了分页器的相关信息，最初以为是配置写错了，但是经过一番检查后还是没发现问题，而且还用了旧版本的pagination写法也还是不行。通过Chrome的调试工具可发现，模板中写的pagination的div里面是空的，但是官方运行的实例里面是有元素的，也就是说pagination根本就没有生成，所以这就不是单单的样式问题了，就像是我写的配置没有生效一样，然后我还尝试修改了其它的一些配置发现都是没有效果的。新的思路这时想这应该还是仔细看下官方文档比较好，于是又回到了vue-awesome-swiper的github主页，才重视了"Swiper官方已对vue进行了支持"这句话，又心想既然已经有了官方的支持，那么就不用这个作为中间桥梁的第三方插件了吧，免不了这个插件会有什么莫名其妙的bug呢。Swiper官方在从7版本开始就对各大流行组件库进行了支持，包括Vue、React、Angular等。但是Swiper Vue组件的文档中有一句红色提示，说Swiper Vue组件以后很可能就不再支持了，推荐使用Swiper Element。Swiper7和8为适配Vue、Rea…