前端開發模擬數據------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的時候才使用正常）