Json-Server模擬數據接口開發


前端開發過程中調用后台接口是常事,在前后台定義好接口規范和參數后,后台接口的進度有時會成為我們的掣肘,這里推薦使用一款簡單的小工具json-server,小而輕便。

確保本地已有node環境。

一:安裝json-server

npm install -g json-server

二:創建json-server文件

在項目文件夾創建一個文件夾,隨意命名,這里命名為API-server,在API-server文件夾下創建json格式文件,這里命名為db.json。如下圖:

三:創建數據並啟動json服務

在第二部創建的db.json文件中填充json數據:如下圖:

插入完數據后,cd 到 api-server文件夾下啟動json服務,運行 json-server --watch db.json   如下圖:


運行完后本地就已經生成了兩個API,在瀏覽器輸入localhost:3000/posts就會出現相應數據,如下圖:

四:進行應用

現在本地已經生成了相應的api接口,可以使用ajax進行相應接口調用,接口會返回相應的數據。如下圖:


或者是這樣的 $.get('localhost:3000/posts',function(){});

五:修改監聽端口

修改監聽端口,可以開啟多個終端進行多個json文件的監聽
     json-server --watch -port 8888 db.json(監聽8888端口)

六:RESTful風格接口實現CURD:

RESTful API設計指南:推薦阮一峰的(http://www.ruanyifeng.com/blog/2014/05/restful_api.html)
根據請求方法的不同來實現不同的目的

GET : 獲取數據(獲取表單列表數據)
POST : 新增數據(新增一個表單項)
DELETE :刪除數據(刪除一條表單數據)
PATCH :更新數據 (修改一條表單數據)//根據某個屬性修改,上傳修改的某個屬性
PUT :更新數據(修改一條表單數據)//更新整條數據,上傳修改的整條數據

七:數據過濾

數據過濾是json-server中非常強勁的功能,通過url加上簡單的query字段,即可以過濾得到各種各樣的數據

八:表單分頁的簡單實現

json-server的高級定義,高級過濾等(未完待續!!!)

github地址:https://github.com/typicode/json-server


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM