温故知新（Java项目）

客官°小女子只卖身不卖艺 2023-09-24 21:19 54阅读 0赞

## 前言 ##

回顾过往所做的项目，梳理并记录一些零散的知识点

--------------------

#### 目录 ####

*  前言
 *  一、JSON数据格式
 *   *  1.1 JSON是什么
     *  1.2 JSON常用的两个数据格式
 *  二、前端->后端传递数据的序列化问题
 *   *  2.1 POST请求方式，需要将数据序列化
     *  2.2 GET请求方式，不需要进行序列化
     *  2.3 From表单形式提交，不需要进行序列化
 *  三、前端->后端传递数据的碎碎念
 *   *  1. this.$axios
     *  2. Content-type
     *  3. JSON.stringify 与 qs.stringify
     *  4. axios、Content-type、JSON/qs.stringify
 *  四、JSON.parse(JSON.stringify()) 实现对对象的深拷贝
 *  五、axios与JQuery的区别？

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

## 一、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区别及优缺点][ajax_axios]

### 2. Content-type ###

**Content-type是什么？**：Content-Type表示内容类型和字符编码。请求头中的content-type，就是B端发给S端的数据类型描述 ，即请求体中的数据类型。即告诉服务器端，我给你传的数据是某种类型的。

**常见的四种数据类型**：

1.  application/json  
    描述：请求体中的数据会以json字符串的形式发送到后端  
    应用场景：①参数类型：JSON字符串格式；② 用在发送ajax（axios是ajax的衍生）请求时；③前后端分离开发场景中使用最多
2.  application/x-www-form-urlencoded  
    描述：请求体中的数据会以普通表单形式（键值对）发送到后端  
    应用场景：① 参数类型：表单（键值对）；② 采用POST请求方式
3.  multipart/form-data  
    描述：它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件  
    应用场景：① 参数类型：文件/键值对；② 采用POST请求方式
4.  text/xml  
    描述：这种格式（XML格式）是比较早的格式。现在用的比较少了，因为XML格式的数据被json的数据大，复杂。所以，基本上被淘汰了。

**参考文章**：[HTTP请求响应过程中的Content-type你真的清楚吗][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()) 实现对对象的深拷贝][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不同][axios_jQuery]

[ajax_axios]: https://blog.csdn.net/Senora/article/details/122220983#:~:text=%E7%AE%80%E5%8D%95%E6%9D%A5%E8%AF%B4%E5%B0%B1%E6%98%AFaj,ios%E4%B8%8D%E4%B8%80%E5%AE%9A%E6%9C%89%E3%80%82
[HTTP_Content-type]: https://zhuanlan.zhihu.com/p/370029419#:~:text=%E5%9C%A8%E4%BD%BF%E7%94%A8%20%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%20%E6%97%B6%EF%BC%8C%E8%AF%B7%E6%B1%82%E6%96%B9%E5%BC%8F%E6%98%AF,post%20%E6%97%B6%EF%BC%8Cform%E6%A0%87%E7%AD%BE%E7%9A%84%E5%B1%9E%E6%80%A7entry=%E2%80%9Dapplication/x-www-form-urlencoded%E2%80%9C%EF%BC%88%E8%BF%99%E4%B9%9F%E6%98%AF%E9%BB%98%E8%AE%A4%E5%80%BC%EF%BC%89%EF%BC%8C%E8%AF%B7%E6%B1%82%E5%A4%B4%E4%B8%AD%E7%9A%84content-type%E7%9A%84%E5%80%BC%E5%B0%B1%E6%98%AF%20application/x-www-form-urlencoded%E3%80%82
[JSON.parse_JSON.stringify_]: https://www.cnblogs.com/sweet-ice/p/10583192.html#:~:text=JSON.parse%20%28JSON.stringify%20%28obj%29%29%20%E6%88%91%E4%BB%AC%E4%B8%80%E8%88%AC%E7%94%A8%E6%9D%A5%E6%B7%B1%E6%8B%B7%E8%B4%9D%EF%BC%8C%E5%85%B6%E8%BF%87%E7%A8%8B%E8%AF%B4%E7%99%BD%E4%BA%86%20%E5%B0%B1%E6%98%AF%E5%88%A9%E7%94%A8JSON.stringify%20%E5%B0%86js%E5%AF%B9%E8%B1%A1%E5%BA%8F%E5%88%97%E5%8C%96%EF%BC%88JSON%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%89%EF%BC%8C%E5%86%8D%E4%BD%BF%E7%94%A8JSON.parse%E6%9D%A5%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96%20%28%E8%BF%98%E5%8E%9F%29js%E5%AF%B9%E8%B1%A1%EF%BC%9B%E5%BA%8F%E5%88%97%E5%8C%96%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E5%AD%98%E5%82%A8%20%28%E5%AF%B9%E8%B1%A1%E6%9C%AC%E8%BA%AB%E5%AD%98%E5%82%A8%E7%9A%84%E5%8F%AA%E6%98%AF%E4%B8%80%E4%B8%AA%E5%9C%B0%E5%9D%80%E6%98%A0%E5%B0%84%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%96%AD%E7%94%B5%EF%BC%8C%E5%AF%B9%E8%B1%A1%E5%B0%86%E4%B8%8D%E5%A4%8D%E5%AD%98%E5%9C%A8%EF%BC%8C%E5%9B%A0%E6%AD%A4%E9%9C%80%E5%B0%86%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%86%85%E5%AE%B9%E8%BD%AC%E6%8D%A2%E6%88%90%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%BD%A2%E5%BC%8F%E5%86%8D%E4%BF%9D%E5%AD%98%E5%9C%A8%E7%A3%81%E7%9B%98%E4%B8%8A%29%E5%92%8C%E4%BC%A0%E8%BE%93%EF%BC%88%E4%BE%8B%E5%A6%82,%E6%88%96%E8%80%85%20multipart/form-data%20%E5%88%99%E5%8F%AF%E4%BB%A5%E4%B8%8D%E9%9C%80%E8%A6%81%20%EF%BC%89%EF%BC%9B%E6%88%91%E4%BB%AC%E5%9C%A8%E4%BD%BF%E7%94%A8%20JSON.parse%20%28JSON.stringify%20%28xxx%29%29%20%E6%97%B6%E5%BA%94%E8%AF%A5%E6%B3%A8%E6%84%8F%E4%B8%80%E4%B8%8B%E5%87%A0%E7%82%B9%EF%BC%9A
[axios_jQuery]: https://blog.csdn.net/JavaYao1/article/details/109097942