在前後端分離開發專案時，經常會有前後端進度不一致，可能前端介面開發已經完成，就等介面了，如果等接口出來再聯調的話時間可能會來不及。

這個時候，前端就可以根據制定好的介面規範和介面文件來mock介面資料，這樣等後端介面開發完成之後也不至於太匆忙。

Koa 是一個由 Express 幕後的原班人馬打造的 web 框架。這裡用它來mock資料、

1. 安裝koa

npm install koa koa-router --save-dev   // 只在開發的時候用所以是--save-dev

2. 在專案目錄下新建mock資料夾，資料夾下新建server.js

const Koa = require('koa');
const router 
 
= require('koa-router')();
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('/login', 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 = `<h1>Welcome, ${name}!</h1>`;
    } else {
        ctx.response.body = `<h1>Login failed!</h1>
        <p><a href="/">Try again</a></p>`;
    }
})

// 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介面輸出的資料