前言
回顾过往所做的项目,梳理并记录一些零散的知识点
目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、JSON数据格式
1.1 JSON是什么
是基于 JavaScript(Web 的编程语言,用于写前端的方法, 控制网页的行为) 的一个子集,是一种开放的、轻量级的数据交换格式,采用独立于编程语言的文本格式来存储和表示数据,易于程序员阅读与编写,同时也易于计算机解析和生成,通常用于在 Web 客户端(浏览器)与 Web 服务器端之间传递数据。
1.2 JSON常用的两个数据格式
// JOSN数组(成员既可以是对象,也可以是字符串)
userInfo:[{"age":"12"},"Zhao","180cm",],
// JSON对象(属性值既可以是字符串,也可以是数组)
UserInfo:{
"Name":"zzz",
"Other":[
"180cm",
"80kg",
"2001"
],
"age":"22",
},
二、前端->后端传递数据的序列化问题
前言 :后端服务器可以识别的数据格式是序列化后的格式
2.1 POST请求方式,需要将数据序列化
需要序列化的原因:使用POST请求,前端发送的数据会以原始数据格式(JOSN格式)存储在body之中,然后直接发送给后端,后端无法识别这些数据。所以前端要将参数序列化后再POST给后端。
2.2 GET请求方式,不需要进行序列化
不需要序列化的原因:GET请求方式提交数据时,参数会直接附加到url后边,即http://xxxx.xxx?a=1&b=2&c=3(GET请求会自动将传递的数据序列化)。
2.3 From表单形式提交,不需要进行序列化
不需要序列化的原因:如果数据是通过表单Form提交,不管是get还是post,浏览器都会自动进行序列化,无需前端再做处理。
三、前端->后端传递数据的碎碎念
1. this.$axios
axios是什么?:简单理解,axios是封装好的、基于promise的从前端向后端发送请求的方法。
axios与ajax的区别与联系:axios是通过Promise实现对ajax技术(多种技术的组合,用于快速的创建动态页面,能够实现无刷新更新数据)的一种封装,axios有的ajax都有,ajax有的axios不一定有。
详细内容参考:ajax和axios区别及优缺点
2. Content-type
Content-type是什么?:Content-Type表示内容类型和字符编码。请求头中的content-type,就是B端发给S端的数据类型描述 ,即请求体中的数据类型。即告诉服务器端,我给你传的数据是某种类型的。
常见的四种数据类型:
-
application/json
描述:请求体中的数据会以json字符串的形式发送到后端
应用场景:①参数类型:JSON字符串格式;② 用在发送ajax(axios是ajax的衍生)请求时;③前后端分离开发场景中使用最多 -
application/x-www-form-urlencoded
描述:请求体中的数据会以普通表单形式(键值对)发送到后端
应用场景:① 参数类型:表单(键值对);② 采用POST请求方式 -
multipart/form-data
描述:它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件
应用场景:① 参数类型:文件/键值对;② 采用POST请求方式 -
text/xml
描述:这种格式(XML格式)是比较早的格式。现在用的比较少了,因为XML格式的数据被json的数据大,复杂。所以,基本上被淘汰了。
参考文章:HTTP请求响应过程中的Content-type你真的清楚吗
3. JSON.stringify 与 qs.stringify
区别与联系:JSON.stringify与qs.stringify()功能都是将JSON数据格式序列化为字符串,但是序列化的方式不同,应用场景也有所区别。
- JSON.stringify将JSON对象序列化为JSON字符串形式;JSON.parse转化回去;
- qs.stringify将JOSN对象序列化为URL形式,用&拼接;qs.parse转化回去;
JSON.stringify与qs.stringify()序列化后的结果对比如下:
var a = {name:'hehe',age:10};
JSON.stringify(a)
// '{"name":"hehe","age":10}'
qs.stringify(a)
// 'name=hehe&age=10'
4. axios、Content-type、JSON/qs.stringify
三者联系:前端使用axios向后端发送POST请求时,通过设置Content-type来标识传递的参数是哪种数据类型,不同的数据类型会采用不同的序列化方法。
axios 可配置的三种 Content-Type及参数处理方案
① Content-Type: application/json<---->JSON.stringify
配置方法:无需配置,这种是axios默认的请求数据类型,
参数处理:通过JSON.stringify将参数序列化JSON字符串再传递
② Content-Type: application/x-www-form-urlencoded<---->qs.stringify
配置方法:需要将axios请求头中的content-type配置为application/x-www-form-urlencoded类型
// 第一种方式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 第二种方式
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
参数处理:通过qs.stringify将参数序列化url字符串再传递
import Qs from 'qs'
let data = {
"username": "cc",
"psd": "123456"
}
axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'post',
url: '/api/lockServer/search',
data: Qs.stringify(data)
})
③ Content-Type: multipart/form-data<---->URLSearchParams
配置方法:无需配置,采用特殊参数传递数据
参数处理:用 URLSearchParams 传递参数
let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
method: 'post',
url: '/api/lockServer/search',
data: param
})
四、JSON.parse(JSON.stringify()) 实现对对象的深拷贝
为了避免出现“ 某一数据变动后,其之前赋值过的变量也出现变动 ”的连坐现象,一般采用深拷贝,具体情况参考原博客:JSON.parse(JSON.stringify()) 实现对对象的深拷贝
五、axios与JQuery的区别?
- axios的’Content-Type’默认采用的是application/json,即axios默认的需要用JSON.stringify进行序列化参数
- JQuery的’Content-Type’默认采用的是application/x-www-form-urlencoded,即JQuery默认的需要用qs.stringify进行序列化参数
参考连接:浅谈axios与jQuery不同