Vue+Element-UI 开发电商管理系统旅行记

1、引言

这是一个用于交流学习的后台管理系统，会陆续的更新开发进度，欢迎关注！

2、整体布局

3 、主页

3.1 实现基本的主页布局

3.2 美化主页的header区域

3.3 实现导航菜单的基本结构

 <el-menu
              default-active="/userlist"
              class="el-menu-vertical-demo el-menu"
              @open="handleOpen"
              @close="handleClose"
              background-color="#0b2d5a"
              text-color="#fff"
              active-text-color="#ffd04b"
              :unique-opened="true"
              :router="true"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span>用户管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/userlist">
                    <i class="el-icon-s-grid"></i>
                    用户列表
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-tools"></i>
                  <span>权限管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/rolelist">
                    <i class="el-icon-location"></i>
                    角色列表
                  </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="/rightlist">
                    <i class="el-icon-location"></i>
                    权限列表
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-goods"></i>
                  <span>商品管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">
                    <i class="el-icon-location"></i>
                    商品列表
                  </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="3-2">
                    <i class="el-icon-location"></i>
                    分类参数
                  </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="3-3">
                    <i class="el-icon-location"></i>
                    商品分类
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-s-order"></i>
                  <span>订单管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="4-1">
                    <i class="el-icon-location"></i>
                    订单列表
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-s-marketing"></i>
                  <span>数据统计</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="5-1">
                    <i class="el-icon-location"></i>
                    数据报表
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>

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

需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌

通过 axios 请求拦截器添加 token，保证拥有获取数据的权限。

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

因为测试的是登录 Authorization 所以返回null 如果是登录之后，调用其他接口就会有一个token值了

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

elementUI 默认值是false，改为true则实现每次只打开一个菜单项

代码如下：

这里边框问题没有对齐，需要解决

解决办法：

通过检察元素，发现是一个el-menu样式里有一个border-right值不为0 我们将它重置为none就可以解决问题了

3.7 实现首页路由的重定向

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

5、结束语

到这里我们主页的布局就基本结束了，后续内容希望大家继续关注谢谢！