一起學Vue：訪問API(axios)
目標
使用Vue+ElementUI+axios構建一個非常簡單CRUD應用程序，以便您更好地了解它的工作方式。
什麼是 axios？
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
安裝axios
我們使用 NPM 進行安裝
npm install axios
查詢
setTodos() {
const url = "//localhost:44399/api/todo?pageIndex=1&pageSize=100";
axios.get(url)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.Todos = response.data.Result;
}
});
},
新增
createTodo(item) {
const url = "//localhost:44399/api/todo";
axios.post(url, item)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.setTodos();
}
});
this.selectedIndex = -1;
this.selectedItem = {};
this.addDialogVisible = false;
},
更新
updateTodo(item) {
const url = `//localhost:44399/api/todo/${item.Id}`;
axios.put(url, item)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.setTodos();
}
});
this.selectedIndex = -1;
this.selectedItem = {};
this.editDialogVisible = false;
},
刪除
deleteTodo(index) {
const url = `//localhost:44399/api/todo/${this.Todos[index].Id}`;
axios.delete(url)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.setTodos();
}
});
this.selectedIndex = -1;
this.selectedItem = {};
},
完整代碼：
<template>
<div style="text-align: left">
<el-button type="text" @click="addTodo()">新增</el-button>
<el-table :data="Todos" style="width: 100%">
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column prop="Name" label="名稱"> </el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="editTodo(scope.$index)" type="text" size="small">編輯</el-button>
<el-button @click="deleteTodo(scope.$index)" type="text" size="small">刪除</el-button>
</template>
</el-table-column>
</el-table>
<TodoAddWithUI :dialogVisible="addDialogVisible" :selectedItem="selectedItem" @save="createTodo" @cancel="cancel"></TodoAddWithUI>
<TodoEditWithUI :dialogVisible="editDialogVisible" :selectedItem="selectedItem" @save="updateTodo" @cancel="cancel"></TodoEditWithUI>
</div>
</template>
<script>
import axios from "axios";
import TodoAddWithUI from "./TodoAddWithUI.vue";
import TodoEditWithUI from "./TodoEditWithUI.vue";
export default {
components: {
TodoAddWithUI,
TodoEditWithUI,
},
data() {
return {
selectedIndex: -1, // 選擇了哪條記錄
selectedItem: {}, // 選中的信息
addDialogVisible: false,
editDialogVisible: false,
Todos: [],
};
},
created: function () {
this.setTodos();
},
methods: {
setTodos() {
const url = "//localhost:44399/api/todo?pageIndex=1&pageSize=100";
axios.get(url)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.Todos = response.data.Result;
}
});
},
addTodo() {
this.addDialogVisible = true;
},
createTodo(item) {
const url = "//localhost:44399/api/todo";
axios.post(url, item)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.setTodos();
}
});
this.selectedIndex = -1;
this.selectedItem = {};
this.addDialogVisible = false;
},
editTodo(index) {
this.selectedIndex = index;
this.selectedItem = JSON.parse(JSON.stringify(this.Todos[index]));
this.editDialogVisible = true;
},
updateTodo(item) {
const url = `//localhost:44399/api/todo/${item.Id}`;
axios.put(url, item)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.setTodos();
}
});
this.selectedIndex = -1;
this.selectedItem = {};
this.editDialogVisible = false;
},
deleteTodo(index) {
const url = `//localhost:44399/api/todo/${this.Todos[index].Id}`;
axios.delete(url)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.setTodos();
}
});
this.selectedIndex = -1;
this.selectedItem = {};
},
cancel() {
this.addDialogVisible = false;
this.editDialogVisible = false;
},
},
};
</script>
TodoAddWithUI.vue和TodoEditWithUI.vue代碼沒有需要訪問的Api，在這裡就不貼了，其他代碼：
小結
目前為止，我們完成了Vue+ElementUI+axios的CRUD，是不是還是挺簡單的呀。其實你也可以使用Fetch API，Fetch API 是一個用於此類請求的強大的原生 API。你可能聽說過 Fetch API 其中的一個好處，就是你不需要在使用它的時候額外加載一個外部資源。具體的用法跟axios基本上沒有區別。
文中用到的代碼我們放在：//github.com/zcqiand/miscellaneous/tree/master/vue
