前端模擬（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接口輸出的數據