element-ui的使用（六）

今天继续完善用户列表内容，把一些交互的东西加上！

昨天呢，整个用户列表的UI布局已经完成，但是一些交互操作还没有写，比如说：添加用户、编辑（修改）用户信息、删除用户信息等内容。

1.添加用户

我们在点击“添加用户”按钮时，页面会立刻弹出一个窗口，这个就是Dialog对话框，其中对话框中的内容选择的是嵌套表单的Dialog,对话框主要就是在表单中放置了4个文本框和对应的label标签,我们可以直接从element官网拿来自定义校验规则的Form表单

整体思路是这样：当用户点击添加按钮时，立即弹出Dialog对话框，然后用户输入新添加的信息，每一个文本框都有对应的校验规则，通过好，文本框显示绿色，在所有信息填写完成后，点击提交，整个表单会再次验证以下，看是否有不合法的输入，如若无误，就会将表单信息提交给服务器，进行添加数据。

1.1 点击按钮弹出Dialog对话框

为了控制Dialog对话框的显示与消失，我们需要预先定义一个dialogFormVisible:false,Dialog中:visible.sync="dialogFormVisible"属性可以控制Dialog对话框的显示与消失

visible 在官方文档中的说明是：“是否显示Dialog，支持.sync修饰符”，visible实则是属性绑定，来表示弹出框是否隐藏或显示，值在data中进行返回，dialogFormVisible(本段代码中visible的值)为true时，弹框显示，为false时，弹框隐藏。
让我们再看代码 : visible.sync 这里的 .sync 是什么意思呢，官方给出的解释就是一种语法糖的意思
其实他的作用就是实现子组件修改父组件的属性的值 子组件触发了父组件的函数进行修改
注意：.sync 修饰符的 v-bind 不能和表达式一起使用（这又是个小细节）

之后，为添加用户按钮绑定事件,通过改变dialogFormVisible的值，来控制Dialog

<el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>

有一个小细节，就是在后面用户输入完信息提交成功后。我们需要在关闭对话框的同时，将表单的数据重置，避免下次打开还是上次的数据
需要用到Dialog的close()方法和Form的resetFields()方法

1.2 form表单的验证

form表单验证是实际项目中必不可少的一部分，只要用户输入信息，前端就必须要进行验证，确保传递给后端的数据是合法的，防止XSS攻击

首先需要了解form表单的几个重要属性：

• model是表单数据对象，收集我们输入的数据
• rules表单验证规则

form-item也有几个重要属性：

• prop是表单域model字段，在使用validate、resetFields方法时，时必须要写的属性（传入 Form 组件的 model 中的字段）
• rules表单验证规则

 <el-form
        label-width="70px"
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        class="demo-ruleForm"
      >
        <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 autocomplete="off" v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input autocomplete="off" v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input autocomplete="off" v-model="addForm.mobile"></el-input>
        </el-form-item>
  </el-form>

     // 添加用户(编辑)的校验规则
      addFormRules: {
        username: [
          {
            required: true,
            message: '请输入用户名称！',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码！',
            trigger: 'blur',
          },
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱！',
            trigger: 'blur',
          },
          //自定义校验email规则
          {
            validator: checkEmail,
            trigger: 'blur',
          },
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号！',
            trigger: 'blur ',
          },
          //自定义校验mobile规则
          {
            validator: checkMobile,
            trigger: 'blur',
          },
        ],
      },

这里我们为email字段和mobile字段，增加了自定义的验证规则

    // 自定义邮箱的验证
    const checkEmail = (rule, value, callback) => {
      let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
      if (reg.test(value)) return callback()
      callback(new Error('邮箱格式错误，请重新输入！'))
    }

    // 自定义手机号的验证
    const checkMobile = (rule, value, callback) => {
      let reg =
        /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (reg.test(value)) return callback()
      callback(new Error('手机号格式错误，请重新输入！'))
    }

表单验证通过后，我们点击确定后，还需要总体再次验证一次，看是否有不合法的字段，如果没有问题，就直接提交给服务器，存储在数据库中！

validate()是form的默认事件，任一表单项被校验后会触发,作为向服务器发送数据前的最后一次校验,如果有错误，valid为false,否则为true

      // 点击添加按钮，添加新用户
      addUser() {
      this.$refs.addFormRef.validate(async (valid) => {
        // console.log(valid)
        if (!valid) return

        // 校验成功！可以发起请求
        const { data: res } = await this.$http.post('users', this.addForm)
       
        if (res.meta.status != 201)
          this.$message.danger('添加用户失败 ，请重新尝试')
        this.$message.success('添加用户成功')
        this.dialogFormVisible = false
        this.getUserList()
      })
    },

2.编辑（修改）用户信息

原理其实和添加用户信息一致，只不过多了一个步骤，就是我们再点击编辑按钮弹出Dialog对话框时，会显示我们的用户信息，这个是需要我们提前向服务器请求获取的

<el-button type="primary" icon="el-icon-edit" size="mini"
 @click="editUser(scope.row.id)"></el-button>

scope是作用域插槽中定义一个对象(这里对象被定义为scope)来存储插槽上绑定的数据的用法
当前行数据的获取也会用到插槽,scope相当于一行的数据，scope.row相当于当前行的数据对象

根据数据对象的id向服务器请求数据，并将返回的数据存在editForm数组中，所以form表单就可以获取并显示对应的数据了。

     async editUser(id){

      this.dialogFormVisible2=true;
      
      const {data:res}=await this.$http.get(`users/${id}`)
      console.log(res.data)
      this.editForm=res.data
      
    },

然后其他的步骤，和添加用户一致。

3.删除用户信息

删除用户信息，也是从作用域插槽scope中拿到id，然后提交给服务器，删除id对象的用户信息，
和上面都类似

这里主要说明以下MessageBox弹框组件，我们在删除信息时，不可能是当时点击就马上删除了，需要给用户二次考虑的机会，防止误点而删除，影响用户体验！

区分confim和prompt:confim是弹窗,点击确定或取消；而prompt弹窗带输入框，可输入数据

疑问，为什么MessageBox的使用不是Vue.use()而选择的Vue.prototype.$confirm

这里需要说明一下vue.prototype是在实例上挂载属性或者方法，而Vue.use()是引入插件，我们这里需要使用的是MessageBox的confirm()方法,所以直接定义成Vue.prototype.$confirm = MessageBox.confirm可以在全局使用，会很方便

   // 删除用户单条数据
   removeUser(id){
    this.$confirm("确定删除吗？","提示",{
      confirmButtontext:"确定",
      cancelButtonText:"取消",
      type:"warning"
    }).then(async ()=>{
      const {data:res}=await this.$http.delete(`users/${id}`)
      // console.log(res)
      if(res.meta.status!=200) this.$message.danger("删除用户失败！")
      this.$message.success("删除成功")
      this.getUserList()
    }).catch(()=>{
      this.$message.info("取消删除")
    })
  }