20-Vue实战项目：电商管理系统（Element-UI）-用户列表

## 添加用户-渲染添加用户的对话框

1.按需导入对话框组件，在element.js中

// 全局导入
import {
      Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Menu, Submenu, MenuItem, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog } from 'element-ui'
// 局部注册
Vue.use(Dialog)

2.Dialog对话框结构

// title标题，visible控制对话框的显示与隐藏
<el-dialog title="提示" :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
  // 内容主体区
  <span>这是一段信息</span>
  // 底部按钮区 
  <span slot="footer" class="dialog-footer">
    // 按钮绑定click事件，用来控制对话框显示与隐藏
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

添加用户-渲染添加用户的表单

1.Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

// 通过model双向数据绑定到addForm
 <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>

      // 添加用户的表单数据
      addForm: {
     
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 添加表单的验证规则对象
      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' }
        ],
        mobile: [
          {
      required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }

添加用户-自定义邮箱和手机号的校验规则

1.设置变量，如checkEmail用来检验邮箱输入合法性，rule是验证规则，value是被验证的值，cb是回调函数。通过正则表达式验证regEmail.test(value),则返回回调函数，否则返回错误提示。

    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
     
      // 验证邮箱的正则表达式
      const regEmail = /^\w+@\w+(\.\w+)+$/
      if (regEmail.test(value)) {
     
        return cb()
      }
      // 返回一个错误提示
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
     
      const regMobile = /^1[34578]\d{9}$/
      if (regMobile.test(value)) {
     
        return cb()
      }
      // 返回一个错误提示
      cb(new Error('请输入合法的手机号码'))
    }

2.通过 validator 属性来使用校验规则。

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

添加用户-实现添加表单的重置操作

1.首先给对话框添加 close 事件

<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="30%" 
:before-close="handleClose" @close="addDialogClosed">

2.添加监听关闭的事件，通过 ref 调用 reset

// 监听添加对话框的关闭事件
    addDialogClosed () {
     
      this.$refs.addFormRef.resetFields()
    }

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

1.给“确定”按钮，添加 click 事件

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

2.通过箭头函数，检查valid的值是否正确，不正确直接返回；否则发起网络请求

 addUser () {
     
      this.$refs.addFormRef.validate(valid => {
     
        if (!valid) return
        // 可以发起真正的网络请求
      })
    }

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

1.点击“确定”按钮，预校验通过后，发起HTTP请求
this.$http.post发起请求后，有一个promise对象，我们可以通过await，async 优化。
并通过{ data：res } 解构赋值

    addUser () {
     
      this.$refs.addFormRef.validate(async valid => {
     
        if (!valid) return false
        // 可以发起真正的网络请求
        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()
      })
    }

修改用户-显示修改用户对话框

1.给“修改按钮”，添加点击事件

<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog()">
</el-button>

2.修改用户对话框，通过 ：visible.sync 的值控制显示与隐藏

          <!-- 修改用户的对话框 -->
          <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
            <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="editDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>

3.在 data 里面注册，默认为 false

      // 控制修改对话框的显示与隐藏
      editDialogVisible: false

4.当点击事件发生后，将 editDialogVisible 变为 true

   // 展示修改用户的对话框
    showEditDialog () {
     
      this.editDialogVisible = true
    }

在这里出现过一个小错误，没有将 showEditDialog 写在methods中，报错如下：
TypeError: “_vm.showEditDialog is not a function”

修改用户-点击Id查询对应的用户信息

1.打开修改用户对话框，根据用户ID，查询用户的旧数据，并且将之前的旧数据填充到对话框中。
通过形参（scope.row.id）的形式，拿到用户的ID

// 修改按钮
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>

2.获取到ID之后，发起HTTP请求

    // 展示修改用户的对话框
    async showEditDialog (id) {
     
      // console.log(id)
      const {
      data: res } = await this.$http.put('users/' + id)

      if (res.meta.status !== 200) {
     
        return this.$message.error('修改用户失败')
      }
      this.editForm = res.data
      this.editDialogVisible = true
    }

3.在data中定义一个空对象，存放对应的用户信息

      // 查询到的用户信息对象
      editForm: {
     }

修改用户-渲染修改用户的表单

1.修改用户对话框

<!-- 修改用户的对话框 -->
          <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
            <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>

2.增加校验规则

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

修改用户-实现修改用户表单的重置操作

1.首先给修改用户对话框绑定 close 事件

<el-dialog title="修改用户" :visible.sync="editDialogVisible" 
width="50%" @close="editDialogClosed">

2.在 methods 中定义方法,调用表单的引用 editFormRef ,然后调用 resetFields 函数 重置

    // 监听修改用户对话框的关闭事件
    editDialogClosed () {
     
      this.$refs.editFormRef.resetFields()
    }

修改用户-完成提交修改用户之前的表单预验证

1.用户点击“确定”按钮后，先对表单数据进行预验证，验证通过才发起真正的数据请求。
给“确定”按钮绑定 click 事件

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

2.引用表单的引用，然后调用 validate 函数进行验证，验证结果通过 valid 拿到

  editUserInfo () {
     
      this.$refs.editFormRef.validate(valid => {
     
        if (!valid) return 
        // 发起修改用户的数据请求
      })
    }

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

1.通过表单预验证后，则发起真正的网络请求
API文档

### 1.3.5. 编辑用户提交

- 请求路径：users/:id
- 请求方法：put
- 请求参数

| 参数名 | 参数说明 | 备注                        |
| ------ | -------- | --------------------------- |
| id     | 用户 id  | 不能为空 `参数是url参数:id` |
| email  | 邮箱     | 可以为空                    |
| mobile | 手机号   | 可以为空                    |

- 响应参数

| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |

- 响应数据

```json
/* 200表示成功，500表示失败 */
{
     
    "data": {
     
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "111",
        "email": "[email protected]"
    },
    "meta": {
     
        "msg": "更新成功",
        "status": 200
    }
}

2.发起 put 请求

  editUserInfo () {
     
      this.$refs.editFormRef.validate(async valid => {
     
        if (!valid) return false
        // 发起修改用户的数据请求
        // 发起修改用户的请求后，服务器会返回 promise，为了简化 promise 操作，加上 await ；
        // 在 valid 函数前加上 aysnc;在 await 返回的对象中解构赋值，解构出一个data属性，重命名为res
        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.editDialogVisible = false
        // 刷新数据列表
        this.getUserList()
        // 提示修改成功
        this.$message.success('更新用户信息成功！')
      })
    }

删除用户-弹框询问用户是否确认删除数据

1.采用组件 MessageBox 进行消息提示，首先引入，然后局部注册
以后所有组件都可以通过$confirm来弹出消息提示框

// 局部注册不用Vue.use
Vue.prototype.$confirm = MessageBox.confirm

2.给“删除”按钮，绑定click事件，根据 Id 删除对应的用户，通过 scope.row.id 获取对应用户 Id

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

3.首先获取用户选择（删除/取消）

    // 根据用户ID值，删除用户
    async removeUserById (id) {
     
      // 弹框询问用户是否删除数据，通过 confirmResult 来接受用户选择的结果
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
     
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
     
        return err
      })
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // 发起http请求，调用 delete 方法
      const {
      data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) {
     
        return this.$message.error('删除用户失败！')
      }
      // 删除成功则重新刷新列表
      this.$message.success('删除用户成功！')
      this.getUserList()
    }