用json server模擬後端資料

2021-09-08 23:39:53 字數 1398 閱讀 8795

npm install -g json-server
json-server -v
在根目錄下新建mock資料夾,在mock資料夾裡新建data.json

我的json資料如下圖所示:

, ]}​

在scripts中新增mock配置,並修改start的配置,讓專案和json-server同時啟動

注意:mock的路徑不能寫錯

執行指令由   npm run dev,變成  npm start,同時啟動專案和json-server伺服器

npm start
專案啟動,如下圖演示:

我在執行專案過程中踩過的坑:

1.data.json資料的格式要正確,剛開始,我的資料是從網上拷貝的,格式有點問題,導致專案執行錯誤

錯誤原因是data.json資料格式錯誤,下次要注意了

//錯誤

「status」:100

​//正確

「status」:["100"]

2.mock指令中的mock資料路徑不能出錯

//1.正確路徑

"mock": "json-server --watch mock/data.json",

//2.正確路徑

//"mock": "json-server --watch ./mock/data.json",

//錯誤路徑

"mock": "json-server --watch data.json",

json server 模擬後端介面請求

cnpm install d json server 0.16.2 2 使用 1 建立.json檔案新增屬性 localhost 3000 鍵名 localhost 3000 鍵名 id值返回對應的字段 comments profile 增加資料 使用post方式,localhost 3000 鍵名...

前後端並行開發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.可全域性安裝...