Vue后台管理系统中添加数据的功能逻辑实现

简要

最近在仿写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>

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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' }
        ]
      },

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

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

 addUser () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const { 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()
      })

        

          
        
        
        

          

          AI 代码解读