vue后台管理系统用户的修改和删除
在CustomerDetails.vue的详情页面添加删除和修改按钮，删除的逻辑比较简单，直接通过按钮的click事件来请求网络完成删除，而编辑事件需要我们去新建一个Edit.vue组件来完成，Edit.vue和Add.vue很像，仿照来写就好CustomerDetails.vue<template><div class="details container" ><r
·
在CustomerDetails.vue的详情页面添加删除和修改按钮，删除的逻辑比较简单，直接通过按钮的click事件来请求网络完成删除，而编辑事件需要我们去新建一个Edit.vue组件来完成，Edit.vue和Add.vue很像，仿照来写就好
CustomerDetails.vue
<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>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.phone}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.email}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.education}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.graduationschool}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.profession}}</span></li>
<li class="list-group-item"><span class="glyphicon glyphicon-star">{{customer.profile}}</span></li>
</ul>
</div>
</template>
<script>
export default {
name: 'customerdetails',
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){
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>
components下新建Edit.vue
<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>
<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>
this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer)
.then(function(response){
// console.log(response);
this.$router.push({path:"/",query:{alert:"用户信息更新成功!"}});
})
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)