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 的地址,下面這個就是接口文檔

 

 試着調用一下，為他增加點數據：