在前端开发中mock后端数据

​ 在使用RestfulAPI方式进行项目开发的初期，通常由后端同学事先设计出API接口文档。而在开发阶段，往往前后端的开发是并行的，意味着在前端开发过程中，后端并不能提供相应API接口的server。在这种情况下，我们可以自行mock一个server来辅助我们的前端开发。

​ 一个完美的本地模拟后端接口应该满足以下几个方面（暂时只想到这些）：

• 前端代码无需修改，即本地模拟和生产环境使用同样的前端代码
• 本地模拟可以拿生产环境的数据格式来做测试
• 各种http状态码都能够模拟到（比如200，400，401等等）

json-server

​ json-server的官方是这样介绍项目的：

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

db.json

​ 假设想要请求http://localhost:3000/allcompanies的资源，可以在db.json中编写前端希望接收到的响应，如下：

{
    "allcompanies": {
    "success": true,
    "message": "",
    "retrievedDateTime": 1507621365208,
    "records": [
      {
        "companyID": "5774d810e0c9d542779f453f",
        "companyName": "Honeywell"
      },
      {
        "companyID": "5775d1702853773840f2cccf",
        "companyName": "Global Airline"
      },
      {
        "companyID": "59dc79f54f33cfa43ae53c3c",
        "companyName": "test"
      }
    ]
  },
}

​ 启动json-server mock/db.json --port 2999，即可在2999端口上请求到如上的json信息。

routes.json

​ 考虑复杂一点的情况，假设我们请求的资源使用http://localhost:3000/management/query/allcompanies，但在db.json中是不支持直接写：

{
 ... 
  "management/query/allcompanies": {
    ... // 具体请求信息省略
  },
...
}

​ 这种情况下可以编写一个配置文件routes.json来指定一些路由规则，匹配规则有多种，详细信息参考add-custom-routes

{
  "/management/query/*": "/$1"
}

启动json-server

​ 执行json-server mock/db.json --port 2999在2999端口启动json-server，当然最佳的方式将该命令写在package.json中，将命令进行统一的管理：

{
  ...
  "scripts": {
    "mock": "json-server mock/db.json --port 2999",
    "test": "set NODE_ENV=test && mocha --compilers js:babel-core/register",
    "dev": "webpack-dev-server --inline --progress --colors --config ./webpack.dev.config.js",
    "build-win": "set NODE_ENV=production && webpack --profile --progress --color --watch --config ./webpack.product.config.js",
    "build-linux": "export NODE_ENV=production && webpack --profile --progress --color --watch --config ./webpack.product.config.js"
  },
  ...
}

​ 这样在开发阶段，通过执行npm run dev启动webpack的开发模式，执行npm run mock启动json-server来提供mock数据。

---

webpack的相应配置

​ 在开发阶段，假设我们在webpack的配置文件webpack.dev.config.js中设置了webpack-dev-server的启动端口是3000，那么自然而然的，前端所有的ajax请求都会从3000端口去请求数据。而json-server跑在2999端口上，如何将两个server连接起来？

​ webpack-dev-server提供了强大的代理功能，我们可以手动在webpack的配置文件中指定相应的api请求代理到2999端口上，配置方式如下：

 devServer: {
    ...
    proxy: {
      "/management/query/allcompanies": {
        target: 'http://127.0.0.1:2999',
      },
      "/management/query/companyinfo": {
        target: 'http://127.0.0.1:2999',
      },
      "/resource/getcompanylogo": {
        target: 'http://127.0.0.1:2999',
      },
     ...
    }
    ...
  }