四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能(完成篇)
@Author:Runsen
@Date:2020/7/10
人生最重要的不是所站的位置,而是内心所朝的方向。只要我在每篇博文中写得自己体会,修炼身心;在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰难,奋勇前行,不忘初心,砥砺前行,人生定会有所收获,不留遗憾 (作者:Runsen )
作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件。导致翘课严重,专业排名中下。.在大学60%的时间,都在CSDN。决定今天比昨天要更加努力。我的征途是星辰大海!
上次完成了用户管理系统的 实现弹窗,搜索和详细页功能,接下来就是在详细页实现用户的修改和删除。
文章目录
- 删除用户
- 修改用户
删除用户
首先在用户详情的CustomerDetail,vue
中的template中添加两个按钮,代码如下。
<span class="pull-right"><router-link class="btn btn-primary" v-bind:to="'/edit/'+customer.id">编辑</router-link><button class="btn btn-danger" v-on:click="deleteCustomer(customer.id)">删除</button>
</span>
删除用户非常简单,定义一个deleteCustomer
函数就可以了。v-on:click
就是当点击的时候,就执行删除的逻辑,然后向3000端口发起删除的请求。
<template><div class="details container"><router-link to="/" class="btn btn-default">返回</router-link><h1 class="page-header">{{customer.name}}<span class="pull-right"><router-link class="btn btn-primary" v-bind:to="'/edit/'+customer.id">编辑</router-link><button class="btn btn-danger" v-on:click="deleteCustomer(customer.id)">删除</button></span></h1><ul class="list-group"><li class="list-group-item"><span class="glyphicon glyphicon-asterisk"> {{customer.phone}}</span></li><li class="list-group-item"><span class="glyphicon glyphicon-plus"> {{customer.email}}</span></li></ul><ul class="list-group"><li class="list-group-item"><span class="glyphicon glyphicon-asterisk">{{customer.education}}</span></li><li class="list-group-item"><span class="glyphicon glyphicon-plus"> {{customer.graduationschool}}</span></li><li class="list-group-item"><span class="glyphicon glyphicon-asterisk"> {{customer.profession}}</span></li><li class="list-group-item"><span class="glyphicon glyphicon-plus"> {{customer.profile}}</span></li></ul></div>
</template><script>
export default {name: 'cumstomerdetails',data () {return {customer:""}},methods:{fetchCustomers(id){this.$http.get("http://localhost:3000/users/"+id).then(function(response){console.log(response);this.customer = response.body;})},deleteCustomer(id){// console.log(id);this.$http.delete("http://localhost:3000/users/"+id).then(function(response){this.$router.push({path:"/",query:{alert:"用户删除成功!"}});})}},created(){this.fetchCustomers(this.$route.params.id);}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
修改用户
修改用户需要定义一个组件,这里就是Edit.vue
下面就是在main.js中定义修改用户的路由。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App'
import Customers from './components/Customers.vue'
import About from './components/About.vue'
import Add from './components/Add.vue'
import CustomerDetail from './components/CustomerDetail.vue'
import Edit from './components/Edit.vue'Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueResource)
// 设置路由
const router = new VueRouter({mode:"history",base: __dirname,routes:[{path:'/',component:Customers},{path:'/about',component:About},{path:'/add',component:Add},{path:'/customer/:id',component:CustomerDetail},{path:"/edit/:id",component:Edit},]
})
/* eslint-disable no-new */
new Vue({router,template: `<div id="app"><nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">用户管理系统</a></div><div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><router-link to="/">主页</router-link></li><li><router-link to="/about">关于我们</router-link></li></ul><ul class="nav navbar-nav navbar-right"><li><router-link to="/add">添加用户</router-link></li></ul></div></div></nav><router-view></router-view></div>`
}).$mount("#app")
修改用户的模板就是添加用户的模板,直接复制过来。就是把POST写成
<template><div class="edit container"><Alert v-if="alert" v-bind:message="alert"></Alert><h1 class="page-header">编辑用户</h1><form v-on:submit="updateCustomer"><div class="well"><h4>用户信息</h4><div class="form-group"><label>姓名</label><input type="text" class="form-control" placeholder="name" v-model="customer.name"></div><div class="form-group"><label>电话</label><input type="text" class="form-control" placeholder="phone" v-model="customer.phone"></div><div class="form-group"><label>邮箱</label><input type="text" class="form-control" placeholder="email" v-model="customer.email"></div><div class="form-group"><label>学历</label><input type="text" class="form-control" placeholder="education" v-model="customer.education"></div><div class="form-group"><label>毕业学校</label><input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool"></div><div class="form-group"><label>职业</label><input type="text" class="form-control" placeholder="profession" v-model="customer.profession"></div><div class="form-group"><label>个人简介</label><!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> --><textarea class="form-control" rows="10" v-model="customer.profile"></textarea></div><button type="submit" class="btn btn-primary">确认</button></div></form></div>
</template><script>
import Alert from './Alert'
export default {name: 'add',data () {return {customer:{},alert:""}},methods:{fetchCustomer(id){this.$http.get("http://localhost:3000/users/"+id).then(function(response){// console.log(response);this.customer = response.body;})},updateCustomer(e){// console.log(123);if (!this.customer.name || !this.customer.phone || !this.customer.email) {// console.log("请添加对应的信息!");this.alert = "请添加对应的信息!";}else{let updateCustomer = {name:this.customer.name,phone:this.customer.phone,email:this.customer.email,education:this.customer.education,graduationschool:this.customer.graduationschool,profession:this.customer.profession,profile:this.customer.profile}this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer).then(function(response){// console.log(response);this.$router.push({path:"/",query:{alert:"用户信息更新成功!"}});})e.preventDefault();}e.preventDefault();}},created(){this.fetchCustomer(this.$route.params.id);},components:{Alert}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
本次Vue项目用户管理系统 代码:
https://github.com/MaoliRUNsen/User.git
四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能(完成篇)相关推荐
- Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾 我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
- 第四阶段vue项目总结(新手小白一枚,不建议参考。 )
第四阶段vue项目总结(新手小白一枚,本人第一篇文,不建议参考. ) 问题 1.数据传输问题(后端收不到数据) 2.性别和状态0和1的转换 3.elementUI组件的处理 4.switch开关的处理 ...
- Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
- vue项目+xlsx+xlsx-style 实现table导出为excel的功能——技能提升
vue项目+xlsx+xlsx-style 实现table导出为excel的功能 最近遇到一个需求,后端提供一组数据,根据这组数据,导出为一个excel表格. 步骤如下: 1. 导出内容的预览如下:包 ...
- 四十、Vue项目上手 | 用户管理系统 实现弹窗,搜索和详细页功能(下篇)
@Author:Runsen @Date:2020/7/10 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
- 三十八、Vue项目上手 | 用户管理系统(上篇)
@Author:Runsen @Date:2020/7/7 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
- 三十九、Vue项目上手 | 用户管理系统 实现添加用户功能(中篇)
@Author:Runsen @Date:2020/7/8 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
- VUE项目实践--网站管理系统
使用vue-cli来构建一个vue项目 什么是vue-cli?有了它我们还需要webpack吗? 通过几天的学习都知道webpack的使用难度真的有点高,而且文档又很难阅读.而vue-cli是一个可用 ...
- 六十四、Vue项目去哪儿网App开发准备
2020/10/20 . 周二.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/20 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
最新文章
- 2022年十大AI预测
- java初反射_初始 java 反射机制 (一)
- 原生javascript添加和删除class
- caffe的运行create_data.sh前对VOC2007图片格式的更改
- centos6.5 tomcat开机启动
- 圆形刻度盘 进度 展示
- Out of Browser 开篇
- .NET 环境下进制间的转换
- 【IT项目管理】第1章 走进IT项目管理
- PLC编程语言汇总,留言告诉我你会哪一个?
- 求偏导c语言,求偏导是什么?有什么用法?请举例说明。
- IT行业产品经理和项目经理的区别?
- C++【STL】【string类的使用】
- 数据分析工具与参照【持续更新中......】
- 虚拟表格(大数据表格)
- 计算机领域中的CAE,CAE
- 解决验证码显示不了的方案
- 使用linux配置环境变量后发现命令不能用问题
- 导航栏钢琴键怎么实现?
- 热烈祝贺2011年7月当选微软MVP的CSDN会员!