vue中api和vue.config.js的配置

vue.config.js的配置(跨域请求的配置)

module.exports={
  publicPath:"./",
  devServer:{
    proxy:{
      '/shops':{
        target:"https://api.it120.cc/xiaochengxu",
        changeOrigin:true,
        pathRewrite:{
          '^/shops':''
        }
      }
    }
  }
}

api.js的配置

(将api.js在main.js中引入)

npm install --save axios(axios的安装方法)

import axios from 'axios'   //数据请求
import qs from 'qs'         //post请求

//get请求
function sendGetRequest(url,params){
  return new Promise(function(resolve,reject){
    axios.get(url,params).then(function(data){
      resolve(data)
    },function(err){
      reject(err)
    })
  })
}
//post请求
function sendPostRequest(url,params){
  return new Promise(function(resolve,reject){
    axios.post(url,params).then(function(data){
      resolve(data)
    },function(err){
      reject(err)
    })
  })
}

// var bascUrl = '/shops'
//获取接口数据
export default{
<!--get获取不传参-->
getData(){
    return sendGetRequest(bascUrl + '/banner/list')
  },
  
  
  <!--get获取传参-->
  
  getShopsData(info){
    return sendGetRequest(bascUrl+"/shopping-cart/info?token="+info)
  },
  
  getFindAddress(){
    return sendGetRequest(bascUrl+"/user/shipping-address/detail/v2",
    {params:{
      token:window.localStorage.getItem("token"),
      id:window.sessionStorage.getItem("addressID")
    }})
  },
  
  <!--post获取-->
  postShopData(value){
    return sendPostRequest(bascUrl+"/shopping-cart/add",qs.stringify(value))
  },
  
}

其他页面如何使用接口

          this.api.getShopsData(window.localStorage.getItem("token"))
          .then(data => {
        if (data.data.msg == "暂无数据") {
          this.alllist = [];
        } else {
          this.alllist = data.data.data.items;
        }
      });;

  this.api.postShopData({
          goodsId: this.goodsId,
          number: value.selectedNum,
          token: window.localStorage.getItem("token")
        }).then(data => {
        });