json-server模拟后端接口

• 2019 年 11 月 20 日
• 筆記

作为一个前端，在实现项目功能的时候，需要在前端写一个静态的json数据，进行测试，但是有的时候，需要涉及到全模拟请求以及请求回来的过程，实现动态增删改查，这个时候就需要使用到web的API接口神器json-server。

文档：https://www.npmjs.com/package/json-server 参考链接：https://www.jianshu.com/p/863c3e55299d

json server 作为工具，足够简单，写少量数据，支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法。在使用之前先确定安装node和npm最新版本。

1：全局安装json-server

打开cmd，右键以管理员身份运行(我的电脑是win10的，所以需要权限)

输入json-server -h进行测试，查看是否安装成功，出现以下内容说明安装成功。

2：在D盘新建一个文件夹JsonServer

命令行进入新建的文件夹里面。

初始化文件npm init ，一路回车键。

这个时候，空文件夹里面生成了一个package.json文件。

3：db.json模拟数据

在根目录底下新建db.json文件，写上自己模拟的json数据，后面会要用到进行模拟接口。

json

{    "users": [      {        "name": "王小婷",        "phone": "123456789",        "email": "[email protected]",        "age": "20",        "id": 1,        "companyId": 1      },      {        "name": "祈澈菇凉",        "phone": "123456789",         "email": "[email protected]",        "age": "30",        "id": 2,        "companyId": 2      },      {        "name": "最帅的坏兔子",        "phone": "123456789",         "email": "[email protected]",        "age": "23",        "id": 3,        "companyId": 3      },      {        "name": "安安",        "phone": "123456789",        "email": "[email protected]",        "age": "45",        "id": 4,        "companyId": 3      }    ],    "companies": [      {        "id": 1,        "name": "Apple",        "description": "Apple lalala!"      },      {        "id": 2,        "name": "Microsoft",        "description": "Microsoft lalala!"      },      {        "id": 3,        "name": "Google",        "description": "Google lalala!"      }    ]  }

4：安装依赖模块

进入项目，在项目里面安装json-server的模块依赖文件，命令如下：

npm install json-server --save

安装完成会发现多了两个文件：

5：修改配置文件

打开package.json文件，将scripts进行修改，如下:

"scripts": {      "json:server": "json-server --watch db.json"  },

6：运行

完成之后，输入命令，运行：

npm run json:server

在浏览器输入http://localhost:3000/，可以看到以下界面，搭建成功。

现在可以查看一下json接口数据，输入http://localhost:3000/users，可以看到一个完整的接口啦：