Vue模拟后台数据，proxy代理

Posted 2020-12-28 island1994

config>index.js  设置代理，让api路径跳转到虚拟数据的路径

assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    proxyTable: {
        ‘/api‘: {
            target: ‘http://localhost:8080‘,
            pathRewrite: {
                ‘^/api‘: ‘/static/mock‘
            }
        }

在子组件请求数据

methods: {
    getHomeInfo () {
      axios.get(‘/api/index.json‘).then(this.getHomeInfoSucc)    这里/api会被代理成/static/mock虚拟数据的文件路径
    },
    getHomeInfoSucc (res) {   对数据进行处理
      res = res.data  将数据里面的data拿到
      if (res.ret && res.data) {  做一个判断，当数据成功接收且数据不为空
        const data = res.data  
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
      }
      console.log(res)
    }
  },
  mounted () {   在mounted执行时获取数据
    this.getHomeInfo()
  }