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就重定向到Welcomechildren: [{ 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.usersthis.total = res.data.totalconsole.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表示索引