vue配置模拟axios后台请求，使用自定义axios的json文件，自定义后台数据

1：在static文件夹下新建一个mock（自定义名字）文件夹，将自己写的json文件放入.注意是看清是哪个个static文件。

json文件：

{
  "ret": true,//设置这个是要判断，下面代码会用到
  "data": {
    "city":"泉州"
    }
    }

2：首先要先下载axios

cnpm install axios --save

3：在想要使用的界面（home.vue）中导入axios，并写好方法。

<script>
import axios from "axios"
export default {
  name: "Home",
  components: {
    。。。
  },
  methods:{
      // 在生命周期钩子里定义的，页面一挂载成功就请求axios，
    getHomeInfo (){
      axios.get('/api/index.json')//这里的地址是在config/index.js里的proxyTable属性中定义的
      .then(this.getHomeInfoSucc)//因为返回的结果是prop对象，所以用then获取
    },
    getHomeInfoSucc(res){
      console.log(res)//数据获取成功就打印出来
    }
  },
  // 生命周期钩子，挂载成功执行
  mounted (){
    this.getHomeInfo()
  }
};

4：在.gitignore里写上json放置的地址，这样就不会被上传到git远程仓库和本地仓库。（写成static/mock是因为我将json文放在这个路径下。）

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
static/mock

5：在config/index.js下定义

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {//当请求api这个目录的时候，请求转发到http://localhost:8080
        target:'http://localhost:8080',
        pathRewrite:{
          '^/api': '/static/mock'//一旦请求路径是以api开头，就替换到本地的/static/mock文件下
        }
      }
    },

5：更改了配置文件要重启服务器才会有用,刷新页面，看到控制台这样就成功导入json文件成功了。

6：在引入axios的界面（home.vue）中定义data

 data (){
    return {
      city:' '//顶部城市
    }
  }

在输出内容的地方写上

getHomeInfoSucc(res){
      console.log(res)//数据获取成功就打印出来
      res=res.data//在json里面定义的data
      if(res.ret && res.data){//在json文件中专门定义的ret字段
        const data = res.data
        this.city=data.city
      }
    }
  }

在html代码中绑定

<home-hearder :city="city"></home-hearder>

7：在子页面定义props

export default {
  name: "Home-Hearder",
  props:{
    city:String//city为Stringleixing
  }
};

8：在想要出现的city 的地方写{{city}}就可以啦~
感觉自己又前进了一步开心~~