什么是mock?
在前后端分離的開發模式下,前端可以在沒有實際后端接口的支持下先進行接口數據的模擬,進行正常的業務功能開發
?json-server實現數據Mock
json-server是一個node的包,可以在不到30秒內獲得零編碼的完整Mock服務
實現步驟
安裝
npm i json-server -D
項目根目錄下創建mock文件夾 創建一個json文件
json文件
{"takeaway": [{"tag": "318569657","name": "一人套餐","foods": [{"id": 2305772036,"name": "雞腿胡蘿卜燜飯","like_ratio_desc": "好評度91%","month_saled": 300,"unit": "1人份","food_tag_list": [],"price": 34.32,"picture": "https://zqran.gitee.io/images/waimai/2305772036.jpg","description": "主料:大米、雞腿、菜心、胡蘿卜","tag": "318569657"}]},{"tag": "82022594","name": "特色燒烤","foods": [{"id": 3823780596,"name": "藤椒雞肉串","like_ratio_desc": "","month_saled": 200,"unit": "10串","food_tag_list": ["點評網友推薦"],"price": 6,"picture": "https://zqran.gitee.io/images/waimai/3823780596.jpg","description": "1串。藤椒味,主料:雞肉","tag": "82022594"}]}]
}
添加啟動命令? ? ?package.json的scripts新增啟動命令
"scripts": {"start": "craco start","build": "craco build","server": "json-server ./mock/home.json --port 3005" },
運行啟動命令
運行成功會出現一個對應端口的地址,直接復制瀏覽器訪問看是否成功
npm run server