Vue系列之mock数据（2020-07-09）

前言

能力就如一坛美酒，时间越久反而越纯。
正在向纯的美酒方向前进。
在很久很久之前，我有写过vue开发时mock数据场景，貌似只能自己可以看的懂，所以今天以vue-cli3的脚手架上再详细写一版。主要是思路吧。
你要问很久是多久，那么我的回答是很久~哈哈；
下面只介绍三种

// 以下三种方式都会用的公有配置
| vue.config.js
| src 
	| apiconfig.js
	| main.js
| public
// ************apiconfig.js************start
	 	/**
		 * @file apiconfig
		 * @description api地址配置列表，请求接口是来此处取路径
		 */
		const isLocal = process.env.NODE_ENV === 'development'; // 线上或者线下
		const localPrefix = '/api/'; // 线下地址
		const requestDemo = '/xianshang/requestDemo'; // 真实线上地址
		export default {
		    // 验证接口 下的三种方式
		    apiDequestDemo: isLocal ? localPrefix + 'request/demo' : requestDemo + 'index',
		    mockRequestDemo: isLocal ? '/mock/request/demo' : requestDemo + 'index',
		    proxyRequestDemo: isLocal ? '/proxy/request/demo' : requestDemo + 'index',
		};
// ************apiconfig.js************end

方式一（main.js处引用mock）

特点：

1. 通用性，适合不同类型的项目
2. 浏览器的网络调式面板无请求

配置处：

// 丐版代码
| src 
	| api  // 与 view 的目录结构一致
		| RequestDemo
			| index.js
		| mock.js
	| view
		| RequestDemo
			| index.vue
	| main.js
// ************main.js************start
	 require('./api/mock.js');
// ************main.js************end

// ************mock.js************start
	const Mock = require('mockjs');
	Mock.setup({
	    timeout: 800, // 设置延迟响应，模拟向后端请求数据
	});
	const RequestDemo = require('./RequestDemo/index.js');
	module.exports = {...RequestDemo };
// ************mock.js************end

// ************RequestDemo/index.js************start
	const Mock = require('mockjs');
	const requestDemo = function() {
	    return {
	        result: 0,
	        result_info: "success",
	        content: {
	            page: "RequestDemo",
	            type: "/api/request/demo"
	        }
	    }
	};
	Mock.mock('/api/request/demo', 'post', requestDemo);
// ************RequestDemo/index.js************end

使用处：

| src 
	| view
		| RequestDemo
			| index.vue
// ************index.vue************start
// 丐版代码
	import $http from "@/assets/request.js";
	import apiConfig from "@/apiconfig.js";
    
    methods: {
        axiosMode1() {
            $http(apiConfig.apiDequestDemo, {
                data: { api: 1 }
            }).then(res => {
                console.log(res);
            });
        },
    }
// ************index.vue************end

综上： First blood，完美首杀。

方式二（vue.config.js处引用mock）

特点：

1. vue-cli3配置
2. 浏览器的网络调式面板有请求
3. 需要在mockjs依赖基础上在新增一个依赖 vue-cli-plugin-mock 1.0.0 版本

配置处：

// 丐版代码
| src 
| vue.config.js
| mock // 与 view 的目录结构一致
	| RequestDemo 
		| index.js
		| page.js
	| mock.js
// ************vue.config.js************start
	 module.exports = {
	 	pages: {...},
	 	pluginOptions: {
	        mock: {
	            entry: './mock/mock.js',
	            debug: true
	        }
    	}
	 }
// ************vue.config.js************end

// ************mock.js************start
	const Mock = require('mockjs');
	// Mock.setup({
	   // timeout: 800, // 设置延迟是无效的，延迟处理查看 RequestDemo/page.js
	// });
	const RequestDemo = require('./RequestDemo/index.js');
	module.exports = {...RequestDemo };
// ************mock.js************end

// ************RequestDemo/index.js************start
	const Mock = require("mockjs");
	module.exports = {
	    "POST /mock/request/demo": Mock.mock({
	        result: 0,
	        result_info: "success",
	        content: {
	            page: "RequestDemo",
	            type: "/mock/request/demo"
	        }
	    }),
	    "POST /mock/request/demo/page": require('./page.js')
	}
// ************RequestDemo/index.js************end

// ************RequestDemo/page.js************start
	const Mock = require("mockjs");
	let data = Mock.mock({
	    result: 0,
	    result_info: "ok",
	    content: {
	        page: "RequestDemo",
	        type: "/mock/request/demo"
	    }
	});
	module.exports = (req, res) => {
	    setTimeout(() => {
	        res.send(data);
	    }, 100);
	};
// ************RequestDemo/page.js************end

使用处：

| src 
	| view
		| RequestDemo
			| index.vue
// ************index.vue************start
// 丐版代码
	import $http from "@/assets/request.js";
	import apiConfig from "@/apiconfig.js";
    
    methods: {
        axiosMode2() {
            $http(apiConfig.mockRequestDemo, {
                data: { mock: 1 }
            }).then(res => {
                console.log(res);
            });
        },
    }
// ************index.vue************end

综上：Double kill，双杀到手。

方式三（vue.config.js 处转发请求-proxy）

特点：

1. vue-cli3配置或者自己配置
2. 浏览器的网络调式面板有请求
3. 采用的是转发请求，get请求方式，
4. 可以跨域与rd联调
5. 本地mock访问静态资源 - 请求拿到的是json文件

配置处：

// 丐版代码
| public
	| mock // 与 view 的目录结构一致
		| requestDemo
			| index.json
| src 
	| main.js
	| apiRewrite.js
| vue.config.js
// ************vue.config.js************start
	 let apiRewrite = require('./src/apiRewrite.js');
	 module.exports = {
	 	pages: {...},
	 	devServer: {
	        proxy: {
	            '/proxy': {
	                // 此处的本地端口可以通过portfinder模块做动态的
	                target: 'http://localhost:8080',
	                changeOrigin: true,
	                pathRewrite: apiRewrite // 定义转发规则
	            }
	        }
    	}
	 }
// ************vue.config.js************end

// ************apiRewrite.js************start
	// /mock/requestDemo/index.json 直接访问静态资源
	module.exports = {
	    '/proxy/request/demo': '/mock/requestDemo/index.json'
	}
// ************apiRewrite.js************end

// ************public/mock/requestDemo/index.json************start
	{
	    "result": "0",
	    "result_info": "ok",
	    "content": {
	        "page": "RequestDemo",
	        "type": "/proxy/request/demo"
	    }
	}
// ************public/mock/requestDemo/index.json************end

使用处：

| src 
	| view
		| RequestDemo
			| index.vue
// ************index.vue************start
// 丐版代码
	import $http from "@/assets/request.js";
	import apiConfig from "@/apiconfig.js";
    
    methods: {
        axiosMode3() {
            $http(apiConfig.proxyRequestDemo, {
                data: { proxy: 1 },
                method: 'get'
            }).then(res => {
                console.log(res);
            });
        }
    }
// ************index.vue************end

综上：呐喊 Triple kill，三杀接上。