在mockjs官網上沒學到的

mock會攔截下指定的請求，並返回由mock計算出的數據。
mock攔截下的請求不會在network裏出現。
mock方便前端脫離後端進行開發。
先來一個dome說明怎麼使用。mock怎麼與項目結合使用。

mockjs demo

1. npm i mockjs // 安裝mockjs
2. 創建src/mock.js // 用來生成mock數據。
3. 在main.js引入src/mock.js require('./mock.js') // 全項目都可使用mock接口。
4. 編輯一個vue文件。first.vue // 用來使用mock.js的數據。
5. 創建api.js，建議放在'src/lib/api.js'。 // 用來封裝axios。這樣做對於項目規範。非要每個請求都實例出axios也行。
6. 在first.vue文件引入api.js。

做了以上5步，就可以在first.vue文件時使用api.js調用mock了。

下面是具體代碼。

    // mock.js
    import Mock from 'mockjs'
    const Random = Mock.Random
    let name = [] // 模板
    for (let i = 0; i < 3; i++) { // 在模板中生成多條數據
      name.push({
        name: Random.string(3, 8),
        age: Mock.mock({
          'number|1-100': 100
        })
      })
    }
    let age = {
      ages: Mock.mock({
        'number|1-100': 100
      })
    }
    Mock.setup({
      timeout: '200' // 2s-2s後返回數據
    })
    Mock.mock('/data/name', 'post', name)
    Mock.mock('/data/age', 'get', age)

    // main.js
    require('./mock.js')

    // first.vue
    <template>
      <div class="basic">
        basic
      </div>
    </template>
    <script>
    export default {
      props: {},
      data () {
        return {
        }
      },
      computed: {
      },
      components: {
      },
      methods: {},
      created () {},
      mounted () {}
    }
    </script>
    <style lang="sass" scoped>
    .basic
    </style>

    // api.js
    import axios from 'axios'
    // 請求攔截
    axios.interceptors.request.use(res => {
      return res
    }, error => {
      return Promise.reject(error)
    })
    // 響應攔截
    axios.interceptors.response.use(res => {
      console.log('res', res)
      return res
    }, error => {
      return Promise.reject(error)
    })
    // 封裝post
    const fetch = (url, params) => {
      return new Promise((resolve, reject) => {
        axios({url: url, params: params, method: 'post'}).then(res => {
          resolve(res.data)
        }).catch(err => {
          reject(err)
        })
      })
    }
    // 輸出
    export default {
      mockData (url, params) {
        return fetch(url, params)
      },
      mockDataAge (url, params) {
        return new Promise((resolve, reject) => {
          axios({url: url, params: params, method: 'get'}).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      }
    }

    // first.vue
    // 引入
    import api from '../../lib/api.js'
    // 使用
    getData () {
      api.mockData('/data/name').then(res => {
        this.dataName = res
      })
    },
    getDataAge () {
      api.mockDataAge('/data/age').then(res => {
        this.dataAge = res
      })
    }

數據模板 數據佔位符

數據模板在官網都沒有定義。我理解是數據模板就是Mock.mock()裏使用的對象。
數據佔位符是數據模板中用來生成指定類型數據的佔位符。使用@佔位符(params[,params])表示。
Mock.Random是一個工具類，用來生成各種隨機數據。
數據模板中@佔位符(params[,params]) 是佔位符，用來生成相應數據。有人把佔位符理解爲mock內置模板。畢竟Mock.mock()使用它們作爲參數。

後記

網上有好多關於mock的文章。都沒說清楚模板是什麼，做什麼的，怎麼用。佔位符是什麼，做什麼的，怎麼用。
官網上也不寫demo.看了好幾遍就看到api.能不能從大到小寫文檔？
爲什麼進入官網學教程又進入git裏的wiki?
優點是官網的api寫的好。可以在console裏運行。