Vue项目中使用Mockjs造假数据


需求场景:要get请求接口'/api/userInfo/list'
 
项目准备:
首先,安装项目中mockjs包、axios
npm install mockjs axios

 

然后,src根 目录下新建mock文件夹和mock.js、urls.js

 

(目录结构不强求,主要还是看你项目的划分。也可以单独出一个request文件,放axios.js、mock.js、和专门整理接口用的url.js)


user.vue文件中,接口请求代码(以axios为例):

 

接口相关配置文件urls.js:
主要记录每条接口需要请求的地址(加过代理的)、请求的方式(get等,方便管理)
export default {
    userTableData: {
        url: '/api/userInfo/list',
        type: 'get'
    }
}

 

 

mock.js文件内部:
首先,引入mockjs和需要的变量值urls.js
import Mock, { Random } from 'mockjs'
import urls from './urls'
然后,定义第一个假数据userTableData,是一个长度为10的数组,数组每一项都是对象,对象键根据vue中表格需要进行配置。
let params = Mock.mock({ // 数据池
    'userTableData|10': [{ // 图表过滤所需数据
        'name': '@cname',
        'date': '@date',
        'province': '@province',
        'city': '@city',
        'address': '@county(true) @ctitle() @natural(1000,9999) 号',
        'zip': '@zip'
    }]
})
// 设置请求时长200-600毫秒,模拟真实接口请求场景
Mock.setup({
    timeout: '200-600'
})
// 拦截urls.userTableData.url对应地址的请求,方式urls.userTableData.type,返回值为params.userTableData
Mock.mock(urls.userTableData.url, urls.userTableData.type, params.userTableData) // 请求该接口时,拦截请求并返回对应数据

 

最后,观察vue文件中的ajax请求,返回的response.data的数据就是我们mock的params.userTableData假数据。大功告成,可以专心写逻辑了。
 
 
源码地址
 
相关代码提交记录
 

你可能感兴趣的:(Vue项目中使用Mockjs造假数据)