用JSON-server模擬REST API(一) 安裝運行

在開發過程中，前后端不論是否分離，接口多半是滯后于頁面開發的。所以建立一個REST風格的API接口，給前端頁面提供虛擬的數據，是非常有必要的。

對比過多種mock工具后，我最終選擇了使用 json server 作為工具，因為它足夠簡單，寫下少量數據，即可使用。也因為它足夠強大，支持CORS和JSONP跨域請求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查詢方法，如limit，order等。下面我將詳細介紹 json server 的使用。

目錄：

安裝

運行

通過命令行

使用package.json

操作數據

get

post

put

用JSON-server模擬REST API(二) 動態數據

用JSON-server模擬REST API(三) 進階使用

安裝

首先你的電腦中需要安裝nodejs，建議使用最新版本。然后全局安裝json server，

npm install json-server -g

使用linux和macOS的電腦需要加上sudo

sudo npm install json-server -g

安裝完成后可以用 json-server -h 命令檢查是否安裝成功，成功后會出現

json-server [options] <source>選項：--config, -c Path to config file [默認值: "json-server.json"]--port, -p Set port [默認值: 3000]--host, -H Set host [默認值: "0.0.0.0"]--watch, -w Watch file(s) [布爾]--routes, -r Path to routes file--static, -s Set static files directory--read-only, --ro Allow only GET requests [布爾]--no-cors, --nc Disable Cross-Origin Resource Sharing [布爾]--no-gzip, --ng Disable GZIP Content-Encoding [布爾]--snapshots, -S Set snapshots directory [默認值: "."]--delay, -d Add delay to responses (ms)--id, -i Set database id property (e.g. _id) [默認值: "id"]--quiet, -q Suppress log messages from output [布爾]--help, -h 顯示幫助信息 [布爾]--version, -v 顯示版本號 [布爾]示例：json-server db.jsonjson-server file.jsjson-server http://example.com/db.jsonhttps://github.com/typicode/json-server

運行

安裝完成后，可以在任一目錄下建立一個 xxx.json 文件,例如在 mock/ 文件夾下，建立一個 db.json 文件，并寫入以下內容，并在 mock/ 文件夾下執行 json-server db.json -p 3003 。

{"news":[{"id": 1,"title": "曹縣宣布昨日晚間登日成功","date": "2016-08-12","likes": 55,"views": 100086},{"id": 2,"title": "長江流域首次發現海豚","date": "2016-08-12","likes": 505,"views": 9800}],"comments":[{"id": 1,"news_id": 1,"data": [{"id": 1,"content": "支持黨中央決定"},{"id": 2,"content": "抄寫黨章勢在必行！"}]}] }

為了方便，再創建一個 package.json 文件，寫入

{"scripts": {"mock": "json-server db.json --port 3003"} }

然后使用到 /mock 目錄下執行 npm run mock 命令，如果成功會出現

> @ mock /你的電腦中mock文件夾所在目錄的路徑/mock > json-server db.json -p 3003\{^_^}/ hi!Loading db.jsonDoneResourceshttp://localhost:3003/newshttp://localhost:3003/commentsHomehttp://localhost:3003

如果不成功請檢查 db.json 文件的格式是否正確。

操作數據

使用【GET 接口】查詢數據

這個時候訪問 http://localhost:3003/db ，可以查看 db.json
文件中所定義的全部數據。

使用瀏覽器地址欄，jQuery.get 或 fecth({method: "get"}) 訪問 http://localhost:3003/news 則可以看到 news 對象下的數據,以Array格式返回:

[{"id": 1,"title": "曹縣宣布昨日晚間登日成功","date": "2016-08-12","likes": 55,"views": 100086},{"id": 2,"title": "長江流域首次發現海豚","date": "2016-08-12","likes": 505,"views": 9800} ]

使用【POST 接口】增加數據

以jquery的 $.ajax 方法舉例,以下代碼會實時的向 db.json 中的 news 對象push一條新的數據再次用 get 方式訪問 http://localhost:3003/news , 就可以看到它了

$.ajax({type: 'post',url: 'http://localhost:3003/news',data: {"id": 3,"title": "我是新加入的新聞","date": "2016-08-12","likes": 0,"views": 0}} )

使用【PUT 接口】修改數據

同樣以jquery的 $.ajax 方法舉例,以下代碼會實時的對 db.json 中的 news 對象中 id=1 數據進行修改

$.ajax({type: 'put',url: 'http://localhost:3003/news/1',data: {"title": "曹縣宣布昨日晚間登日失敗","date": "2016-08-12","likes": 55,"views": 100086}} )// 結果[{"id": 1,"title": "曹縣宣布昨日晚間登日失敗","date": "2016-08-12","likes": 55,"views": 100086} ]

PATCH 和 DELETE 使用方式同上，就不做演示了。

json-server 倉庫地址

轉載于:https://www.cnblogs.com/lewo/p/mock-json-server-install.html

總結

以上是生活随笔為你收集整理的用JSON-server模拟REST API(一) 安装运行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。