四十一、vue项目上手 | 用户管理系统 实现用户修改和删除功能（完成篇） -凯发k8官方网

@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="/">凯发k8官方网主页</router-link></li><li><router-link to="/about">关于凯发k8官方网</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

总结

以上是凯发k8官方网为你收集整理的四十一、vue项目上手 | 用户管理系统 实现用户修改和删除功能（完成篇）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。