webpack+vue2+iview 架构模拟mock数据

在前端开发中，为了能够缩短开发时间，需要前后端的分离，只要双方定义好接口，就可以同步开发，在这里介绍一下在webpack中使用mock数据mock-api的使用。

1.安装mock-api

指令：npm install -g mock-api

使用方式：比如建立一个目录test，在test里建立一个json文件，json文件内容为一个数组，例子：

[
    {
        "method": "post",
        "url": "/api/appTangram/card/query",
        "response": {
            "returnCode": "000000",
            "returnMsg": "success",
            "data": {
                "list_card": [
                    {
                        "cardId": "2017510",
                        "id": "00001",
                        "cardStl":"https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
                    },
                    {
                        "cardId": "2017511",
                        "id": "00002",
                        "cardStl":"https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
                    }

                ]
            }
        }
    }
]

示例代码写了一个配置对象，意为post请求/api/appTangram/card/query时，响应内容则是response对象的值。

2.写webpack中的配置文件

脚手架生成demo之后，基本可以进行开发，但对于接口部分的对应，需要改一下配置内容，由于vue-cli本地开发模式启动了一个服务，而mock-api又启动一个服务，双方接口交互势必属于跨域行为，vue-cli对这方面也做了支持，即设置 changeOrigin: true。在config目录下index.js, 本地开发的相关配置dev如下：

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/appAdmin': {
            target: 'http://127.0.0.1:10086',
            changeOrigin: true,
            pathRewrite: {
              '^/appAdmin': '/appAdmin'
            }
          }
    }
}

3.启动mock-api数据服务

指令：mock-api serve test
test就是新建假数据的目录

启动时默认端口为10086，更多命令配置可以看github

4.页面实现

微信截图_20170516202104.png

5.注意事项

1.webpack 在每次修改配置文件时，重启服务：npm run Dev
2.当与后台对接连调时，只要修改config目录下index.js中target的路径即可
3.mock-api需要启动两个服务。

在于后端连调时配置文件截图如下：

微信截图_20170516203230.png

本次调用的接口为：/appAdmin/api/appTangram/card/query