前端

http-axios请求分析

原文件(表格)下载:

请求方法 | 参数类型分析:

请求方法URL请求参数类型请求体请求体内容content-typerequest$_GET$_REQUEST$_POST$_FILES备注
gethttp://localhost:8085/devApi/test00000
posthttp://localhost:8086/devApi/test00000
deletehttp://localhost:8087/devApi/test00000
puthttp://localhost:8088/devApi/test00000
patchhttp://localhost:8089/devApi/test00000
headhttp://localhost:8090/devApi/test
optionshttp://localhost:8091/devApi/test
connect  请求失败        
trace  请求失败        
            
gethttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=311100params请求
posthttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=311100
deletehttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=311100
puthttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=311100
patchhttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=311100
headhttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=3
optionshttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=3
            
gethttp://localhost:8080/devApi/testdataapplication/json;charset=utf-800000get不能带上data,data默认以json方式请求
posthttp://localhost:8080/devApi/testdataRequest Payload{“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-810000
deletehttp://localhost:8081/devApi/testdataRequest Payload{“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-810000
puthttp://localhost:8082/devApi/testdataRequest Payload{“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-810000
patchhttp://localhost:8083/devApi/testdataRequest Payload{“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-810000
headhttp://localhost:8084/devApi/testdataapplication/json;charset=utf-8head与get相似且不返回内容
optionshttp://localhost:8085/devApi/testdataRequest Payload{“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-8options与post相似且不返回内容
            
gethttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=3application/json;charset=utf-811100
posthttp://localhost:8080/devApi/test?a=1&b=2params、dataQuery String Parameters、Request Payloada=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-8{a: “1”, b: “2”, abc: 4, aa: 11, bb: 22}{a: “1”, b: “2”, abc: “3”}{a: “1”, b: “2”, abc: “3”}00data优先级比params高
deletehttp://localhost:8080/devApi/test?a=1&b=2params、dataQuery String Parameters、Request Payloada=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-8{a: “1”, b: “2”, abc: 4, aa: 11, bb: 22}{a: “1”, b: “2”, abc: “3”}{a: “1”, b: “2”, abc: “3”}00
puthttp://localhost:8080/devApi/test?a=1&b=2params、dataQuery String Parameters、Request Payloada=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-8{a: “1”, b: “2”, abc: 4, aa: 11, bb: 22}{a: “1”, b: “2”, abc: “3”}{a: “1”, b: “2”, abc: “3”}00
patchhttp://localhost:8080/devApi/test?a=1&b=2params、dataQuery String Parameters、Request Payloada=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-8{a: “1”, b: “2”, abc: 4, aa: 11, bb: 22}{a: “1”, b: “2”, abc: “3”}{a: “1”, b: “2”, abc: “3”}00
headhttp://localhost:8080/devApi/test?a=1&b=2paramsQuery String Parametersa=1&b=2&abc=3application/json;charset=utf-8
optionshttp://localhost:8080/devApi/test?a=1&b=2params、dataQuery String Parameters、Request Payloada=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}application/json;charset=utf-8
            
            
            
params为URL上的参数;data为请求体内的参数

请求体 | 内容格式 分析:

请求方式请求参数类型请求体请求内容请求内容解析参数转化(URL: paramsSerializer,Body: transformRequest)content-typerequest$_GET$_REQUEST$_POST$_FILES备注
getparamsQuery String Parametersa=1&arr%5B0%5D=1&arr%5B1%5D=a&obj%5Bq%5D=q&obj%5Bw%5D=w&mix1%5B0%5D%5Ba%5D=1&mix1%5B1%5D%5B0%5D=2&mix1%5B2%5D=3&mix2%5Ba%5D=1&mix2%5Bb%5D%5B0%5D=1&mix2%5Bc%5D%5Ba%5D=1a: 1
arr[0]: 1
arr[1]: a
obj[q]: q
obj[w]: w
mix1[0][a]: 1
mix1[1][0]: 2
mix1[2]: 3
mix2[a]: 1
mix2[b][0]: 1
mix2[c][a]: 1
data => qs.stringify(data)正常解析Arr/Obj,num为str正常解析Arr/Obj,num为str正常解析Arr/Obj,num为str00
getparamsQuery String Parametersa=1&arr[]=1&arr[]=a&obj=%7B%22q%22:%22q%22,%22w%22:%22w%22%7D&mix1[]=%7B%22a%22:1%7D&mix1[]=[2]&mix1[]=3&mix2=%7B%22a%22:1,%22b%22:[1],%22c%22:%7B%22a%22:1%7D%7Da: 1
arr[]: 1
arr[]: a
obj: {“q”:”q”,”w”:”w”}
mix1[]: {“a”:1}
mix1[]: [2]
mix1[]: 3
mix2: {“a”:1,”b”:[1],”c”:{“a”:1}}
解析第一层析Arr/Obj后面为JSON解析第一层析Arr/Obj后面为JSON解析第一层析Arr/Obj后面为JSON00
getparamsQuery String Parameters{%22a%22:1,%22arr%22:[1,%22a%22],%22obj%22:{%22q%22:%22q%22,%22w%22:%22w%22},%22mix1%22:[{%22a%22:1},[2],3],%22mix2%22:{%22a%22:1,%22b%22:[1],%22c%22:{%22a%22:1}}}{“a”:1,”arr”:[1,”a”],”obj”:{“q”:”q”,”w”:”w”},”mix1″:[{“a”:1},[2],3],”mix2″:{“a”:1,”b”:[1],”c”:{“a”:1}}}: data => JSON.stringify(data)解析异常解析异常解析异常00
             
postdataRequest Payload{“a2″:1,”arr2″:[1,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}正常解析的Arr/Obj默认 application/json;charset=utf-8正常解析Arr/Obj0000
postdataForm Dataa2=1&arr2%5B0%5D=1&arr2%5B1%5D=a&obj2%5Bq%5D=q&obj2%5Bw%5D=w&mix12%5B0%5D%5Ba%5D=1&mix12%5B1%5D%5B0%5D=2&mix12%5B2%5D=3&mix22%5Ba%5D=1&mix22%5Bb%5D%5B0%5D=1&mix22%5Bc%5D%5Ba%5D=1a2: 1
arr2[0]: 1
arr2[1]: a
obj2[q]: q
obj2[w]: w
mix12[0][a]: 1
mix12[1][0]: 2
mix12[2]: 3
mix22[a]: 1
mix22[b][0]: 1
mix22[c][a]: 1
data => qs.stringify(data)默认 application/x-www-form-urlencoded正常解析Arr/Obj,num为str0正常解析Arr/Obj,num为str正常解析Arr/Obj,num为str0
postdataForm Data{“a2″:1,”arr2″:[1,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}{“a2″:1,”arr2″:[1,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}: data => JSON.stringify(data)默认 application/x-www-form-urlencoded解析异常0解析异常解析异常0
postdataRequest Payload{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}正常解析的Arr/Objdata => JSON.stringify(data)application/json;charset=utf-8正常解析Arr/Obj0000
postdataRequest Payloada2=1&arr2%5B0%5D=1&arr2%5B1%5D=2&arr2%5B2%5D=a&obj2%5Bq%5D=q&obj2%5Bw%5D=w&mix12%5B0%5D%5Ba%5D=1&mix12%5B1%5D%5B0%5D=2&mix12%5B2%5D=3&mix22%5Ba%5D=1&mix22%5Bb%5D%5B0%5D=1&mix22%5Bc%5D%5Ba%5D=1无法解析data => qs.stringify(data)application/json;charset=utf-800000
postdataForm Data{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}:  application/x-www-form-urlencoded解析异常0解析异常解析异常0
postdataRequest Payload{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}正常解析的Arr/Objmultipart/form-data00000
postdataRequest Payloada2=1&arr2%5B0%5D=1&arr2%5B1%5D=2&arr2%5B2%5D=a&obj2%5Bq%5D=q&obj2%5Bw%5D=w&mix12%5B0%5D%5Ba%5D=1&mix12%5B1%5D%5B0%5D=2&mix12%5B2%5D=3&mix22%5Ba%5D=1&mix22%5Bb%5D%5B0%5D=1&mix22%5Bc%5D%5Ba%5D=1无法解析data => qs.stringify(data)multipart/form-data00000
postdataRequest Payload{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}正常解析的Arr/Objdata => JSON.stringify(data)multipart/form-data00000
             
postformForm Data——WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”file”; filename=”QQ截图20210126215039.png”
Content-Type: image/png


——WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”text”

a
—-C21–WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”num”

1
——WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”obj”

[object Object]
——WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”arr”

1,a,1,2
——WebKitFormBoundaryXHfVashxAsB3Ur7O–E19
file: (binary)
text: a
num: 1
obj: [object Object]
arr: 1,a,1,2
不转化只能默认 multipart/form-data; boundary=—-WebKitFormBoundaryXHfVashxAsB3Ur7O展开解析数组,不解析对象,num为str,有文件不存在‘file’的键,无文件则为file:’null’0展开解析数组,不解析对象,有文件不存在‘file’的键,无文件则为file:’null’展开解析数组,不解析对象,有文件不存在‘file’的键,无文件则为file:’null’文件列表对象
postformForm Data{}{}:data => qs.stringify(data)默认 application/x-www-form-urlencoded解析异常0解析异常解析异常0
postformForm Data{}{}:data => JSON.stringify(data)默认 application/x-www-form-urlencoded解析异常0解析异常解析异常0
postformdata => qs.stringify(data)application/json00000
postformRequest Payload{}{}data => JSON.stringify(data)application/json00000
postformObjForm Data——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”a2″

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”arr2[0]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”arr2[1]”

2
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”arr2[2]”

a
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”obj2[q]”

q
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”obj2[w]”

w
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix12[0][a]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix12[1][0]”

2
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix12[2]”

3
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix22[a]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix22[b][0]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix22[c][a]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”files[]”; filename=”QQ截图20210127214015.png”
Content-Type: image/png


——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”files[]”; filename=”QQ截图20210127214015.png”
Content-Type: image/png


——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”file”; filename=”QQ截图20210127214015.png”
Content-Type: image/png


——WebKitFormBoundaryZ92KqK0WZgqO9PzU–
a2: 1
arr2[0]: 1
arr2[1]: 2
arr2[2]: a
obj2[q]: q
obj2[w]: w
mix12[0][a]: 1
mix12[1][0]: 2
mix12[2]: 3
mix22[a]: 1
mix22[b][0]: 1
mix22[c][a]: 1
files[]: (binary)
files[]: (binary)
file: (binary)
data => {
            let formData = new FormData;
            qs.stringify(data,{encode:false,skipNulls:true}).split(‘&’).forEach(item=>{
              let arr = item.split(‘=’)
              formData.append(arr[0],arr[1])
            })
            //遍历data对象
            for (let k in data){
              //处理单文件
              if (data[k] instanceof File){
                formData.append(k,data[k])
              }else if (Array.isArray(data[k]) && data[k].length>0 &&(data[k][0] instanceof File)){
                //处理多文件
                data[k].forEach(item=>{
                  formData.append(k+'[]’,item)
                })
              }
            }
            return formData
          }
默认 multipart/form-data; boundary=—-WebKitFormBoundaryZ92KqK0WZgqO9PzU正常解析Arr/Obj,num为str0正常解析Arr/Obj,num为str正常解析Arr/Obj,num为str文件列表对象
             

前端学习路线汇总

一、参考手册
①W3school代码手册:https://www.w3school.com.cn/
②MDN参考手册: https://developer.mozilla.org/zh-CN/
③菜鸟教程:https://www.runoob.com/html/html-tutorial.html
④Vue官方文档:https://cn.vuejs.org/v2/guide/
⑤Vue-Cli脚手架官方文档:https://cli.vuejs.org/zh/guide/
⑥JQuery:https://api.jquery.com/
⑦Typescript (TS):https://www.typescriptlang.org/zh/
⑧Webpack:https://webpack.docschina.org/concepts/
⑨Nuxt.js:https://nuxtjs.org/
⑩SSR:https://ssr.vuejs.org/zh/

二、教学视频
第一阶段:学习HTML5+CSS3
李南江的HTML5+CSS3零基础教程(看这个就够了)
https://www.bilibili.com/video/av21212670

第二阶段:学习JavaScript(JS)脚本语言
尚硅谷的JavaScript零基础入门(1-140集为入门):
https://www.bilibili.com/video/BV1YW411T7GX

第三阶段:学习移动端设计(Flex布局是重点)
黑马程序员pink老师前端入门教程(1-390查缺补漏选看,重点看390集后)
https://www.bilibili.com/video/BV14J4114768?p=390

第四阶段:学习ES6+新版本(Promise Async 箭头函数等都是重点):
https://www.bilibili.com/video/BV1uK411H7on

第五阶段:学习JS原理和高级部分:
https://www.bilibili.com/video/BV14s411E7qf

选看:JQuery (用了Vue后基本用不着,有时间可以看)
https://www.bilibili.com/video/BV17W41137jn

=================================================================

第六阶段:框架学习 【Vue】:
https://www.bilibili.com/video/BV15741177Eh

第七阶段:UNI-APP【手机App、微信小程序开发、H5等混合式开发】(基于Vue,半天上手)
https://www.bilibili.com/video/BV1BJ411W7pX

第八阶段:
一 )、Typescript(TS,选看)
https://www.bilibili.com/video/BV1Xy4y1v7S2
二 )、新版Vue3(选看)
https://www.bilibili.com/video/BV1ra4y1H7ih
三)、Webpack
https://www.bilibili.com/video/BV1e7411j7T5

第九阶段:搜索引擎SEO优化
一 )、【全套SEO优化学习教程】 SEO基础:
https://www.bilibili.com/video/BV1fE411J7ya
https://www.bilibili.com/video/BV1m4411A79a
二 )、VUE的SSR服务端渲染(快速过一遍即可)
https://www.bilibili.com/video/BV1eE41187ny
三)、Nuxt框架(基于Vue)
https://www.bilibili.com/video/BV13Z4y1T74J

=================================================================

第十阶段:全栈开发路线(PHP、Node.js等)

一)、PHP:
黑马程序员28天PHP零基础入门到精通教程(P1基础6天)
https://www.bilibili.com/video/BV18x411H7qD
28天PHP零基础入门到精通教程(P2 mysql数据库5天)
https://www.bilibili.com/video/BV1Vx411g7uJ
28天PHP零基础入门到精通教程(P3 核心编程技术)
https://www.bilibili.com/video/BV1jx411M7B7

【李炎恢】【ThinkPHP6.x / PHP框架】【十天精品课堂系列】
https://www.bilibili.com/video/BV12E411y7u8

二)、Node.js:
https://www.bilibili.com/video/BV1ca4y1n7u3?from=search&seid=1042259761293661091