美文网首页前端开发那些事儿Vue
一起学Vue:访问API(axios)

一起学Vue:访问API(axios)

作者: 南荣相如谈编程 | 来源:发表于2020-10-30 20:13 被阅读0次

    目标

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

    相关文章

      网友评论

        本文标题:一起学Vue:访问API(axios)

        本文链接:https://www.haomeiwen.com/subject/pancvktx.html