vue数据模拟
mockjs
-
首先安装
mockjs
npm install mockjs
-
语法规则
Mock.mock(rurl?, rtype?, template) Mock.mock(rurl,rtype,function(options))
rurl
:(可选),表示要拦截的url
,使用字符串或正则。rtype
:(可选),表示要拦截的请求方式。template
:(可选),数据模板,对象或者字符串。function(option)
:(可选),生成响应数据的函数。
-
使用
/*==================src/mock/index===============*/ import Mock from 'mockjs' Mock.mock('/list', 'get', () => { return [ '星河滚烫,你是人间理想', '不妨不妨,来日方长', '生活明朗,万物可爱', '盐于律己,甜以待人', '满怀希望就会所向披靡', '今夜我心头的月亮又被你打翻了' ] })
<!-- App.vue --> <script> import './mock' export default { data() { return { list: null } }, methods: { getdata() { this.$axios .get('/list') .then(result => { const { data } = result this.list = data }) .catch(err => { console.log(err) }) } } } </script>
使用
webpack
的require.context()
遍历所有 mock 文件
/* ======================src/mock======================= */
const Mock = require('mockjs')
// 设置拦截请求的响应时间
Mock.setup({
timeout: '300-800'
})
let config = []
const files = require.content('.', true, /\.js$/)
files.keys().forEach(key => {
if (key === './index.js') return
config = config.contane(files(key).default)
})
// 注册所有的mock服务
config.forEach(item => {
for (const [path, target] of Object.entries(item)) {
const protocol = path.split('|')
Mock.mock(new RegExp('^' + protocol[1], protocol[0], target))
}
})
在main.js
中引入
import './mock'
在mock
文件夹下创建listDemo.js
const list = [
'星河滚烫,你是人间理想',
'不妨不妨,来日方长',
'生活明朗,万物可爱',
'盐于律己,甜以待人',
'满怀希望就会所向披靡',
'今夜我心头的月亮又被你打翻了'
]
export default {
'get|/list': option => {
return {
status: 200,
data: list
}
}
}
或者使用template
返回
const list = [
'星河滚烫,你是人间理想',
'不妨不妨,来日方长',
'生活明朗,万物可爱',
'盐于律己,甜以待人',
'满怀希望就会所向披靡',
'今夜我心头的月亮又被你打翻了'
]
export default {
'get|/parameter/query': demoList
}
webpack-api-mocker
-
安装
npm i webpack-api-mocker --save-dev
-
在项目根目录下新建
mock/index.js
,定义mock
接口const proxy = { 'GET /list': { success: [ '星河滚烫,你是人间理想', '不妨不妨,来日方长', '生活明朗,万物可爱', '盐于律己,甜以待人', '满怀希望就会所向披靡', '今夜我心头的月亮又被你打翻了' ], message: '获取数据成功' } } module.exports = proxy
-
修改
vue.config.js
const apiMocker = require('webpack-api-mocker') const path = require('path') module.exports = { devServer: { before(app) { // 注意,此处引用的是自定义的接口文件 apiMocker(app, path.resolve('./mock/index.js'), { changeHost: true }) } } }