前端模拟（mock）接口数据（koa）

在前后端分离开发项目时，经常会有前后端进度不一致，可能前端界面开发已经完成，就等接口了，如果等接口出来再联调的话时间可能会来不及。

这个时候，前端就可以根据制定好的接口规范和接口文档来mock接口数据，这样等后端接口开发完成之后也不至于太匆忙。

Koa 是一个由 Express 幕后的原班人马打造的 web 框架。这里用它来mock数据、

1. 安装koa

1. npm install koa koa-router koa-body --save-dev // 只在开发的时候用所以是--save-dev

2. 在项目目录下新建mock文件夹，文件夹下新建server.js

 const  Koa  =  require('koa');
  const router =  require('koa-router')();
 const koaBody =  require('koa-body')();
 const app =  new Koa();

  // log request URL:
 app.use(async (ctx,  next)  => {
  console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
 await next();
  });

  router.get('/', async (ctx,  next)  => {
  ctx.response.body = {
  a:1,
  b:'123'
  }
 });

  router.get('/api/employees', async (ctx,  next)  => {
  ctx.response.body = {
  status:true,
  data:[
 {id:'N001',name:'张珊',phonenumber:'13912341000',birth:'1998-01-08'},
  {id:'N002',name:'李珊',phonenumber:'13912342000',birth:'1998-01-08'},
  {id:'N003',name:'旺珊',phonenumber:'13912343000',birth:'1998-01-08'},
 ],
  msg:'获取数据成功'
  }
  });

  router.post('/api/login',koaBody, async(ctx,next)=>{
 var  
  username = ctx.request.body.username ||  '',
  password = ctx.request.body.password ||  '';
  console.log(`signin with username: ${username}, password: ${password}`);
  if  (username ===  'admin'  && password ===  '123456')  {
  ctx.response.body = {
 status:true,
  data:null,
  mag:'登录成功'
  }
  } else {
  ctx.response.body = {
  status:false,
  data:null,
  mag:'用户名或密码错误'
  }
  }
  })

  // add router middleware:
  app.use(router.routes());

  app.listen(3000);
  console.log('app started at port 3000...');  

3. 运行--进到mock目录下 node server.js 或在package.json中配置 mock项然后在项目目录运行npm run mock

1.  "scripts":  {
2.  "start":  "set NODE_ENV=dev&&webpack-dev-server --progress --mode=development --colors",
3.  "build":  "rd/s/q build && set NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors --mode=production",
4.  "mock":  "node ./mock/server.js"
5.  },

打开http://localhost:3000，可以看到get接口输出的数据