Vue项目练习--电商后台管理系统的功能---主页的页面布局

Vue项目练习--电商后台管理系统的功能---主页的页面布局

1. 整体布局

整体布局：先上下划分，之后左右划分，这是使用ElementUI中提供的Container组件

 

 

 

<el-container>
    <!-- 头部区域 -->
    <el-header></el-header>
    <el-container>
        <!-- 侧边栏区域 -->
        <el-aside></el-aside>
        <!-- 右侧主体区域 -->
        <el-main></el-main>
    </el-container>
</el-container>

2. 左侧菜单布局

菜单分为二级，并且可以折叠，二级菜单默认隐藏

 

 

 

<el-menu>
    <el-submenu>
        <!-- 这个 template 是一级菜单的内容模板 -->
        <i class="el-icon-menu"></i>
        <span>一级菜单</span>
        <!-- 在一级菜单中，可以嵌套二级菜单 -->
        <el-menu-item>
            <i class="el-icon-menu"></i>
            <span slot="title">二级菜单</span>
        </el-menu-item>
    </el-submenu>
</el-menu>

3. 通过接口获取菜单数据

　　3.1·除登录接口外的其它接口需要授权的API，必须在请求头中使用Authorization字段提供token令牌。通过axios请求拦截器添加token，保证拥有获取数据的权限 ，入口文件main.js中设置请求拦截器，为每一个请求添加一个请求头

// axios请求拦截
axios.interceptors.request.use(config => {
    // 为请求头对象，添加 Token 验证的 Authorization 字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

 

 

 　　3.2 获取左侧菜单的数据--这里用生命周期函数，在页面一加载时就获取左侧菜单数据

 

 

 

 

 

 

 

 

　　3.3 左侧菜单的UI绘制

 

 

 

 

一级菜单都放到了data数组中，因此menulist数组中的每一项都是一个一级菜单。

一级菜单中的children属性又嵌套了二级菜单。所以如果需要绘制左侧菜单，只需要使用双层for循环即可，外层for循环用来渲染一级菜单，内层for循环用来渲染二级菜单。

 

 

 4.解决出现点开一个菜单，另外的菜单也会弹出的bug

 

 

 原因是因为所有的一级菜单的index都是相同的，因此每个一级菜单都应该有一个唯一的index值。

解决办法：将item.id的值动态绑定给index（:index）

但是会有另一个bug：因为index只能接收字符串，不接收数值，而item.id是数值类型的，最简单的方法是给item.id拼接上一个空字符串

 

 

 

 

 

 

 

 

 

 5.修改一级菜单的字体图标

修改后：

 

 

 每个一级菜单的图标都不一样，这里使用第三方的字体图标库

如何才能将这几个字体图标按照顺序加过去呢？每一个一级菜单都是通过for循环自动生成的，如何在自动生成期间修改不同图标呢？

解决方案：先定义一个字体图标的对象，在这个对象中，以一级菜单的id作为key，字体图标当作值

 

 

 6. 解决菜单边缘不能对齐的状态

 

 

 方法：

 

 

 

 

 如果是折叠状态，则侧边栏的宽度为64px，展开的情况下是200px

 

 

 7. 创建Welcome.vue组件，在Home页面中放一个路由占位符，然后将Welcome路由设置为home路由的子路由。这样就在Home页面中嵌套显示了Welcome子组件。

ps：记得要在页面主体里面设置一个路由出口router-view标签

 

 8. 将左侧菜单改为路由链接，开启路由，则点击菜单栏会跳转到index所对应的值上

 

 

 但是这样会造成以id为路径跳转：

 

 

 所以不能使用item.id来动态绑定index，而是使用path，但是每一个路由地址必须以‘/’开头，所以path的值前面需要加一个‘/’：

 

 

出现一个bug：当刷新页面后，或者再次点击当前的二级菜单，虽然右侧主体区显示的是对应的内容，但是左侧对应的菜单并没有高亮显示

 

 

 

 解决方法：

想让菜单中的哪一项高亮被激活，就把这一项对应的index值赋值为整个menu菜单的default-active属性

 

 

 　　1.在每次点击菜单链接的时候，应该把对应的地址保存到sessionStorage中，这样的话就把需要激活的链接保存起来了

 　　2.当我们刷新页面的时候，可以从sessionStorage中把那个值取出来，动态的赋值给el-menu的default-active属性

　　3.首先给每个二级菜单都添加一个点击事件：

 

 

 　　4.在data中添加activePath属性

 

 　　5.点击二级菜单的链接，则保存activePath的值到sessionStorage中

　

 

　　6.给el-menu动态绑定default-active属性

 

 　　7.在组件被创建的时候就赋值activePath，即可解决刷新页面时（重新绘制页面）也高亮显示当前所选的菜单选项

 

 

 但是还有一个问题，高亮效果的动态切换的问题：点击其他链接之后，再回退过来，路由地址已经显示为/users，但是再次点击用户列表菜单栏，却并没有高亮显示（并没有重新绘制Home页面）

如何解决：

当点击不同链接的时候，需要给activePath重新赋下值