应用场景:

在实际的项目开发过程中,一般都会进行前后端分离的开发模式,前端通过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的时候才使用正常)