目标
使用Vue+ElementUI+axios构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式。
什么是 axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
安装axios
我们使用 NPM 进行安装
npm install axios
查询
setTodos() {
const url = "https://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 = "https://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 = `https://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 = `https://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 = "https://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 = "https://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 = `https://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 = `https://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基本上没有区别。
文中用到的代码我们放在:https://github.com/zcqiand/miscellaneous/tree/master/vue
网友评论