axios四个常用请求（get,post,put,delete）

最新推荐文章于 2024-04-15 15:32:25 发布

竹箫云淡

最新推荐文章于 2024-04-15 15:32:25 发布

阅读量2k

点赞数 1

文章标签： vue html vue.js

本文链接：https://blog.csdn.net/qq_42420490/article/details/106503029

版权

axios-get

首先，如果你有一定的基础的话，请参考axios官网：axios官方。下面，我就以表格的增删改查为例，加以说明。
注意：此代码是，运行依赖于json-server中，若是api接口形式运行的话，只需把url的地址修改即可！
话不多说，先贴整个代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <style>
        #box{ position: relative;}
        .pops{ position: absolute; left:calc(50% - 250px);top: 7rem;width: 500px;height: 440px;}
    </style>
</head>

<body>
    <div class="container" id="box">
        <div class="card">
            <div class="card-header">
                人员信息一览表
            </div>
            <div class="card-body">
                <div class="form-group form-inline">
                    <input type="text" placeholder="请输入关键字查询" class="form-control" v-model="keyword">
                    <button class="btn btn-info mx-3" @click="search">搜索</button>
                    <button class="btn btn-danger" @click="addOne">新增</button>
                </div>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item , index) in list" :key="item.id">
                            <td>{{index + 1}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.gender}}</td>
                            <td>{{item.age}}</td>
                            <td>
                                <button class="btn btn-success btn-sm" @click="editOne(item)">编辑</button>
                                <button class="btn btn-danger btn-sm" @click="delOne(item)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer text-muted">
                xxxxxxxxxxxxxxxx
            </div>
        </div>
        <pop v-show="isShow" @hidden="popHidden" :per="person"></pop>
    </div>
	
	// 弹出层模块，模板
    <template id="box1">
        <div class="card pops">
            <div class="card-header" style="position:relative">
                新增人员信息
                <span style="position:absolute;top:10px;right:26px;cursor: pointer;" @click="close">&times;</span>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label>姓名</label>
                    <input type="text" class="form-control" v-model="user.txtName">
                </div>
                <div class="form-group">
                    <label>性别</label>
                    <input type="text" class="form-control" v-model="user.txtGender">
                </div>
                <div class="form-group">
                    <label>年龄</label>
                    <input type="text" class="form-control" v-model="user.txtAge">
                </div>

            </div>
            <button class="btn btn-danger btn-block mb-2" @click="save">保存</button>
            <div class="card-footer text-muted">
                xxxxxxxxxx
            </div>
        </div>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <script>
		
		// 定义一个pop组件
        var pop = {
            template: '#box1',
            // 定义pop组件的数据
            data() {
                return { user: { txtName: '', txtGender: '', txtAge: '' } }
            },
            // 定义pop组件的方法
            methods: {
            	// 关闭（x）的方法
                close() {
                    this.$emit('hidden');
                },
                // 保存按钮功能（编辑、新增、简单判断的保存）
                save() {
                	//保存前，判断名字是否为 空
                    if (this.user.txtName) {
                    	// 判断是否为 编辑 操作
                        if (this.per) {
                            axios.put('http://localhost:3000/people' + this.per.id, {
                                name: this.user.txtName,
                                gender: this.user.txtGender,
                                age: this.user.txtAge,
                            })
                        // 判断是否为 新增 操作
                        } else {
                            axios.post('http://localhost:3000/people', {
                                name: this.user.txtName,
                                gender: this.user.txtGender,
                                age: this.user.txtAge,
                            }).then((item) => console.log(item));
                        };
                        this.close();
                    // 如果为空，弹窗警告
                    } else {
                        alert('名字不能为空');
                    }
                },
            },
            // 把 点击的 需要编辑的一项，从父组件中，接收
            props: ['per']
        }
		// 定义一个 vue组件，是定义在整个table中
        var box = new Vue({
            el: '#box',
            data: {
                keyword: '', // 查询的关键字
                list: [], // 显示于页面的 数据
                isShow: false, // pop弹出层 是否显示 默认display:none
                person: '' // 需要 编辑 的对象
            },
            //把pop弹出层 组件 注册在box中
            components: {
                pop
            },
            methods: {
                popShow() { // 控制 弹出层 显示/隐藏 功能
                    this.isShow = true;
                },
                addOne() { // 新增
                    this.popShow();
                },
                editOne(v) { // 编辑
                    this.popShow();
                    this.person = v;
                },
                popHidden() { // 弹出层 关闭 功能
                    this.isShow = false;
                },
                init() { // 页面初始化（显示数据）
                    axios.get('http://localhost:3000/people').then((res) => {
                        // console.log(res.data);
                        this.list = res.data;
                    });
                },
                delOne(obj) { // 删除选定项
                    axios.delete('http://localhost:3000/people/' + obj.id).then((item) => console.log(item));
                },
                search() { // 根据关键字 搜索
                    axios.get('http://localhost:3000/people').then((res) => {
                        // console.log(res.data);
                        this.list = res.data.filter((item) => item.name.indexOf(this.keyword) > -1);
                    });
                }
            },
            // 页面打开时，数据的初始化
            created() {
                this.init();
            }
        })
    </script>
</body>

</html>`

首先，html部分，我是用bootstrap4来布局的，主要用到里面的，table、card，当然在弹出层你也可以选择modal，但是要注意，modal是依赖于bootstrap中的JS的，所以此弹出层（pop），我用css手动布局。主要部分是功能，这里不再累述布局了。

竹箫云淡

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
axios四个常用请求（get,post,put,delete）

axios-get首先，如果你有一定的基础的话，请参考axios官网：axios官方。下面，我就以表格的增删改查为例，加以说明。注意：此代码是，运行依赖于json-server中，若是api接口形式运行的话，只需把url的地址修改即可！话不多说，先贴整个代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v
复制链接

扫一扫