Vue网络请求axios

四、网络请求

 Vue2.X版本中，官方推荐的网络请求工具是axios。

    npm install axios vue-axios --save

4.1 配置全局请求地址

 新建Base.vue文件，内容如下：

<script>
    const BASE_URL = "http://localhost:8081"
    export default {
        BASE_URL
    }
</script>

4.2 main.js配置

import Vue from 'vue'
import App from './App.vue'
// 如下两个是网络的请求组件
import axios from 'axios'
import VueAxios from 'vue-axios'

import Base from './Base.vue'

Vue.use(VueAxios, axios);  //顺序有关系
axios.defaults.baseURL = Base.BASE_URL  //配置基本地址

new Vue({
  render: h => h(App),
}).$mount('#app')

4.3 发送GET请求

    this.axios.get('/user'
        /**  可以通过如下方式，添加请求头信息
        ,{
             headers: {
                 'token': 'hyfetrrabcpo'
             }
          }
        */
        ).then(resp => {    //请求成功
            this.users = resp.data;
        }, (error) => {
            window.console.log(error);
        })

4.4 发送POST请求

    this.axios.post('/user',{name: '李白', id: 10}) //后台必须用json接收
        .then(resp => {
            this.users = resp.data;
        },(error) =>{
            window.console.log(error);
        })

4.5 发送DELETE请求

    this.axios.delete()
        .then(resp => {
            this.user = resp.data;
        }, (error) => {
            window.console.log(error);
        })

附录

1. spring boot跨域支持

  A. 在controller或者对应的方法上加如下代码

  @CrossOrigin(origins = {"http://localhost:8080"})

  B. 基于过滤器的跨域支持

@Configuration
public class MyConfiguration {

    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://domain1.com");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}