mock 前后端联调数据，提升开发效率~

以vue + koa2 为例：

创建vue项目

首选创建vue项目，我们选择vue-cli脚手架创建vue项目：

1. 安装vue-cli
   cnpm install @vue/cli -g
2. 查看当前vue-cli版本
   vue --version
3. 初始化项目
   vue init webpack 项目名称
   4.安装依赖启动项目
   cd 项目名称
   cnpm install
   npm run dev

构建koa2 服务

之后在项目文件夹内部创建koa2服务：

1. 安装 koa2项目构建插件
   cnpm install koa2-generator -g
2. 初始化项目
   koa2 mock
3. 安装依赖启动服务
   cd mock
   cnpm install
   npm start

配置参数

前端服务，后端都创建完成，更改下配置文件：
后端服务默认为3000端口
前端服务默认为8080端口

我们都知道vue脚手架搭建的项目，本地运行时，会起一个webpack-dev-server本地服务，我们通过代理的方式，本地服务请求代理到我们自己的服务上面，从而解决跨域问题，因此将config/inde.js 或者 vue.config.js(新版本vue-cli构建的项目)文件中的代理地址设置为： http://localhost:3000

这个时候打开页面发起请求发现我们请求到了koa2搭建的服务上面

在开发时往往会遇到，后端接口不能及时提供这种情况，我们按照事先定义的接口模拟接口返回结果，但是会出现历史已经实现的接口需要访问后端服务，新增接口需要访问koa2创建的服务获取虚拟结果的情况，这时候怎么办呢？

这时候我们koa2上面创建一个代理，如果没有命中mock的接口返结果时，代理到后端服务其上面，这时就完美解决了

app.js

// development下开启Mock
const mockRoutes = require('./routes/index.js')
console.log(333, mockRoutes)
app.use(mockRoutes.routes(), mockRoutes.allowedMethods())

app.use(async (ctx, next) => {
  if(ctx.url.startsWith('/api')) {
      ctx.respond = false
      return proxy({
          target: 'http://192.168.xxx.xx:8990', // 服务器地址
          changeOrigin: true,
          secure: false,
      })(ctx.req, ctx.res, next)
  }
  return next()
})

routes/index.js

const router = require('koa-router')()
const Mock = require('mockjs')
const Urls = require('./project')
const config = { ...Urls }

for (const url in config) {
  if (!config[url].isMock) { continue }
  router.get(url, async (ctx, next) => {
    ctx.body = await Mock.mock(config[url])
  })
}

module.exports = router

routes/project.js

const config = {
  '/api/test': {
    isMock: true, // 是否开启mock的开关
    code: 1000,
    message: 'this is test',
    data: {
    	'list|10': [{
    		name: '@name',
    		cname: '@cname',
    		city: '@city'
    	}],
      page_count: 26
    }
  },

  '/api/test1': {
    isMock: true,
    code: '00',
    msg: ''
  }
}

module.exports = config