mock 模拟后端接口 koa 前后分离

安装

koa 来做后端接口的模拟。因此要先安装 koa 极其相关的插件。执行npm install koa koa-body koa-router --save-dev
，注意这里使用--save-dev
，意思是我们只在开发过程中使用 koa ，项目发布之后 koa 就没用了。因为发布之后的项目，使用的就是后端工程师开发的线上的接口，而不是我们基于 koa 写的接口。

server.js示例

var app = require('koa')();
var router = require('koa-router')();
var koaBody = require('koa-body')();

router.get('/', function *(next) {
    this.body = 'hello koa';
})

router.get('/api', function *(next) {
    this.body = 'test data'
})


router.get('/api/1', function *(next) {
    this.body = 'test data 1'
})

router.get('/api/2', function *(next) {
    this.body = {
        a: 1,
        b: '123'
    }
})

router.post('/api/post', koaBody, function *(next) {
    console.log(this.request.body);
    this.body = JSON.stringify(this.request.body);
})

app.use(router.routes())
   .use(router.allowedMethods());

app.listen(3000,function() {
    console.log('start...')
})

server.js启动的接口是3000，当在请求是输入 8080端口的接口也能请求到，因为：webpack-dev-server 中 devServer 中的proxy

webpack.config.js

devServer: {
        //代理转发 '',http:localhost:8080端口中同样能请求到数据
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                secure: false
            }
        },
        colors: true,//终端中输出结果为彩色
        historyApiFallback: true,//不跳转，在开发单页面应用时非常有用，它依赖于html5 history api，如果设置为true，所有跳转将指向index.html
        inline: true,//实时刷新
        hot: true //使用热加载插件 HotModuleReplacementPlugin
    }