API接口之Mock.js模拟服务器Api接口

发表于 | 分类于 ，

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求，生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

Mock.js支持的随机数据类型很丰富，包括文本、数字、布尔值、日期、邮箱、链接、图片、颜色等等，足够我们开发使用了。官方文档

204363890daad6d401551fcd7b59e6a0.md.jpg

效果演示如下：

安装Mock.js

mock.js只用于开发环境实现模拟数据，而生产环境有真正的后台服务器因此需要mock.js，因此在安装mock.js的时候记得带上参数 –save-dev，进入到项目目录，执行指令：npm i mockjs --save-dev

f406dc6895a203f06da9b0f8b55161e8.md.jpg

mock.js使用

最简单的方式就是直接新建一个mock.js文件，然后引入mock.js插件，设置一个延迟时间虚拟服务器响应效果，然后通过Mock.mock拦截请求并随机生成数据返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Mock from 'mockjs' //引入mockjs
Mock.setup({ 
    timeout: 500 //延迟效果
})
//拦截请求并返回数据
Mock.mock('login/', 'post', { 
    'code': 200, // 状态码 
    'userid': '@id()', // 随机生成用户id 
    'username': '@cname()', // 随机生成中文名字 
    'date': '@date()', // 随机生成日期 
    'avatar': "@image('200x200','red','#fff','avatar')", // 生成图片 
    'description': '@paragraph()', // 描述 
    'ip': '@ip()', // IP地址 
    'email': '@email()'// email
})

数据结构

在mock.js的数据结构中，每个属性可以由三部分构成：属性名（name），规则（rule），值（value），即’name|rule’: value（属性名 和 规则 之间用竖线 | 分隔，且规则是可选的），属性值可以是字符串 String、数字 Number、布尔型 Boolean、对象 Object、数组 Array、函数 Function、正则 RegExp等，例如：

1
2
3
4
5
'name|min-max': string //随机生成字符串，重复次数大于等于min，小于等于max。
'name|count': string //随机生成字符串，重复次数count。
'name|+1': number //初始值为 number，每次生成属性值自动加 1。
'name|min-max': number //随机生成整数，且大于等于min、小于等于max 。
'name|min-max.pmin-pmax': number //随机生成浮点数，且大于等于min、小于等于max ，小数部分保留pmin到pmax位。

数据占位符

在前面的随机数据中我们可以看到属性值中有个@占位符，这里是用 @来标识其后的字符串是占位符，这样在调用Mock.mock就会引用Mock.Random中的方法实现数据的随机生成，Mock.Random 是Mock提供的一个用于生成各种随机数据的工具类，支持多种类型和方法。我们可以通过Mock.Random.Method()或者‘@Method’来实现以下方法：

27e1b4633c63967b3e45e0b938147885.md.jpg

组件中使用

Mock的好处就是不需要修改前端代码，那么在前端中还是正常的对接API接口即可，如果你封装了axios注意把axios.defaults.baseURL属性注释掉，除非你想在Mock每次都添加完整的api路径，以下是封装了axios的写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
//以下是封装了axios的写法
handleLogin(){ 
    this.loading = true 
    login('post',{ 
        username:this.loginForm.username, 
        password:this.loginForm.password, })
        .then(res=>{ 
        	if(res.code===200){ 
                this.loading = false 
                console.log("登录成功") 
            } 
    })
},

代码整理

像刚开始那么写当我们数据和接口一多起来就不方便维护了，所以这里我们重新整理下，新增个data.js文件专门存放数据，index.js则负责定义各个接口方法和数据返回即可，data中我们用module.exports导出对象，index中先用Mock.mock(data)生成数据，在后面的接口中我们只要直接通过database.userinfo来获取对应的数据即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//index.js
import Mock from 'mockjs'
import data from './data.js'
Mock.setup({ 
    timeout: 500
})
var database = Mock.mock(data)
Mock.mock('login/', 'post', req => { 
    return database.userinfo
})
//data.js
module.exports = { 
    'userinfo': { 
        'code': 200, 'userid': '@id()', // 随机生成用户id 
        'username': '@cname()', // 随机生成中文名字 
        'date': '@date()', // 随机生成日期 
        'avatar': "@image('200x200','red','#fff','avatar')", // 生成图片 
        'description': '@paragraph()', // 描述 
        'ip': '@ip()', // IP地址 
        'email': '@email()'// email 
    }
}