如何利用JsonServer搭建本地的数据接口

JsonServer主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用的。学前端的小白想要模拟后台数据，但是又不会写node,可以试着做一下，模拟后台数据。

接下来，我们就讲一下怎么借助json-server搭建本地数据接口：

一、安装

在你项目的根目录下，打开终端安装JsonServer，代码如下：

npm install -g json-server

二、初始化

初始化package.json文件，在当前文件下下载响应的模块插件，不然无法使用，想要在当前项目中下载响应插件，必须要有package.json
初始化命令如下：

npm init

初始化成功后当前项目文件夹下会出现 “package.json” 文件，然后需要在当前文件夹安装需要用到的模块“json-server”
安装命令如下：

npm install json-server --save

- -save:把当前要装的东西存到当前的package.json中

三、配置package.json文件

找到package.json文件并打开，写下如下代码：

"json:server": "json-server --watch data.json"

也就是这个位置，看下面：

四、创建data.json文件

里面写点数据什么的

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  },
  "lists":[
    {
      "name":"小明",
      "sex":"男",
      "age": "3"
    },
    {
      "name":"小红",
      "sex":"女",
      "age":"3"
    }
  ]
}

l属性是lists数据是我写的，其他是自动生成的，有可能你们没有生成的，那就自己写吧，反正都一个意思

五、启动

代码为：

npm run json:server

我这个是在webstorm中启动的，也可以打开终端，效果一样

就能出现所连接的ip地址，可以去请求一下数据

六、请求数据

//1.fetch 请求
    fetch('http://localhost:3000/lists')
    .then((res)=>{
      return res.json();
    })
    .then((res)=>{
      // this.datas = res.lists;
      console.log(res)
    })
    .catch((err)=>{
      console.log(err)
    })

打开网页，发现能请求数据了哦~