后台管理系统

用户管理

1. 概述：

用户管理通过后台管理用户的账号信息，包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。

• 用户信息列表展示
• 添加用户
• 修改用户
• 删除用户
• 启用或禁用用户
• 用户角色分配

2. 实现功能

• 用户头部：面包屑导航 el-breadcrumb

        栅栏系统使用的是el-row

        表格布局是 el-table、el-pagination

• 用户状态列和操作列

        作用域插槽（为什么使用它，插槽（Slot）是vue的组件封装者 提供的能力。允许开发者在封装组件时，把 不确定的、希望由用户指定的部分 定义为插槽。）

        接口调用

async getUserList () {
      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
      if (res.meta.status !== 200) return this.$message.error('获取用户列表失败!')
      this.userList = res.data.userList
      this.total = res.data.total
    }

• 表格数据分页

 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
 </el-pagination>

 // 监听pagesize改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
 // 监听 页码值改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },

• 搜索功能

<el-col :span="8">
             <el-input placeholder="请输入内容" clearable v-model="queryInfo.query"
             @clear="getUserList">
        <el-button slot="append" icon="el-icon-search"
        @click="getUserList"></el-button>
 </el-input>
</el-col>

• 邮箱和手机号的验证（自定义表单验证规则）

 // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb
      }

      cb(new Error('请输入合法的邮箱'))
    }

    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        // 合法的手机号
        // 直接调用cb 表示校验通过
        return cb
      }

      cb(new Error('请输入合法的手机号'))
    }

表单提交，将用户信息作为参数，调用后台接口添加用户

• 编辑用户（难点）

        为什么不能直接获取本地数据（userList）或者说是id对应的页面上的数据，而是要向后台发起数据请求操作呢？

答：通过F12修改界面，那么本地的数据就会变动，真实的数据是存储在数据库的！

---

一般思路是；给编辑按钮绑定点击事件，向后台传递id这一请求参数，这样后台会返回数据。 

我当时实现编辑用户这个功能的时候在想，既然页面上有数据，又何必向后台发起请求呢？直接获取页面上的数据不可以吗？通过userList找到对应的id

后来网上找了找答案，说页面的数据可以通过f12调试面板进行修改，我便做了一些尝试：

1. 先编写代码，对userList进行循环，获取到id一致的信息
2. 通过控制面板，将第2个用户的id设置为500（和第一个用户一样）
3. 我再次点击link的编辑按钮，发现面板打印出了两个对象

可以看出，这是存在问题的，考虑得不够全面。一个项目如果要发布上线，我们要尽可能想到各种问题，而不只是实现某一功能。

在实现这一功能时，向后台请求数据才是正确的做法。

原文链接：Vue实战之 5.用户管理模块_用户管理模块有哪些内容_chnyi6_ya的博客-CSDN博客