在上一章的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'});
/* 更新用户信息 */
export const usersPut = (path="",data={})=> httpServe({path,method:'put',data});
在上一章UsersView.vue里添加修改删除功能:
v-model="queryName" placeholder="搜索用户名" @keyup.native.enter="search" style="width: 200px" >
icon="el-icon-search" circle @click="search" style="margin-left: 15px" >
>添加用户
>
title="添加用户" :visible.sync="drawer" :direction="direction" :wrapperClosable="false" >
>修改
>
confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除用户吗?" @confirm="del(scope.row)" @cancel="popCancel" > > 删除 >
@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" >
import { usersGet , usersDelete, usersPut } 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:'',
/* 判断对话框是否打开 true 打开 false 关闭 */
dialogFormVisible: false,
/* 对话框表单中的内容 */
form:{
email:'',
phone:''
}
};
},
/* 局部的过滤器 */
// filters:{
// getDate(v){
// /* 生成当前时间戳的日期对象 */
// let oDate = new Date(v);
// return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();
// }
// },
created() {
/* 一进入页面调用获取用户数据接口 */
this.getTableDate();
console.log(this.$route.meta.keepAlive);
},
methods: {
/* 气泡弹出框点击取消 */
popCancel(){
console.log('气泡弹出框点击取消');
},
/* 修改用户信息 */
update(row) {
/* 把表格一行的内容给到form表单 */
this.form = JSON.parse(JSON.stringify(row))/* 对象不能直接赋值需要深拷贝才能不互相影响 */
console.log(this.row);
/* 点击打开对话框 */
this.dialogFormVisible = true
},
/* 提交用户信息 */
async submit(){
/* 防止请求失败造成里面代码错误所以使用 try catch 捕获异常 */
try{
let res = await usersPut(`users/${this.form.id}`,{
id:this.form.id,
email:this.form.email,
mobile:this.form.mobile
})
let {meta} = res.data;
if(meta.status==200){
this.$message.success(meta.msg);
/* 修改信息成功后刷新表格数据 */
this.getTableDate()
/* 修改成功关闭对话框 */
this.dialogFormVisible = false
}else{
this.$message.error(meta.msg)
}
}catch(err){
this.$message.error(err)
}
},
/* 上面通过作用域插槽把点击的一行的数据已经传过来了 */
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);
});
},
},
};
在上一章的IndexView.vue里面添加退出登录:
:default-openeds="openList" :router="true" :default-active="pagepath" :unique-opened="true" > :index="(i + 1).toString()" v-for="(v, i) in navList" :key="i" >
>{{ v.authName }} > :index="'/index/' + item.path" v-for="(item, index) in v.children" :key="index" >{{ item.authName }} >
{{username}}
$route.meta.title
}}
$route.meta.subTitle
}}
import { menusGet } from "@/http/request.js";
import createRoute from "@/minixs/createRoute.js";
export default {
mixins: [createRoute],
data() {
return {
navList: [],
openList: ["1"],
pagepath: "/index/users",
};
},
watch: {
/* 当路由发生变化的时候,就把最新的地址给到pagepath变量
作用是为了保持路由菜单栏的高亮显示 以及解决点击不跳转的bug */
$route: {
handler: function (newV) {
this.pagepath = newV.path;
},
immediate: true,
},
},
/* 动态路由添加的菜单 刷新页面的时候不走created 所以每次刷新
都不能添加动态路由,导致刷新白屏 */
created: function () {
this.getNavList();
},
computed:{
/* 不能在模板中使用 localStorage.username */
/* 因为不是VUE实例中的属性,所以需要借助计算属性来实现 */
username:function(){
return localStorage.username
}
},
methods: {
/* 推出登录 */
quit(){
/* 清除所有缓存 */
localStorage.clear();
/* 回到登录页 */
setTimeout(()=>{
this.$router.push({name:'login'})
},500)
},
getNavList: function () {
menusGet("menus")
.then((res) => {
let { data, meta } = res.data;
/* 数据获取成功 */
if (meta.status == 200) {
this.navList = data;
/* 动态添加路由菜单 */
/* 因为第一个路由是默认,所以我们从第二个路由开始动态添加 */
/* slice不会改变原数据 而splice会 */
localStorage.arrRoute = JSON.stringify(this.navList.slice(1));
/* 使用minixs中的添加动态路由的公共方法 */
this.createRouteFn();
} else {
/* 防止数据获取失败,给出相应的后台提示 */
this.$message.error(meta.msg);
}
})
.catch((err) => {
console.log(err);
});
},
},
};
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}