把上一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上添加查询和删除功能：
<template>
<div class="users">
<el-row>
<el-input v-model="queryName" placeholder="搜索用户名" @keyup.native.enter="search" style="width:200px"></el-input>
<el-button icon="el-icon-search" circle @click="search" style="margin-left:15px"></el-button>
<el-button type="primary" round @click="drawer = true"
>添加用户</el-button
>
</el-row>
<!-- :wrapperClosable="false" 表示点击遮罩区域不关闭抽屉 true则可以 -->
<el-drawer
title="添加用户"
:visible.sync="drawer"
:direction="direction"
:wrapperClosable="false"
>
<add-users @addok="addok" />
</el-drawer>
<!-- el-table组件 需要给data属性动态传递一个数组对象tableData -->
<el-table :data="tableData">
<!-- el-table-column组件 表格中的数据 是数组对象tableData中的属性date所对应的值
比如 date属性的值对应的2016-05-02 -->
<!-- 表头标题 是由label属性来传递的 width属性是表示表头字段的宽度 不给宽度就自适应表格 -->
<el-table-column label="创建日期">
<template slot-scope="scope">
<div>{{ scope.row.create_time | getDate }}</div>
</template>
</el-table-column>
<el-table-column prop="email" label="电子邮箱"></el-table-column>
<el-table-column prop="mobile" label="手机号"></el-table-column>
<el-table-column prop="role_name" label="角色名称"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<!-- fixed="right" 固定操作在右侧 -->
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<!-- :page-sizes="[5, 10, 15, 20] 这个是用来选择分页的条数的 -->
<!-- :page-size="5" 默认一页显示5条数据 -->
<!-- :total="400" 总条数 -->
<!-- layout="total, sizes, prev, pager, next, jumper" 管理分页展示的样式内容 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import { usersGet , usersDelete } from "@/http/request.js";
import AddUsers from "@/components/AddUsers.vue";
export default {
name: "UsersView",
components: {
AddUsers,
},
/* 当组件被激活的时候 , 可以为组件的菜单被点击到的时候触发*/
activated:function(){
console.log('我被点了');
},
/* 当离开组件的时候触发 */
deactivated:function(){
console.log('我离开了');
},
data() {
return {
/* 表格数据 */
tableData: [],
/* 抽屉打开方向从右到左 */
direction: "rtl",
/* 默认抽屉是关闭的 */
drawer: false,
/* 默认打开的是第一页的数据 */
currentPage: 1,
/* 一页默认展示5条 */
pagesize: 5,
/* 默认总条数是0 */
total: 0,
/* 搜索用户名 */
queryName:''
};
},
/* 局部的过滤器 */
// filters:{
// getDate(v){
// /* 生成当前时间戳的日期对象 */
// let oDate = new Date(v);
// return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();
// }
// },
created() {
/* 一进入页面调用获取用户数据接口 */
this.getTableDate();
},
methods: {
/* 上面通过作用域插槽把点击的一行的数据已经传过来了 */
async del(row){
console.log(row.id);
try{
let {data:{meta:{msg,status}}} = await usersDelete('users/'+row.id)
if(status==200){
this.$message.success(msg)
/* 删除成功之后刷新列表 */
this.getTableDate()
}else{
this.$message.error(msg)
}
}catch(err){
this.$message.error(err)
}
},
/* 通过用户名搜索 */
search(){
console.log(this.queryName);
/* 点击搜索 因为queryName 的值通过v-model 已经被修改
所以直接调取接口获取数据 */
this.getTableDate()
},
/* 选择一页显示多少条数据 */
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
/* 改变一页显示多少条 */
this.pagesize = val;
/* 重新获取数据渲染表格 */
this.getTableDate();
},
/* 点击具体页数、上一页和下一页以及输入页数 都会触发下面的函数 */
/* 选择当前的是第几页 */
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
/* 改变当前是第几页 */
this.currentPage = val;
/* 重新获取数据渲染表格 */
this.getTableDate();
},
/* 当子组件添加数据成功的时候触发的方法 */
addok() {
/* 重新获取用户数据 */
this.getTableDate();
/* 关闭抽屉 */
setTimeout(() => {
this.drawer = false;
}, 600);
},
getTableDate() {
usersGet("users", {
/* 当前页 */
pagenum: this.currentPage,
/* 一页展示多少条 */
pagesize: this.pagesize,
/* 查询参数 空字符串是查询全部 通过用户名查询的*/
query:this.queryName
})
.then((res) => {
let { data, meta } = res.data;
/* 当状态为200表示数据获取成功 */
if (meta.status == 200) {
/* 把数据给到tableData数组中 */
this.tableData = data.users;
/* 把数据中总条数给到total */
this.total = data.total;
} else {
/* 如果获取数据有误，给出相应提示 */
this.$message.error(meta.msg);
}
})
.catch((err) => {
this.$message.error(err);
});
},
},
};
</script>
效果图:
