（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;
}
});
},
对于一个写后端的人来说，在回到首页发现真的有新数据时，对于居然不需要使用数据库也可以添加数据感觉真是太神奇了。。。。。。。
