mock ｜ 基础

什么是mock？（作用）

=>  是一种模拟后端借口的解决方案。 （可以让前端提前调用接口，完成前端开发）

 

优点

1、前后端分离：让前端独立于后端进行开发

2、增加单元测试的真实性：可模拟多场景的数据

3、开发无侵入：不需要修改现有的代码，可拦截ajax请求，返回模拟的返回数据

4、用法简单：适用于大多数接口

5、数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等

6、方便扩展：支持自定义函数和正则

 

语法规范（数据模版&数据占位符）

1、数据模版定义规范

=>  数据模版中的每个属性由三部分组成（'属性名｜生成规则' ：属性值）

'name｜rule'：value

举个🌰——字符串：

// w随机出现1-10次，1-10表示重复次数
var data = Mock.mock ({'username|1-10' : 'w'})
// w出现5次
var data = Mock.mock ({'username|5' : 'w'})

举个🌰——数字：

// 数字中的1-10表示的数字的范围，1为初始默认值
var data = Mock.mock ({'age|1-10' : 1})

 

2、数据占位符定义规范

=>  占位符只是在属性值字符串中占个位置，并不出现在最终属性值中

@占位符
@占位符（参数[,参数]）

举个🌰：

// 随机生成一个id  '()'可不写，写了是用来传参
var data = Mock.mock ('@id()')
// 随机生成一个中文名称
var data = Mock.mock ('@cname()')
// 随机生成一个日期
var data = Mock.mock ("@date('yyyy-mm-dd')")
// 随机生成一段描述
var data = Mock.mock ('@paragraph()')
// 随机生成一个邮箱
var data = Mock.mock ('@email()')

 

基本流程

安装 ->  导入 ->  使用

安装：

cnpm install mockjs -D

(ps: 安装时提醒node版本不够高，需先升级node版本)

// 升级node
sudo npm i -g n
sudo n stable

// 查看node版本
node -v

导入：

var Mock = require('mockjs')

使用：

var data = Mock.mock({...})

 

在项目中使用的流程

1、定义接口路由在接口中返回mock模拟的数据

（见基本流程）

mock/index.js

// 引入
var Mock = require('mockjs')

// 暴露出去
module.exports = function(app){
    if (process.env.MOCK == 'true') {
        // 参数1:借口地址；参数2:服务器处理函数（req：请求对象；res：响应对象）
        app.use('/api/userinfo', (req, res) => {
            // 随机生成一个对象
            var data = Mock.mock ({
                id: '@id()',
                username: '@cname()',
                date: '@date(yyyy-mm-dd)',
                description: '@paragraph()',
                email: '@email()',
                'age|1-100': 23
            })
            // 将模拟的数据转成json格式并返回给浏览器
            res.json(data)
            // console.log(data, 'data')
        })
    }
}

2、在vue.config.js中配置devServer,在before属性中引入接口路由参数

module.exports = {
    devServer: {
    　　// devServer 在发送请求时，回先走到before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等。
        before: require('../mock/index.js')
      }
}

3、使用axios调用该接口获取数据

axios.get('/api/userinfo').then(res => {
      console.log(res.data, 'res')
})

 

控制是否使用mock

=> 新建一个env.development文件

MOCK = true
// MOCK = false

（ps: 判断语句见在项目中使用的流程的1）