项目笔记-基于VUE2.0的电商后台管理系统（二）

第三部分：用户管理页面

首先，在src目录下的component文件中建立Users.vue组件，然后将该组件路径加入到router.js中。

{
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [{
        path: '/welcome',
        component: Welcome
      },
        {
          path: '/users',
          component: Users
        },

接下来，在页面的最顶端加入<el-breadcrumb>面包屑组件，构建图中的层级效果：

<el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

然后，设置页面内的table展示列表，展示每组数据的相关属性，以及定义该列表每页展示的数据条数，数据getUserList方法，在方法中向接口发送get请求请求数据，将请求得到的数据保存到创建好的userlist对象中，在created钩子中调用该方法。

<el-table
          :data="userlist"
          style="width: 100%"
          :border="true"
          :stripe="true">
          <el-table-column type="index">

          </el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="180">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="电话">
          </el-table-column>
          <el-table-column
            prop="role_name"
            label="角色">
          </el-table-column>
          <el-table-column
            prop="mg_state"
            label="状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="180px">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                         @click="showEditDialog(scope.row.id)"></el-button>

              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
              <el-tooltip effect="dark" content="分配角色" placement="top" :enterable=false>
                <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
              </el-tooltip>

            </template>
          </el-table-column>
        </el-table>

created () {
      this.getUserList()
    },
<-------------------------------------->
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.users
        this.total = res.data.total
        console.log(res)

      },

接下来是设置一个input框，用来输入关键字搜索列表中的数据。在input中利用v-model把输入的内容传递给queryInfo对象，再设置一个button按钮，点击后调用getUserList方法，重新获得列表，在请求数据时利用params把queryInfo对象传递过去，得到与其相关联的数据。

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

接下来，实现添加数据的功能，首先引入一个el-dialog标签，再在input列表边设置添加用户按钮，给dialog标签一个默认值false，使其不显示，再点击添加用户按钮后使false变为true，此时dialog即可显示出来。

 再dialog页面中设置用户名，密码，邮箱，手机这四个输入框，当输入后分布将这四个数据绑定到addForm对象中，并且在右下角的确定按钮中绑定点击事件addForm，该方法将addForm中的数据利用post方法发送给服务器，然后在该方法里面再次调用getUserList方法，此时即可得到添加数据后的新数据。

<el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed">
      <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="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
<--------------------------------------------------------------------->
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()
        })
      },

后面的对于列表中已有的数据的更改类似于添加数据，在此就不再加以赘述。