前后台解耦开发

参考链接https://www.cnblogs.com/cn-andy/p/9474667.html

第一步: 安装webpack-api-mocker

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

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

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

复制代码

const proxy = {
    'GET /rest/ies/v1/resources/': (req, res) => {
        return res.json(require('./api/rest/ies/v1/resources/SYS_Switch.json'));
    },
    'POST /rest/res/meresgrpwebsite/v1/grptypes/100001': (req, res) => {
        return res.json(require('./api/rest/ies/v1/resources/SYS_Switch.json'));
    },
};
module.exports = proxy;

SYS_Switch.json文件内容如下：

{
  "totalNum": 4,
  "pageSize": 10,
  "totalPageNo": 1,
  "currentPage": 1,
  "datas": [
    {
      "SYS_Switch#productName": "NE10TE",
      "SYS_Switch#operState": "Up",
      "SYS_Switch#name": {
        "path": null,
        "ci": "SYS_Switch",
        "id": "184488297743050",
        "value": "DXW259"
      },
      "SYS_Switch#lastMonitorTime": "2016-11-01 22:29:51",
      "SYS_Switch#ipAddress": "180.1.101.38",
      "SYS_Switch#mac": "9e-6e-b3-58-a9-ca",
      "SYS_Switch#manufacturer": "Huawei",
      "SYS_Switch#mgmtIpv6": "",
      "SYS_Switch#remark": "Upload device From IES",
      "SYS_Switch#adminState": "Up",
      "SYS_Switch#confirmStatus": "未确认",
      "SYS_Switch#class_Name": "SYS_Switch",
      "SYS_Switch#id": "184488297743050",
      "SYS_Switch#sn": "3563653"
    },
    {
      "SYS_Switch#productName": "NE10TE",
      "SYS_Switch#operState": "Up",
      "SYS_Switch#name": {
        "path": null,
        "ci": "SYS_Switch",
        "id": "3146447339929312",
        "value": "IES.Node99410"
      },
      "SYS_Switch#lastMonitorTime": "2016-10-21 17:23:25",
      "SYS_Switch#ipAddress": "37.190.246.102",
      "SYS_Switch#mac": "3c-c8-eb-c8-ac-bd",
      "SYS_Switch#manufacturer": "Huawei",
      "SYS_Switch#mgmtIpv6": "",
      "SYS_Switch#remark": "Upload device From IES",
      "SYS_Switch#adminState": "Up",
      "SYS_Switch#confirmStatus": "未确认",
      "SYS_Switch#class_Name": "SYS_Switch",
      "SYS_Switch#id": "3146447339929312",
      "SYS_Switch#sn": "5583519"
    },
    {
      "SYS_Switch#productName": "NE10TE",
      "SYS_Switch#operState": "Up",
      "SYS_Switch#name": {
        "path": null,
        "ci": "SYS_Switch",
        "id": "3392152875249867",
        "value": "IES.Node79116"
      },
      "SYS_Switch#lastMonitorTime": "2016-10-21 17:23:57",
      "SYS_Switch#ipAddress": "209.20.108.61",
      "SYS_Switch#mac": "ed-eb-3a-5b-78-8c",
      "SYS_Switch#manufacturer": "Huawei",
      "SYS_Switch#mgmtIpv6": "",
      "SYS_Switch#remark": "Upload device From IES",
      "SYS_Switch#adminState": "Up",
      "SYS_Switch#confirmStatus": "未确认",
      "SYS_Switch#class_Name": "SYS_Switch",
      "SYS_Switch#id": "3392152875249867",
      "SYS_Switch#sn": "2239531"
    },
    {
      "SYS_Switch#productName": "NE10TE",
      "SYS_Switch#operState": "Up",
      "SYS_Switch#name": {
        "path": null,
        "ci": "SYS_Switch",
        "id": "3628564614623918",
        "value": "IES.Node9663"
      },
      "SYS_Switch#lastMonitorTime": "2016-10-21 17:46:27",
      "SYS_Switch#ipAddress": "206.26.9.136",
      "SYS_Switch#mac": "a9-32-53-fd-78-6b",
      "SYS_Switch#manufacturer": "Huawei",
      "SYS_Switch#mgmtIpv6": "",
      "SYS_Switch#remark": "Upload device From IES",
      "SYS_Switch#adminState": "Up",
      "SYS_Switch#confirmStatus": "未确认",
      "SYS_Switch#class_Name": "SYS_Switch",
      "SYS_Switch#id": "3628564614623918",
      "SYS_Switch#sn": "4255129"
    }
  ]
}

复制代码
(注： 这个对象的key值，是方法+路径，一定要注意前面的空格，不然会报错)

第三步：结合webpack的配置

复制代码

复制代码
在webpack.config.js中加入红色的部分(before部分)，发送请求的时候就可以很好的看到后台返回的数据

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实现了前端的数据请求和数据返回，简单配置，不需要再去修改其他的配置

还可以使用代理，直接调用后台的接口

proxy: [
            {
                context: proxyList,
                target: `http://127.0.0.1:${proxyInfo.port}/localproxy`,
                changeOrigin: true,
            },