User组件实现

###今日目标

1.实现后台首页的基本布局

2.实现左侧菜单栏

3.实现用户列表展示

4.实现添加用户

###1.后台首页基本布局

打开Home.vue组件，进行布局：

```

 

  Header 退出

 

 

   

    Aside

   

    Main

 

```

默认情况下，跟element-ui组件同名的类名可以帮助我们快速的给对应的组件添加样式，如：

```

.home-container {

  height: 100%;

}

.el-header{

  background-color:#373D41;

}

.el-aside{

  background-color:#333744;

}

.el-main{

  background-color:#eaedf1;

}

```

###2.顶部布局，侧边栏布局

```

```

###3.axios请求拦截器

后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限

在main.js中添加代码，在将axios挂载到vue原型之前添加下面的代码

```

//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息

axios.interceptors.request.use(config=>{

  //为请求头对象，添加token验证的Authorization字段

  config.headers.Authorization = window.sessionStorage.getItem("token")

  return config

})

```

###4.请求侧边栏数据

```

```

通过v-for双重循环渲染左侧菜单

```

  background-color="#333744"

  text-color="#fff"

  active-text-color="#ffd04b">

 

 

   

   

   

   

     

     

   

 

```

###5.设置激活子菜单样式

通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色

通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置，我们需要在项目中使用第三方字体图标

在数据中添加一个iconsObj：

```

iconsObj: {

        '125':'iconfont icon-user',

        '103':'iconfont icon-tijikongjian',

        '101':'iconfont icon-shangpin',

        '102':'iconfont icon-danju',

        '145':'iconfont icon-baobiao'

      }

```

然后将图标类名进行数据绑定，绑定iconsObj中的数据：

为了保持左侧菜单每次只能打开一个，显示其中的子菜单，我们可以在el-menu中添加一个属性unique-opened

或者也可以数据绑定进行设置(此时true认为是一个bool值，而不是字符串) :unique-opened="true"

###6.制作侧边菜单栏的伸缩功能

在菜单栏上方添加一个div

```

       

       

         

         

|||

         

         

          :collapse="isCollapse"

          :collapse-transition="false"

          ......

```

然后给div添加样式，给div添加事件：

|||

###7.在后台首页添加子级路由

新增子级路由组件Welcome.vue

在router.js中导入子级路由组件，并设置路由规则以及子级路由的默认重定向

打开Home.vue，在main的主体结构中添加一个路由占位符

制作好了Welcome子级路由之后，我们需要将所有的侧边栏二级菜单都改造成子级路由链接

我们只需要将el-menu的router属性设置为true就可以了，此时当我们点击二级菜单的时候，就会根据菜单的index

属性进行路由跳转,如: /110,

使用index id来作为跳转的路径不合适，我们可以重新绑定index的值为  :index="'/'+subItem.path"

###8.完成用户列表主体区域

新建用户列表组件  user/Users.vue

在router.js中导入子级路由组件Users.vue，并设置路由规则

当点击二级菜单的时候，被点击的二级子菜单并没有高亮，我们需要正在被使用的功能高亮显示

我们可以通过设置el-menu的default-active属性来设置当前激活菜单的index

但是default-active属性也不能写死，固定为某个菜单值

所以我们可以先给所有的二级菜单添加点击事件,并将path值作为方法的参数

@click="saveNavState('/'+subItem.path)"

在saveNavState方法中将path保存到sessionStorage中

saveNavState( path ){

  //点击二级菜单的时候保存被点击的二级菜单信息

  window.sessionStorage.setItem("activePath",path);

  this.activePath = path;

}

然后在数据中添加一个activePath绑定数据，并将el-menu的default-active属性设置为activePath

最后在created中将sessionStorage中的数据赋值给activePath

this.activePath = window.sessionStorage.getItem("activePath")

###9.绘制用户列表基本结构

A.使用element-ui面包屑组件完成顶部导航路径(复制面包屑代码，在element.js中导入组件Breadcrumb,BreadcrumbItem)

B.使用element-ui卡片组件完成主体表格(复制卡片组件代码，在element.js中导入组件Card)，再使用element-ui输入框完成搜索框及搜索按钮，

此时我们需要使用栅格布局来划分结构(复制卡片组件代码，在element.js中导入组件Row，Col)，然后再使用el-button制作添加用户按钮

```

   

用户列表组件

   

   

        首页

        用户管理

        用户列表

   

   

   

       

       

           

               

                   

               

           

           

                添加用户

           

       

   

```

###10.请求用户列表数据

```

```

###11.将用户列表数据展示

使用表格来展示用户列表数据，使用element-ui表格组件完成列表展示数据(复制表格代码，在element.js中导入组件Table,TableColumn)

在渲染展示状态时，会使用作用域插槽获取每一行的数据

再使用switch开关组件展示状态信息(复制开关组件代码，在element.js中导入组件Switch)

而渲染操作列时，也是使用作用域插槽来进行渲染的，

在操作列中包含了修改，删除，分配角色按钮，当我们把鼠标放到分配角色按钮上时

希望能有一些文字提示，此时我们需要使用文字提示组件(复制文字提示组件代码，在element.js中导入组件Tooltip),将分配角色按钮包含

代码结构如下：

```

   

   

   

   

   

   

       

   

   

       

   

```

###12.实现用户列表分页

A.使用表格来展示用户列表数据，可以使用分页组件完成列表分页展示数据(复制分页组件代码，在element.js中导入组件Pagination)

B.更改组件中的绑定数据

```

           

           

```

C.添加两个事件的事件处理函数@size-change，@current-change

```

handleSizeChange(newSize) {

  //pagesize改变时触发，当pagesize发生改变的时候，我们应该

  //以最新的pagesize来请求数据并展示数据

  //   console.log(newSize)

  this.queryInfo.pagesize = newSize;

  //重新按照pagesize发送请求，请求最新的数据

  this.getUserList();  

},

handleCurrentChange( current ) {

  //页码发生改变时触发当current发生改变的时候，我们应该

  //以最新的current页码来请求数据并展示数据

  //   console.log(current)

  this.queryInfo.pagenum = current;

  //重新按照pagenum发送请求，请求最新的数据

  this.getUserList();  

}

```

###13.实现更新用户状态

当用户点击列表中的switch组件时，用户的状态应该跟随发生改变。

A.首先监听用户点击switch组件的事件，并将作用域插槽的数据当做事件参数进行传递

```

```

B.在事件中发送请求完成状态的更改

```

async userStateChanged(row) {

  //发送请求进行状态修改

  const { data: res } = await this.$http.put(

    `users/${row.id}/state/${row.mg_state}`

  )

  //如果返回状态为异常状态则报错并返回

  if (res.meta.status !== 200) {

    row.mg_state = !row.mg_state

    return this.$message.error('修改状态失败')

  }

  this.$message.success('更新状态成功')

},

```

###14.实现搜索功能

添加数据绑定，添加搜索按钮的点击事件(当用户点击搜索按钮的时候，调用getUserList方法根据文本框内容重新请求用户列表数据)

当我们在输入框中输入内容并点击搜索之后，会按照搜索关键字搜索，我们希望能够提供一个X删除搜索关键字并重新获取所有的用户列表数据，只需要给文本框添加clearable属性并添加clear事件，在clear事件中重新请求数据即可

```

   

       

   

```

###15.实现添加用户

A.当我们点击添加用户按钮的时候，弹出一个对话框来实现添加用户的功能，首先我们需要复制对话框组件的代码并在element.js文件中引入Dialog组件

B.接下来我们要为“添加用户”按钮添加点击事件，在事件中将addDialogVisible设置为true，即显示对话框

C.更改Dialog组件中的内容

```

   

   

       

           

       

       

           

       

       

           

       

       

           

       

   

   

   

        取 消

        确 定

   

```

D.添加数据绑定和校验规则：

```

data() {

  //验证邮箱的规则

  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('请输入合法的手机号码'))

  }

  return {

    //获取查询用户信息的参数

    queryInfo: {

      // 查询的条件

      query: '',

      // 当前的页数，即页码

      pagenum: 1,

      // 每页显示的数据条数

      pagesize: 2

    },

    //保存请求回来的用户列表数据

    userList: [],

    total: 0,

    //是否显示添加用户弹出窗

    addDialogVisible: false,

    // 添加用户的表单数据

    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' },

          { validator:checkEmail, message: '邮箱格式不正确，请重新输入', trigger: 'blur'}

      ],

      mobile: [

          { required: true, message: '请输入手机号码', trigger: 'blur' },

          { validator:checkMobile, message: '手机号码不正确，请重新输入', trigger: 'blur'}

      ]

    }

  }

}

```

E.当关闭对话框时，重置表单

给el-dialog添加@close事件，在事件中添加重置表单的代码

```

methods:{

  ....

  addDialogClosed(){

      //对话框关闭之后，重置表达

      this.$refs.addFormRef.resetFields();

  }

}

```

F.点击对话框中的确定按钮，发送请求完成添加用户的操作

首先给确定按钮添加点击事件，在点击事件中完成业务逻辑代码

```

methods:{

  ....

  addUser(){

      //点击确定按钮，添加新用户

      //调用validate进行表单验证

      this.$refs.addFormRef.validate( async valid => {

          if(!valid) return this.$message.error("请填写完整用户信息");

          //发送请求完成添加用户的操作

          const {data:res} = await this.$http.post("users",this.addForm)

          //判断如果添加失败，就做提示

          if (res.meta.status !== 200)

              return this.$message.error('添加用户失败')

          //添加成功的提示

          this.$message.success("添加用户成功")

          //关闭对话框

          this.addDialogVisible = false

          //重新请求最新的数据

          this.getUserList()

      })

  }

}

```