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

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

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

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

1. 安装koa

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

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

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