在先后端分离开发项目时,常常会有先后端进度不一致,可能前端界面开发已经完成,就等接口了,若是等接口出来再联调的话时间可能会来不及。前端
这个时候,前端就能够根据制定好的接口规范和接口文档来mock接口数据,这样等后端接口开发完成以后也不至于太匆忙。node
Koa 是一个由 Express 幕后的原班人马打造的 web 框架。这里用它来mock数据、webpack
1. 安装koaweb
npm install koa koa-router koa-body --save-dev // 只在开发的时候用因此是--save-dev
2. 在项目目录下新建mock文件夹,文件夹下新建server.jsnpm
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 mockjson
"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接口输出的数据后端