react中使用mock

下载依赖

cnpm install -g json-server

配置内容

新建mock文件夹 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z3q0HIK2-1606824204492)(https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/images/bd534a19922e422c892675f7ef97e56d.png “https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/blog/images/bd534a19922e422c892675f7ef97e56d.png”)]

user-info.json 存放用户信息的文件

{
  "name": "零三",
  "age": 30,
  "desc": "i'm a good boy"
}

user-list.json 存放用户列表的文件

[
  {
    "name": "零三",
    "age": 30,
    "desc": "i'm a good boy"
  },
  {
    "name": "零四",
    "age": 30,
    "desc": "i'm a bad boy"
  }
]

mock.js 整合内容、启动入口

启动

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

访问

扩展

可以把启动命令配置到package.json里边

  "scripts": {
    ...,
    "mock": "json-server ./src/mock/mock.js -p 9000 --watch"
  },

执行

npm run mock