前言

前言
一、主页布局
- 1.1 整体布局
- 1.2 头部区域布局
- 1.3 左侧菜单布局
- - 1.3.1 静态布局
  - 1.3.2 通过axios请求拦截器来进行权限验证
  - 1.3.3 通过axios获取左侧菜单数据
  - 1.3.4 通过v-for双重循环渲染左侧菜单
  - 1.3.5 其他设置
  - 1.3.6 实现左侧菜单的收缩功能
- 1.4 右侧主体区域布局
- - 1.4.1 新增默认子级路由组件
  - 1.4.2 给左侧菜单添加路由链接
  - 1.4.3 给左侧菜单添加点击高亮效果
总结

一、主页布局

1.1 整体布局

打开src-components-home.vue文件，进行布局，这里使用element-ui的布局组件：
<el-container class="home-container"><!-- 头部区域 --><el-header>Header<el-button type="info" @click="logout"> 退出 </el-button></el-header><!-- 页面主体区域 --><el-container><!-- 侧边栏 --><el-aside width="200px">Aside</el-aside><!-- 主体结构 --><el-main>Main</el-main></el-container>
</el-container>接着要设计样式和背景颜色，默认情况下，跟element-ui组件同名的类名可以帮助我们快速的给对应的组件添加样式，如下所示：
.home-container {height: 100%;
}
.el-header{background-color:#373D41;
}
.el-aside{background-color:#333744;
}
.el-main{background-color:#eaedf1;
}注意：如果发现组件没有生效，是因为没有按需导入element-ui组件，要在plugins-element.js中导入

最终的效果图如下：

1.2 头部区域布局

template部分代码如下：
<!-- 头部区域 -->
<el-header><div><img src="../assets/heima.png" alt=""><span>电商后台管理系统</span></div><el-button type="info" @click="logout">退出</el-button>
</el-header>style部分代码如下：
.el-header {background-color: #373d41;display: flex;justify-content: space-between;padding-left: 0;align-items: center;color: #fff;font-size: 20px;> div {display: flex;align-items: center;span {margin-left: 15px;}}
}

1.3 左侧菜单布局

1.3.1 静态布局

这里使用el-menu组件，静态部分代码如下：
<!-- 侧边栏 -->
<el-aside width="200px"><!-- 侧边栏菜单 --><el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"><!-- 一级菜单 --><el-submenu index="1"><!-- 一级菜单模板 --><template slot="title"><!-- 图标 --><i class="el-icon-location"></i><!-- 文本 --><span>导航一</span></template><!-- 二级子菜单 --><el-menu-item index="1-4-1"><!-- 二级菜单模板 --><template slot="title"><!-- 图标 --><i class="el-icon-location"></i><!-- 文本 --><span>子菜单一</span></template></el-menu-item></el-submenu></el-menu>
</el-aside>

1.3.2 通过axios请求拦截器来进行权限验证

后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限
在main.js中添加代码如下：
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config=>{//为请求头对象，添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem("token")return config
})

1.3.3 通过axios获取左侧菜单数据

script部分代码如下所示：
export default {data() {return {// 左侧菜单数据menuList: []}},created() {// 在created阶段请求左侧菜单数据this.getMenuList()},methods: {async getMenuList() {// 发送请求获取左侧菜单数据const { data: res } = await this.$http.get('menus')if (res.meta.status !== 200) return this.$message.error(res.meta.msg)this.menuList = res.data}}
}

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

<el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"><!-- 一级菜单 --><el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id"><!-- 一级菜单模板 --><template slot="title"><!-- 图标 --><i class="el-icon-location"></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-location"></i><!-- 文本 --><span>{{subItem.authName}}</span></template></el-menu-item></el-submenu>
</el-menu>

1.3.5 其他设置

1、通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色
2、通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置
3、通过在el-menu中添加一个属性unique-opened，可以保持左侧菜单每次只能打开一个，显示其中的子菜单

1.3.6 实现左侧菜单的收缩功能

首先要添加一个按钮绑定点击事件来控制菜单的收缩：
<div class="toggle-button" @click="toggleCollapse">|||</div>接着在data中定义一个标志位，默认为false，当点击按钮时将其取反：
// 点击按钮，切换菜单的折叠与展开
toggleCollapse() {this.isCollapse = !this.isCollapse
},然后给侧边栏菜单el-menu绑定属性：
<!-- 侧边栏菜单，:collapse="isCollapse"（设置折叠菜单为绑定的 isCollapse 值），:collapse-transition="false"（关闭默认的折叠动画） -->
<el-menu :collapse="isCollapse" :collapse-transition="false" >最后还要设置左侧菜单的宽度：
<el-aside :width="isCollapse ? '64px' : '200px'">

1.4 右侧主体区域布局

1.4.1 新增默认子级路由组件

首先在src-components中新建welcome.vue组件，该组件是每次打开网站时默认显示的内容然后要在右侧内容主体中添加路由占位符：
<!-- 右侧内容主体 -->
<el-main><!-- 路由占位符 --><router-view></router-view>
</el-main>接着在router.js中导入子级路由组件，并设置路由规则以及子级路由的默认重定向：
const router = new Router({routes: [{path: '/home',component: Home,redirect: '/welcome',children: [{ path: '/welcome', component: Welcome },]}]
})

1.4.2 给左侧菜单添加路由链接

给el-menu添加router属性即可实现路由跳转，如下所示：
<el-menu  router >
当点击二级菜单时，会根据菜单的index属性进行路由跳转，我们需要重新绑定index的值，如下所示：
<!-- 二级菜单 -->
<el-menu-item :index="'/' + subItem.path">

1.4.3 给左侧菜单添加点击高亮效果

当点击二级菜单的时候，我们需要高亮显示当前显示的页面
我们可以通过设置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")

总结

至此我们的主页的总体布局就完成了，下一步要开发右侧主体显示的其他页面组件，比如用户模块，商品模块等

Vue项目实战之电商后台管理系统(二) 主页模块相关推荐

Vue项目实战之电商后台管理系统(一) 用户登录模块
目录一.项目概述二.项目初始化 2.1 前端项目初始化步骤 2.2 后台项目的环境安装配置三.用户登录/登出功能实现 3.1 登录功能概述 3.1.1 登录状态保持 3.1.2 登录逻辑: 3. ...
前端开发Vue项目实战：电商后台管理系统（一）前后端搭建
目录 1. 项目概述 2. 前端项目初始化步骤 3. 后台项目的环境安装配置下载安装phpStudy,添加数据库 Postman测试工具验证 1. 项目概述电商项目基本业务概述: 根据不同的应用 ...
前端开发Vue项目实战：电商后台管理系统（二）-- 登录退出功能 --主页界面
目录 1. 登录/退出功能 1.1 登录概述 1.2 token 原理分析 1.3 登录功能实现 1.3.1 Git 创建分支 1.3.2 渲染Login组件并实现路由重定向 1.3.3 设置背景颜色 ...
Vue项目实战之电商后台管理系统(八) 订单管理及数据统计模块
前言目录前言一.订单管理模块 1.1 新建订单管理组件 1.2 订单管理模块效果图 1.3 订单管理模块页面布局及展示数据 1.4 点击修改按钮弹出修改地址对话框 1.5 点击查询物流进度按钮弹 ...
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统主页制作
黑马程序员视频_主页制作目录一.主页布局 1.整体布局:先上下划分,再左右划分 2.主页header布局 3.左侧菜单布局:菜单分为两级,并且可以折叠二. 通过接口获取菜单数据 1.请求预处理 ...
前端开发Vue项目实战：电商后台管理系统（八）------ 订单管理模块
git checkout -b order git push -u origin order 目录 1. 挂载组件及基本布局 2. 获取订单数据 3. 表格渲染 4. 分页功能 5. 实现省市区县数据 ...
基于Vue实现智慧社区电商后台管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.前端项目.小程序开发.Python开发.大数据和 ...
Vue项目实战项目记录（电商后台管理系统）
学习视频:本站Vue实战项目:电商管理系统(Element-UI) 项目的实现效果前言时间:2021/10/5--2021/10/20 断断续续的完成了这个项目 gitte完整项目地址后台项目文 ...
【实战】电商后台管理系统：路由封装基础布局
目录 1. 项目介绍 1.1 项目功能 1.2 项目架构图 1.3 项目地址 2. 路由的二次封装 3. 页面布局部分 3.1 主页面布局 3.2 商品列表功能实现 1. 项目介绍 1.1 项目功能 ...

Vue项目实战之电商后台管理系统(二) 主页模块

前言

目录

一、主页布局

1.1 整体布局

1.2 头部区域布局

1.3 左侧菜单布局

1.3.1 静态布局

1.3.2 通过axios请求拦截器来进行权限验证

1.3.3 通过axios获取左侧菜单数据

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

1.3.5 其他设置

1.3.6 实现左侧菜单的收缩功能

1.4 右侧主体区域布局

1.4.1 新增默认子级路由组件

1.4.2 给左侧菜单添加路由链接

1.4.3 给左侧菜单添加点击高亮效果

总结

Vue项目实战之电商后台管理系统(二) 主页模块相关推荐

最新文章

热门文章