一起学Vue：访问API(axios)

目标

使用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