json-server 模拟增删改查

json-server

1.npm i json-server -S
2.在项目目录下常见一个mock/todo.json:

在里面书写json数据即可：

{
  "todos": [
    {
      "id": 1,
      "title": "吃饭",
      "isCompleted": false
    },
    {
      "id": 2,
      "title": "约会",
      "isCompleted": false
    },
    {
      "id": 3,
      "title": "结婚",
      "isCompleted": true
    },
    {
      "id": 4,
      "title": "K歌",
      "isCompleted": false
    },
    {
      "id": 5,
      "title": "买车",
      "isCompleted": false
    },
    {
      "id": 6,
      "title": "旅游",
      "isCompleted": false
    },
    {
      "id": 7,
      "title": "月薪上万",
      "isCompleted": false
    },
    {
      "id": 8,
      "title": "买电脑",
      "isCompleted": true
    },
    {
      "id": 1594385900062,
      "title": "sa",
      "isCompleted": false
    }
  ]
}

在项目的package.json文件里面的脚本运行语句添加：

    "server": "json-server --watch --port 8000 ./mock/todo.json"

–port是自定义打开的端口号，建议不占用一些常见的端口号，避免冲突：
vscode 默认服务器端口号为5050
react默认端口号为3000

3.npm run server 就可以开启服务了：