前端工具-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
相关推荐
消失的旧时光-19432 分钟前
数据驱动 vs 流程驱动:前端与 Flutter 的两种架构主线
前端·数据驱动·流程驱动·架构思想
2501_918126919 分钟前
国标麻将一抽胡
前端·学习·html·个人开发
m0_502724959 分钟前
CSS实现容器的宽度由内容决定
前端·css
dear_bi_MyOnly12 分钟前
用 Vibe Coding 打造 React 飞机大战游戏 —— 我的实践与学习心得
前端·react.js·游戏
TheNextByte112 分钟前
如何将 Safari 标签转移到新 iPhone 17?
前端·iphone·safari
m0_7482459212 分钟前
常见状态前缀
前端·css
用户904438163246013 分钟前
拒绝 `setInterval`!手撕“死了么”生命倒计时,带你看看 60FPS 下的 Web Worker 优雅多线程
前端·javascript
ttod_qzstudio14 分钟前
CSS 样式优先级原则详解:从一个 Vue 组件样式冲突案例说起
前端·css·vue.js
59678515415 分钟前
css装饰
前端·css·css3
wearegogog1238 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab