SpringBoot05--axios网络请求

SpringBoot05--axios网络请求_第1张图片

 浏览器主动发送请求,服务器接收请求之后返回数据,通过vue进行数据绑定

SpringBoot05--axios网络请求_第2张图片

 请求成功,返回的数据会包装到response里面去(返回成response的data属性)

SpringBoot05--axios网络请求_第3张图片

 好的这边不太懂

SpringBoot05--axios网络请求_第4张图片

 在xxx.vue组件被创建和挂载(渲染)的时候,会有以下两个生命周期函数被调用:

SpringBoot05--axios网络请求_第5张图片

 网络请求一般在页面被渲染之前也就是被创建的时候用

前后端开始合并了,由于两个都是8080所以把后端的端口改了

SpringBoot05--axios网络请求_第6张图片

response就是回调函数返回的后端的这个函数的json数据

 好吧还是失败了,在8080的控制台看到了以下报错

 这是一种跨域问题:

SpringBoot05--axios网络请求_第7张图片

 这俩不同源,端口不通,需要获得浏览器的授权

SpringBoot05--axios网络请求_第8张图片

SpringBoot05--axios网络请求_第9张图片

SpringBoot05--axios网络请求_第10张图片

SpringBoot05--axios网络请求_第11张图片

SpringBoot05--axios网络请求_第12张图片

 上面这种是传统的精细的策略,可以在springerboot里面采用注解的方式

在控制器里面加入@crossOrigin就可以允许下面的所有方法跨域执行

ok,怎么把服务器传回来的data渲染到表格里面去?

1. 先把刚刚axios那一套(本来在app.vue里面的)复制到El.vue(有表格的那个vue)里面去

2. 把原本自己赋值

SpringBoot05--axios网络请求_第13张图片

 报错是因为,this这东西的作用域的问题,可以用箭头函数搞,箭头函数里面的this继承了

父类的作用域

SpringBoot05--axios网络请求_第14张图片

 SpringBoot05--axios网络请求_第15张图片

 一些重用的部分可以整合一下,写在main里面:

SpringBoot05--axios网络请求_第16张图片

 

 $后面的可以自定义名字,现在我给个名字叫http,这意思是把axios属性绑定在vue.$http上

改完之后:

SpringBoot05--axios网络请求_第17张图片

 

你可能感兴趣的:(Springboot,前端,vue.js,javascript)