Vue3使用 mock.js 模拟后端数据请求的方法
mock.js官网:mockjs.com/1、首先用npm安装npm install mockjs2、然后在src目录下新建一个目录叫“mock”,再目录下新增一个index.js文件作为mock的配置// 引入Mock文件,由于 Vite 不支持require()方法所以改用importimport * as Mock from 'mockjs'// 模拟返回的数据格式,可以自己随便定义cons
·
mock.js官网:mockjs.com/
1、首先用npm安装
npm install mockjs
2、然后在src目录下新建一个目录叫“mock”,再目录下新增一个index.js文件作为mock的配置
// 引入Mock文件,由于 Vite 不支持require()方法所以改用import
import * as Mock from 'mockjs'
// 模拟返回的数据格式,可以自己随便定义
const result = {
status: 200,
reset: '0',
message: 'success',
data: {
'list|1-10': [{
'id': '@guid',
'name': '@cname',
'age|20-40': 20,
}]
}
}
// 用mock拦截对应的请求地址,并发送返回数据对象(这里以正则来匹配带有api/的请求地址)
const responseData = Mock.mock(/api\//, 'get', result)
// 导出返回对象,可以导出多个对象
export default responseData
3、在main.js里引入mock
import { createApp } from 'vue'
import App from './App.vue'
// 引入上面配置的mock文件
import('./mock/index')
最后使用你自己的ajax请求,填写上面对应的拦截的后端接口地址就可以了
更多推荐
已为社区贡献12条内容
所有评论(0)