安装
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
}