json-server使用

xiaojian044

码龄5年

关注

原创最新推荐文章于 2026-07-20 07:58:46 发布 1.1k 阅读

json-server的使用从入门到精通建议全局安装，因为以后你可能会对 `json-server` 产生依赖：npm install -g json-server 阅读详情

目的：在咱们实际的开发工作中，一个项目的完成需要从后端接口获取数据，但是在开发阶段如果

没有后端则是没有办法调用接口，很多前端开发人员又不会使用例如：mock.js, node.js等工具来

完成接口的开发，所以引入JSON-server，从而实现REST API

使用json-server可以实现数据的增加，删除，修改，查询以及关联数据的查询

全局安装json-server

npm install -g json-server

创建测试的test.json文件

{
  "posts": [
    { "id": 1, "title": "1111111", "author": "xiaojian" }
  ],
  "comments": [
    { "id": 1, "body": "11111-some comment", "postId": 1 }
  ]
}

启动服务并指定端口号

json-server --watch .\test.json --port 8000

注意：test.json文件中一级的key会被当做接口，服务器启动成功会如下图：

JSON-server如何获取数据：

说明：在使用json-server的时候，json-server自己做了跨域的处理，所以我们在取数据的时候不需

要解决跨域的处理

如何发送请求

import React from 'react'
import { Button } from 'antd';
import axios  from 'axios';

export default function Home() {
  const getData = () => {
    // 取数据
    axios.get('http://localhost:8000/posts').then(res => {
      console.log(res.data);
    })
  }
  return (
    <div>
      <Button type='primary' onClick={getData}>Primary</Button>
    </div>
  )
}

取得数据的截图:

如何查询数据

可以直接在指定的端口号后面直接拼接数据即可

如：http://localhost:8000/posts?id=2就可获取post接口下id为2的数据

如何增加数据：

在增加数据的时候不用添加id，因为json-server在添加数据的时候id是自增长的，代码示例如下：

import React from 'react'
import { Button } from 'antd';
import axios  from 'axios';

export default function Home() {
  const getData = () => {
    // 增加数据
    axios.post('http://localhost:8000/posts', {
      title:'33333',
      author:'小明'
    })
  }
  return (
    <div>
      <Button type='primary' onClick={getData}>Primary</Button>
    </div>
  )
}

修改数据：put（替换修改）

会替换原来的数据，如果修改的数据有部分数据没变需要把没变的部分也写入，麻烦

import React from 'react'
import { Button } from 'antd';
import axios  from 'axios';

export default function Home() {
  const getData = () => {

    // 修改数据  put
    axios.put('http://localhost:8000/posts/1', {
      title:'111-修改',
      author:'哈哈哈哈'
    })
  }
  return (
    <div>
      <Button type='primary' onClick={getData}>Primary</Button>
    </div>
  )
}

修改数据：patch(局部修改)

说明：在修改数据的时候只会变动要修改的部分，不变的部分保持不变

import React from 'react'
import { Button } from 'antd';
import axios  from 'axios';

export default function Home() {
  const getData = () => {

    // 修改数据 
    axios.patch('http://localhost:8000/posts/1', {
      title:'111-修改-11111'
    })
  }
  return (
    <div>
      <Button type='primary' onClick={getData}>Primary</Button>
    </div>
  )
}

删除数据：delete

说明：在进行数据删除的时候会删除对应的关联数据

import React from 'react'
import { Button } from 'antd';
import axios  from 'axios';

export default function Home() {
  const getData = () => {
    // 删除数据
    axios.delete('http://localhost:8000/posts/1')
  }
  return (
    <div>
      <Button type='primary' onClick={getData}>Primary</Button>
    </div>
  )
}

向下查询关联数据：_embed

import React from 'react'
import { Button } from 'antd';
import axios  from 'axios';

export default function Home() {
  const getData = () => {
    // _embed 拿回关联数据,向下寻找关联
     axios.get('http://localhost:8000/posts/?_embed=comments').then(res=> {
       console.log(res.data);
     })

  }
  return (
    <div>
      <Button type='primary' onClick={getData}>Primary</Button>
    </div>
  )
}

向上查询关联数据：_expand

import React from 'react'
import { Button } from 'antd';
import axios  from 'axios';

export default function Home() {
  const getData = () => {
    // _expand 向上寻找关联数据
    axios.get('http://localhost:8000/comments?_expand=post').then(res => {
      console.log(res.data);
    })
  }
  return (
    <div>
      <Button type='primary' onClick={getData}>Primary</Button>
    </div>
  )
}