Json-server总结

一、什么是JSON-Server?

JSON-Server 是一个 Node 模块，运行 Express 服务器，可以指定一个 json 文件作为 api 的数据源。

二、JSON-Server的使用

全局安装：

cmd命令行窗口输入：

npm install -g json-server

使用：

首先准备一个json文件：test.json

格式如下：

{
  "posts": [
    {
      "id": 1,
      "title": "1111-修改-11111",
      "author": "kk"
    },
    {
      "id": 2,
      "title": "22222",
      "author": "tiechui"
    },
    {
      "title": "33333",
      "author": "xiaoming",
      "id": 3
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "11111-comment",
      "postId": 1
    },
    {
      "id": 2,
      "body": "22222-comment",
      "postId": 2
    }
  ]
}

然后使用全局json-server命令，启动mock服务。

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

输出如下内容说明启动成功。

数据访问举例（增删改查）

import React from 'react'
import { Button } from 'antd';
// import axios from 'axios'
export default function Home() {

    const ajax = ()=>{
        //取数据  get
        // axios.get("http://localhost:8000/posts/2").then(res=>{
        //     console.log(res.data)
        // })

        // 增  post
        // axios.post("http://localhost:8000/posts",{
        //     title:"33333",
        //     author:"xiaoming"
        // })

        // 更新 put

        // axios.put("http://localhost:8000/posts/1",{
        //     title:"1111-修改"
        // })

        // 更新 patch   只更新变化的，不变的不动
        // axios.patch("http://localhost:8000/posts/1",{
        //     title:"1111-修改-11111"
        // }) 

        // 删除  delete
        // axios.delete("http://localhost:8000/posts/1")
    
        // _embed，取关联数组，向下
        // axios.get("http://localhost:8000/posts?_embed=comments").then(res=>{
        //     console.log(res.data)
        // })

        // _expand，向上关联
        // axios.get("http://localhost:8000/comments?_expand=post").then(res=>{
        //     console.log(res.data)
        // })
    }
    return (
        <div>
            <Button type="primary" onClick={ajax}>Button</Button>
        </div>
    )
}