VUE的第二种封装接口、查询删除用户功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE的第二种封装接口、查询删除用户功能相关的知识，希望对你有一定的参考价值。
参考技术A /* 参数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') */
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');
<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>
以上是关于VUE的第二种封装接口、查询删除用户功能的主要内容，如果未能解决你的问题，请参考以下文章