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項目便作好了