利用json-server工具在本地开启json数据格式的服务器

利用json-server工具在本地开启json数据格式的服务器

• 安装

npm install json-server -g

• 准备数据文件

db.json:

{
  "in_theaters": [
    {
      "id": 1,
      "title": "黄金兄弟",
      "rating": 5.3,
      "genres": ["动作", "犯罪"],
      "img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535191502.jpg"
    },
    {
      "id": 2,
      "title": "碟中谍6：全面瓦解",
      "rating": 8.2,
      "genres": ["动作", "惊悚", "冒险"],
      "img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529365085.jpg"
    },
    {
      "id": 3,
      "title": "西虹市首富",
      "rating": 6.7,
      "genres": ["喜剧"],
      "img": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529206747.jpg"
    }
  ],
  "coming_soon": [
    {
      "id": 4,
      "title": "影",
      "rating": 0,
      "genres": ["剧情", "动作", "古装"],
      "img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.jpg"
    },
    {
      "id": 5,
      "title": "李茶的姑妈",
      "rating": 0,
      "genres": ["喜剧"],
      "img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.jpg"
    },
    {
      "id": 6,
      "title": "无双",
      "rating": 0,
      "genres": ["动作", "犯罪"],
      "img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535096871.jpg"
    }
  ],
  "top250": [
    {
      "id": 7,
      "title": "肖申克的救赎",
      "rating": 9.6,
      "genres": ["犯罪", "剧情"],
      "img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg"
    },
    {
      "id": 8,
      "title": "霸王别姬",
      "rating": 9.6,
      "genres": ["剧情", "爱情", "同性"],
      "img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg"
    },
    {
      "id": 9,
      "title": "这个杀手不太冷",
      "rating": 9.4,
      "genres": ["剧情", "动作", "犯罪"],
      "img": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg"
    }
  ]
}

• 开启服务

json-server --watch db.json --port 3301

运行结果,如下图所示:

然后,打开浏览器,输入localhost:3301;页面显示如下:

证明,已经运行成功了,
然后你可以改变页面路由,会返回json数据的对应的数据:

如果,输入了错误的路由,则会出现下面的情况:

然后,我们就可以直接请求对应路径下的数据了~