vue2+axios 增删改查

最新推荐文章于 2024-07-05 17:54:38 发布

janessssss

最新推荐文章于 2024-07-05 17:54:38 发布

阅读量1.1w

点赞数 6

分类专栏： vuejs 文章标签： vue axios

本文链接：https://blog.csdn.net/janessssss/article/details/78228279

版权

vuejs 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

vue2.0以后vue-resource已经不再更新，尤大大也说不再推荐，开始推荐axios，这两天学了一下axios，整理了一套增删改查
这里写图片描述
以下是官网介绍的一些axios内容

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios特色：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

axios支持的浏览器：

这里写图片描述

安装

使用 npm: $ npm install axios --save
使用 bower: $ bower install axios
使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

详细的可以参考axios的api https://www.kancloud.cn/yunye/axios/234845

下面开始说我写的这个demo

这个是文件结构那个ABCD是写的一个小的vuex demo 我就直接在那基础上写了并不关联

这里写图片描述

主要就是user.vue 以及 api.js这两个文件

首先来说一下api.js的基本设置

import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.params = {}

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return res;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

那个params是后面需要用的对象参数，我就直接在前面说明了

然后开始封装增删改查四个函数

//封装获取数据
export const oGet = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.get(url, params)
            .then(res => {
                resolve(res.data)
            }, err => {
                reject(err)
            }).catch(err => {
                reject(err)
            })
    })
};
//封装发送数据
export const oPost = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res.data)
            }, err => {
                reject(err)
            }).catch(err => {
                reject(err)
            })
    })
}
//封装修改数据
export const oUpdate = (url ,param,params) => {
    return new Promise((resolve , reject) => {
        axios.patch(url ,param, params)
            .then(res => {
                resolve(res.data)
            }, err => {
                reject(err)
            }).catch(err => {
                reject(err)
            })
    })
}
//封装删除数据
export const oRemove = (url , params) => {
    return new Promise((resolve,reject) => {
        axios.delete(url,params)
            .then(res => {
                resolve(res.data)
            },err => {
                reject(err)
            }).catch(err => {
                reject(err)
            })
    })
}

其中只有修改数据多了一个参数，因为我们后台api给出的是按照id查询然后修改

然后开始说一下user.vue结构
其中大部分结构和我那篇vue-resource文件一样，只有在增删改查的时候用axios代替了vur-resource

<template>
    <div id="user">
        <el-row class="line-display">
            <el-col :span="22" :offset="1">
                <div class="grid-content" style="margin-top:30px;">
                    <!-- 查询 -->
                    <ul class="btn-edit fl">
                        <li class="input-search">
                            <el-input :placeholder="placeholder" v-model="keywords" style="width: 300px;">
                                <el-select v-model="select" @change="searchFieldChange" slot="prepend">
                                    <el-option label="用户名" value="username"></el-option>
                                    <el-option label="姓名" value="name"></el-option>
                                    <el-option label="电话" value="phone"></el-option>
                                </el-select>
                                <el-button type="danger" class="danger" slot="append" icon="search" @click="query"></el-button>
                            </el-input>
                        </li>
                    </ul>
                    <!-- 操作 -->
                    <ul class="btn-edit fr">
                        <li >
                            <el-button type="primary" @click="dialogCreateVisible = true"> <i class="el-icon-plus iconss" ></i>添加用户</el-button>
                            <el-button type="danger" icon="delete" :disabled="selected.length==0" @click="removeUsers()"  >删除</el-button>
                            <el-button type="warning" @click="enabledUsers(false)" :disabled="selected.length==0" > <i class="el-icon-close iconss" ></i>停用</el-button>
                            <el-button type="success" @click="enabledUsers(true)"  :disabled="selected.length==0" ><i class="el-icon-check iconss" ></i>激活</el-button>
                        </li>
                    </ul>
                    <!-- 用户列表-->
                    <el-col :span="24" style="height:20px;"></el-col>
                    <el-table :data="users"
                              stripe
                              v-loading="loading"
                              element-loading-text="拼命加载中..."
                              style="width: 100%;margin-top:20px;"
                              height="443"
                              @sort-change="tableSortChange"
                              @selection-change="tableSelectionChange" >
                        <el-table-column type="selection"
                                         width="60">
                        </el-table-column>
                        <el-table-column sortable="custom"
                                         prop="username"
                                         label="用户名"
                                         width="100">
                        </el-table-column>
                        <el-table-column prop="name"
                                         label="姓名"
                                         width="80">
                        </el-table-column>
                        <el-table-column prop="phone"
                                         label="手机">
                        </el-table-column>
                        <el-table-column prop="email"
                                         label="邮箱">
                        </el-table-column>
                        <el-table-column prop="create_time" sortable="custom" 
                                         label="注册日期">

                        </el-table-column>
                        <el-table-column
                            prop="is_active"
                            label="状态"
                            width="75"
                            inline-template>
                            <el-tag :type="row.is_active === true ? 'primary' : 'success'" close-transition>{{row.is_active|isEnabledFormatter}}</el-tag>
                        </el-table-column>
                        <el-table-column
                            inline-template
                            label="操作"
                            width="250">
                            <span>
                                <el-button type="danger" size="small" @click="removeUser(row)">删除</el-button>
                                <el-button type="success" size="small" @click="setCurrent(row)">编辑</el-button>
                            </span>
                        </el-table-column>
                    </el-table>
                    <div style=" width:100%; ovflow:hidden; height:40px;"></div>
                    <!--分页begin-->
                    <el-pagination class="tc mg"
                                   :current-page="filter.page"
                                   :page-sizes="[10, 20, 50]"
                                   :page-size="filter.per_page"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="total_rows"
                                   @size-change="pageSizeChange"
                                   @current-change="pageCurrentChange">
                    </el-pagination>
                    <!--分页end-->
                </div>
            </el-col>
        </el-row>
        <!-- 创建用户 begin-->
        <el-dialog title="创建用户" v-model="dialogCreateVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="reset" >
            <el-form id="#create" :model="create" :rules="rules" ref="create" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="create.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="create.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="create.password" type="password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input v-model="create.checkPass" type="password"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="create.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="create.email"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch on-text="" off-text="" v-model="create.is_active"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCreateVisible = false">取 消</el-button>
                <el-button type="primary" :loading="createLoading" @click="createUser">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改用户 begin-->
        <el-dialog title="修改用户信息" v-model="dialogUpdateVisible"  :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form id="#update" :model="update" :rules="updateRules" ref="update" label-width="100px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="update.name"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="update.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="update.email"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch on-text="" off-text="" v-model="update.is_active"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateVisible = false">取 消</el-button>
                <el-button type="primary" :loading="updateLoading" @click="updateUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        mapState,
        mapMutations,
        mapGetters,
        mapActions
    } from 'vuex';
    import api from '../api/api.js'
    var placeholders = {
        "name": "请输入查找姓名",
        "username": "请输入查找用户名",
        "phone": "请输入查找电话"
    };
    function getuuid() {
        var uid = [];
        var hexDigits = "0123456789abcdefghijklmnopqrst";
        for (var i = 0; i < 32; i++) {
            uid[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        uid[6] = "4";
        uid[15] = hexDigits.substr((uid[15] & 0x3) | 0x8, 1);
        var uuid = uid.join("");
        return uuid;
    }
    export default {
        name:'',
        data : function () {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.create.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                //url:'http://192.168.1.190/api/v1/accounts',
                users:[],
                filter: {
                    per_page: 10, // 页大小
                    page: 1, // 当前页
                    name: '',
                    username: '',
                    phone: '',
                    is_active: '',
                    create_time:'',
                    sorts: ''
                },
                create: {
                    id: '',
                    username: '',
                    name: '',
                    password: '',
                    checkPass: '',
                    phone: '',
                    email: '',
                    is_active: true
                },
                currentId: '',
                update: {
                    name: '',
                    phone: '',
                    email: '',
                    is_active: true
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }, {
                        min: 3,
                        max: 15,
                        message: '长度在 3 到 15 个字符'
                    }],
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }, {
                        min: 3,
                        max: 25,
                        message: '长度在 3 到 25 个字符'
                    }, {
                        pattern: /^[A-Za-z0-9]+$/,
                        message: '用户名只能为字母和数字'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, {
                        min: 6,
                        max: 25,
                        message: '长度在 6 到 25 个字符'
                    }],
                    checkPass: [{
                        required: true,
                        message: '请再次输入密码',
                        trigger: 'blur'
                    }, {
                        validator: validatePass
                    }],
                    email: [{
                        type: 'email',
                        message: '邮箱格式不正确'
                    }],
                    phone: [{
                        pattern: /^1[34578]\d{9}$/,
                        message: '请输入中国国内的手机号码'
                    }]
                },
                updateRules: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }, {
                        min: 3,
                        max: 15,
                        message: '长度在 3 到 15 个字符'
                    }],
                    email: [{
                        type: 'email',
                        message: '邮箱格式不正确'
                    }],
                    phone: [{
                        pattern: /^1[34578]\d{9}$/,
                        message: '请输入中国国内的手机号码'
                    }]
                },
                total_rows:0,
                loading:true,
                keywords: '', //搜索框的关键字内容
                select: 'username', //搜索框的搜索字段
                selected: [], //已选择项
                dialogCreateVisible: false, //创建对话框的显示状态
                dialogUpdateVisible: false, //编辑对话框的显示状态
                createLoading: false,
                updateLoading: false,
                placeholder: placeholders["username"]
            }
        },
        mounted:function(){
            this.getUsers();
        },
        methods:{

            tableSelectionChange(val) {
                this.selected = val;
            },
            //排序
            tableSortChange(val) {
                if (val.prop != null) {
                    if (val.order == 'descending') {
                        this.filter.sorts = '-' + val.prop;
                    } else {
                        this.filter.sorts = '' + val.prop;
                    }
                } else {
                    this.filter.sorts = '';
                }
                this.getUsers();
            },
            //每页显示多少条
            pageSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.filter.per_page = val;
                this.getUsers();
            },
            //当前页选择
            pageCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.filter.page = val;
                this.getUsers();
            },
             searchFieldChange(val) {
                this.placeholder = placeholders[val];
                console.log(`搜索字段： ${val} `);
            },
             rowClick(row, event) {
                var index = $.inArray(row, this.selected)
                if (index < 0) {
                    this.selected.push(row);
                    this.$refs.usersTable.toggleRowSelection(row, true);
                } else {
                    this.selected.splice(index, 1);
                    this.$refs.usersTable.toggleRowSelection(row, false);
                }
            },
           // 重置表单
            reset() {
                this.$refs.create.resetFields();
            },
            setCurrent(user) {
                this.currentId = user.id;
                this.update.name = user.name;
                this.update.phone = user.phone;
                this.update.email = user.email;
                this.update.is_active = user.is_active;
                this.dialogUpdateVisible = true;
            },
            //获取用户数据
            getUsers(){
                this.loading = true;
                api._get().then(res => {
                    this.users = res.datas;
                    this.total_rows = res.total_rows;
                    this.loading=false;
                },err => {
                    console.log(err);
                })
            },
            //创建用户
            createUser() {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        this.create.id = getuuid();
                        this.createLoading = true;
                        api._post(this.create).then(res => {
                            this.$message.success('创建用户成功！');
                            this.dialogCreateVisible = false;
                            this.createLoading = false;
                            this.reset();
                            this.getUsers();
                        }).catch((res) => {
                            var data = res.datas;
                            if (data instanceof Array) {
                              this.$message.error(data[0]["message"]);
                            } else if (data instanceof Object) {
                              this.$message.error(data["message"]);
                            }
                            this.createLoading = false;
                        });
                    } else {
                      //this.$message.error('存在输入校验错误!');
                      return false;
                    }
                });
            },

            // 更新用户资料
            updateUser() {
                this.$refs.update.validate((valid) => {
                    if (valid) {
                        this.updateLoading = true;
                        api._update(this.currentId, this.update).then(res => {
                            this.$message.success('修改用户资料成功！');
                            this.dialogUpdateVisible = false;
                            this.updateLoading = false;
                            this.getUsers();
                        }).catch((res) => {
                            var data = res.datas;
                            if (data instanceof Array) {
                                this.$message.error(data[0]["message"]);
                            } else if (data instanceof Object) {
                                this.$message.error(data["message"]);
                            }
                            this.updateLoading = false;
                          });
                    } else {
                        return false;
                    }
                });
            },

            // 删除单个用户
            removeUser(user) {

                this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', {
                  type: 'warning'
                }).then(() => {
                    api._remove(user).then(res => {
                        this.$message.success('成功删除了用户' + user.username + '!');
                        this.getUsers();
                        console.log(user.id);
                    }).catch((res) => {
                        this.$message.error('删除失败!');
                    });
                }).catch(() => {
                    this.$message.info('已取消操作!');
                });
            },

             //删除多个用户
            removeUsers(ids) {
                var ids = [];
               $.each(this.selected, (i, users) => {
                    ids.push(users.id);
                });
                ids = ids.join(",");
                this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    api._removes(ids).then(res =>{
                        this.$message.success('删除了' + this.selected.length + '个用户!');
                        this.getUsers();
                    }).catch((res) => {
                        this.$message.error('删除失败!');
                    });
                }).catch(() => {
                    this.$message('已取消操作!');
                });
            }

        }
    }
</script>
<style>
ul li{list-style: none}
.tc{text-align:center; }
.mg{ margin-top:10px;}
.fl{float:left}
.fr{float:right}
</style>

我单独把各个函数拎出来说一下

获取数据

**
首先，我在api.js调用了一下oGet函数

export default {
    _get () {
        return oGet('http://192.168.1.190/api/v1/accounts');
    },
}

然后user.vue中调用_get()函数

//获取用户数据
getUsers(){
    this.loading = true;
    api._get().then(res => {
        this.users = res.datas;
        this.total_rows = res.datas.total_rows;
        this.loading=false;
        console.log(res);
    },err => {
        console.log(err);
    })
},

删除数据

删除包括单条删除以及多条删除
单条删除 需要获取id，所以传了一个参数，然后在地址上拼接id
多条删除 将选中的id 放到数组里面，拼接地址

 _remove(user){
        var userid = user.id;
        return oRemove('http://192.168.1.190/api/v1/accounts/'+ userid);

    },

_removeUsers(param){
        return oRemove(apiTool+'api/v1/accounts/'+'?ids='+param);
    },

然后

// 删除单个用户
removeUser(user) {

    this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', {
      type: 'warning'
    }).then(() => {
        api._remove(user).then(res => {
            this.$message.success('成功删除了用户' + user.username + '!');
            this.getUsers();
            console.log(user.id);
        }).catch((res) => {
            this.$message.error('删除失败!');
        });
    }).catch(() => {
        this.$message.info('已取消操作!');
    });
},

//删除多个用户
removeUsers(ids) {
    var ids = [];
   $.each(this.selected, (i, users) => {
        ids.push(users.id);
    });
    ids = ids.join(",");
    this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', {
        type: 'warning'
    }).then(() => {
        api._removes(ids).then(res =>{
            this.$message.success('删除了' + this.selected.length + '个用户!');
            this.getUsers();
        }).catch((res) => {
            this.$message.error('删除失败!');
        });
    }).catch(() => {
        this.$message('已取消操作!');
    });
}

增加数据

_post (params) {
        return oPost('http://192.168.1.190/api/v1/accounts',params);
    },

然后user.vue

//创建用户
createUser() {
    this.$refs.create.validate((valid) => {
        if (valid) {
            this.create.id = getuuid();
            this.createLoading = true;
            api._post(this.create).then(res => {
                this.$message.success('创建用户成功！');
                this.dialogCreateVisible = false;
                this.createLoading = false;
                this.reset();
                this.getUsers();
            }).catch((res) => {
                var data = res;
                if (data instanceof Array) {
                  this.$message.error(data[0]["message"]);
                } else if (data instanceof Object) {
                  this.$message.error(data["message"]);
                }
                this.createLoading = false;
            });
        } else {
          //this.$message.error('存在输入校验错误!');
          return false;
        }
    });
},

修改数据

传两个参数，param用来拼接ids,params传递修改的对象

_update (param,params) {
        return oUpdate('http://192.168.1.190/api/v1/accounts'+'?ids='+param, params);
    },

然后

// 更新用户资料
updateUser() {
    this.$refs.update.validate((valid) => {
        if (valid) {
            this.updateLoading = true;
            api._update(this.currentId, this.update).then(res => {
                this.$message.success('修改用户资料成功！');
                this.dialogUpdateVisible = false;
                this.updateLoading = false;
                this.getUsers();
            }).catch((res) => {
                var data = res;
                if (data instanceof Array) {
                    this.$message.error(data[0]["message"]);
                } else if (data instanceof Object) {
                    this.$message.error(data["message"]);
                }
                this.updateLoading = false;
              });
        } else {
            return false;
        }
    });
},

不太会写可能看起来有点混乱
贴个地址
https://github.com/janessssss/vue-axios

janessssss

关注

6
点赞
踩
42

收藏

觉得还不错? 一键收藏
7
评论
vue2+axios 增删改查

vue2.0以后vue-resource已经不再更新，尤大大也说不再推荐，开始推荐axios，这两天学了一下axios，整理了一套增删改查以下是官网介绍的一些axios内容Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios特色：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请...
复制链接

扫一扫

专栏目录