vue电商后台管理系统保姆级教程(四)——主页布局和功能实现

总文章地址:

vue.js基础还不会?——看这篇文章就够了

14万字手把手教你做vue电商后台管理(全)——技术栈(vue全家桶 Webpack Git axios Element-ui)

4、主页布局和功能实现

4.1基本的主页布局

在这里插入图片描述
1.在home.vue组件中使用element组件页面布局容器直接使用:
先在element.js中注册组件
在这里插入图片描述
在这里插入图片描述
在home.vue中写结构和样式
在这里插入图片描述
在这里插入图片描述
效果图:
在这里插入图片描述

4.2 美化header区域

使用flex布局:
这些就比较容易了我不详细写了
最终效果:
在这里插入图片描述

4.3 实现导航栏的基本结构

效果图:在这里插入图片描述

4.3 通过axios拦截器添加token验证

通过接口获取菜单的数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.4 获取左侧菜单栏数据

在接口文档中查看接口属性,如下
在这里插入图片描述
childern:二级菜单。
定义生命周期函数:
在这里插入图片描述
获取所有的菜单:在这里插入图片描述

渲染左侧菜单数据:在这里插入图片描述

4.5 通过双层for循环渲染左侧菜单

外层for循环渲染一级菜单
动态绑定id 动态绑定key值,v-for循环item,
在文本span中动态填充内容
在这里插入图片描述
第二层循环二级菜单:
循环item.children

4.6 为选中字体设置颜色,添加分类图标

把默认选中颜色黄色变成蓝色,
在这里插入图片描述
把默认图标改变
在这里插入图片描述
一级图标element-ui中没有,用阿里图标库中找,在数据中定义icon对象,然后动态填充进去:在这里插入图片描述
接下来动态循环渲染进结构里:
在这里插入图片描述
添加文本和图标间距:

最终效果:
在这里插入图片描述

4.7 解决每次只能打开一个菜单栏和边框问题

利用element-ui的属性:
在这里插入图片描述
在这里插入图片描述
右侧突出是因为默认有边框,去除即可:
在这里插入图片描述

4.8 实现侧边栏的折叠与展开效果

1、添加折叠按钮,样式
在这里插入图片描述
在这里插入图片描述
给按钮绑定点击事件:
在这里插入图片描述
在mathods中定义方法:
element-ui提供:collapse方法,
在这里插入图片描述
定义iscollapse方法为true,点击按钮时调用此方法。

2、默认的动画很丑,element-ui中有关闭动画的属性:
在这里插入图片描述
动态绑定即可:
在这里插入图片描述
3、隐藏后的侧边栏背景色不变,原因是写的时候被width写死了
在这里插入图片描述
解决办法:
动态赋值,默认值为200px,点击后为64px
在这里插入图片描述
然后对应的方法:
利用三元表达式进行判断:
在这里插入图片描述

4.9实现首页路由重定向(子路由)

在前面的章节中我们也实现了重定向的功能,
需求是在home页面中实现welcome组件
1、在component中新建welcome页面,写好![结构![在这里插入图片描述](https://img-blog.csdnimg.cn/2021050914365787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg2NTQ1OA==,size_16,color_FFFFFF,t_70)
在路由中导入组件:
在这里插入图片描述
实现welcome作为home的子组件:
redirect属性为重定向
在这里插入图片描述
在home主体位置放路由占位符
在这里插入图片描述
在占位符的位置展示子组件:
最后效果:
在这里插入图片描述

4.10实现侧边栏路由链接的改造

点击不同的二级菜单,实现子组件的跳转展示:
利用element组件中router属性:
在这里插入图片描述
定义属性:router=“true” 可以直接简写为true
在这里插入图片描述建议不用id跳转,使用path地址跳转。
在这里插入图片描述

你可能感兴趣的:(vue,vue,javascript,html)