vue与elementUI电商后台管理系统笔记05

实现首页的路由重定向

实现进入home页面在main那里路由跳转到welcome页面，也就是welcome页面嵌套在home页面里面

welcome是以子路由形式存在于home页面中

首先在components文件夹新建Welcome.vue文件

<template>
  <div>
    <h3>
      welcome
    </h3>
  </div>
</template>
​

配置router：router>index.js

import Welcome from '../components/Welcome.vue'

{
    path: '/home',
    component: Home,
    redirect: '/welcome',//只要访问home就重定向到Welcome
    children: [{ path: '/welcome', component: Welcome }]
  }//数组中放子路由

<!-- 右侧内容主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>

在home.vue的el-main主体区域那里加一个路由占位符

左侧菜单改造为路由链接

router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean	—	false

此时在el-menu标签中加一个router属性

<!-- 侧边栏菜单区域 -->（home.vue）
​
<el-menu background-color="#333744"
         text-color="#fff"
         active-text-color="#409EFF"
         unique-opened
         :collapse="isCollapse"
         :collapse-transition="false"
         :router="true">
         //也可以直接写router
          <!-- 激活（点击）的文本颜色 -->
          <!-- 一级菜单 -->
     <el-submenu :index="item.id+''"
                 v-for="item in menulist"
                 :key="item.id">
            <!-- 一级菜单模板区域 -->
​
        <template slot="title">
            <!-- 图标 -->
            <i :class="iconsObj[item.id]"></i>
            <!-- 文本 -->
            <span>{{item.authName}}</span>
        </template>
​
•            <!-- 二级菜单 -->
•       <el-menu-item   :index="subItem.id+''"
    •                   v-for="subItem in item.children"
    •                   :key="subItem.id">
•              <!-- 二级菜单模板区域 -->
​
            <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{subItem.authName}}</span>
            </template>
​
•       </el-menu-item>
•     </el-submenu>
•   </el-menu>

点击菜单栏的二级菜单用户列表跳转到了/110页面

110即为用户列表的id（二级菜单 :index="subItem.id+''"）

一般我们都是跳转到path，所以我们这里对index做一下更改

:index="subItem.path"

path本来就是字符串String类型所以不需要加空字符串' '

用户列表开发

实现点击用户列表在main主题区域显示列表页面

首先，在components文件下新建一个文件夹user，user下新建文件Users.vue,此文件先写好简单框架

<template>
  <div>
    <h3>用户列表组件</h3>
  </div>
</template>
​
<script>
export default {
​
}
</script>
<style lang="less" scoped>
</style>

然后，给此文件添加router路由，因为点击用户列表页面显示在main主题区域，所以要把此路由作为home的子路由

打开router下的index.js，新增以下两句

import Users from '../components/user/Users.vue'

children: [
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users }]

path后面是要跳转的地址要跟接口里面的path对应

最后实现效果如下，点击用户列表，在右侧主体区域展示出来

实现被点击菜单栏高亮

default-active	当前激活菜单的 index	string	—	—

（el-menu属性）

若default-active=“users”，则可以实现用户列表菜单栏一直高亮。但是直接赋值某个页面是写死的，只能是赋值的那个页面高亮。我们要实现动态的更改页面，使当前点击的页面高亮，我们可以在每次点击链接时，先将对应的地址保存到sessionStorage中，然后当我们刷新页面时，把那个值从sessionStorage中再取出来，动态的赋值给el-menu中的default-active

①

首先，给点击链接添加一个单击事件，事件传的值就是path地址

<!-- 二级菜单 -->
<el-menu-item :index="subItem.path"
			  v-for="subItem in item.children"
			  :key="subItem.id"
              @click="saveNavState(subItem.path)">

sessionStorage解读：

在编写程序过程中，用到sessionStorage方法存储一个数据，会大大方便代码的编写，使用sessionStorage创建一个本地的存储，以key/value的形式，该键值对可以直接保存在浏览器中供我们使用，sessionStorage用于临时存储同一窗口或标签页的数据，当关闭该窗口或者标签页后，该数据随之删除，如果想浏览器窗口关闭后还保留数据，则可以使用localStorage，该存储的数据会一直存在，除非自己手动删除。

常用语句就是存储，读取数据，

存储:window.sessionStorage.setItem(key,value);

读取:window.sessionStorage.getItem(key),返回value值

 // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
    }

点击用户列表链接，查看application中的sessionStorage中新增activePath

②现在我们要把users取出来

先在data中定义一个数组，把path放到这里面

// 被激活的链接地址
      activePath: ''

然后把数组动态绑定到default-active

 <el-menu background-color="#333744"
                 text-color="#fff"
                 active-text-color="#409EFF"
                 unique-opened
                 :collapse="isCollapse"
                 :collapse-transition="false"
                 :router="true"
                 :default-active="activePath">

现在，给数组activePath动态赋值

created () {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')//获取key
  },

加上上面这句，可以实现高亮，但是若再点击下一个链接不能高亮，说明它没转换过来，需要更新一下

 // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath//使用再次赋值，更新activePath
      //等号右边是此方法的参数就是subItem.path
    }

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

面包屑导航栏

elementUI官网找到面包屑导航栏，Breadcrumb，找到差不多样式的，复制到users.vue并做一下调整

<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-			breadcrumb-item>//点击首页跳转到home
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

Card卡片视图区域

<el-card>
      <!-- 搜索与添加区域 -->
      <el-input placeholder="请输入内容">
        <el-button slot="append"
                   icon="el-icon-search"></el-button>
      </el-input>
</el-card>
//添加卡片区域并加上一个带搜索的input输入框

但是卡片区域距离面包屑导航栏很近

assets>css>global.css添加全局样式：

.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

现在需要在input输入框的右边加一个按钮，所以要把输入框长度缩小

<el-card>
      <el-row :gutter="20">//gutter用于指定列与列之间的距离
        <el-col :span="8">
          <!-- 搜索与添加区域 -->
          <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>
//一行两列，一行一共24，input占8，button占4
</el-card>

获取用户列表数据

查阅文档

1.3.1. 用户数据列表

• 请求路径：users

• 请求方法：get

• 请求参数

参数名	参数说明	备注
query	查询参数	可以为空
pagenum	当前页码	不能为空
pagesize	每页显示条数	不能为空

使用axios.get请求数据并且打印输出：

data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      }
    }
  },
created () {
    this.getUserList()
  },
methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
      console.log(res)
    }//第一个参数为请求地址（路径），第二个请求参数为携带三个get参数get使用params（向服务器提交三个参数），这里的$http.post实际上就是axios.post请求
  }

data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      userlist: [],
      total: 0
    }
  },

created () {
    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('获取用户列表失败！')
      }
      // 返回200，请求成功
      //请求成功时，将请求到的数据保存到data的userlist中
      this.userlist = res.data.users
      this.total = res.data.total
      console.log(res)
    }
  }

用户列表数据渲染至表格

<!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        。。。
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="userlist"//绑定数据来源
                border//添加表格边框
                stripe>//表格各行变色（斑马纹）
        <el-table-column label="姓名"
        //label指定当前列标题，prop指定当前列的数据
                         prop="username"></el-table-column>
        <el-table-column label="邮箱"
                         prop="email"></el-table-column>
        <el-table-column label="电话"
                         prop="mobile"></el-table-column>
        <el-table-column label="角色"
                         prop="role_name"></el-table-column>
        <el-table-column label="状态"
                         prop="mg_state"></el-table-column>
        <el-table-column label="操作"></el-table-column>
      </el-table>
    </el-card>

全局样式表global.css

.el-table {
  margin-top: 15px;
  font-size: 12px;
}

表格添加索引列

在表格最前面添加该列：

<el-table-column type="index"></el-table-column>

index表示索引