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

2019 年 10 月 6 日
筆記

在前後端分離的這種工作模式下，分工明確，各司其職。前端負責展示數據，後端提供數據。然而，在這種過程中對於介面的規範需要提前制定好。例如根據規範提前模擬數據，這個時候就比較麻煩的。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:UsersAdministratorAppDataRoamingnpmnode_modulesjson-server_tmp  Copying C:UsersAdministratorAppDataRoamingnpmnode_modulesjson-server_tmp_json-server@0.12.1@json-server to C:UsersAdministratorAppDataRoamingnpmnode_modulesjson-server  Installing json-server's dependencies to C:UsersAdministratorAppDataRoamingnpmnode_modulesjson-server/node_modules  [1/22] connect-pause@^0.1.0 installed at [email protected]@connect-pause  [2/22] errorhandler@^1.2.0 installed at [email protected]@errorhandler  [3/22] lodash-id@^0.14.0 installed at [email protected]@lodash-id  [4/22] cors@^2.8.4 installed at [email protected]@cors  [5/22] json-parse-helpfulerror@^1.0.3 installed at [email protected]@json-parse-helpfulerror  [6/22] express-urlrewrite@^1.2.0 installed at [email protected]@express-urlrewrite  [7/22] object-assign@^4.0.1 existed at [email protected]@object-assign  [8/22] compression@^1.7.1 installed at [email protected]@compression  [9/22] nanoid@^1.0.1 installed at [email protected]@nanoid  [10/22] method-override@^2.3.10 installed at [email protected]@method-override  [11/22] chalk@^2.3.0 installed at [email protected]@chalk  [12/22] body-parser@^1.18.2 installed at [email protected]@body-parser  [13/22] pluralize@^7.0.0 installed at [email protected]@pluralize  [14/22] please-upgrade-node@^3.0.1 installed at [email protected]@please-upgrade-node  [15/22] morgan@^1.9.0 installed at [email protected]@morgan  [16/22] server-destroy@^1.0.1 installed at [email protected]@server-destroy  [17/22] express@^4.16.2 installed at [email protected]@express  [18/22] lodash@^4.11.2 installed at [email protected]@lodash  [19/22] lowdb@^0.15.0 installed at [email protected]@lowdb  [20/22] yargs@^10.0.3 installed at [email protected]@yargs  [21/22] request@^2.83.0 installed at [email protected]@request  [22/22] update-notifier@^2.3.0 installed at [email protected]@update-notifier  Recently updated (since 2018-04-16): 3 packages (detail see file C:UsersAdministratorAppDataRoamingnpmnode_modulesjson-servernode_modules.recently_updates.txt)    Today:      → [email protected] › cliui@^4.0.0(4.1.0) (10:28:35)    2018-04-17      → chalk@^2.3.0(2.4.0) (12:28:37)      → [email protected] › 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)  [[email protected]] link C:UsersAdministratorAppDataRoamingnpmjson-server@ -> C:UsersAdministratorAppDataRoamingnpmnode_modulesjson-serverbinindex.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:1package.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,用於寫一些模擬數據