vue2+axios 增删改查

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 = 5000axios.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() {                this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', {                    type: 'warning'                }).then(() => {                    api._removes().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);    },_removes(){     var ids = [];     $.each(this.selected, (i, user) => {         ids.push(user.id);     });     ids = ids.join(",");     return oRemove('http://192.168.1.190/api/v1/accounts/'+ids); },

然后

// 删除单个用户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() {    this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', {        type: 'warning'    }).then(() => {        api._removes().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