react项目使用json-server模拟接口获取数据

🚀一、安装 json-server

pnpm add json-server -D

📁二、创建JSON格式的数据

在项目根目录（或 src/mock/）下新建一个文件：

/mock/db.json

内容示例：

{"users": [{ "id": 1, "name": "张三", "age": 25 },{ "id": 2, "name": "李四", "age": 30 }],"products": [{ "id": 1, "name": "iPhone 15", "price": 9999 },{ "id": 2, "name": "MacBook Pro", "price": 19999 }]
}

---

⚙️ 三、在 package.json 中添加启动命令

{"scripts": {"dev": "vite", "mock": "json-server --watch mock/db.json --port 5174 --delay 500"}
}

说明：

• --watch 表示监听文件变化自动更新；

• --port 5174 指定端口号（你可以改成自己喜欢的）；

• --delay 500 模拟网络延迟（单位毫秒）。

四、启动json-server服务

json-server --watch db.json --port 5174

注：这里的端口号便是你在package.json，这里要对应起来。

五、获取接口返回的数据

const [users, setUsers] = useState([])
useEffect(() => {axios.get("http://localhost:5174/users").then(res => {setUsers(res.data)})}, [])

注释：这里的'/users'路径就是根据你在JSON文件定义的对象名定的，例如你要获取上述的porducts数据，则是请求路径后面是'/products'