vue.js搭建用户管理系统练手（七）----用户详情的修改和删除

在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>

这里使用fetchCustomer方法是为了将老数据填到修改页面，对用户操作更加友好，通过

this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer)
          .then(function(response){
            // console.log(response);
            this.$router.push({path:"/",query:{alert:"用户信息更新成功!"}});
          })

来修改数据！