【mock模拟数据 ---模拟接口返回较为真实的数据】

Mock 模拟数据        

mockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。模拟数据有一定的规则请参考：Mock.js

 参考目录  

1.安装

   

 2.配置 src/mock/index.js

import Mock from 'mockjs'

// 基本配置
Mock.setup({
    // 随机延迟
    timeout: '500-1000'
})

 3.使用   -src/main.js 

// mockjs
import '@/mock'

4.模拟接口，拦截请求

// 拦截接口  /my/test
// 1.拦截地址规则，需要匹配到它
// 2.请求方式
// 3.返回数据（函数返回数据）
Mock.mock(/\/my\/test/, 'get', { msg: '获取数据成功', result: [] })

// 调用模拟的接口
request('/my/test','get').then(data=>{
    console.log(data);
})

打印结果

 5. 生成随机数据   5条数据  [{id:'',name:''},...]

Mock.mock(/\/my\/test/, 'get', () => {
    // 模拟数据的逻辑 目标：5条数据  [{id:'',name:''},...]
    const arr = []
    for (let i = 0; i < 5; i++){
        arr.push(Mock.mock({
            id: '@id',
            name:'@name'
        }))
    }
    return { msg: '获取数据成功', result: arr }
})
)

打印结果

中文名字  - name:'@cname'

 

还可模拟图片等等数据   -image:'@image(200x100)' 

 

 

 

后续有接口后，直接注释掉第三步的使用即可，mock失效，直接使用后端接口

（匹配到mock的地址规则，走本地。没有的话走线上。）