前端开发Vue项目实战：电商后台管理系统（三）------ 用户管理模块 （用户列表 /添加修改删除用户）

1. 用户列表

1.1 通过路由的形式展示用户列表组件

1. 新建用户列表组件 components/user/Users.vue
2. 在router.js中导入子级路由组件Users.vue，并设置路由规则

import Users from './components/user/Users.vue'
const routes = [
{
   
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [{
    path: '/welcome', component: Welcome },
      {
    path: '/users', component: Users }]
  }
]

1.2 在sessionStorage中保存左侧菜单的激活状态

1. 当点击二级菜单的时候，被点击的二级子菜单并没有高亮，我们需要正在被使用的功能高亮显示，可以通过设置el-menu的default-active属性来设置当前激活菜单的index
2. 给所有的二级菜单添加点击事件,并将path值作为方法的参数

<!-- 二级菜单 -->
<el-menu-item @click="saveNavState('/'+ subItem.path)">

3. 在saveNavState方法中将path保存到sessionStorage中
4. 然后在数据中添加一个activePath绑定数据，并将el-menu的default-active属性设置为activePath
5. 最后在created中将sessionStorage中的数据赋值给activePath

<el-menu :default-active="activePath">

data() {
   
  return {
   
    // 被激活的链接地址
    activePath: ''
  }
},
created() {
   
  this.activePath = window.sessionStorage.getItem('activePath')
},
methods: {
   
  // 保存链接的激活状态
  saveNavState(activePath) {
   
    window.sessionStorage.setItem('activePath', activePath)
    this.activePath = activePath
  }
}

1.3 绘制用户列表的基本UI结构

1. 使用element-ui 面包屑 组件完成顶部导航路径

// element.js 按需导入
import {
    Breadcrumb,BreadcrumbItem } from 'element-ui'
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)

//users.vue
// 面包屑导航区域 
<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>

2. 使用element-ui卡片组件完成主体表格；
   再使用element-ui输入框完成搜索框及搜索按钮，此时我们需要使用栅格布局来划分结构，然后再使用el-button制作添加用户按钮
   
   
   

// element.js 按需导入
import {
   Card,Row,Col } from 'element-ui'
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)


// Users.vue
//卡片视图 
<el-card>
     //搜索与添加区域
     //el-row el-col 实现栅格布局 
     //Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0 
     <el-row :gutter="30">
         <el-col :span="10">
             <el-input placeholder="请输入内容">
                 <el-button slot="append" icon="el-icon-search"></el-button>
             </el-input>
         </el-col>
         <el-col :span="4">
             <el-button type="primary">添加用户</el-button>
         </el-col>
     </el-row>
 </el-card>

3. 在assets/css/global.css中添加样式

.el-breadcrumb {
   
    margin-bottom: 20px;
    font-size: 12px;
}

.el-card {
   
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

1.4 获取用户列表数据

export default {
   
    data() {
   
        return {
   
            //获取用户列表的参数对象
            //建议把get参数都定义在data数据中
            queryInfo:{
   
                query:'',
                pagenum:1, //当前页数
                pagesize:2  //当前每页显示多少条数据
            },
            userlist:[],
            total:0, //总数据条数

        }
    },
    created() {
   
        //在created生命周期函数中发起请求
        //页面创建期间就会调用getUserList函数，发起get请求
        this.getUserList()
    },
    methods: {
   
        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) //打印结果见下图
        }
    },
}

1.5 使用el-table组件渲染用户列表

请求返回的响应数据，即 :data=“userlist”

{
   
  "data": {
   
	"totalpage": 5,
	"pagenum": 4,
	"users": [
	  {
   
		"id": 25,
		"username": "tige117",
		"mobile": "18616358651",