說明：

1. 如果只是在前端，axios常常需要結合mockjs使用，如果是前后端分離，就需要調用對應的接口，獲取參數，傳遞參數；
2. 由于此文章只涉及前端，所以我們需要結合mockjs使用；
3. 由于為了方便實現效果，在這篇文章里面使用的是一級菜單，對應的代碼是：【Vue開發實例（六）實現左側菜單導航 —>>> 動態實現一級菜單】中的代碼
   

---

一、Axios

Axios 是一個基于 promise 的 HTTP 庫，類似于我們常用的 ajax。
在開發過程中，特別是前后端分離的項目，比如前端用Axios、ajax請求后端數據，后端也許當前只給了接口文檔，還沒有數據的返回，導致前端無法進行測試、調試，現在可以使用mock.js攔截前端ajax請求，更加方便的構造你需要的數據，大大提高前端的開發效率。

1、安裝axios

npm install axios --save

在main.js全局引入axios

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

2、安裝mockjs

npm install mockjs --save-dev

在src下創建文件夾mock，并創建index.js文件，輸入以下測試內容：

//引入mockjs
import Mock from 'mockjs'//使用mockjs模擬數據
Mock.mock('/test', {"res": 0,"data":{"datatime": "@datetime",//隨機生成日期時間"weekday|1-7": 7,//隨機生成1-7的數字"name": "@cname",//隨機生成中文名字}
});

在main.js引入此mock.js就可以進行全局攔截axios和ajax的請求了。

import './mock/index.js';

二、數據請求

1、get請求

在之前的Main1頁面上編寫代碼
創建按鈕

 <el-button @click="getTest">get數據</el-button>

創建axios請求方法

<script>
export default {name: "Main1",methods: {getTest() {this.$axios.get("/test").then((res) => {console.log(res.data);});},},
};
</script>

this.$axios.get(“/test”)中this.$axios.get 表示使用get請求，“/test” 訪問路徑，剛好與之前mock.js定義的想吻合；
res 就是取得返回的數據集合，其中res.data就是我們定義好的返回數據。

瀏覽器中“右鍵-檢查”或“F12”

2、post請求

添加post請求按鈕

 <el-button @click="postTest">post測試1</el-button>

編寫js post代碼

postTest(){this.$axios.post("/post/test1",{id:1}).then(res=>{console.log(res.data)})
}

在mock/index.js其中第2個參數指定為 post，如果我們用get請求則會提示404，只能用post

Mock.mock('/post/test1', 'post', function (param) {console.log('傳入的參數為：', param.body)return {res: 1,msg: "success"}
});

效果展示

3、添加數據

按鈕代碼

<el-button @click="postAdd">add數據</el-button>

請求方法代碼

postAdd(){this.$axios.post("/post/add",{id:1,name:'哈哈'}).then(res=>{console.log(res.data)})
}

Mockjs數據

// 定義userList數組
let userList = [];
Mock.mock('/post/add', 'post', function (param) {let body = JSON.parse(param.body) // 獲取請求參數let id = parseInt(body.id)let flag = truefor (let item of userList) {if (item.id === id) flag = false // 判斷id是否已經存在}// 如果id不存在if (flag) {userList.push({name: body.name,id})return {userList,res: 0,msg: '添加成功'}} else {return {userList,res: 1,msg: '添加失敗'}}
});

效果展示

第一次發送請求，因為里面沒有id為1的數據，所以添加成功
第二次發送請求，因為id=1的數據已經添加成功了，所以失敗

重新換一個id就可以添加成功

4、修改

按鈕代碼

<el-button @click="postMod">mod數據</el-button>

請求代碼

postMod(){this.$axios.post("/post/mod",{name:'哈哈',id:3}).then(res=>{console.log(res.data)})
}

mockjs數據

Mock.mock('/post/mod', 'post', function (param) {let body = JSON.parse(param.body) // 獲取請求參數let id = parseInt(body.id)let flag = false, index = 0;for (let i in userList) {if (userList[i].id === id) {flag = true // 判斷id是否已經存在，存在返回trueindex = i//對應數組的下標}}// 如果id存在則修改if (flag) {userList[index] = bodyreturn {userList,res: 0,msg: '修改成功'}} else {return {userList,res: 1,msg: '修改失敗'}}
});

效果展示

因為第一次修改里面沒有數據，所以修改失敗

先點擊 添加add，再點擊 修改mod

5、刪除

按鈕代碼

<el-button @click="postDel">del數據</el-button>

請求代碼

postDel() {this.$axios.post("/post/del", { id: 1 }).then((res) => {console.log(res.data);});},

mockjs數據

Mock.mock('/post/del', 'post', function (param) {let body = JSON.parse(param.body) // 獲取請求參數let id = parseInt(body.id)let flag = false, index = 0;for (let i in userList) {if (userList[i].id === id) {flag = true // 判斷id是否已經存在，存在返回trueindex = i//對應數組的下標}}// 如果id存在則刪除if (flag) {userList.splice(index, 1);return {userList,res: 0,msg: '刪除成功'}} else {return {userList,res: 1,msg: '刪除失敗'}}
});

效果展示

先添加數據，再刪除數據

6、查詢

按鈕代碼

<el-button @click="postQuery">query無參數據</el-button><br /><br />
<el-button @click="postQuery2">query有參數據</el-button><br /><br />

請求代碼，分別是沒有參數的查詢全部，有id參數的根據id來查詢

（1）無參查詢

postQuery(){this.$axios.post("/post/query",{}).then(res=>{console.log(res.data)})
}

（2）有參查詢

postQuery2(){this.$axios.post("/post/query",{id:1}).then(res=>{console.log(res.data)})
}

mockjs數據

Mock.mock('/post/query', 'post', function (param) {let body = JSON.parse(param.body) // 獲取請求參數let id = parseInt(body.id)if (!id) {//如果id不存在，則直接返回全部return {userList,res: 0,msg: '查詢成功'}}//idfor (let item of userList) {if (item.id === id) {return {userList: [item],res: 0,msg: '查詢成功'}}}// 如果id不存在則返回失敗return {userList: [],res: 1,msg: '查詢失敗'}
});

效果展示

按照圖示步驟執行

1. 首先進行無參查詢，查詢全部，返回是空
2. 其次是添加一條數據
3. 接著帶參查詢id=1的數據