b站黑马Vue2后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）
说明：
此项目中使用的是本地SQL数据库，Vue2。
其他功能请见本人后续的其他相关文章。
本文内容实现的最终效果如下图：
e.g.点击二级菜单用户列表，就会跳转到用户列表对应的index的地址（用户列表的index=path是users）
目录
二．主页布局：
2.1整体布局
【导入Container,Header,Aside,Main组件】
2.2 Header布局
【给Header加flex】
2.3左侧菜单布局
【导入Menu,Submenu,MeunItemGroup,MenuItem组件】
【给导航换背景颜色】
【梳理代码，去除不需要的第三层】
【删除没用到的MeunItemGroup组件】
（1）通过接口获取左侧菜单数据
！！！通过axios请求拦截器添加token,保证拥有获取数据的权限：
（2）发起请求获取左侧菜单数据，保存到menulist中
（3）绘制左侧菜单的UI结构
【渲染一级菜单】
！！！【使用v-for实现双层循环】
【让每个一级菜单名字和data数组的数据动态绑定】
！！！【让每个一级菜单的index的值都动态绑定data中的id】
此处index的值只接受字符串
【渲染二级菜单】
【让每个二级菜单名字和data数组的children数据动态绑定】
（4）左侧菜单格式美化
【修改所有被点击到的二级菜单的文字颜色为蓝色】
【修改所有二级菜单的图标为四个小方块】
【修改每个一级菜单的图标为不同的图标】
！！！以每个一级菜单的id当作名称，每个一级菜单对应的图标的类名当作值。
【给每个一级菜单的图标和文字之间添加间距】
【设置不能同时展开多个一级菜单】
编辑【解决左侧菜单右边框看起来有点不对齐的情况】
（5）左侧菜单的折叠展开功能
【实现点击|||即可展开/折叠左侧菜单】
【关闭折叠动画，去除折叠左侧菜单时候的卡顿】
【当左侧菜单被折叠时候，左侧菜单背景宽变窄】
（6）实现首页的路由重定向
【新建Welcome.vue文件】
【添加路由占位符】
（7）改造左侧菜单为路由链接
！！！【加上router属性——给整个左侧菜单开启路由模式】
【更换跳转的路由为二级菜单的path,而不是值=id的index】
【将index的值从id换成path】
二．主页布局：
2.1整体布局
打开element-ui官网，组件-Container布局容器，复制第四个布局的代码：
将刚刚复制的代码，粘贴到Home.vue中：
在Home.vue中，进行如下修改：删除div,将el-button的退出按钮放到Header处：
【导入Container,Header,Aside,Main组件】
在src-plugins-element.js中,添加以下内容：
实现的效果：出现大致结构
在src-components-Home.vue中，添加以下内容：
实现的效果：
2.2 Header布局
【给Header加flex】
在src-components-Home.vue中，添加以下内容：
在Home.vue文件中的img中加入assets里面的图片（可自定义）：
对应的是下图电商后台管理系统文字左边的那个图片
实现的效果：
2.3左侧菜单布局
目标效果：
打开element-ui官网，点击组件-NavMenu导航菜单，参考下图对应的代码：
复制以上相关的代码，粘贴到Home.vue中的侧边栏区的Aside的位置（Aside删掉）。并且删除里面有一些不需要用到的代码：
【导入Menu,Submenu,MeunItemGroup,MenuItem组件】
在src-plugins-element.js中，输入以下内容：
实现的效果：
【给导航换背景颜色】
修改代码为以下部分：
实现的效果：
【梳理代码，去除不需要的第三层】
修改代码为以下部分：
【删除没用到的MeunItemGroup组件】
去element.js中删除没用到的组件：
实现的效果：
（1）通过接口获取左侧菜单数据
参考api文档：
！！！通过axios请求拦截器添加token,保证拥有获取数据的权限：
在入口函数main.js中，添加以下内容：
e.g.实现的效果是：当一开始点登录，然后Network-XHR-Headers-Request Headers里面有个Authorization：
（2）发起请求获取左侧菜单数据，保存到menulist中
参考api文档中的以下内容：
在Home.vue文件中，添加以下内容：
以上部分console.log(res)的结果是下图：
（3）绘制左侧菜单的UI结构
【渲染一级菜单】
！！！【使用v-for实现双层循环】
在Home.vue中，添加以下内容：
实现的效果：
【让每个一级菜单名字和data数组的数据动态绑定】
在Home.vue中，添加以下内容：
实现的效果：
！！！【让每个一级菜单的index的值都动态绑定data中的id】
在Home.vue中，添加以下内容：
此处index的值只接受字符串
实现的效果：这样每次点其中一个一级菜单，就是被点击的那个一级菜单展开，其他的一级菜单不会展开。
【渲染二级菜单】
用v-for循环，循环每个一级菜单的children属性
e.g. console.log(res)里面每个index里面都有一个children，并且每个二级菜单都有一个id
【让每个二级菜单名字和data数组的children数据动态绑定】
在Home.vue文件中，添加以下内容：
实现的效果：
（4）左侧菜单格式美化
【修改所有被点击到的二级菜单的文字颜色为蓝色】
在Home.vue文件中，添加以下内容：
实现的效果：
【修改所有二级菜单的图标为四个小方块】
打开element-ui官网，组件-icon图标，参考下图的图标：
在Home.vue文件中，添加以下内容：
实现的效果：
【修改每个一级菜单的图标为不同的图标】
参考项目vue_shop文件夹-assets-fonts-demo_fontclass.html的一个本地的字体图标库。
！！！以每个一级菜单的id当作名称，每个一级菜单对应的图标的类名当作值。
e.g.第一个一级菜单的id是125：
在Home.vue文件中，添加以下内容：
实现的效果：
【给每个一级菜单的图标和文字之间添加间距】
在Home.vue文件中，添加以下内容：
实现的效果：
【设置不能同时展开多个一级菜单】
参考element-ui官网-组件-NavMenu导航菜单：
在Home.vue文件中，添加以下内容：
【解决左侧菜单右边框看起来有点不对齐的情况】
当前情况：
用F12控制台调试之后，在Home.vue中添加以下内容：
实现的效果：
（5）左侧菜单的折叠展开功能
在Home.vue中添加以下内容：
实现的效果：
【实现点击|||即可展开/折叠左侧菜单】
打开element-ui官网，点组件-NavMenu导航菜单，参考以下部分：
在Home.vue中添加以下内容：
实现的效果：
默认状态：
点击|||按钮之后：
打开element-ui官网，点组件-NavMenu导航菜单，参考以下部分：
【关闭折叠动画，去除折叠左侧菜单时候的卡顿】
在Home.vue中添加以下内容：
【当左侧菜单被折叠时候，左侧菜单背景宽变窄】
在Home.vue中添加以下内容：
:width="isCollapse ? '64px' : '200px'"表明：
当isCollapse的值是true,即左侧菜单被折叠的时候，背景宽为64px,
当isCollapse的值是false,即左侧菜单展开的时候，背景宽为200px
实现的效果：当点击|||按钮折叠左侧菜单栏：
（6）实现首页的路由重定向
【新建Welcome.vue文件】
在vue_shop项目文件夹-src-components里面，新建一个文件Welcome.vue：
在Welcome.vue中，添加以下内容：
在src-路由router.js中，添加以下内容：
【添加路由占位符】
在Home.vue中，添加以下内容：
实现的效果：点退出之后，重新点击登录按钮，之前默认访问/home页面，但是因为redirect：’/welcome’重定向到了访问/welcome地址。在Home组件的占位符的位置上显示Welcome组件：
（7）改造左侧菜单为路由链接
！！！【加上router属性——给整个左侧菜单开启路由模式】
打开Element-ui官网，参考组件-NavMenu导航菜单：
在Home.vue文件中，添加以下内容：
实现的效果：
e.g.点击二级菜单用户列表，就会跳转到用户列表对应的index的页面（用户列表的index=id是110）
【更换跳转的路由为二级菜单的path,而不是值=id的index】
【将index的值从id换成path】
在Home.vue中，添加以下内容：
实现的效果：
e.g.点击二级菜单用户列表，就会跳转到用户列表对应的index的地址（用户列表的index=path是users）
b站黑马Vue2后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）相关推荐
- b站黑马Vue2后台管理项目笔记——（1）登录功能
说明: 此项目中使用的是本地SQL数据库,Vue2. 其他功能请见本人后续的其他相关文章. 本文内容实现的最终效果如下图: 目录 一．登录功能的实现 1.登录页面的布局: (1)查看当前工作区是否干净 ...
- b站黑马Vue2后台管理项目笔记——（3）用户列表
说明: 此项目中使用的是本地SQL数据库,Vue2. 其他功能请见本人后续的其他相关文章. 本文内容实现的最终效果如下图: 三.用户列表的开发 目标效果: 点击二级菜单--用户列表,在右侧展示用户列表 ...
- 阿里百秀后台管理项目笔记 ---- Day01
摘要 在此记录一下阿里百秀项目的教学视频的学习笔记,部分页面被我修改了,某些页面效果会不一样,基本操作是一致的,好记性不如烂笔头,加油叭!!! step 1 : 整合全部静态页面 将静态页面全部拷贝到 ...
- 阿里百秀后台管理项目笔记 ---- Day03
来吧展示: step1:所有文章数据展示 引入 functions.php 文件执行数据库查询以及判断用户登录状态 require_once '../functions.php'; get_useri ...
- Vue2+elementUi后台管理项目总结
前言 该项目是一款对公司员工及商品管理的后台系统,主要实现功能:公司角色的增删改查,和商品的增删改查,项目的主要模块有,登录,主页,员工管理,权限管理,商品管理,该项目的亮点是权限管理,不同角色登录进 ...
- 尚硅谷尚品汇_后台管理项目
vueProject_尚品汇后台管理 项目源码 文章目录 vueProject_尚品汇后台管理 login/out模块 product模块 login/out模块 .env.development . ...
- 电商项目总结java_Vue 电商后台管理项目阶段性总结(推荐)
一.阶段总结 该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个 全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) ...
- vue考试系统后台管理项目-登录、记住密码功能
考试系统后台管理项目介绍: 技术选型:Vue2.0+Elemenu-ui 项目功能介绍: 账户信息模块:菜单权限.角色权限设置.角色权限分配.账号设置.公司分组 考试管理模块:新增/编辑/删除考试试题 ...
- vue考试系统后台管理项目-接口封装调用
上一篇文章 : vue考试系统后台管理项目-登录.记住密码功能_船长在船上的博客-CSDN博客 考试系统后台管理项目介绍: 技术选型:Vue2.0+Element-ui 项目功能介绍: 账户信息模块: ...
最新文章
- bartender外部表不是预期格式_三张表轻松搞定项目计划
- linux脚本执行进度条,shell脚本实现进度条
- session中存放一个对象，只修改对象的属性，不将修改后的对象存放session，发现session中存放的对象也发生改变！
- wampServer2.1错误(Could not execute menu item (internal error)
- html 缩小页面 重叠,如何获得两个平行四边形完美重叠并在HTML中动态调整大小？...
- jquery尺寸：宽度与高度
- ERROR 1044 (42000)
- 天气预报接口使用及示例
- Vista激活机制又爆新特性,可不激活运行至少一年
- SQL注入-SQLmap-不同数据库注入
- 各种水龙头拆卸图解_各种水龙头拆卸图解
- 计算3个地理坐标点之间的夹角
- STM32实战③RGB渐变
- 百度知道APP心跳包分析-MD5字段(gzip + CRC32)
- 如何查看手机APP的包名，并快速查找
- 2019/01/29 一位前端实习生 艰辛过程 励志 实习周记（五）——第六周
- 1s内能执行多少次for循环
- 一个小小的互联网创业狗的自白
- 苹果CEO库克: 请无所畏惧，做最不愿接受现状的人丨2018年毕业典礼演讲
- 一文带你看懂！TensorFlow入门