当前位置: 首页 > news >正文

mock 数据( json-server )

json-server 实现数据 mock

实现步骤:

1. 在项目中安装 json-server

npm install -D json-server

2. 准备一个 json 文件

   server/data.json

{"posts": [{ "id": "1", "title": "a title", "views": 100 },{ "id": "2", "title": "another title", "views": 200 }],"comments": [{ "id": "1", "text": "a comment about post 1", "postId": "1" },{ "id": "2", "text": "another comment about post 1", "postId": "1" }],"profile": {"name": "typicode"}
}

3. 添加启动命令

"scripts":{"server": "json-server ./server/data.json --port 8888"
}

4. 访问接口进行测试

npm run serve
  const [commentList, setCommentList] = useState([]);useEffect(() => {async function getList() {const res = await axios.get("http://localhost:8888");setCommentList(res.data);}getList();}, []);

相关文章:

  • 【Spring Cloud Gateway】Nacos整合遇坑记:503 Service Unavailable
  • 【上位机——WPF】App.xml和Application类简介
  • 【微服务】SpringBoot + Docker 实现微服务容器多节点负载均衡详解
  • 【FileZilla】Client端的线程模型 (一)
  • python-修改图片背景色
  • Missashe考研日记—Day37-Day43
  • 力扣310.最小高度树(拓扑排序,无向图),力扣.加油站力扣.矩阵置零​​​力扣.二叉树中的最大路径和
  • 如何在Firefox火狐浏览器里-安装梦精灵AI提示词管理工具
  • 计网实验(四)CS144 Lab4
  • 【技术原理】Linux 文件时间属性详解:Access、Modify、Change 的区别与联系
  • 2025年5月华为H12-821新增题库带解析
  • React学习———Redux 、 React Redux和react-persist
  • 分布式AI推理的成功之道
  • 20250515通过以太网让VLC拉取视熙科技的机芯的rtsp视频流的步骤
  • RK3588 桌面系统配置WiFi和蓝牙配置
  • 1、数据结构与算法(Python版-啃书)-绪论
  • 前端流行框架Vue3教程:16. 组件事件配合`v-model`使用
  • 【Java ee初阶】http(1)
  • 左手坐标系、右手坐标系、坐标轴方向
  • 2、数据操作DMLDQL
  • 免费网站建站模板/怎么进行网络推广
  • 自适应网站开发seo/爱采购seo
  • 基于magento的网站开发/sem 推广软件
  • 网站开发的硬件设备/如何建立个人网址
  • html做企业门户网站/seo整站优化吧
  • 做外贸服装的网站/双桥seo排名优化培训