vue-element-admin源码解读——数据Mock

• vue-element-admin源码解读——项目组件布局及状态管理
• vue-element-admin源码解读——项目启动过程
• vue-element-admin源码解读——数据Mock

---

MOCK是指模拟服务器按照一定的规则或者设定的数据，对客户端的请求进行响应。换个说法就是可以不用搭建后台服务器，就可以实现前端对数据的请求的响应。在vue-element-admin框架中采用的是MockJS。

MockJS的原理是拦截了所有的请求并代理到本地，然后进行数据模拟，所以你会发现 network 中没有发出任何的请求。不过在vue-element-admin框架中是利用webpack-dev-serve来实现的,在你启动前端服务的同时，mock-server就会自动启动，而且这里还通过 chokidar 来观察 mock 文件夹内容的变化.在Vue.config.js中可以看到有如下配置:

devServer: {
   
    port: port,
    open: true,
    overlay: {
   
      warnings: false,
      errors: true
    },
    //通过这一行来实现在webpack-dev-serve启动之前启动mock-server服务的
    before: require('./mock/mock-server.js')
},

那么就来看看mock-server.js中是如何实现的:

const chokidar = require('chokidar')
const bodyParser = require('body-parser')
const chalk = require('chalk')
const path = require('path')
const Mock = require('mockjs')
//获取mock静态返回数据所在的目录
const mockDir = path.join(process.cwd(), 'mock')


module.exports = app => {
   
  require('@babel/register')

  //添加插件
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({
   
    extended: true
  })