Vue中请求本地JSON文件并返回数据

impsb_lian

已于 2022-03-27 17:20:27 修改

阅读量6.1k

点赞数 6

文章标签： javascript json postman ajax vue

于 2022-03-27 17:16:53 首次发布

本文链接：https://blog.csdn.net/possible_fish/article/details/123776419

版权

本文介绍了如何在Vue项目中通过json-server来请求并显示本地JSON文件的数据。首先，创建data.json文件并设置内容。接着，确认已安装json-server并运行JSON文件。在浏览器和Postman中验证数据正确显示。然后，在Vue项目中编写JS代码发送请求并成功获取到数据，最终在控制台看到请求结果。

摘要由CSDN通过智能技术生成

1.目录结构

直接在根目录下创建自己的JSON文件，在此我的JSON文件名为data.json

以下是我的JSON文件内容（此处是参照的黑马程序员的vue视频教程）

{
    "data": {
      "totalpage": 5,
      "pagenum": 4,
      "users": [{
          "id": 1,
          "username": "tiger117",
          "mobile": "18616358651",
          "type": 1,
          "email": "tige112@163.com",
          "create_time": "2017-11-09T20:36:26.000Z",
          "mg_state": true,
          "role_name": "炒鸡管理员"
        },
        {
          "id":