前端工具-json-server

介绍

react18 + vite项目为例,介绍前端mock数据的方式;

1:安装

bash 复制代码
npm i json-server -D

2、项目根目录下创建mock数据文件

server/data.json

json 复制代码
{
  "login": {
    "userName": "张三",
    "userId": 666,
    "token": "123456"
  },
  "logout": {
    "message": "退出成功"
  },
  "userList": [
    {
      "id": 1,
      "name": "张三",
      "age": 18,
      "gender": "男",
      "address": "北京市"
    }
  ]
}

3、配置启动脚本

json 复制代码
// package.json
  "scripts": {
    "serve": " json-server --watch server/data.json --port 3000"
  }

4、启动mock服务

bash 复制代码
npm run serve
相关推荐
百万蹄蹄向前冲10 分钟前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙13 分钟前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan2 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen2 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理3 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒3 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche15004 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情6734 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具
SoonITer4 小时前
怎样构建一个 Agent-friendly 的网站
前端·agent
颜进强4 小时前
01 · NestJS 是什么:用途、解决什么问题、与热门框架对比
前端·后端·ai编程