react-数据Mock实现——json-server

什么是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