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