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>
    

    效果演示

使用webpackrequire.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
    			})
    		}
    	}
    }
    

posted @ 2021-06-11 11:39  黑色外套  阅读(40)  评论(0)    收藏  举报