说明：本项目为SpringBoot项目而不是vue项目，本项目用于练习axios使用get及post请求
get和post请求都采用两种方式进行配置，并注明易错点
@[toc]
1.axios是什么
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，axios是对ajax的一种封装，而jquery也是对ajax的一种封装。
axios的github:https://github.com/axios/axios
2.vue项目为什么使用axios，而不使用jquery？
axios集成vue更好且占内存小，而如果只用jquery的ajax的话，毕竟几百k，$表达式也不用情况下显得太笨重了，因此vue项目使用axios居多且集成的更好。
3.SpringBoot项目的html页面引入axios方式，采用script引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 至于网上说的方案，对springboot项目测试无效
import axios from ‘axios’;
//安装方法
npm install axios
//或
bower install axios
4.官网为方便起见，为所有支持的请求方法提供了别名
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 5.get请求的两种方式
使用方式1(推荐) => axios.get();
注意1：headers请求头设置位置不一样，axios.get()中headers存在于{}中，而axios({})中headers当成一个key，value进行设置。
注意2：get请求参数封装与params对象中。
axios.get("/getVue", { params: { name:"zhangsan" }, headers: { responseType: 'json' //响应数据格式为"json" } }).then((res)=>{ myForm.formMess.name = res.data.info.name; myForm.formMess.password = res.data.info.password; alert("查询数据成功！") }).catch(err => { console.log(err); //打印响应数据(错误信息) }); 使用方式2 => axios({})
axios({ method:"get", url:"/getVue", params:{ name:"zhangsan" }, headers: { responseType: 'json' //响应数据格式为"json" } }).then((res)=>{ myForm.formMess.name = res.data.info.name; myForm.formMess.password = res.data.info.password; alert("查询数据成功！") }).catch(err => { console.log(err); //打印响应数据(错误信息) }); 6.post请求的两种方式
使用方式1(推荐) => axios.post();
注意点1：headers请求头设置位置不一样，axios.post()中headers存在于第三个{}中，而axios({})中headers当成一个key，value进行设置。
注意点2：axios.post()的第二个{}指代请求体中没有作为key的data，而axios({})中使用data作为请求体参数。
axios.post("/addVue", { "name":this.formMess.name, "password":this.formMess.password },{ headers: { responseType: 'json' } }).then((res)=>{ console.log(res); alert("提交数据成功！") }).catch(err => { console.log(err); //打印响应数据(错误信息) }); 使用方式2 => axios({})
axios({ method:"post", url:"/addVue", data:{ "name":this.formMess.name, "password":this.formMess.password, }, header:{ responseType: 'json' //响应数据格式为"json" } }).then((res)=>{ console.log(res); alert("提交数据成功！") }).catch(err => { console.log(err); //打印响应数据(错误信息) }); 本人相关其他文章链接
1.JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化
2.个人练习前端技术使用Bootstrap、JQuery、thymeleaf
5.SpringBoot项目的html页面使用axios进行get post请求
重要信息
