json-server的使用

做为一个前端工程师，很多时候后端还没有那么快写好接口，我们就需要自己mock数据。json-server就可以指定一个 json 文件作为 api 的数据源，模拟服务端接口数据。

如何使用？

1 使用 npm 全局安装 json-server（前提是已经安装好了node环境）

或者：

cnpm install -g json-server

如果有淘宝镜像用cnpm 没有的话用 npm（最后下一个淘宝镜像，不然慢到下载不了）

使用cnpm需要打开文件进入到PoweShell运行

2 安装后可以使用命令 json-server -h 检测是否安装成功，成功后会出现如下图：

 3 初始化

3-1上面安装好json-server后，接着创建一个项目叫jsonserver（名字当然随便起）通过npm init --yes 进行初始化，完成后会在文件夹中新增加 package.json 文件

3-2 安装依赖模块 ：npm install json-server --S  安装完成后在项目中会生成 node_modules 所需要的依赖，在 package.json 文件的 dependencies 会有 json-server 及版本号

4 创建 JSON 数据，作为 API 的数据源

在 jsonserver 文件夹下创建 db.json 文件，并写入 json 数据：

{
"users": [
               {
                   "name": "a",
                   "id": 1
               }
            ]
}

注意：数据格式符合 JSON 格式（尤其注意最后一个键值对后面不要有逗号），key 和 value 值都要双引号

5 修改配置文件（最后面的db.json也是取决于你的json文件叫啥）

打开 package.json 文件，将 scripts 进行如下配置

 可复制下面：

"json:server": "json-server --watch db.json",
"json:server: remote": "json-server http://jsonplaceholder.typicode.com/db" 

 json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：

 json-server --watch db.json --port 3004

 6 运行 json-server

执行

npm run json:server

运行成功，提供一个端口为 3000 的地址,下面这个就是接口文档

 

 试着调用一下，为他增加点数据：