Vue电商项目练习-3 主页设计

主页设计

实现效果

Vue电商项目练习-3 主页设计

设计思路

主要分为三个部分

  • 头部区域
  • 侧边栏区域
  • 右侧主体区域

使用 Container 布局容器来搭建页面的基本结构 container

 <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer>时,全部子元素会垂直上下排列,否则会水平左右排列。
 <el-header>:顶栏容器。
 <el-aside>:侧边栏容器。
  <el-main>:主要区域容器。
  <el-footer>:底栏容器。

具体实现

搭建基本结构

选择的是第四个,粘到 Home.vue中即可

<el-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 中提供的组件,他们的名称就是类名,可以直接用来选择添加样式

给他们添加样式:背景色,让他们充满整个屏幕【给最外部的el-container添加一个类名,设置height:100%】

header区域设计

分为图标和文本及右侧的按钮

    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/touxiang.jpg" />
        <span>电商管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>

flex布局

.el-header {
  background-color: #373d41;
  display: flex;  
  justify-content: space-between; // 左右贴边对齐
  align-items: center;  // 按钮居中对齐
  > div {
    display: flex;  
    align-items: center;  // 文本纵向居中对齐
    img {
      width: 60px;
      border-radius: 50%;
    }
    span {
      color: white;
      font-size: 18px;
      margin-left: 15px;
    }
  }
}

aside 侧边栏设计

菜单分为两级,可以折叠,使用 el-menu menu

使用自定义颜色那部分的样例

      <!-- 侧边栏 -->
      <el-aside width="200px">
      
      	<!-- 侧边栏菜单区域 -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff">
        
          <!-- 一级菜单 -->
          <el-submenu index="1">
            <!-- 一级菜单模板区域 -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="el-icon-location"></i>
              <!-- 文本 -->
              <span>导航一</span>
            </template>
            
            <!-- 二级菜单 -->
            <!-- router开启路由模式,index当作跳转地址 -->
            <el-menu-item index="1-1">
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>导航1-1</span>
              </template>
            </el-menu-item>
            
          </el-submenu>
          
        </el-menu>
      </el-aside>
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: 0;   // 菜单右侧边框线

  }
}

通过axios添加token验证

注意:需要授权的 API ,必须在请求头中使用 Authorization 字段提供 token 令牌
Vue电商项目练习-3 主页设计
在 main.js中添加

// 通过axios 拦截器添加token验证
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最后必须添加return
  return config
})

通过接口动态获取侧边栏菜单数据

获取数据

应该在页面一开始加载的时候就立即获取菜单数据

  data() {
    return {
      menulist: []
    };
  },
  
  created() {
    this.getMenuList()
  },
    getMenuList() {
      // 获取所有的菜单名称
      this.$http.get('menus').then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.menulist = res.data.data
          console.log(this.menulist);
        } else {
          return this.$message.error(res.data.meta.msg)
        }
      });
    },

v-for 渲染数据和图标

数据类型
Vue电商项目练习-3 主页设计

  • 为每个el-submenu指定唯一的index 控制其打开一个的时候不会全部点开,动态数据绑定
  • index要用字符串格式,item.id是数值型,要转换,拼接上一个空字符串 :是动态绑定
  • authName为一级菜单的文本区域
  • id为 v-for中的key
  • 二级菜单循环其中的children
  • 二级图标都使用 "el-icon-menu"
  • 一级图标 在data中定义一个图标对象,以id作为key,图标作为value
  • active-text-color="#409eff" 设置选中时高亮的颜色
  • unique-opened 设置每次只打开一个菜单栏
      <!-- 侧边栏 -->
      <el-aside width="200px">
      
      	<!-- 侧边栏菜单区域 -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened>
        
          <!-- 一级菜单 -->
          <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
            <!-- 一级菜单模板区域 -->
            <template slot="title">
              <!-- 图标 -->
              <i :class="iconObj[item.id]"></i>
              <!-- 文本 -->
              <span>{{item.authName}}</span>
            </template>
            
            <!-- 二级菜单 -->
            <!-- router开启路由模式,index当作跳转地址 -->
            <el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{subItem.authName}}</span>
              </template>
            </el-menu-item>
            
          </el-submenu>
          
        </el-menu>
      </el-aside>
<script>
export default {
  data() {
    return {
      menulist: [],
      iconObj: {
        "125": "el-icon-user-solid",
        "103": "el-icon-lock",
        "101": "el-icon-s-goods",
        "102": "el-icon-s-order",
        "145": "el-icon-s-data"
      }
    };
  },

设置每次只能打开一个菜单栏

Vue电商项目练习-3 主页设计

侧边栏折叠与展开

  • 放置侧边栏对象 div 标签 和 |||
  • 设置样式
  • collapse 属性控制折叠与展开状态
  • collapse-transition属性 控制关闭折叠动画
  • 在data 中定义控制变量 isCollapse
  • 设置点击触发方法
  • 侧边栏宽度根据 isCollapse 来动态赋值
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu 
	        background-color="#333744" 
	        text-color="#fff" 
	        active-text-color="#409eff" 
	        unique-opened  
	        :collapse="isCollapse" 
	        :collapse-transition="false">
.toggle-button {
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;  // 三个竖线之间的间距
  cursor: pointer;  // 鼠标放上去变成小手的形状
}
  data() {
    return {
      menulist: [],
      iconObj: {
        "125": "el-icon-user-solid",
        "103": "el-icon-lock",
        "101": "el-icon-s-goods",
        "102": "el-icon-s-order",
        "145": "el-icon-s-data"
      },
      isCollapse: false
    };
  },
    toggleCollapse() {
      // 点击按钮,切换菜单的折叠与展开
      this.isCollapse = !this.isCollapse;
    }

Vue电商项目练习-3 主页设计

侧边栏路由链接改造

Vue电商项目练习-3 主页设计

  1. 开启路由模式,在 el-menu 中加一个 router属性
  2. 跳转默认是index对应的位置,所以把 index 改为 数据中的path属性
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" 
        unique-opened :collapse="isCollapse" :collapse-transition="false" router>
            <!-- 二级菜单 -->
            <!-- router开启路由模式,index当作跳转地址 -->
            <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">

首页路由重定向

  1. 定义 welcome组件
  2. 在Home.vue 中 main 部分放置路由占位符
  3. 将welcome组件设置为Home的子路由
<template>
  <div>
      <h3>welcome</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  components: {

  }
}
</script>

<style lang="less" scoped>

</style>
      <!-- 右侧内容主体区域 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', component: Welcome }, 
上一篇:poj 1326(水题)


下一篇:【Flutter之旅】容器类组件介绍