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

1 添加用户

1.1 添加用户的对话框

• 渲染弹窗

addDialogVisible需要定义成

<!-- 添加用户对话框 -->
<el-dialog title="提示" :visible.sync="addDialogVisible" width="30%">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
  </span>
</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>
  <!-- 底部按钮区域 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addDialogVisible = false"
      >确 定</el-button
    >
  </span>
</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" }],
  },

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

参考官方文档中表单章节的自定义校验规则;

• 编写规则

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 完成编辑弹窗的绘制

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

<template slot-scope="scope">
<!-- 编辑按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)" >
</el-button>

• 实现点击事件方法（通过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>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editDialogVisible = false"
      >确 定</el-button
    >
  </span>
</el-dialog>

• 完成校验规则

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

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();
  }
},