如何调用本地 json 文件数据

本文介绍了在无数据接口的情况下,如何在前端通过创建并引用本地json文件来获取数据。详细步骤包括创建testdata文件夹存储json数据,修改url指向json文件,以及在需要的地方调用接口获取数据。
摘要由CSDN通过智能技术生成

如何调用本地 json 文件数据

1. 使用场景

使用场景:当无数据接口时,需要调用自己写的 json 文件,请求数据。

2. 步骤

  1. 在 public 文件夹下,新建一个存放 json 数据的文件夹 [ testdata ];

  2. 在新建的文件夹 testdata 下,存放我们的 json 数据;

    // 属性需要采用双引号包裹
    {
        "datas":[
            {
                "id": "100001",
                ......
            },{
                ......
            }
        ]
    }
    
  3. 在原本需要调用接口的地方,将 url 地址,换为我们需要的 json 文件的地址。

    export const getTableData = () => {
      return request({
        url: '/testdata/test.json',
        method: 'get',
      })
    }
    
  4. 在需要请求数据的地方,正常调用接口,即可。

在Vue中调用本地的JSON数据可以通过以下步骤实现: 1. 首先,在Vue的项目目录下创建一个名为`data`的文件夹,并将需要调用JSON数据文件放入该文件夹中。例如,我们创建了一个名为`data.json`的JSON文件。 2. 在Vue组件中,使用`import`语句引入需要的JSON数据文件。例如,我们创建一个名为`MyComponent.vue`的组件。 ```javascript // 在MyComponent.vue组件中引入json文件 import data from "@/data/data.json"; ``` 3. 在Vue组件的`data`属性中,定义一个变量来存储引入的JSON数据。 ```javascript // 在MyComponent.vue组件中定义数据变量 data() { return { jsonData: data, }; }, ``` 4. 在Vue组件的模板中,可以使用`jsonData`变量来访问JSON数据。 ```html <!-- 在MyComponent.vue组件的模板中使用jsonData变量 --> <template> <div> <ul> <li v-for="item in jsonData" :key="item.id">{{ item.name }}</li> </ul> </div> </template> ``` 通过以上步骤,我们就可以在Vue中成功调用本地的JSON数据文件。在上述代码中,我们通过`import`语句将JSON数据文件导入到Vue组件中,并在组件的`data`属性中定义了一个变量`jsonData`来存储这些数据。在组件的模板中,我们使用`v-for`指令遍历`jsonData`变量,并展示其中的数据。 需要注意的是,确保JSON文件的路径正确,并且在导入JSON文件时使用了正确的路径。如果JSON文件路径不正确,将会导致数据无法加载。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值