vue.js搭建使用者管理系統練手（七）----使用者詳情的修改和刪除

lightTrace發表於2018-07-08
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:"使用者資訊更新成功!"}});
          })

來修改資料！

相關文章