Vue+axios请求本地json

野性酷女 2023-10-11 15:35 21阅读 0赞

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

1：npm安装

npm install axios --save

![385bc1374aa520c98c575f9fa66daf32.png][]

2.在main.js下引用axios

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

![250ca8db7a5ebb2c2ca0f042f5ae7240.png][]

一切环境依赖搭建好之后,下面来写个例子：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：前台显示：

![ad5ce8b8a2c12462897e0858c9fbb231.png][]

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

[385bc1374aa520c98c575f9fa66daf32.png]: https://img-blog.csdnimg.cn/img_convert/385bc1374aa520c98c575f9fa66daf32.png
[250ca8db7a5ebb2c2ca0f042f5ae7240.png]: https://img-blog.csdnimg.cn/img_convert/250ca8db7a5ebb2c2ca0f042f5ae7240.png
[ad5ce8b8a2c12462897e0858c9fbb231.png]: https://img-blog.csdnimg.cn/img_convert/ad5ce8b8a2c12462897e0858c9fbb231.png