Vue+ElementUI实现简单的用户管理系统（四）：查看用户详情页及删除用户

（一）展示用户详细信息

在点击“查看”按钮时，传递了用户的Id，我们要把这个Id拿出来：

this.$route.query.id

created() {this.handle(this.$route.query.id);},

handle方法，也就是根据id使用axios发送get请求拿到用户的详细信息：

handle(id){let config = {url:'http://localhost:3000/users/'+id,method: 'get',}axios(config).then((response) => {console.log(response)this.customer = response.data//  console.log(customer)})},

（二）template:

<template><div class="customerDetail"><el-button type="primary" icon="el-icon-edit" circle @click.native="updateCustomer(customer.id)"></el-button><el-button type="danger" icon="el-icon-delete" circle @click.native="deleteCustomer(customer.id)"></el-button><el-divider><i class="el-icon-apple"></i></el-divider><h1>{{customer.name}}</h1><el-divider><i class="el-icon-grape"></i></el-divider><h1>{{customer.phone}}</h1><el-divider><i class="el-icon-watermelon"></i></el-divider><h1>{{customer.email}}</h1><el-divider><i class="el-icon-cherry"></i></el-divider></div>
</template>

data(){return {customer:[]}},

（三）删除用户方法

调用axios的delete方法，传入id即可。

 deleteCustomer(id){console.log(id)axios.delete('http://localhost:3000/users/'+id).then((response) => {console.log(response)this.$message({message: '成功删除',// type: 'success'});this.$router.push({path:'/customers'})})}

（四）跳转到编辑界面

updateCustomer(id){return this.$router.push({path:'/updatecustomer',query:{id:id}})},

路由配置：

 {path: '/updatecustomer',name:Edit,component: Edit,},

Vue+ElementUI实现简单的用户管理系统（四）：查看用户详情页及删除用户相关推荐

springboot+vue+elementUI 高校学生实习管理管理系统 #毕业设计
学生顶岗实习管理系统是学校管理学生实习的重要组成.它是针对目前学生实习工作信息的情况设计的,力求满足学生工作多方面的需要.该系统的设计要充分考虑到学生实习管理工作和手段.目前,在网上和各种出售的光盘中 ...
vue+elementui最简单的面包屑写法
Vue+Elementui最简单.最完整的面包屑写法 1.创建一个面包屑组件 2.将组件导入主页文件 3.使用面包屑 4.效果图 1.创建一个面包屑组件 1.1.利用路由对象 matched 属性实现 ...
java计算机毕业设计基于springboot+vue+elementUI的口腔管理平台管理系统(前后端分离）
项目介绍口腔卫生是关系民生的一个重要问题.口腔健康会直接影响全身的健康,口腔基本常见的有龋齿,牙周炎等问题,而且人类的牙齿只有2次更换周期,一旦牙齿彻底完成更换终生将不再更换,所以越来越多的人开始关 ...
vue实现购物车简单的功能-单选全选总价计算、批量删除
vue实现购物车简单的功能-----单选全选总价计算.批量删除等观看了后盾人视频教学,视频里面对于全选和单选的功能没有讲全,于是自己研究了一下,前端小白,也是第一次写博客,有什么不足和可以优化的地方 ...
php博客系统加载评论,Yii实现单用户博客系统文章详情页插入评论表单的方法...
本文实例讲述了Yii实现单用户博客系统文章详情页插入评论表单的方法.分享给大家供大家参考,具体如下: action部分: function test($objs) { $objs->var=10 ...
nodejs+vue+elementui钢琴乐器培训课程报名管理系统
1绪论 5 1.1项目研究的背景 5 1.2开发意义 5 1.3项目研究内容 5 2开发技术介绍 6 2.1 B/S架构 6 前端技术:nodejs+vue+elementui,视图层其实质就是vu ...
nodejs+vue+elementui宾馆酒店客房信息管理系统-express
一．天一酒店客房信息管理系统的设计思路如下: 前端技术:nodejs+vue+elementui 前端:HTML5,CSS3.JavaScript.VUE 酒店客房信息管理系统根据酒店管理者情况及顾客 ...
java基于ssm+vue+elementui的旅游线路分享管理系统
旅游景点路线网站管理系统,是基于java编程语言,ssm框架,mysql数据库制作的设计,本设计主要分为用户和管理员两个角色,用户的主要功能是注册登陆系统,查看旅游景点介绍,查看旅游路线介绍,查看新闻 ...
vue+element-ui搭建简易的后台管理系统页面布局
工作中一直用element-ui写中后台项目,所以决定写一个vue+element-ui搭建简易的后台管理页面框架教程,可以快速搭建好简单的中后台界面.完成后显示如下用vue-cli构建项目必须之 ...
springboot+vue+elementui校园运动会场地预约管理系统java
用户功能需求用户注册模块:将用户信息录入数据库,用户利用注册的账号以及密码登录系统,浏览查看各种信息,添加部分信息: 留言模块:用户以留言的形式,跟管理员交流. 评论模块:用户评论运动会内容,查看其 ...

Vue+ElementUI实现简单的用户管理系统（四）：查看用户详情页及删除用户

（一）展示用户详细信息

（二）template:

（三）删除用户方法

（四）跳转到编辑界面

Vue+ElementUI实现简单的用户管理系统（四）：查看用户详情页及删除用户相关推荐

最新文章

热门文章