前端工具-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
相关推荐
重铸码农荣光7 小时前
🎯 从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化全解析!
前端·react.js·架构
用户4099322502127 小时前
Vue3 v-if与v-show:销毁还是隐藏,如何抉择?
前端·vue.js·后端
Mr_chiu7 小时前
🚀 效率暴增!Vue.js开发必知的15个神级提效工具
前端
shanLion7 小时前
Vite项目中process报红问题的深层原因与解决方案
前端·javascript
烟袅8 小时前
从零构建一个待办事项应用:一次关于组件化与状态管理的深度思考
前端·javascript·react.js
前端小万8 小时前
草稿
前端
闲云一鹤8 小时前
将地图上的 poi 点位导出为 excel,并转换为 shp 文件
前端·cesium
电商API&Tina8 小时前
【电商API接口】关于电商数据采集相关行业
java·python·oracle·django·sqlite·json·php
岁月宁静8 小时前
MasterGo AI 实战教程:10分钟生成网页设计图(附案例演示)
前端·aigc·视觉设计
狗头大军之江苏分军9 小时前
快手12·22事故原因的合理猜测
前端·后端