前端使用mockjs模拟接口数据

在前后端分离开发中，有时候后台开发比较慢还没有给回接口给前端，那么这时我们可以自己模拟数据（也就是mock数据）。
当然可能你会想到我新建个js文件，把数据模拟好导出再引入请求就可以啦。这个方法虽然可以，但是接口多的时候，需要模拟的数据多的时候就很不方便了，要来回修改差异，效率很低。
现在学会使用mock.js拦截ajax请求，更加方便简洁的构造你需要的假数据。

这里提醒一下，mockjs模拟的接口地址最好不要和后端给你的一致，不然到时候你忘记把mockjs去掉的时候，请求得到的还是拦截的假数据（或者可能会出现其他请求异常问题）。

一、在React项目中使用mockjs

1、安装mockjs

npm install mockjs -D

2、在项目根目录下创建个mock文件夹

然后在mock文件夹中新建个index.js文件，里面写mock数据。

// 引入mockjs
import Mock from 'mockjs';// 设置延时200-600毫秒请求到数据
Mock.setup({timeout: '200-600',
});// 可以模拟很多个接口数据，接口地址不一致即可
Mock.mock('/jobLssuesList/list', // 接口地址{code: 0,message: '操作成功',success: true,// 重复属性值 array 生成一个新数组，重复次数为 5'data|5': [{// 属性值自动加 1'id|+1': 1,// 随机生成一个布尔值，值为 true / false 的概率各为 1/2。'isShow|1': true,// 从属性值 array 中随机选取 1 个元素，作为最终值。'tagName|1': ['服务', '人力', '市场'],ipTree: 'bussissv12',ip: '61.1.1.1','status|1': ['未处理', '已处理'],// 随机生成日期时间（'2020-04-14 18:00:02'）mtime: '@datetime',// 随机生成1-800的数字'score|1-800': 800,// 随机生成中文名字（@是占位符，具体后面能加什么，官网有解析）nickname: '@cname',// 随机生成十六进制颜色值color: '@color',// 随机生成邮箱email: '@email',},],});

3、在项目的index.js入口文件中引入mock数据

4、在react组件中请求获取模拟的数据

可以按照请求后台接口那样进行请求即可，这里使用axios库的get请求。

// 假设这里是个Test组件
import React, { useEffect } from 'react';
import axios from 'axios';const Test = () => {useEffect(() => {getDatas();});const getDatas = () => {axios.get('/jobLssuesList/list').then((res) => {// res.data就是我们请求到的对应url中的mock数据console.log(res.data);}).catch((err) => {console.log(err);});};return (<div>Test组件</div>);
};export default Test;

打印得到的mock数据：

二、mockjs中的语法规则

1、mockjs官网

官网可以查看到所有的语法规范，遵循写法即可。上面的举例我把日常用到模拟数据的写法写出来了，简单的模拟假数据够用，具体复杂点的就看官网写。

前端使用mockjs模拟接口数据相关推荐

接口同花顺_Fiddler模拟接口数据（mock）
我们在测试过程中,经常会遇到查看不同接口数据前端页面展示的场景,今天我们就一起来看下如何用Fiddler模拟接口数据(mock). 01 mock定义 mock测试就是在测试过程中,对于某些不容易构造 ...
【Mockjs】React + Mockjs 模拟接口
React + Mockjs 模拟接口安装 mockjs 依赖: pnpm i install mockjs -D 安装 axios: pnpm install axios --save 配置 sr ...
vue实现多行数据提交_Vue+Mockjs，模拟接口数据，实现前后端独立开发
前后端分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦.前后端应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却严重依赖后端的接口,总会苦苦等待后端接口出来才能继续开发.为 ...
前端用Mockjs模拟数据
mockjs可以模拟数据,可以使我们更快的得到较为真实的数据,且可以拦截axios的接口调用,让我们的代码实现了调用接口的逻辑且得到模拟的数据,保存业务完整度. 使用步骤: 1.安装 npm i mo ...
vue外卖十四：商家详情：用mockjs模拟api数据接口
1)安装mockjs 官网:mockjs.com 文档:https://github.com/nuysoft/Mock/wiki/Getting-Started http://mockjs.com/e ...
vue+vuecli+webpack中使用mockjs模拟后端数据
前言使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
前端关于自己模拟接口做测试
在开发中,对于刚入行的小白来说,调接口似乎成了一件很头疼的事,因为在学习中绑定的数据都是自己写死的模拟数据,想要练习通过接口拿数据又不会写,那可以模拟一个接口来做请求数据这个操作 https://ww ...
Vue（二十一）使用express模拟接口数据
1.下载express ... 2.使用vue-cli下载好项目文件 ... 3.找到文件 build - webpack.dev.conf.js 'use strict' const utils = ...
研发阶段模拟接口数据
因为在vue-cli工程中需要创建很多.vue文件,我们希望创建vue文件和创建html.css.js文件一样右键即可选择创建,并且创建的文件中可预先写好模板代码. webstorm-Preferen ...