使用json-server来Mock后端api数据

项目开发中，为保证项目进度，前后端不相互依赖，前端需要自己造api返回的数据来写页面的各种逻辑，而页面写死假数据的做法效率太差，所以就有了Mock数据的方法，最常用的方法就是json-server

json-server是什么？

json-server顾名思义，是个存储json数据的server，是Node的一个模块，模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。

json-server如何使用？

1、下载安装

• 使用npm来安装：

  npm install -g json-server

• 查看是否安装成功：

  json-server -v

2、如何Mock数据

• 1、在项目里面新建一个Mock文件夹，然后在此文件夹下新建一个db_xxx.json文件（也可在根目录下创建，文件名自定义）
  • 可以先在这个文件里面写死几条你要的数据，方便后面验证：
• 2、命令行进入到Mock目录，执行以下命令启动：

  // 默认端口是3000，也可以自己定义断后
  json-server --watch db_xxx.json --port 3004

  • 若觉得每次这么启动麻烦，可将启动命令写成一个配置文件
    • 在db_.json同级目录里面，新建一个package.json文件，在里面写入启动的配置

    {
    “scripts”: {
    “mock”: “json-server db_xxx.json --port 3004”
    }
    }

    • 进入Mock目录下，然后启动的时候输入：npm run mock
• 3、启动服务后，你将在控制台看到输出的host地址，这个就是你Mock数据时要请求的地址：
  
• 4、在浏览器中输入这个地址：看看是否有数据：
  
• 5、复制这个地址到Postman里面，创建你所需要的数据，数据会自动保存到这个db_xxx.json文件中去
  
  

3、代码里面如何获取Mock好的数据？

这里我用的是axios：主要是用于向后台发起api请求的（这里所说的后台就是上面这个地址：http://localhost:3004/records），当然这个是需要安装的。

• (不想用axios的话，也可以使用jquery的getJSON()方法)

npm install axios

• 具体使用的列子：