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

最新推荐文章于 2024-08-14 20:09:38 发布
最新推荐文章于 2024-08-14 20:09:38 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： 前端学习 文章标签： vue elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36303923/article/details/119297149
版权

主页设计

实现效果

在这里插入图片描述

设计思路

主要分为三个部分

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

使用 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 令牌
在这里插入图片描述
在 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 渲染数据和图标

数据类型
在这里插入图片描述

  • 为每个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"
      }
    };
  },
设置每次只能打开一个菜单栏

在这里插入图片描述

侧边栏折叠与展开

  • 放置侧边栏对象 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;
    }

在这里插入图片描述

侧边栏路由链接改造

在这里插入图片描述

  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 },
莩甲柚
关注
专栏目录
vue首页页面
qq_45179361的博客
02-11 1449
vue首页页面
Vue项目主页
HuaJian_Y的博客
09-24 369
1、 项目描述 1. 此项目为一个前后端分离的项目； 2. 采用vue+ES6+element ui等前端最新技术； 3. 项目包括商家、商品信息、用户、登录注册等多个子模块； 4. 采用模块化、组件化、工程化的开发模式； ps：本期只带来首页内容，后续更新项目请持续关注。 2、 项目需求 2.1 基本页面布局 2.2 轮播图 项目文件 vue-cli的项目文件目录 目录/...
漂亮的vue.js主页模板，非常有用-Vue.js开发
05-27
一个非常漂亮的vue.js主页模板，非常有用。Vue Nice主页DEMO在这里关于粒子-bg-vue库该项目使用react粒子背景组件库https://github.com/lindelof/particles-bg-vue。 非常简单。 任何人都可以成为火枪手。 说明该项目来自https://github.com/mtobeiyf/vuepress-homepage，感谢作者的帮助，我进行了一些修改和调整。 入门在此处查看完整的文档:backhand_index_pointing_right:指南确保已安装Node.js和yarn
vue基础教程（7）——构建项目级首页
关注前端，关注原创
04-25 2106
前面我们学习了vue的路由和登录页搭建，本文将和大家共同学习首页的搭建。首页示例如图：很多项目经验比较少的同学，一般都是对某些语法很熟悉，但是对整个项目是如何从零开始搭建的，页面布局是如何通过代码实现的，可能并未过多关注。也许有人会说，这些ui框架或者开源项目，都会开箱即用，可如果框架提供的布局无法满足要求呢，如果开源项目存在bug呢，如果企业做大做强需要UI重新设计web端呢？我们有太多的理由去了解这些基础知识，我们可以永远不做，但是不能不会！
从0-1开发一个Vue3前端系统页面-9.博客页面布局
最新发布
I am the light coursing in the soul of the moon.
08-14 906
本节主要实现了博客首页界面的基本布局并完善了响应式布局，因为完善了响应式布局故对前面的页面布局有所改动，这里会将改动后的源码同步上传。
Vue实战第4章：主页设计之中部内容设计
孙君的空间站
02-17 886
制作了一个自定义的网页导航栏
个人博客系统(Vue实现）的主页布局设计
qq_51476492的博客
06-14 7562
Vue主页设计
搭建模仿跨境电商网站vue-router路由跳转
10-11
【搭建模仿跨境电商网站vue-...对于初学者来说，这是一个很好的练习项目，可以帮助理解 Vue 和其路由系统的基本用法。同时，项目也涉及到了 Vue 项目的常用配置和依赖管理，有助于提升开发者对前端开发流程的理解。
vue电商项目.rar
09-11
本项目“vue电商项目”是基于Vue.js构建的一个电子商务平台，适合初学者和开发者进行实战练习或者快速搭建电商类应用。 首先，解压“vue电商项目.rar”会得到一个名为“online-store”的文件夹，这通常是Vue项目的...
电商项目练习demo
10-29
【电商项目练习demo】是一个旨在帮助开发者理解和实践电商系统开发的示例项目。这个项目不仅提供了实际的代码实现，还涵盖了电商项目中的关键技术和最佳实践，对于初学者和有经验的开发者来说，都是一个很好的学习...
基于Spring Boot+Vue 3+Element-Plus+Pinia+Vant的电商管理系统完整源码+说明.zip
03-27
【资源说明】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请...3、不仅适合小白学习实战练习，也可作为大作业、课程设计、毕设项目、初期项目立项演示等，欢迎下载，互相学习，共同进步！
my-vue-home-design:商店的Vue页面设计
04-07
可视化页面装修 基于 vue + ant-design + vue-draggable 实现的可视化页面装修功能 操作指引： 左侧组件区域拖拽至中间布局区域 中间区域的组件支持上下拖拽排序，删除组件 点击中间区域的组件，右侧会打开组件支持的配置项 右侧楼层管理支持组件的排序、复制、删除、定位等 目前支持组件列表 安装 $ npm install 启动 命令行执行：npm run dev 浏览器打开链接： 代码目录 ├── README.md ├── package.json ├── src │   ├── html │   ├── interface // 接口 │   │   ├── core.js │   │   ├── index.js │   │   ├── json-data │   │   │   ├── design_get_page_info.json │   │   │ 
vue的一个简单的登录界面设计.rar
07-04
此代码是vue框架搭建完成后，设计的一个简单的登录界面。vue的框架是vue-cli2.0
一个练习用的vue网站
08-10
技术 vue2.0 vuex sass es6 vue-router2.0
基于Vue的完整电商系统
01-10
基于SpringBoot+MyBatis实现。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。
vue电商项目练习（1）初始化项目
m0_61462422的博客
09-17 65
一.初始化项目 ①安装vue脚手架 ②通过vue脚手架创建项目 Windows+R命令打开终端，输入vue ui 打开可视化面板， 点击创建，选择项目 选择路径，放在code中 配置打开 Babel、Router、Linter/Fomatter、使用配置文件 下一步安装 ③配置vue路由（上一步中已配置） ④配置Element-ui组件库 ⑤配置axios库 ①安装 MySQL数据库 ②安装Node.js环境 ③配置...
通用vue组件化首页
qq_55928824的博客
01-07 2429
通用vue组件化首页
Vue2实践项目四： 主页实现和布局
shieryue_2016的博客
12-04 1122
app.vue ： router-view 组件显示区。Menu.vue：菜单列表和动态路由。Home.vue： 子路由出口。router.js配置路由。Footer.vue组件。
vue3商城页面装修
m0_59203969的博客
01-02 1005
vue3商城页面装修
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值