vue-element-admin功能解读系列/mock-js

GitHub上一个比较有名的项目,里面有些功能实现值得学习。
整个实现(mock-js,dev-server,chokidar)还需要node\express相关知识,总体实现就是使用 dev-server,将mock出的数据返回。

• 首先，从index看起

  module.exports = {
    mocks,
    mockXHR
  }

  导出了所有的mock路由，以及一个方法，该方法用来线上部署时改写xhr请求
• 接着是比较重要的mock-server，照样看他导出了什么

  app.use(bodyParser.json())
    app.use(bodyParser.urlencoded({
      extended: true
    }))

  一开始看这部分还是挺懵逼的，结合vue.config.js之后才明白这点。参考官方文档可知道 devserver before接收一个函数function，携带参数app，实际上就和写express一样了。现在，需要的就是注册路由了，用到了另一个函数

    function registerRoutes(app) {
    let mockLastIndex
    const { mocks } = require('./index.js')
    const mocksForServer = mocks.map(route => {
      return responseFake(route.url, route.type, route.response)
    })
    for (const mock of mocksForServer) {
      app[mock.type](mock.url, mock.response) // 相当于app.get('url',{})
      mockLastIndex = app._router.stack.length
    }
    const mockRoutesLength = Object.keys(mocksForServer).length
    return {
      mockRoutesLength: mockRoutesLength,
      mockStartIndex: mockLastIndex - mockRoutesLength
    }
  }

  这里用到的长度,一开始想着难道mock路由数和_router下的不一样不成,后面看了这个
  链接StackOverflow
  确实不一样…
  结合上面这两点,基本就能理解代码逻辑