简要

最近在仿写vue后台管理系统，写到了数据的添加，所以记录一下
首先看一下页面：

效果实现

点击添加用户按钮能够弹出输入框，然后输入信息，完成向数据库添加数据并展现到页面上，下面来说一下具体的实现过程：

首先，这里我是利用后台接口api完成数据的提交和展示，通过api对数据进行增查删改，大家根据自己需求作出调整，api部分不做叙述

第一步：渲染添加用户的对话框

1.利用element-ui组件绘制对话框，这里用到了element中Table，Table-column,Button组件，组件详情点我查看官方文档。

<!-- 添加用户的对话框 --><el-dialog title="添加用户" :visible.sync="addDialogVisible" @close="addDialogClosed" width="30%"><!-- 内容主体区 --><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px"><el-form-item label="用户名" prop="username"><el-input v-model="addForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="addForm.password"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="addForm.email"></el-input></el-form-item><el-form-item label="手机号" prop="mobile"><el-input v-model="addForm.mobile"></el-input></el-form-item></el-form><!-- 底部区域 --><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="addUser">确 定</el-button></span></el-dialog>

2.给按钮绑定点击事件，通过el-dialog组件中:visible.sync的属性实现对话框的出现和小时，这里直接在data中添加 addDialogVisible: false,通过点击添加用户按钮使其值为true显示对话框

addDialogVisible: false,// 控制添加用户对话框的显示与隐藏

3.给表单添加校验规则，给el-form组件绑定 :rules=“addFormRules”，然后在data中添加表单验证规则，邮箱和手机号需要使用自定义校验规则，详情可以参考另一篇文章 如何自定义校验规则

// 添加表单的验证规则对象addFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 10, message: '用户名长度在3个到10分字符之间', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 15, message: '密码长度在6个到15分字符之间', trigger: 'blur' }],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' }],mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' }]},

第二步：调用api接口完成用户数据的添加

1.为表单确定按钮添加点击函数 addUser，在methods中写函数的方法，我里是向接口发送post请求完成数据的添加。

 addUser () {this.$refs.addFormRef.validate(async valid => {if (!valid) returnconst { data: res } = await this.$http.post('users', this.addForm)if (res.meta.status !== 201) {this.$message.error('添加用户失败')}this.$message.success('添加用户成功！')// 隐藏添加用户的对话框this.addDialogVisible = false// 重新获取用户列表数据this.getUserList()})