VUE的第二种封装接口、查询删除用户功能

把上一http下的index.js封装的地方修改成 对象解构的方式来传参 

这样的话就不用考虑参数的顺序问题,参数会通过key名来找到对应的值 

而且没有必要传的值 比如post请求不需要传params     ：

/* 参数methdos默认值是get，path表示具体路径，post需要给data传参默认值是空对象，

get请求需要给params传参默认值是空对象 */

/* 这里是把传过来的对象进行了解构 并给了默认值 这样写不用在意参数传递的位置、

   因为他们是根据对象的key名称来对应的 */

export const httpServe = ({path='', params = {}, method = 'get', data = {}} = {}) => {

    return new Promise((resolve, reject) => {

        instance({

            url: path,

            params,

            method,

            data

        })

            .then(res => {

                resolve(res)

            })

            .catch(err => {

                reject(err)

            })

    })

}

/*这种调用的写法 必须要按照顺序 */

/* get请求的调用方法 */

/* httpServe('users',{name:'zhangsan'}) */

/* post请求的调用方法 */

/* httpServe('login',{},'post',{username:'admin',password:'123123'})  */

/* 使用对象解构的方式来传参 */

/* 这样的话就不用考虑参数的顺序问题,参数会通过key名来找到对应的值 */

/* 而且没有必要传的值 比如post请求不需要传params  */

/* get请求的调用方法 */

/* httpServe({path:'users',params:{name:'zhangsan'}}) */

/* post请求的调用方法 */

/* httpServe({method:'post',data:{username:'admin',password:'123123'},path:'login'}) */

request.js里修改成以对象方式传递并添加删除用户

import {httpServe} from '@/http/index.js'

/* 登录 */

export const loginPost = (path="",data={})=> httpServe({path:path,method:'post',data:data});

/* 必须以对象方式传递 */

/* 左侧菜单列表 */

export const menusGet = (path="",params={})=> httpServe({path,params});

/* 用户列表 */

export const usersGet = (path="",params={})=> httpServe({path,params});

/* 添加用户 */

export const addusersPost = (path="",data={})=> httpServe({path,method:'post',data});

/* 删除用户 */

export const usersDelete = (path="")=> httpServe({path,method:'delete'});

之前的UsersView.vue上添加查询和删除功能：

效果图:

点击对应的删除并刷新页面