json server 模擬後端介面請求

2021-10-22 07:24:57 字數 1022 閱讀 5742

cnpm install -d [email protected]

2、使用

(1)建立.json檔案新增屬性

localhost:3000/鍵名

localhost:3000/鍵名/id值返回對應的字段

],"comments": [

],"profile":

} 增加資料:

使用post方式,localhost:3000/鍵名,帶上請求引數即可增加資料

或者使用postman,在請求資料的時候帶上json資料,使用x-www-form-urlencoded新增資料

(2)開啟服務

json-server -w json檔案路徑

--port 埠名稱預設為3000

--delay 延遲響應毫秒

(3)請求介面,會根據請求返回內容動態修改json檔案裡的內容

通過請求方法的不同,模擬對資料的增刪改查

使用postman也是根據請求的字段進行,x-www-form-urlencoded方式進行引數的攜帶

增加資料post

axios(

}).then((data)=>)

刪除某一條delete

axios().then((data)=>)

修改資料

修改指定資料patch,沒有會新增

axios(

}).then((data)=>)

替換所有資料put

axios(

}).then((data)=>)

根據指定字段查詢

axios().then((data)=>)

(4)新增中介軟體提前處理請求

建立.js檔案

module.exports=(req,res,next)=>) 返回資料

next(); 最後需要呼叫next()跳轉到下乙個中介軟體

}注意:fetch請求需要新增headers

headers: ,

啟用中介軟體:在命令中新增 --middlewares 檔案路徑

用json server模擬後端資料

npm install g json serverjson server v在根目錄下新建mock資料夾,在mock資料夾裡新建data.json 我的json資料如下圖所示 在scripts中新增mock配置,並修改start的配置,讓專案和json server同時啟動 注意 mock的路徑不能...

前後端並行開發json server

前後端並行開發的痛點 前端需要等待後端開發完介面以後 再根據介面來完成前端的業務邏輯 解決方法 在本地模擬後端介面用來測試前端效果 這種做法稱之為構建前端mock json server 獲取乙個模擬的功能齊全的api介面 不需要敲 小於30s即可搞定 json server使用 全域性安裝json...

使用json server來模擬REST API

在前端開發中,如果後端介面還沒有提供,前端拿不到資料,可能就沒法繼續寫一些互動行為的 這一問題可通過json server來很好地解決。本文主要講如何將json server和webpack進行整合,基於vue webpack boilerplate。json server官方位址 1.可全域性安裝...