四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能（完成篇）
程序员文章站
2022-06-06 09:48:31
...
@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
推荐阅读