Vue-cli3.0 + axios + mockjs 實戰入門初體驗

實戰項目開發中，我們經常採用前後端分離的開發模式，那麼在沒有後端接口時，我們是否可以獨立於後端進行開發呢？答案是肯定的。mock便可以給我們提供這樣的體驗，模擬了各種開發場景，提供了豐富的數據類型，支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色，讓你如行雲流水般舒適的擺脫後端進行開發。用法也是相當的簡單，下面我們就在vue框架中體驗一把mock的用法吧，飛一般的感覺，如夢初醒～

1. 下載node安裝包並安裝：點擊下載
2. 安裝vue腳手架：

npm install -g @vue/cli

   3.使用vue-cli腳手架創建項目

vue ui

4.安裝依賴：mockjs

5.在項目根目錄中找到src目錄，並在該目錄下創建mock文件夾，同時在mock文件夾中創建mock.js文件，結構如圖：

6.打開mock.js文件，寫入如下代碼並保存：

// 引入mockjs
import Mock from 'mockjs'
// 使用mockjs模擬數據
Mock.mock('/api/data', (req, res) => {
  return {
    data: [
      {
        id: 1,
        username: 'aaa',
        password: 'aaa'
      },
      {
        id: 2,
        username: 'bbb',
        password: 'bbb'
      },
      {
        id: 3,
        username: 'ccc',
        password: 'ccc'
      }
    ]
  }
})

7.打開main.js引入mock.js文件，代碼如下：

require('./mock/mock')

8.安裝axios依賴

9.打開main.js文件並引入axios，添加代碼如下：

import axios from 'axios'
Vue.prototype.$axios = axios

10.打開src/components中的HelloWord.vue組件，寫入代碼如下：

<template>
  <div>
    <ul>
      <li v-for="(item,key) in data" :key="key">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: []
    }
  },
  mounted: function() {
    this.$axios.get("/api/data").then(res => {
      this.data = res.data
      console.log(this.data)
    })
  }
}
</script>

11.通過腳手架啓動項目，便可看到如下效果：

import axios from 'axios'

使用Vue-cli3.0 + axios+mockjs模擬後端請求就是這麼簡單，是不是很有成就感呢？Mockjs，so easy～Vue.prototype.$axios = axios

import axios from 'axios'

Vue.prototype.$axios = axios

import axios from 'axios'

Vue.prototype.$axios = axios