Vue+axios请求本地json

axios请求本地json,相关依赖安装

1：npm安装

 

   npm install axios --save

 

2.在main.js下引用axios

 

import axios from 'axios'
//其他vue组件中就可以this.$axios调用使用
Vue.prototype.$axios = axios

 

一切环境依赖搭建好之后,下面来写个例子：axios请求本地json

1：在static文件夹底下新建json文件，（ 本地JSON文件一定要需放在public文件夹之下。）

访问服务器文件，应该把 json文件放在最外层的static文件夹，这个文件夹是vue-cli内置服务器向外暴露的静态文件夹。

 

2：data.json数据格式如下：

 

{
    "first":[
        {"name":"王小婷","nick":"祈澈菇凉"},
        {"name":"安安","nick":"坏兔子"},
        {"name":"编程微刊","nick":"简书"}

    ]
}

3：写一个axios

 

getData() {
                axios.get('../../static/data.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }

4：整体代码如下：

 

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('../../static/data.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

5：前台显示：

作者：祈澈菇凉
链接：www.jianshu.com/p/0a3303810…
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。