mock.js 配合vue+axios

準備工做

1. 泡茶
2. 打開電腦。
3. 建立一個項目。
4. 安裝mock.js+axios

開始工做

這是個人文件目錄 基本上都是在vue項目都長這樣子，我隨手下載了一個vue+Ivew的項目。 2. src文件夾內建立一個lib文件夾 3. lib文件夾下建立mock.js

4. 在mock.js 文件夾下

import Mock from 'mockjs';
 export default Mock.mock('http://g.cn','post',{
     'name': '@name',

    'age|1-100': 100,

    'color': '@color'
 });
複製代碼

5. 全局引用axios
   • 在main.js文件上引用

import axios from 'axios'
Vue.prototype.$http = axios;
複製代碼

這樣一引用你就能夠全局使用this.axios方法來調用接口。

6. 在你須要調用接口的地方就能夠使用了 使用方法以下：

axiosTest(){
 this.$http.post('http://g.cn').then( 
        (successData) => {console.log(successData.data);},

          (fileData) => {console.log(fileData);})
          },
複製代碼

7. 打開谷歌瀏覽器你就能夠看到返回過來的數據

{name: "Jennifer Young", age: 69, color: "#d0f279"}
複製代碼

8. 看到這裏基本上已經初步能夠使用axios+mock.js進行開發。
9. 可是仍是有一個要思考的問題：

• axios調用接口的時候會進行封裝處理。可是這種寫法只能出現一組數據。若是更多的接口難道要寫更多的文件，有沒有更簡便的方法去處理。
• 我解決了~！