[JavaScript知识库]mock的使用，进行数据拦截，处理本地页面调试

Mock 使用步骤

1、 安装 mockjs；

npm insatll mockjs -D

2、创建 mock 资源
在根目录下创建 mock 文件夹，

// mock/index.js 文件

import Mock from 'mockjs'; // 引入mockjs
// 设置延时
Mock.setup({
	timeout: '200-1000',
});

//  对 api/mobile/getInfo 请求方式为 post 的这个接口进行拦截
//  params 为请求参数
//  return 返回 mock 数据
Mock.mock(/\/api\/mobile\/getInfo/, 'post', (params) => {
	return {
		message: '请求成功。',
		data: {
			id: Mock.mock('@id'),
			creationTime: Mock.mock('@datetime'),
			name: Mock.mock('@csentence(2,4)'),
		},
	};
});

3、在项目入口 main.js 中引入 mock 资源

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import './mock/index.js';

new Vue({
	router,
	store,
	render: h => h(App),
}).$mount('#app');

4、通过环境变量控制是否开启 mock

if(process.env.NODE_ENV === 'development' ){
    require('./mock/index.js');
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖