使用json-Server快速模擬服務環境搭建

小周sri的碼農發表於2018-04-23

在前後端分離的這種工作模式下，分工明確，各司其職。前端負責展示資料，後端提供資料。然而，在這種過程中對於介面的規範需要提前制定好。例如根據規範提前模擬資料，這個時候就比較麻煩的。JsonServer這個比較NB了,它可以快速搭建服務端環境，建立json檔案，便於呼叫。然後可以通過下載postman與json-server結合，可以實現資料的增刪改查功能。下面是使用過程：

在瀏覽器中開啟 http://jsonplaceholder.typicode.com/ 可以看到裡面的一些資料

1.首先安裝Node.js (https://nodejs.org/en/)

$ npm install -g json-server (全域性安裝json-server)

Downloading json-server to C:\Users\Administrator\AppData\Roaming\npm\node_modules\json-server_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\json-server_tmp\_json-server@0.12.1@json-server to C:\Users\Administrator\AppData\Roaming\npm\node_modules\json-server
Installing json-server's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\json-server/node_modules
[1/22] connect-pause@^0.1.0 installed at node_modules\_connect-pause@0.1.0@connect-pause
[2/22] errorhandler@^1.2.0 installed at node_modules\_errorhandler@1.5.0@errorhandler
[3/22] lodash-id@^0.14.0 installed at node_modules\_lodash-id@0.14.0@lodash-id
[4/22] cors@^2.8.4 installed at node_modules\_cors@2.8.4@cors
[5/22] json-parse-helpfulerror@^1.0.3 installed at node_modules\_json-parse-helpfulerror@1.0.3@json-parse-helpfulerror
[6/22] express-urlrewrite@^1.2.0 installed at node_modules\_express-urlrewrite@1.2.0@express-urlrewrite
[7/22] object-assign@^4.0.1 existed at node_modules\_object-assign@4.1.1@object-assign
[8/22] compression@^1.7.1 installed at node_modules\_compression@1.7.2@compression
[9/22] nanoid@^1.0.1 installed at node_modules\_nanoid@1.0.2@nanoid
[10/22] method-override@^2.3.10 installed at node_modules\_method-override@2.3.10@method-override
[11/22] chalk@^2.3.0 installed at node_modules\_chalk@2.4.0@chalk
[12/22] body-parser@^1.18.2 installed at node_modules\_body-parser@1.18.2@body-parser
[13/22] pluralize@^7.0.0 installed at node_modules\_pluralize@7.0.0@pluralize
[14/22] please-upgrade-node@^3.0.1 installed at node_modules\_please-upgrade-node@3.0.1@please-upgrade-node
[15/22] morgan@^1.9.0 installed at node_modules\_morgan@1.9.0@morgan
[16/22] server-destroy@^1.0.1 installed at node_modules\_server-destroy@1.0.1@server-destroy
[17/22] express@^4.16.2 installed at node_modules\_express@4.16.3@express
[18/22] lodash@^4.11.2 installed at node_modules\_lodash@4.17.5@lodash
[19/22] lowdb@^0.15.0 installed at node_modules\_lowdb@0.15.5@lowdb
[20/22] yargs@^10.0.3 installed at node_modules\_yargs@10.1.2@yargs
[21/22] request@^2.83.0 installed at node_modules\_request@2.85.0@request
[22/22] update-notifier@^2.3.0 installed at node_modules\_update-notifier@2.5.0@update-notifier
Recently updated (since 2018-04-16): 3 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\json-server\node_modules\.recently_updates.txt)
  Today:
    → yargs@10.1.2 › cliui@^4.0.0(4.1.0) (10:28:35)
  2018-04-17
    → chalk@^2.3.0(2.4.0) (12:28:37)
    → chalk@2.4.0 › supports-color@^5.3.0(5.4.0) (11:57:41)
All packages installed (228 packages installed from npm registry, used 9s, speed 492.45kB/s, json 216(2.05MB), tarball 2.37MB)
[json-server@0.12.1] link C:\Users\Administrator\AppData\Roaming\npm\json-server@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\json-server\bin\index.js

　　出現這樣的情況，說明執行完成

2.進入你建立的目錄裡。cd json-server(json-server是我建立的檔名稱)

npm init 初始化

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (1)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to G:\1\package.json:

{
  "name": "1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

3.安裝json-server依賴

　　npm install json-server --save

這時候在你專案中會生成node_modules所需要的依賴

4.在你的檔案中建立一個db.json,用於寫一些模擬資料