1、安裝

npm install -g json-server

2、來實現一個需要簡單的數據

{"gallery": [{"id": 199,"name": "泰儀","keyword": "泰儀","imageUrl": "https:\u002F\u002Fehaoyao.oss-cn-hangzhou.aliyuncs.com\u002F2019\u002F12\u002F2\u002F1575249248561_72.jpg","linkUrl": "http:\u002F\u002Fm.ehaoyao.com\u002Fproduct-110846.html","site": 2,"isDefault": "1","dataJson": "{\"color\":\"#e2d5cc\",\"definename\":\"泰儀\"}","moduleId": 27,"isUse": 0},{"id": 193,"name": "八味益腎丸","keyword": "八味益腎丸","imageUrl": "https:\u002F\u002Fehaoyao.oss-cn-hangzhou.aliyuncs.com\u002F2019\u002F11\u002F25\u002F1574642245226_95.jpg","linkUrl": "http:\u002F\u002Fm.ehaoyao.com\u002Fproduct-39364.html","site": 3,"isDefault": "0","dataJson": "{\"color\":\"#fee1e5\",\"definename\":\"八味益腎丸\"}","moduleId": 27,"isUse": 0}] }

• 編寫mock.js

const test = require('./test.json') module.exports = () =>{return {test} }

• 可以直接使用命令行，來啟動這個json文件

json-server ./src/mock/mock.js -p 9000 --watch

這里 ./src/mock/mock.js是你的根文件 ，-p 9000是配置端口，–watch是監聽變化。
出現這樣的提示代表你成功了

\{^_^}/ hi!Loading ./src/mock/mock.jsDoneResourceshttp://localhost:9000/testHomehttp://localhost:9000

• 為了更好的定制你的需求可以添加路由文件進行配置,創建route.json的路由配置文件

{"/ajax/test":"/test" }

啟動

json-server ./src/mock/mock.js -r ./src/mock/route.json -p 9000 --watch

./src/mock/mock.js -r 是路由配置文件
啟動成功：

./src/mock/route.json has changed, reloading...Loading ./src/mock/mock.jsLoading ./src/mock/route.jsonDoneResourceshttp://localhost:9000/testOther routes/ajax/test -> /testHomehttp://localhost:9000

最后打開提示路徑到瀏覽器就行

常用配置

–config -c 指定配置文件 [默認值: “json-server.json”] –port -p 設置端口 [默認值: 3000] Number –host -H 設置域 [默認值: “0.0.0.0”] String –watch -w Watch file(s) 是否監聽 –routes -r 指定自定義路由 –middlewares -m 指定中間件 files [數組] –static -s Set static files directory 靜態目錄,類比：express的靜態目錄 –readonly --ro Allow only GET requests [布爾] –nocors --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”] –foreignKeySuffix – fks Set foreign key suffix (e.g. _id as in post_id) [默認值: “Id”] –help -h 顯示幫助信息 [布爾] –version -v 顯示版本號 [布爾]

還可以把啟動命令寫到json-server.json配置文件中

{"port": 3000,"watch": true,"static": "./mock",//自定義"read-only": false,"no-cors": false,"no-gzip": false,"routes": "route.json" }

啟動命令：

json-server --watch mock.js

json-server還可以做更詳細的配置，比如模擬動態路由，查詢參數，升序，降序等。

參考：

官網：https://github.com/typicode/json-server
https://blog.csdn.net/dpy521/article/details/89279060

總結

以上是生活随笔為你收集整理的Json-server简单实现mock数据的全部內容，希望文章能夠幫你解決所遇到的問題。

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