项目中json-server的使用

json-server用于模拟后端数据，只需要一个json文件，就可以实现增删改查
，搜索npm进入官网，在里面搜索json-server
全局安装json-server,

已经帮我们实现跨域了

请求数据：
就可以拿到数据啦

通过id号拿到具体数据
请求数据时再路径后面加id

增加数据
点击按钮之后可以看到多了条数据

import React from "react";
import axios from "axios";
import { Button } from "antd";
export default function Home() {
  const ajax = () => {
    //取数据
    // axios.get("http://localhost:8000/posts/2").then(res=>{
    //   console.log(res.data);
    // })
    // 增
    // axios.post("http://localhost:8000/posts",{
    //   title:"333",
    //   author:"xiaoming"
    // })
    //修改  会替换原来的
    // axios.put("http://localhost:8000/posts/1",{
    //   title:"修改11111"
    // });
    //更新 不替换，只修改传的参数 patch
    //  axios.patch("http://localhost:8000/posts/1", {
    //    title: "修改patch 11111",
    //  });
    //删除
    // axios.delete("http://localhost:8000/posts/1");
    //_embed 表关联  comments的postId等于1时代表关联posts的id=1的数据
    axios.get("http://localhost:8000/posts?_embed=comments").then((res) => {
      console.log(res);
    })
    //_expand  通过评论comments关联的找对应post 向上关联
    //  axios.get("http://localhost:8000/comments?_expand=post").then((res) => {
    //    console.log(res);
    //  });
  };
  return (
    <div>
      <Button type="primary" onClick={ajax}>
        Button
      </Button>
    </div>
  );
}

test.json

{
  "posts": [
    {
      "id": 1,
      "title": "111",
      "author": "xzx"
    },
    {
      "id": 2,
      "title": "222",
      "author": "ss"
    },
    {
      "title": "333",
      "author": "xiaoming",
      "id": 3
    }
  ],
  "comments": [
    { "id": 1, "body": "11111comments", "postId": 1 },
    { "id": 2, "body": "222222comments", "postId": 2 }
  ]
}