聊一聊前端mock数据那些事

前言

在前端开发过程中,我们经常需要与后端进行数据交互,但在实际开发中,后端接口的开发进度可能会滞后,或者某些接口尚未完全实现,开发过程中简单的方式就是把想要的数据写死,但这样的坏处就是和后端联调前还需要再把写死的数据从代码里删除

关于Mock

什么是Mock数据

  • Mock 数据是模拟的数据,用于模拟后端接口的返回结果
  • 它可以在我们开发过程中替代真实的后端接口,进行前端页面的开发和调试

如何使用 Mock

  • 本地模拟数据
  • 浏览器拦截
  • node服务中转
  • 第三方工具集成

本地模拟数据

在方法里写死数据、请求后写死默认返回data

接口请求报错 404 页面报错

浏览器拦截(xhr/fetch

Better-mock

控制台此时就会输出数据了

better-mock 一个好处就是可以通过mockjs语法来生成一些随机的数据,每次请求都会返回不同的数据。 坏处是会在请求发送前就拦截,导致在 Chrome 控制台就看不见请求了

just mock

just-mock.vercel.app/

just mock 是一个浏览器插件,在我们代码中什么都不需要更改,只需要添加相应的接口和数据即可实现拦截。 不支持mockjs

node中转

mockjs官网

本地通过 koa 开启一个接口服务。

本地开启运行:node server.js,接口地址是 localhost:3003,但是请求的地址是 //localhost:9528 ,通过 webpack 的devServer配置,将请求转发到 localhost:3003

在控制台查看输出

同时ChromeNetwork 可以看到发起的请求

思考: webpack项目中每次需要启动node服务???

相关推荐
朝阳39几秒前
react【实战】首页 -- 响应式导航栏(含带联动动画的搜索框)
前端·react.js·前端框架
贾铭14 分钟前
如何实现一个网页版的剪映(五)如何跳转到视频某一帧
前端·后端
林恒smileZAZ18 分钟前
CSS 滚动驱动动画(scroll-timeline):无 JS 实现滚动特效
前端·javascript·css
俺不会敲代码啊啊啊18 分钟前
el-table实现行拖拽(包含展开项)
前端·vue.js·typescript
LIO19 分钟前
React Router 极简指南(v6+)
前端·react.js
明月_清风20 分钟前
从 AST 视角看透前端工程化:一条编译管线如何串联起所有工具
前端
架构源启21 分钟前
2026 进阶篇:Spring Boot响应式编程 + Spring AI 1.1.4 流式实战 + Vue前端完整实现(避坑指南)
java·前端·vue.js·人工智能·spring boot·spring·ai编程
白开水都有人用22 分钟前
前端 AES 加密 + 后端解密 + MD5 校验登录
前端
OpenTiny社区36 分钟前
还在手写 AI 聊天页?这款 Vue3 气泡组件,直接搞定流式对话!
前端·vue.js·ai编程
毛骗导演38 分钟前
Cladue Code 源码解析-键盘事件与 Vim 模式:parse-keypress 解析状态机
前端·架构