前端 mock 数据及工具介绍
前端 mock 数据及工具介绍
阅读本文，需要有前端开发的简单知识，接下来我们分别从介绍 Mock 数据概念（what）、为啥要 Mock(why)、如何 mock(how）、mock 工具等方面来展开讲解。
mock 数据概念 - what
mock 英文翻译为模拟，这里的数据是指后端接口数据, 串起来也就简单一句话：（根据接口定义）模拟前端需要的后端接口数据。
为啥要 mock - why
因为现在绝大部分项目采用的都是前后端分离的开发模式，而前端主要关注页面和交互，需要结合数据来调试界面样式、页面交互和功能操作闭环的验证。前后端开发是并行的，在后端提供真正可用的接口前，前端要完成页面和功能的开发、调试，构造数据是必须的。
如何 mock - how
这个工作可以放前端，也可以放后端来做，构造数据主要有以下三种方式来实现：
- 写死在代码里 （没有和工程代码解耦，前后端都可做，不推荐）
- 项目中实现的 mock 功能 （可用，但不适合跨项目使用）
- 三方工具 （解耦，推荐使用）
使用第二种方式的，像 umi 框架、Vue3+vite 脚手架内置的 mock 功能。使用第三种方式的市面上 mock 工具挺多的，像知名的 Yapi、Apifox 等，好用，但大多都是要安装软件或部署前后端服务才能使用的。
mock 工具
网上的 mock 工具很多，我就不展开介绍了，我说下自己期望的强大好用的 mock 工具应该什么样，应该具备以下功能特性：
- mock 功能和工程代码解耦
- 能批量创建、方便管理 mock 数据
独立，能跨项目使用- 无需依赖另外的后端服务和第三方库（前端能自己玩转）
- 能在浏览器 network 中看到 mock 接口
- mock 功能支持
热更新，即更改 mock 内容无需手动重启 mock 服务 - mock 数据在开发、生产环境下都可以使用
能方便将后端实际接口 Response 数据转化为 mock 数据
对于第 8 点，是考虑到后端没准备好接口或后端接口服务经常故障、不稳定的情况，关于这个，经常和后端开发联调的前端同学应该感受颇深。
为了方便前端同学能自己 mock 数据，我实现了这么一个 Mock 工具 mock-service-cli，能满足上述所有要求，接下来我就简单讲解下怎么使用。
mock-service-cli
是基于 node 和 express 实现的 Mock 服务套件命令行工具
简易轻量、B/S 架构、0 秒启动， 支持热更新。具备以下能力
Mock ServerWeb ServerHttp request proxy
只需安装 Node，即可使用 mock-service-cli 的所有功能，包括 mock 数据。
使用方式
在项目根目录下创建 mock 目录，也可指定其他位置的目录作为 mock 目录，里面可创建无限层级的 mock 分组目录，里面的所有 js 文件默认为 mock 数据文件。启动 mock 服务时会自动递归遍历 mock 目录的所有 js 文件，收集 mock 数据
- 构造 mock 数据
- mock 根目录范例
mock
├── element-template.js
├── sub
│ └── sub-test.js
└── test.js
- mock 数据的 js 文件范例
以对象字面量方式定义 mock 数据，js 中可使用 mockjs 来生成随机数据
格式：[method] url:ResponseData或ResponseFunction
method 可省略，默认Get, 支持GET,POST,PUT,DELETE,PATCH,OPTIONS,COPY,LINK,UNLINK,PURGE 等常用请求类型
const Mock = require("mockjs");
module.exports = {"/mock/api/getImage": {code: 0,message: "成功",data: {url: "https://cdn.pixabay.com/photo/2021/01/28/21/12/wave-5959087__340.jpg",},},"post /mock/api/genRandomText": (req, res) => {res.json({code: 0,message: "成功",data: {text: Mock.mock("@ctitle"),},});},
};
- 启动 mock 服务
编辑 mock 目录下的任何文件都会自动重启 mock 服务
$ mock-service-cliStarting up mock-server, serving /Users/chendq/MyProjects/mock-service-cli/mock 2022-08-07 18:47:41
前端 mock 数据及工具介绍相关推荐
- 前端 mock 数据
前端 mock 数据 Easy Mock 由于easy mock线上服务基本打不开的情况,所以有能力的还是做一下本地部署(参考) 在easymock创建一个项目,并将项目的 Base URL 配置到a ...
- 前端mock数据详细讲解
在实际的项目研发过程中,我们经常会遇到如下的尴尬场景: 前端开发依赖于后端接口数据,但是后台人员不足或者无法立即到位,前端迟迟不能开工,或者前端小伙子自己参照ui设计图,完成对应的静态页面(没有数据交 ...
- 前端mock数据(超级详细)
在实际的项目研发过程中,我们经常会遇到如下的尴尬场景: 前端开发依赖于后端接口数据,但是后台人员不足或者无法立即到位,前端迟迟不能开工,或者前端小伙子自己参照ui设计图,完成对应的静态页面(没有数据交 ...
- 主流的数据可视化工具介绍
作为一个自诩对全球分析平台了如执掌的资深数据从业人员,给各位分享分享主流的数据可视化工具. 一.可视化平台 1.FineBI 虽作一个BI工具,但是可视化效果很好,可制作Dashboard.优势在于一 ...
- kettle优化抽取数据速度_数据异构工具介绍
一:Data Migration(DM) 1.Data Migration 简介: Data Migration (DM) 是一体化的数据同步任务管理平台,支持从 MySQL 到 TiDB或者MySQ ...
- Mock数据生成工具
1. My JSON Server 将伪造数据存储在github上,然后通过my-json-server搭建的平台去访问mock数据. 类似一个proxy功能.例如:https://my-json-s ...
- 前端mock数据 - mockjs
mockjs简介 Mock.js is a simulation data generator to help the front-end to develop and prototype separ ...
- 前端常用的开发工具介绍及其下载
VSCode 官网下载页面:https://code.visualstudio.com/Download 首先,请根据电脑的系统与所需版本点击下载链接(一般情况下点击Windows按钮即可) 补充,如 ...
- 测试必知必会的Mock数据方法
Mock数据的含义 那么Mock数据是什么意思呢 首先Mock这个英文单词有模拟的意思,模拟数据通俗的理解就是构造假数据,即Mock数据就是通过构造假数据来达到测试的目的,它广泛运用于功能测试.接口测 ...
最新文章
- 【Vue】谈Vue的依赖追踪系统 ——搞懂methods watch和compute的区别和联系
- 日记 [2008年03月26日]
- 滴答定时器的计数模式_SysTick(系统滴答定时器)
- 决战丰水期：大批矿工迁往云贵川
- Python 代码实现模糊查询
- Error:java: 无效的标记 -version 编译错误的解决办法
- 0009:err:listview:LISTVIEW_WindowProc unknown msg 108c问题解决
- MATLAB之基本语法之常用命令
- 李开复评价马斯克：他真正的目的是把人变成半机械人
- sql游标 while_用SQL Server中的排名函数替换SQL While循环和游标，以提高查询性能
- nginx 反向代理 转发请求时，有时好有时没反应，产生原因及解决
- java寻路算法_具有指定距离/节点数的寻路算法
- “校内网”将不存在，“校内网”更名为“人人网”
- Ubuntu修改时区和更新时间
- IDEA 资源文件配置中文乱码问题
- Scratch幻影小猫 电子学会图形化编程scratch等级考试三级真题答案2019-9
- android studio 成长历程
- 创新、成长、基础能力全面领先，华为云领跑中国大数据厂商
- A+CLUB活动预告 | 2023年5月
- 美国研究生计算机科学专业申请,留学美国研究生计算机科学专业申请建议
热门文章