Mock模拟后台接口数据的简单使用

54次阅读

共计 2498 个字符,预计需要花费 7 分钟才能阅读完成。

在项目开发的过程中,有时候会出现后端数据还没出来,而前端需要数据的情况。这时候,如果等着后端人员开发完再进行测试,联调则会拖慢开发进度。这时候,Mock 就显示出它的魅力。它可以进行生成随机数据,模拟后端接口数据,从而实现开发时,前后端分离,提高效率。
在使用 Mock 之前,应该先和后端人员讨论接口文档的基本结构,确认接口文档的内容。在根据确认好的接口文档,使用 Mock 模拟数据。
最近在 vue-cli 搭建的项目静态页面已逐渐完善,此时若能有数据模拟渲染,那作为前端新手更能熟悉开发流程。查阅文档和其他小伙伴的文章,开始了模拟数据之旅。
Mock 的简单使用
1、安装
npm i mockjs -S

2、引入
在 src 文件目录下,新建 mock.js 文件并引入:

const Mock = require(‘mockjs’)

之后,在 main.js 文件中加载 mock.js

require(./mock.js)

3、简单使用
格式:Mock.mock(“ 请求的 URL 地址 ”,{“ 数据对象 ”})

自己的代码:

const Mock = require(‘mockjs’);
const Random = Mock.Random; // 当需要生成随机数据时使用,更多的随机数据的生成使用参照官网示例

// 示例 1
Mock.mock(“http://localhost:8080/getData”,{
“code”: 1,
“msg”: “ 请求接口成功 ”,
“data”: [
{
“id”: 1,
“name”: “ 英语 ”,
“createTime”: “2019-01-01T21:18:02.000+0000”,
“updateTime”: “2019-01-01T21:18:07.000+0000”,
“ordinal”: 1
},
{
“id”: 2,
“name”: “ 趣味 ”,
“createTime”: “2019-01-01T21:18:24.000+0000”,
“updateTime”: “2019-01-01T21:18:28.000+0000”,
“ordinal”: 2
}
]
});

// 示例 2
Mock.mock(“http://localhost:8080/getBanner”,{
“name”:”learn”,
“title”: Random.ctitle(), // 随机生成中文标题
“describe”: “learnEnglish”,
“imgs”: [
“https://m.360buyimg.com/babel/jfs/t1/29191/26/4235/95551/5c2f2996Eba0b025d/c6a2aa923a67f952.jpg”,
“https://img1.360buyimg.com/da/jfs/t1/28807/10/4306/85260/5c30484cE8f828f42/3b36d2a6b80d10eb.jpg”,
“https://img10.360buyimg.com/da/jfs/t18487/241/1444742474/110119/f5bc9082/5acb3af6N2af11d1c.jpg”,
“https://m.360buyimg.com/babel/jfs/t1/22710/5/3081/75342/5c244f9eE54c2699a/74f8c021c36b6366.jpg”
]
});

4、进一步使用
参照官方文档,在 mock.js 文件中引入 Mock 之后,根据数据模板生成模拟数据:Mock.mock(rurl?, rtype?, template|function( options))
rurl:可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则,如 /index.js => /^/index.js$/ rtype:可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。template:可选。表示数据模板,可以是对象或字符串。例如 {‘id|1-10’:[{}] }。function(options):可选。表示用于生成响应数据的函数。options 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性。
① 记录数据模板。当拦截到匹配 url 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。第三点的简单使用采用的就是这种形式。
Mock.mock(rurl, template)

② 记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
Mock.mock(rurl, function( options) )

Mock.mock(“http://localhost:8080/getNewslist”, function(options){
return options.type
});

③ 记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
Mock.mock(rurl, rtype, template)

Mock.mock(“http://localhost:8080/geNewsinfo”, “get”, {
“code”: 1,
“msg”: “ 请求接口成功 ”,
“data”: [
{
“id”: 1,
“name”: “ 英语 ”,
“createTime”: “2019-01-01T21:18:02.000+0000”,
“updateTime”: “2019-01-01T21:18:07.000+0000”,
“ordinal”: 1
}
]
});

④ 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
Mock.mock(rurl, rtype, function( options) )

Mock.mock(“http://localhost:8080/getImage”, “get”, function(options){
return options.type
});

正文完
 0