（1）使用ElementUI的表单组件及表单验证功能

<template>
  <div class="add">
    <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' }
          ],
        }
      }
    },

（2）使用axios发送post请求添加用户

我遇到的bug也都写在注释的代码里了。。。。为什么用axios(config)无法把参数传回给后台？一定是我学的还太少。。。。。
在请求发送成功后还会调用ElementUI的Message组件，从顶部出现提醒添加成功。并跳转到列表首页。

this.$message({
                    message: '成功添加1位新用户',
                    type: 'success'
                  });
                  this.$router.push({path:'/customers',query:{alert:'success'}})

全部代码：

 submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          //  alert('submit!');
            let newCustomer = {
              name: this.customer.name,
              phone: this.customer.phone,
              email: this.customer.email,
              desc: this.customer.desc,
            }
            console.log(newCustomer)

            // let config = {
            //   url:'http://localhost:3000/users',
            //   methods:'post',
            //   data: newCustomer
            // }

            axios.post('http://localhost:3000/users',newCustomer)
                .then((response) => {
                  console.log(response)
                  this.$message({
                    message: '成功添加1位新用户',
                    type: 'success'
                  });
                  this.$router.push({path:'/customers',query:{alert:'success'}})
                })

            //为什么用axios(config)无法把参数传回给后台？
            // axios(config)
            //     .then((response) => {
            //       console.log(response)
            //     })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

对于一个写后端的人来说，在回到首页发现真的有新数据时，对于居然不需要使用数据库也可以添加数据感觉真是太神奇了。。。。。。。