使用 koa2 快速搭建 mock server

在前后端分离式开发中，经常遇到需要自己 mock 数据测试接口的情况，下面是一种使用 koa2 快速搭建 mock 服务的实现方式。

项目搭建

1. 使用 koa-generator 初始化目录结构

首先全局安装 koa-generator

npm install -g koa-generator

在合适位置上初始化目录结构

koa2 mock-server

生成的目录结构如下：

进入该目录并安装依赖

cd mock-server && npm install

2. 运行服务并启用热更新

运行服务

npm run dev

dev 指令使用 nodemon 启动服务，nodemon 是 node 的自动重启工具，避免了修改代码后需要手动重启的麻烦。

接下来访问 localhost:3000 就能看到已经启动好的服务了。

koa-generator 生成的路由中默认提供了 index.js 与 users.js 两个路由文件，分别对应了：

const router = require('koa-router')()

// localhost:3000/
router.get('/', async (ctx, next) => {
  await ctx.render('index', {
    title: 'Hello Koa 2!'
  })
})

// localhost:3000/string
router.get('/string', async (ctx, next) => {
  ctx.body = 'koa2 string'
})

// localhost:3000/json
router.get('/json', async (ctx, next) => {
  ctx.body = {
    title: 'koa2 json'
  }
})

module.exports = router

以及

const router = require('koa-router')()

// 该文件下的路由会以 users 作为前缀
router.prefix('/users')

// localhost:3000/users/
router.get('/', function (ctx, next) {
  ctx.body = 'this is a users response!'
})

// localhost:3000/users/bar
router.get('/bar', function (ctx, next) {
  ctx.body = 'this is a users/bar response'
})

module.exports = router

ctx.body 中则提供了返回的结果

定义自己的 mock 服务

1. 自定义响应头实现 CORS 跨域

在平时的 Mock 中，经常会遇到跨域问题，通过设置 Access-Control-* 可以很好避免跨域问题，这里以笔者曾经遇到过的情景为例。

// app.js
// 定义 handler middleware
const handler = async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", "*");  // 规定允许访问该资源的外域 URI
  ctx.set("Access-Control-Allow-Methods", "GET");  // 请求方式
  ctx.set("Access-Control-Max-Age", "3600");  // 设定预检请求结果的缓存时间
  ctx.set("Access-Control-Allow-Headers", "apk");  //  规定 CORS 请求时会额外发送的头信息字段
  ctx.set("Access-Control-Allow-Credentials", "true");  // 请求可以带 Cookie 等
  
  // 针对预检请求
  if( ctx.request.method == "OPTIONS" ) {
    ctx.response.stutas = "200"
  }
  
  try {
    await next();
    console.log("处理通过");
  } catch (e) {
    console.log("处理错误");
    ctx.response.status = e.statusCode || err.status || 500;
    ctx.response.body = {
      message: e.message;
    }
  }
}

然后在处理路由前加上这层 handler middleware 就可以了

// app.js
app.use(handler);

// routes
app.use(index.routes(), index.allowMethods());
app.use(users.routes(), users.allowMethods());

2. 响应 get、post、put、delete 方式请求

在 koa-router 中已经封装了相应请求，使用方法如下

// users.js

const router = require('koa-router');
router.prefix('/users');

// get
router.get('/bar', function(ctx, next) {
  ctx.body = 'get method';
});

// post
router.post('/bar', function(ctx, next) {
  ctx.body = 'post method';
});

// put
router.put('/bar', function(ctx, next) {
  ctx.body = 'put method';
});

// delete
router.delete('/bar', function(ctx, next) {
  ctx.body = 'delete method';
});

使用不同的方式访问 http://localhost:3000/users/bar 就可以得到相应的结果（注：3000 端口是默认启动的端口，你可以在 你的项目/bin/www 下更改 port）