前言
上一篇我们遇到'少年，是不是忘了npm run mock?'的警告，这一篇我们就来解决这个问题。
开发
一、安装包
安装koa和一系列的包（我们用的是koa v2）：
koakoa-bodyparserkoa-routerboomnodemonmockjs
解释说明一下（知道的同学可以忽略）:
| 名称 | 作用 |
|---|---|
| koa | 我们都知道Node.js有HTTP模块，来处理HTTP请求，koa基于Node做了很多方便的接口让我们更顺畅地处理HTTP，比如，接收、解析、响应。 |
| koa-router | 方便的路由方式获取get/post、以及参数 |
| koa-bodyparser | koa插件之一，方便解析get/post的参数 |
| boom | 友好的HTTP错误对象 |
| nodemon | 为了在启动koa服务以后，修改了koa相关的node代码会自动重载更新，无需手动关闭再重启 |
| mockjs | 模拟数据用 |
二、创建目录和文件
结构：
mock├── home // 和views文件夹对应│ └── hello.js // home页面需要的hello模拟数据├── public // 公共的接口模拟数据└── server.js // node代码
先上一盘server.js代码：
const Koa = require('koa')// 使用routerconst Router = require('koa-router')const Boom = require('boom')const bodyParser = require('koa-bodyparser')const app = new Koa()const router = new Router()// https://github.com/alexmingoia/koa-routerapp.use(router.routes())app.use(router.allowedMethods({ throw: true, notImplemented: () => new Boom.notImplemented(), methodNotAllowed: () => new Boom.methodNotAllowed()}))// 使用bodyparser 解析get,post的参数app.use(bodyParser())// 模拟数据返回/* 首页 */// 获取hello数据const helloData = require('./home/hello.js')router.get('/api/home/hello', async(ctx, next) => { ctx.body = helloData await next()})// log errorapp.on('error', (err, ctx) => { console.log('server error', err, ctx)})// 注意：这里的端口要和webpack里devServer的端口对应app.listen(7777) 再来一盘hello.js代码：
// 引入mockjs来模拟数据// https://github.com/nuysoft/Mock/wiki/Getting-Startedconst Mock = require('mockjs')const data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }]})const img = Mock.Random.image('200x100')module.exports = { msg: 'mock hello api works', data: data, imgUrl: img} 在package.json里scripts里加上：
"mock": "nodemon ./mock/server.js" 这样的话，我们只需要npm run mock就启动了本地的模拟数据接口功能了。
回到之前我们下的完整项目，先启动mock，然后npm run dev，我们就可以发现报错不见啦。
总结
通过koa v2实现前后端分离，并且使用mockjs来更方便的模拟数据。
下一篇，我们创建发布环境下的webpack配置文件，并且看看怎么优化产出的代码的 -