10、axios实现前后端互联

axios的作用

axios可以通过http请求，来调用后端已经写好了的接口,并将接收到的数据渲染到前端页面中去。可以通过npm install axios来安装axios。

axios支持RESTFul架构可以便捷的发送 GET POST DELETE UPDATE 请求

axios的helloworld

<script>
import HelloWorld from './components/HelloWorld.vue'
//导入axios
import axios from 'axios'

export default {
  name: 'App',
  data(){

  },
  //当App创建的时候会自动调用created这个函数
  created(){
    console.log("组件被创建了");
    //使用axios调用后端的hello函数
    axios.get('http://localhost:8088/hello').then(function(response){
      console.log(response);
    })
  },

  components: {
    HelloWorld
  }
}

</script>

跨域问题

只需要在spring boot的controller之上加上@CrossOrign标识符就可以将controller之中的所有方法变为可跨域的方法。