vue数据模拟

mockjs

1. 首先安装mockjs

   npm install mockjs
   

2. 语法规则

   Mock.mock(rurl?, rtype?, template)
   
   Mock.mock(rurl,rtype,function(options))
   

   • rurl：（可选），表示要拦截的url，使用字符串或正则。
   • rtype：（可选），表示要拦截的请求方式。
   • template：（可选），数据模板，对象或者字符串。
   • function(option)：（可选），生成响应数据的函数。

3. 使用

   /*==================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

1. 安装

   npm i webpack-api-mocker --save-dev
   

2. 在项目根目录下新建mock/index.js，定义mock接口

   const proxy = {
   	'GET /list': {
   		success: [
   			'星河滚烫，你是人间理想',
   			'不妨不妨，来日方长',
   			'生活明朗，万物可爱',
   			'盐于律己，甜以待人',
   			'满怀希望就会所向披靡',
   			'今夜我心头的月亮又被你打翻了'
   		],
   		message: '获取数据成功'
   	}
   }
   module.exports = proxy
   

3. 修改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
   			})
   		}
   	}
   }