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