最传统的JavaWeb都是通过JSP传递数据，显然这样不能做到前后端分离，于是引进了ajax方式，而axios就是对ajax的封装。

---

注意事项：

如果向SpringBoot发送请求出现http错误等问题可以从以下几个方面考虑：

1、传输POST请求时，参数名称与后台模型类内的属性名不同。

2、传递参数的数据类型与后台的模型类型不匹配，js是脚本语言，有时的数字1它可能给存成字符串1，而后台是Integer类型，就导致类型不匹配造成http错误。

3、需要给SpringBoot的Controller(web)层类加上一个注解，见我的另一篇文章。

---

一、首先我们需要下载一个axios的js文件，

axios文件下载地址：

 https://pan.baidu.com/s/1seCfwBByh1P9nOCiSjVijQ?pwd=6cq7    提取码: 6cq7

下载完毕之后将其放到对应的目录里：

二、用js引用axios文件：

在html标签种用标签引用刚刚导入的axios文件：

<script src="page/axios-0.18.0.js">script>

三、发送请求：

发送方式主要有两种POST和GET：

1、POST请求：

            sendRequest(start, length) {
                axios({
                    method: "POST", //请求的方式
                    url: 'http://127.0.0.1:8080/study/vueElement/searchInfo', //请求的路径
                    data:this.data //携带的数据，如果没有可以将这行删除
                }).then(resp=> {
                    console.log(resp)//返回来的数据
                })
            },

2、GET请求：

• 地址栏可以携带？参数

           sendRequest(start, length) {
                axios({
                    method: "GET", //请求的方式
                    url: 'http://127.0.0.1:8080/study/vueElement/getData?start='+this.start, //请求的路径
                }).then(resp=> {
                    console.log(resp)//返回来的数据
                })
            },

这样就完成前后端交换数据啦！