Vue+ElementUI實現簡單的用戶管理系統（五）：編輯用戶信息

（1）編輯用戶的界面

界面和和添加用戶的界面差不多，只是需要顯示用戶原來的信息。

<template>
  <div class="edit">
    <h1>編輯用戶</h1>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="customer"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="customer.name"></el-input>
      </el-form-item>
      <el-form-item
        label="電話"
        prop="phone">
        <el-input v-model="customer.phone"></el-input>
      </el-form-item>
      <el-form-item label="郵箱" prop="email">
        <el-input v-model="customer.email"></el-input>
      </el-form-item>
      <el-form-item label="個人簡介" prop="desc">
        <el-input type="textarea" v-model="customer.desc"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

  data(){
      return {
        labelPosition: 'right',
        customer:{
          name:'',
          phone:'',
          email:'',
          desc:''
        },
        rules:{
          name:[
            { required: true, message: '請輸入姓名', trigger: 'blur' },
            { min: 2, max: 8, message: '長度在 2 到 8 個字符', trigger: 'blur' }
          ],
          phone:[
            { required: true, message: '請輸入電話', trigger: 'blur' }
          ],
          email:[
            { required: true, message: '請輸入郵箱', trigger: 'blur' }
          ],
          desc:[
            { required: true, message: '請輸入個人簡介', trigger: 'blur' }
          ],
        }
      }
    },

顯示用戶本來的信息(也就是根據ID獲取，和之前一樣。。。。。。)：

 created() {
      this.handle(this.$route.query.id);
    },

handle(id){
        let config = {
          url:'http://localhost:3000/users/'+id,
          method: 'get',
        }
        axios(config)
            .then((response) => {
              console.log(response)
              this.customer = response.data
              //  console.log(customer)
            })
      },

(二）編輯用戶信息

使用axios的put請求

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          //  alert('submit!');
            let updateCustomer = {
              name: this.customer.name,
              phone: this.customer.phone,
              email: this.customer.email,
              desc: this.customer.desc,
            }
       
            axios.put('http://localhost:3000/users/'+this.$route.query.id,updateCustomer)
                .then((response) => {
                  this.$message({
                    message: '更新用戶信息成功',
                    type: 'success'
                  });
                  this.$router.push({path:'/customers',query:{alert:'success'}})
                })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },