Vue 前后端分离,axios 发送数据给后端与接收服务器端发来的数据

  1. main.js 里引入 axiosqs

    1
    2
    3
    4
    import axios from 'axios'
    import qs from 'qs';

    Vue.use(axios);
  2. axiosqs 取别名,然后在其他组件里就可以用 this.$httpthis.$qs 来使用

    1
    2
    Vue.prototype.$http = axios
    Vue.prototype.$qs = qs
  3. main.js 里设置 axios 的默认全局配置信息

    1
    2
    3
    axios.defaults.baseURL = 'http://api.sphard.test';
    // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  4. 接收后端传来的数据

    1
    2
    3
    4
    this.$http.get('/aa').then((response) => {
    console.log(response.data)
    // this.age = response.data.age
    })
  5. 发送数据给后端

    1
    2
    3
    4
    5
    this.$http.post('/bb', this.$qs.stringify({'name': 'liuwei', age: 18})).then((response) => {
    console.log(response.data);
    }).catch((error) => {
    console.log(error);
    });
SPhard wechat
欢迎您扫一扫上面的微信公众号( 或者搜索:darrenliuwei )订阅
如果觉得本文对您有启发,可以随意打赏一点鼓励我继续更新!