Skip to content

Latest commit

 

History

History
248 lines (181 loc) · 5.96 KB

README.md

File metadata and controls

248 lines (181 loc) · 5.96 KB
Raw

Mock Server

build npm node version code style: prettier

一个用于解决前后端分离并行开发时前端依赖接口数据问题的小工具, 通过读取本地文件配置生成 mock 数据并启动 node 服务器. 然后只需把客户端请求转发到该服务器即可

安装

mock-server-local 运行环境需 node v8.x 及以上版本支持

全局安装

npm install -g mock-server-local

或作为项目开发依赖安装

npm install mock-server-local --save-dev

使用

Usage: mock [options]

Mock your apis with a node server

Options:
  -v, --version      output the version number

  -p, --port [port]  port server should listen on, defalut 8888, +1 when port is used

  -d, --dir [dir]    dir path of mock data, default "."

  -h, --help         output usage information

注意: 当指定端口号时(-p/--port), 如果指定的端口已被占用, 会直接返回启动失败, 只有使用默认端口号启动, 才会进行端口可用性检查, 并动态确定可用端口

启动 mock server

新建文件夹用于存放 mock 数据配置. 假设需要 mock 的接口 url 为api.target.com/api/login, 且该接口需要模拟三种行为.

  • api.target.com/api/login
    1. 登录成功, 返回用户信息及登录态
    2. 登录失败, 返回错误原因
    3. 耗时过长, 导致前端请求超时

那么 mock 文件配置目录结构应该如下如下所示

|- mock
  |- api.target.com
    |- api
      |- login
        |- 登录成功
          |- data.js # data文件定义响应的数据
        |- 登录失败
          |- data.js
        |- 耗时过长导致前端超时
          |- data.js
          |- http.js # http文件控制响应行为, 如定义http header, 请求耗时等

配置好 mock 数据后启动 mock server

mock -p 8888 -d ./mock # ./mock 为存放mock数据的目录

you can access mock server:
http://127.0.0.1:8888
http://xx.xxx.x.xxx:8888 # 本机局域网ip

you can access mock server view:
http://127.0.0.1:8888/view
http://xx.xxx.x.xxx:8888/view # 本机局域网ip

然后访问 mock 服务前端控制面板http://127.0.0.1:8888/view/mocks, 勾选希望响应的数据

//mock/api.target.com/api/login/登录成功/data.js
module.exports = {
  code: '0',
  msg: 'ok',
  data: {
    username: 'ahui'
  }
};

Mock Server前端控制页面

可以直接请求访问http://127.0.0.1:8888/$mock-api?api=api.target.com/api/login验证 mock 数据是否正确配置

验证mock serve配置

项目设置

启动 mock 服务器后, 我们需要把业务域名的请求都转发到启动的 mock server

react(create-react-app)

更多配置详情可翻阅官方文档create-react-app#docs

// src/setupProxy.js
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  const options = {
    target: 'http://127.0.0.1:8888', // mock服务器
    headers: {
      host: 'api.target.com' // 业务域名
    }
  };
  app.use(proxy('/api', options)); // api.target.com -> 127.0.0.1:8888
};

vue-cli 3.x

// vue.config.js
// ...
devServer: {
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:8888',
      headers: {
        host: 'api.target.com'
      },
      onProxyReq: function(proxyReq, req, res) {
        proxyReq.setHeader('host', 'api.target.com');
      }
    }
  }
}
// ...

vue webpack 模板(vue-cli 2.x)

// config/index.js
//...
proxyTable: {
  '/api': {
    target: 'http://127.0.0.1:8888',
    headers: {
      host: 'api.target.com'
    }
  }
}
//...

webpack

webpack.devServer的代理功能使用的是http-proxy-middleware

其配置项和上面三者没有区别, 因为上面三者使用的也是webpack.devServer

代理工具

如果你的项目不依赖 webpack(或其他类似打包工具), 也没有办法使用http-proxy-middleware进行代理

那可以使用代理工具进行转发, 如whistle

api.target.com/api 127.0.0.1:8888 # api.target.com/api/*的请求都会被转发到mock服务器

更多文档说明

推荐用法

建议将 mock-server-local 作为开发依赖安装到具体项目中去

cd xxx_project

npm install mock-server-local --save-dev

在项目目录下新建 mock 目录用于存放 mock 数据配置

|- xxx_proj
  |- mock
  |- package.json

然后使用 npm script 来启动 mock 服务器

// package.json
{
  //...
  "scripts": {
    "mock": "mock -p 8888 -d ./mock"
  },
  //...
}
npm run mock

以项目为维度存放 mock 数据, 项目成员共同维护

而且项目的新加入成员也可以通过 mock 数据更好的了解熟悉具体的业务逻辑/异常流程

开发

git clone https://github.com/funkyLover/mock-server.git

cd mock-server && npm install

cd fe && npm install

npm run dev # cwd: /path/to/mock-server

Roadmap

  • 支持 pac
  • socket 支持
  • 以后台进程运行
  • 请求记录与展示
  • ...