JsonServer安裝及啟動過程圖解
JsonServer
主要的作用就是搭建本地的數(shù)據(jù)接口,創(chuàng)建json文件,便于調試調用
是一個 Node 模塊,運行 Express 服務器,可以指定一個 json 文件作為 api 的數(shù)據(jù)源
官網(wǎng):https://www.npmjs.com/package/json-server
安裝全局的json-server
終端中輸入:npminstall-gjson-server(windows系統(tǒng))
mac系統(tǒng):則為 sudonpminstall-gjson-server 如下圖:
初始化package.json
終端中進入所要存放文件的目錄
執(zhí)行初始化命令:npm init
給文件包取一個名字,其他的默認 enter 就可以
jsonserver 保存到本地
執(zhí)行命令:npm install json-server --save
執(zhí)行后打開 package.json 文件
將 scripts 中內容進行修改:
“json:server” 將最為啟動時json-server時使用
db.json將做為啟動后作為服務器的數(shù)據(jù)進行使用
創(chuàng)建db.json 文件
在與package.json 同目錄下創(chuàng)建db.json 文件,并以 對象 的格式進行填充數(shù)據(jù)
運行 json-server
終端中輸入:npm run json:server
如上圖:home 地址:http://localhost:3000
resources 地址,即創(chuàng)建的db.json中數(shù)據(jù)所在位置:http://localhost:3000/product
瀏覽器中運行http://localhost:3000 后:
瀏覽器中運行http://localhost:3000/product 后結果:
如下圖,瀏覽器中每訪問一次,終端則會輸出對應的執(zhí)行
postman 請求該接口
通過postman 請求該 API 發(fā)現(xiàn)數(shù)據(jù)確實來源于服務端
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Element-UI的?InfiniteScroll?無限滾動組件基本使用及應用場景
這篇文章主要介紹了Element-UI的InfiniteScroll無限滾動組件基本使用,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06extjs 04_grid 單擊事件新發(fā)現(xiàn)
EXTJS GRID 中單擊行和單元格獲得行或者單元格的內容(數(shù)據(jù)),本文將整理此功能的應用,需要了解的朋友可以參考下2012-11-11