在react中json-server的安装和使用(基础使用)

---

1.安装json-server的两个依赖

npm -g i json-server
npm install -g json-server

2.安装axios依赖

npm i axios

3.创建一个data.json

5.新建终端选择json文件夹运行

json-server --watch --port 8082 data.json

6.获取数据

import React, { useState, useEffect } from 'react'
import axios from "axios"
export default function index() {
  useEffect(() => {
    getlist()
  }, [])
  async function getlist() {
    const result = await axios.get("http://localhost:8082/list")
    setdatalist(result.data)

  }
  const [datalist, setdatalist] = useState([])
  return (
    <div>
      {datalist.map(res => {
        return res.title
      })}
    </div>
  )
}

6.其他的基本使用方法

await axios.get("http://localhost:8082/list/1")//普通id查询
await axios.get("http://localhost:8082/list?_page=2& limit=3")分页page是每页多少条数据limit是第几页
await axios.get("http://localhost:8082/list?name_like=蜘蛛")//模糊查询
await axios.post("http://localhost:8082/list",newobj)//添加数据
await axios.put("http://localhost:8082/list/4",newobj)//修改数据
await axios.delete("http://localhost:8082/list/4")//删除