假数据服务器 jsonServer

最新推荐文章于 2024-06-17 09:44:39 发布

自由的音符

最新推荐文章于 2024-06-17 09:44:39 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weCat_s/article/details/123924582

React 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何利用json-server创建一个模拟的RESTful API接口，包括增删改查操作。通过设置json文件，启动服务，并在React应用中使用axios进行数据交互，演示了基本的HTTP请求方法如POST、PUT、PATCH、GET和DELETE。此外，还展示了如何使用_query参数进行关联数据的获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以用来模拟接口，并且带有增删改查的功能

安装

npm install -g json-server

1.在项目目录外新建一个文件夹名为db，
2.然后新建一个test.json文件

//文件格式
{
  "posts": [
    {
      "id": 1,
      "title": "1111-修改-111",
      "author": "typicode"
    },
    {
      "id": 2,
      "title": "json-server2",
      "author": "typicode2"
    },
    {
      "id": 3,
      "title": "123",
      "author": "cqj"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    },
    {
      "id": 2,
      "body": "some comment2",
      "postId": 2
    }
  ]
}

3.shift 右键打开powerShell窗口键入json-server --watch .\test.json --port 8000
4.启动成功后，就可以看到json文件生成的所有接口了

页面中使用

/*
 * @Version: 2.0
 * @Autor: CQJ
 * @Date: 2022-03-31 17:13:28
 * @LastEditTime: 2022-04-02 16:55:04
 * @LastEditors: CQJ
 * @Description:
 */
import { Button } from "antd";
import axios from "axios";
import React from "react";

export default function Home() {
  const ajax = () => {
    // 增加数据 post
    axios
      .post("http://localhost:8000/posts", {
        title: "123",
        author: "cqj1",
      })
      .then((res) => {
        console.log("res: ", res.data);
      });
    // 修改数据 put（替换式更新）
    axios
      .put("http://localhost:8000/posts/1", {
        title: "1111-修改",
        author: "cqj",
      })
      .then((res) => {
        console.log("res: ", res.data);
      });
    // 更新数据 patch（局部更新）
    axios.patch("http://localhost:8000/posts/1", {
      title: "1111-修改-111",
    });
    .then((res) => {
      console.log("res: ", res.data);
    });
    // 取数据 get
    axios.get("http://localhost:8000/posts").then((res) => {
      console.log("res: ", res.data);
    });
    // 删除数据 delete
    axios.delete("http://localhost:8000/posts/4").then((res) => {
      console.log("res: ", res.data);
    });

    // _embed 携带相关id的数据向下查找  根据posts结构下id为1的查找comments结构中id为1的，合并到返回数据中
    axios.get("http://localhost:8000/posts?_embed=comments").then((res) => {
      console.log("res: ", res.data);
    });

    //_expand  post postId 有关联  根据postId向上查找合并到comments 返回 
    axios.get("http://localhost:8000/comments?_expand=post").then((res) => {
    //能通过comments结构下id为1的数据，查找到posts结构下id为1的数据合并到返回数据中
      console.log("res: ", res.data);
    });
  };
  return (
    <div>
      <Button type="primary" onClick={ajax}>
        Primary Button
      </Button>
    </div>
  );
}