前端开发模拟数据------webpack-api-mocker

应用场景：

在实际的项目开发过程当中，通常都会进行先后端分离的开发模式，前端经过mock或者其余的插件模拟后台返回数据的功能。在经常使用的webpack构建工程项目中，经过和webpack-dev-server或者express等相互配合，开启本地服务，能够直接模拟发送ajax请求，若是想要模拟后台返回的数据，得从新开启一个mock server服务，这样就比较麻烦，今天要介绍的webpack-api-mocker插件，就很好的解决了这个问题，不须要再单独开启一个服务，能够实现模拟数据，具体配置以下。

第一步: 安装webpack-api-mocker

npm install webpack-api-mocker --save-dev

第二步：编写mock里面的index.js(接口文件)

在项目中建立mock文件夹，建立index.js文件，具体代码以下：

const proxy = {
    'GET /api/user': {
        id: 1,
        username: 'good',
        sex: 6
    },
    'GET /api/user/list': [
        {
            id: 2,
            username: 'study',
            sex: 5
        },
        {
            id: 3,
            username: 'jake',
            sex: 4
        }
    ],
    'POST /api/user/manager': (req, res) => {
        console.log('-----' + req.body);
        res.send({status: 'ok', message: '删除成功'});
    }
};
module.exports = proxy;

(注： 这个对象的key值，是方法+路径，必定要注意前面的空格，否则会报错)

第三步：结合webpack的配置

const webpack = require('webpack'); // 访问内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const apiMocker = require('webpack-api-mocker');
const mocker = path.resolve(__dirname, '../mock/index.js');
module.exports = {
    entry: {
        app: path.join(__dirname, '../src/index.js')
    },
    output: {
        path: path.resolve(__dirname),
        filename: 'bundle.js'
    },
    devtool: 'eval-source-map',
    devServer: {
        port: 8009, // 端口号
        hot: true, // 是否使用热更新
        compress: true, // 压缩
        historyApiFallback: true,
        contentBase: path.join(__dirname, 'output'), // 从哪里访问文件
        before(app) {
            apiMocker(app, mocker, {
                proxy: {
                    '/api/*': 'https://www.baidu.com'
                },
                changeHost: true }); }
    }
};

在webpack.config.js中加入红色的部分，发送请求的时候就能够很好的看到后台返回的数据

以上就是webpack-dev-server+webpack-api-mocker实现了前端的数据请求和数据返回，简单配置，不须要再去修改其余的配置

 （注释：使用过程当中发现了一个弊端，当请求方式为get时，不管是否有此接口，状态码返回的都为200，当且只当请求方式为post的时候才使用正常）