React中超好用的mock 数据模拟

这里介绍一款非常好用的 json-server 数据模拟服务器

• 全局安装 json-server

  $ npm install -g json-server
  

• 创建一个 json 文件，假设文件名为 data.json

  {
      "user": [
          {"id": 1, "username": "张三", "password": "abc123"},
          {"id": 2, "username": "李四", "password": "abc456"}
      ],
      "list": [
          {"id": 1, "title": "商品1", "content": "12345"},
          {"id": 2, "title": "商品2", "content": "abcde"}
      ]
  }
  

• 在文件所在目录打来终端，运行服务器

  $ json-server --watch data.json
  
  # or 指定端口号
  $ json-server --watch data.json --port 5000
  

• 服务器运行成功后，会根据 json 文件，生成对应 RestFul 接口；这里会生成两个接口

  // 接口一：
  http://localhost:5000/user
  
  // 接口二：
  http://localhost:5000/list
  

RestFul 接口：指的是对同一个接口地址，可以进行 get、post、put、delete 四种方式的请求，从而达到对数据的增删改查操作。

// get 请求  获取数据
axios.get('http://localhost:5000/user').then(res => {
  console.log(res)
 })

 // post 请求  提交数据
 axios.post('http://localhost:5000/user', {
  username: '王五',
  password: 'abc789'
 }).then(res => {
  console.log(res)
 })
 
// put 请求  更新数据
 axios.put('http://localhost:5000?username=张三', {
  password: '123456'
 }).then(res => {
  console.log(res)
 })

 // delete 请求  删除数据
 axios.delete('http://localhost:5000/1').then(res => {
  console.log(res)
 })

学习更多