前端工具-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
相关推荐
计算机程序设计小李同学1 分钟前
基于位置服务的二手图书回收平台
java·前端·vue.js·spring boot·后端
We་ct12 分钟前
LeetCode 14. 最长公共前缀:两种解法+优化思路全解析
前端·算法·leetcode·typescript
遗憾随她而去.16 分钟前
前端检查内存泄露
前端
换日线°30 分钟前
微信小程序对接位置服务(腾讯、高德)完成路径规划
前端·微信小程序·vue
广州华水科技40 分钟前
如何通过单北斗变形监测系统提升水库安全监测效果?
前端
u1301301 小时前
深入理解 M3U8 与 HLS 协议:从原理到实战解析
前端·音视频开发·流媒体·hls·m3u8
_OP_CHEN1 小时前
【前端开发之CSS】(二)CSS 选择器终极指南:从基础到进阶,精准拿捏页面元素!
前端·css·html·网页开发·css选择器
ヤ鬧鬧o.1 小时前
HTML安全密码备忘录
前端·javascript·css·html·css3
ヤ鬧鬧o.1 小时前
小巧路径转换器优化
前端·javascript·css
阿宇爱吃鱼1 小时前
uniapp input输入框,限制金额输入格式
前端·javascript·uni-app