mockjs+axios+vue 入门级demo

今天在作vue项目的mock功能，刚刚查了下网络上的文档，但令我感到之外的是，不管是官方文档仍是网上的小例子，很难找到一个能从头至尾说明白mock的最基本用法的文章，大部分都是对接口的说明。拜托，对于一个刚刚接触mock的人来讲，最须要的是一个可以运行的小例子，从头至尾给出一个简单的说明，这样能让开发人员最开始对mock的规范有一个很全面的理解。

由于最近作前端项目的缘故，查了不少前端技术的官方文档，很遗憾，大部分文档在我看来写的都是一坨屎。可以像国外的开源文档（好比spring boot，hibernate等）写的清晰有条理的不多不多（说不多都是客气了，基本上没有）。

先说一下我对mockjs的理解。
定义上的东西不用多说，通俗解释，mockjs其实是假数据+访问假数据的接口的集合，再说通俗点，就像一个水池和输传输水的管道，想要从这个水池抽水，首先管道要插进水池里，其次是水池里要有水。
对于具体的项目来讲，axios提供了管道，并将管道插进mock水池，mock.js就是实际的mock水池。
不管项目写的有多复杂，本质上这种概念是不会变的。
废话很少说，直接看demo

首先须要安装axios和mockjs的依赖。
命令如如下所示（顺序不重要）

npm i  mockjs --save
npm install axios

安装成功后，在项目根路径下的package.json的dependencies中会有这两个依赖的版本说明：

"axios": "^0.19.0",
"mockjs": "^1.0.1-beta3",

下面就是核心的code了：

首先,声明vue文件中的template文件。 我在这里用的是ElementUI自带的table组件。

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
</template>

注意其中的:data="tableData"这一行，这里指定了table中使用的数据对象。

第二步,写假数据
在项目src目录下新建mock.js文件，在其中加入如下内容： （此处注意一个知识点，大型项目里会建立mock文件夹，并将index.js及各个功能放在其中，本质上这是同样的，mock.js=mock/index.js）

// 引入mockjs
const Mock = require('mockjs')
// 使用mockjs模拟数据
Mock.mock('/route1', (req, res) => { // 当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
  let list = [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  }, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }]

  return {
    tableData: list
  }
})

第三步，将数据声明放到vue文件中（第一步涉及的vue文件）

<script>
import axios from 'axios'

export default {
  data () {
    return {
      tableData: []
    }
  },
  mounted: function () {
    axios.get('/route1').then(res => { // get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致
      this.tableData = res.data.tableData
      console.log(res.data) // 在console中看到数据
    }).catch(res => {
      alert('wrong')
    })
  },
  methods: {
  }
}
</script>

这样， 一个最简单的mock+axios的vue项目便作好了