笔记6：用户操作【Vue实战项目：电商管理系统（Element-UI）】

Love The Way You Lie 2022-08-30 12:57 213阅读 0赞

### 文章目录 ###

*   *  1 添加用户
     *   *  1.1 添加用户的对话框
         *  1.2 添加用户的表单
         *  1.3 自定义邮箱和手机号的校验规则
         *  1.4 实现添加表单的重置操作
         *  1.5 实现添加用户前的表单预校验
         *  1.6 调用API接口完成添加用户的操作
     *  2 修改用户
     *   *  2.1 完成编辑弹窗的绘制
         *  2.2 提交表单完成用户信息的修改
     *  3 删除用户

## 1 添加用户 ##

### 1.1 添加用户的对话框 ###

*  渲染弹窗

> addDialogVisible需要定义成

<el-dialog title="提示" :visible.sync="addDialogVisible" width="30%">
 这是一段信息
 
 <el-button @click="addDialogVisible = false">取 消</el-button>
 <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
 
 </el-dialog>

### 1.2 添加用户的表单 ###

*  渲染表单样式

<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%">
 
 <el-form
 :model="addForm"
 :rules="addFormRules"
 ref="addFormRef"
 label-width="100px"
 >
 <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>
 
 
 <el-button @click="addDialogVisible = false">取 消</el-button>
 <el-button type="primary" @click="addDialogVisible = false"
 >确 定</el-button
 >
 
 </el-dialog>

*  定义变量和规则

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

![在这里插入图片描述][68c6ba96847c7d04647fa4e163a64808.png]

### 1.3 自定义邮箱和手机号的校验规则 ###

> 参考[官方文档][Link 1]中`表单`章节的`自定义校验规则`;

*  编写规则

data() { 
        var checkEmail = (rule, value, callback) => { 
          // 邮箱正则表达式
          const regEmail =
            /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
          if (regEmail.test(value)) { 
            return callback();
          }
          callback(new Error("请输入合法的邮箱"));
        };
        var checkmobile = (rule, value, callback) => { 
          // 验证手机号的正则表达
          const regMobile =
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
          if (regMobile.test(value)) { 
            return callback();
          }
          callback(new Error("请输入合法的手机号码"));
        };
        return { ...};
       },

*  添加规则

email: [
      {  required: true, message: "请输入邮箱", trigger: "blur" },
      {  validator: checkEmail, trigger: "blur" },
    ],
    mobile: [
      {  required: true, message: "请输入手机号", trigger: "blur" },
      {  validator: checkmobile, trigger: "blur" },
    ],

### 1.4 实现添加表单的重置操作 ###

在关闭dialog时，进行重置表单的操作，避免关闭再打开弹窗，仍然展示上一次触发的规则判断。

*  给dialog绑定关闭事件

<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed()">

*  实现方法

addDialogClosed(){ 
        this.$refs.addFormRef.resetFields()
    },

### 1.5 实现添加用户前的表单预校验 ###

在提交添加用户信息前，需要对填写的信息进行预校验，来判断是否需要发起添加用户的请求

*  给弹窗的确定按钮绑定点击事件

<el-button type="primary" @click="addUser()">确 定</el-button>

*  实现点击方法

addUser(){ 
        this.$refs.addFormRef.validate(valid => { 
            if(!valid) return
            // 发起添加用户的网络请求
        })
    },

### 1.6 调用API接口完成添加用户的操作 ###

完成添加用户的方法能实现

> 接口文档查看`1.3.2. 添加用户`

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) { 
          return this.$message.error("添加用户失败");
        }
    
        this.$message.success("添加用户成功");
        this.addDialogVisible = false;
        this.getUserList();
      });

## 2 修改用户 ##

### 2.1 完成编辑弹窗的绘制 ###

*  编辑按钮上绑定点击事件

*  实现点击事件方法（通过id获取用户信息）

editDialogVisible: false,
    eidtForm: { },

async showEditDialog(id) { 
      // 通过接口获取用户信息
      const {  data: res } = await this.$http.get("users/" + id);
    
      if (res.meta.status !== 200) { 
        return this.$message.error("查询用户信息失败");
      }
      this.eidtForm = res.data;
      console.log(this.eidtForm);
    
      this.editDialogVisible = true;
    },
    // 监听修改用户对话框的关闭事件
    editDialogClosed(){ 
        this.$refs.editFormRef.resetFields();
    }

*  绘制弹框

<el-dialog
 title="编辑用户信息"
 :visible.sync="editDialogVisible"
 width="50%"
 @close="editDialogClosed"
 >
 <el-form
 :model="editForm"
 :rules="editFormRules"
 ref="editFormRef"
 label-width="70px"
 >
 <el-form-item label="用户名">
 <el-input v-model="editForm.username" disabled></el-input>
 </el-form-item>
 <el-form-item label="邮箱" prop="email">
 <el-input v-model="editForm.email"></el-input>
 </el-form-item>
 <el-form-item label="手机号" prop="mobile">
 <el-input v-model="editForm.mobile"></el-input>
 </el-form-item>
 </el-form>
 
 <el-button @click="editDialogVisible = false">取 消</el-button>
 <el-button type="primary" @click="editDialogVisible = false"
 >确 定</el-button
 >
 
 </el-dialog>

*  完成校验规则

// 控制编辑信息弹窗展示
    eidtFormRules: { 
        email: [
          {  required: true, message: "请输入邮箱", trigger: "blur" },
          {  validator: checkEmail, trigger: "blur" },
        ],
        mobile: [
          {  required: true, message: "请输入手机号", trigger: "blur" },
          {  validator: checkMobile, trigger: "blur" },
        ],
    },

![在这里插入图片描述][fd0f73ecbaf7f069b246bcc197f596de.png]

### 2.2 提交表单完成用户信息的修改 ###

*  给修改信息弹窗的确定按钮绑定点击事件

<el-button type="primary" @click="editUserInfo()">确 定</el-button>

*  完成点击确认按钮后的提交更新用户信息操作

// 更新用户信息
    editUserInfo() { 
      this.$refs.editFormRef.validate(async (valid) => { 
        if (!valid) return;
    
        //发起添加用户的网络请求
        const {  data: res } = await this.$http.put("users/" + this.editForm.id, 
        { email: this.editForm.email, mobile: this.editForm.mobile});
    
        if (res.meta.status !== 200) { 
          return this.$message.error("更新用户信息失败");
        }
    
        this.$message.success("更新用户信息成功");
        this.editDialogVisible = false;
        this.getUserList();
      });

## 3 删除用户 ##

*  给删除按钮绑定点击事件

<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>

*  实现删除方法

// 根据id删除用户数据
    async removeUserById(id) { 
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        { 
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => { 
        return err;
      });
    
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串cancel
      console.log(confirmResult);
      if (confirmResult === "cancel") { 
        this.$message.info("已取消删除");
      } else { 
        const {  data: res } = await this.$http.delete("users/" + id);
        if (res.meta.status !== 200) { 
          userinfo.mg_state = !userinfo.mg_state;
          return this.$message.error("删除用户失败！");
        }
    
        this.$message.success("删除用户成功！");
        this.getUserList();
      }
    },

[68c6ba96847c7d04647fa4e163a64808.png]: /images/20220829/fdeea8fe2608459ca413262e464507fd.png
[Link 1]: https://element.eleme.cn/#/zh-CN/component/form
[fd0f73ecbaf7f069b246bcc197f596de.png]: /images/20220829/010e03f40f3e4209b1d225eb0d6d34fb.png