vue组装模板(侧边栏+顶部+主体)--项目阶段4

目录

一、前言介绍

二、结构解析

三、页面拆分

(一)页面拆分 

1.侧边栏页面(固定)--Aside.vue

2.顶部页面(固定)--Header.vue        

3.主体页面(不固定的)--示例用UserView.vue

(二)页面组装-Manage.vue

 四、运行

代码获取


一、前言介绍

在上一篇文章中已经介绍了如何去实现前后端数据的交互并在前端显示出来:

初学者SpringBoot+Vue打通前后端详细步骤(从零开始)--项目阶段3_云边的快乐猫的博客-CSDN博客

本篇文章是给这个项目增加上侧边栏顶部,点击不同的侧边栏菜单会有不同的页面效果。

二、结构解析

前端使用的技术还是Vue+Element-ui,还用到elementui里面的布局容器。

页面要分成3部分组成,分别是侧边栏、顶部和主体3部分。然后再把这3部分页面组装合并在一个Manage.vue页面里面。

其中侧边栏和主体部分可以固定,点击侧边栏中的菜单时候,主体部分就通过路由切换到对应的页面。 

这种结构的优点与缺点:

使用侧边栏的系统实际上是单页面系统,运行用户体验会更好,但是缺点就是SEO(搜索曝光率)没有多页面的好,典型的网易云就是单页面的系统。就是整体框架不会变,只是变里面的内容。这样用户体验度会比较好。

若依开源项目(运行超链接)也是一样的

三、页面拆分与组装

(一)页面拆分 

没有拆分之前的集成代码:

https://download.csdn.net/download/m0_52861000/88244356?spm=1001.2014.3001.5501 

1.侧边栏页面(固定)--Aside.vue

因为侧边栏页面是固定位置的而且是通用的(就是点击菜单栏,这个都存在的,除了登录页面不存在),所以这个页面写在vue的通用页面components包目录下。命名为Aside.vue

<!-- Aside.vue -->
<template><el-aside :width="asideWidth">    <!--asideWidth:下面脚本里面定义了宽度初始为200  --><div style="height: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: center"><img :src="require('@/assets/logo.png')" style="width: 30px;" alt=""><span class="logo-title" v-show="!isCollapse">无敌系统</span></div><!-- isCollapse:动态收缩栏。collapse-transition="false表示收缩不使用过渡效果 --><!--fff:菜单选中时为白色。rgba(255, 255, 255, 0.65):没有选中时候为淡灰色。还有加载当前的路由路径。边框为无边框  --><el-menu router :collapse="isCollapse" :collapse-transition="false" background-color="#001529"active-text-color="#fff" text-color="rgba(255, 255, 255, 0.65)" :default-active="$route.path"style="border: none"><el-menu-item index="/"><i class="el-icon-s-home"></i><span slot="title">系统首页</span></el-menu-item><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span>信息管理</span></template><el-menu-item index="/user">用户管理</el-menu-item><el-menu-item index="/admin">管理员管理</el-menu-item></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-menu"></i><span>部门管理</span></template><el-menu-item index="/work">上班打卡</el-menu-item><el-menu-item index="/rest">下班打开</el-menu-item></el-submenu></el-menu></el-aside>
</template><script>
export default {name: 'Aside',props: {asideWidth: String,isCollapse: Boolean// 其他需要的 props}// 其他逻辑和方法
};
</script><style>
/* 侧边栏里面选中菜单的背景色   !important代表这个优先级很高*/
.el-menu--inline, .el-menu-item {background-color: #000c17 !important;
}/* 菜单栏一级标题样式 */
.el-submenu__title {height: 40px !important;  /* 一级标题的框整体高度 */line-height: 40px !important;  /* 一级标题的字在框里面整体高度 */padding: 0 25px !important;    /* 一级标题位置,越大越右 */transition: color 10s;      /* 对文字颜色过渡效果时间 */
}
/* 菜单栏图标文字对齐样式(去掉也没关系) */
.el-submenu__title>i:nth-child(1) {margin-top: 2px;    /* 用来微调菜单栏里面图标和文字上下对齐的 */
}
/* 菜单栏展开箭头样式位置(去掉也没关系) */
.el-submenu__title>i.el-submenu__icon-arrow {margin-top: -5px;
}
/* 菜单栏样式(去掉影响也还好) */
.el-menu-item {min-width: 0 !important;   /*允许最小屏幕的宽度  */width: calc(100% - 10px);margin: 5px;   /*菜单项主键的间距  */height: 40px !important;    /*首页菜单高度大小  */line-height: 40px !important;    /*二级菜单大小,最好和上面一样  */border-radius: 10px;  /*菜单标题的边框添加圆角,越大越圆*/
}
/* 菜单栏二级标题左移 (去掉也没关系) */
.el-menu--inline>.el-menu-item {padding-left: 50px !important;
}
/* 菜单栏选中的背景颜色(去掉也没关系) */
.el-menu-item.is-active {background-color: dodgerblue !important;
}
/* 菜单栏鼠标悬停在二级标题的颜色(去掉也没关系) */
.el-menu-item:hover {color: #fff !important;
}
/* 菜单栏鼠标悬停在一级标题的颜色(去掉也没关系) */
.el-submenu__title:hover *, .el-submenu__title:hover {color: #fff !important;
}
/* 菜单栏整体的美观样式 */
.el-aside {box-shadow: 5px 0 6px rgba(15, 14, 14, 0.35); /* 菜单栏右侧阴影  0  阴影扩散范围 阴影的颜色 */background-color: #001529;   /* 菜单栏整体的背景色 */color: #fff;   /* 菜单栏顶部的系统颜色 */min-height: 100vh;  /* 菜单栏整体高度 */transition: width .3s;  /* 菜单栏展开收缩的整体时间0.3s */
}
/* 用于指示侧边栏折叠状态的选中一级图标偏移 */
.el-menu--collapse .el-tooltip {padding: 0 15px !important;
}
/*菜单栏logo图标和文字的距离*/
.logo-title {margin-left: 5px;  transition: all .3s;
}
.el-menu {transition: all .3s;
}
</style>

2.顶部页面(固定)--Header.vue        

 因为顶部页面是固定位置的而且是通用的(就是点击菜单栏,这个都存在的,除了登录页面不存在),所以这个页面写在vue的通用页面components包目录下。命名为Header.vue

<!-- Header.vue -->
<template><div class="aa"><el-header style="height: 60px; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);"><!-- 侧边栏展开收缩!!collapseIcon:点击侧边栏图标样式  handleCollapse:绑定了图标点击事件(脚本)  还有图标大小为30px--><i :class="collapseIcon" @click="handleCollapse" style="font-size: 30px"></i><!-- 绑定字体距离图标的距离、还有点击图标跳转的路由 --><el-breadcrumb separator="/" style="margin-left: 20px"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item></el-breadcrumb><!--点击收缩栏时候的头部弹性布局,justify-content:推向右边 。align-items:内容居中 --><div style="flex: 1; display: flex; justify-content: flex-end; align-items: center"><!-- placement="bottom":按钮触发下方弹出  cursor: pointer:鼠标放到这里变成一个手指--><el-dropdown placement="bottom"><div style="display: flex; align-items: center; cursor: pointer"><!-- 图标的设置和宽度 --><img :src="require('@/assets/logo.png')" style="width: 30px;" alt=""><span>管理员</span></div><!-- 顶部的触碰显示下来信息 --><el-dropdown-menu slot="dropdown"><router-link to="/person" style="text-decoration: none"><el-dropdown-item>个人信息</el-dropdown-item></router-link><router-link to="/change-password" style="text-decoration: none"><el-dropdown-item>修改密码</el-dropdown-item></router-link><el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></div></el-header></div>
</template><script>
export default {name: 'Header',props: {collapseIcon: String,handleCollapse: Function// 其他需要的 props}// 其他逻辑和方法
};
</script><style></style>

3.主体页面(不固定的)--示例用UserView.vue

主体页面界面就是自由嵌套一个完整页面进去的。我这里做示范,把上一个做的页面放进来

(二)页面组装-Manage.vue

1.接下来就要把这些侧边栏、顶部、主体页面组装放到一个新页面里面。这里也是放到通用文件components里面,命名为Manage.vue

<!-- 左右结构,左边是菜单栏、右边是一个大盒子分为通用顶部(上)和变换的主体(下) -->
<template><el-container><Aside :asideWidth="asideWidth" :isCollapse="isCollapse" /><div style="width: 100%;flex-wrap: wrap;"><Header :collapseIcon="collapseIcon" :handleCollapse="handleCollapse" /><el-main><router-view />  <!-- 表示当前页面的子路由会在<router-view />里面展示      --></el-main></div></el-container>
</template><script>
import Aside from '../components/Aside.vue';
import Header from '../components/Header.vue';export default {components: {Aside,Header,},data() {return {isCollapse: false,   //展开asideWidth: '200px',   //侧边栏默认值为200collapseIcon: 'el-icon-s-fold'   //展开图标箭头向左};},methods: {handleCollapse() {this.isCollapse = !this.isCollapse;if (this.isCollapse) {     //折叠图标this.asideWidth = '64px';this.collapseIcon = 'el-icon-s-unfold';} else {this.asideWidth = '200px';    //展开图标this.collapseIcon = 'el-icon-s-fold';}}
}};
</script>

2.最后一个步骤,让这些页面可以加载起来,那就是放到路由里面。

 四、运行

cd切到到当前文件夹demo,然后输入运行命令

npm run serve

默认8080端口然后主体部分会重定向到user界面 

代码获取

1.点击下方那个猫扫一下

2.去那边回:项目阶段4

有什么问题都可以评论区留言,看见都会回复的

如果你觉得本篇文章对你有所帮助的,把“文章有帮助的”打在评论区

多多支持吧!!!

点赞收藏评论,当然也可以点击文章底部的红包或者👇订阅付费文章创作支持一下了。抱拳了!

vip文章:http://t.csdn.cn/Uq5j1

bug大全订阅文章http://t.csdn.cn/j6UyR

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/54198.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【位运算进阶之----左移(<<)】

今天我们来谈谈左移这件事。 ❤️简单来说&#xff0c;对一个数左移就是在其的二进制表达末尾添0。左移一位添一个0&#xff0c;结果就是乘以2&#xff1b;左移两位添两个0&#xff0c;结果就乘以2 ^ 2&#xff1b;左移n位添n个0&#xff0c;结果就是乘以2 ^ n&#xff0c;小心…

小白到运维工程师自学之路 第七十九集 (基于Jenkins自动打包并部署Tomcat环境)2

紧接上文 4、新建Maven项目 clean package -Dmaven.test.skiptrue 用于构建项目并跳过执行测试 拉到最后选择构建后操作 SSH server webExec command scp 192.168.77.18:/root/.jenkins/workspace/probe/psi-probe-web/target/probe.war /usr/local/tomcat/webapps/ /usr/loca…

电商设计之分类模块设计

1、现在店铺流行这些简单的风格 2、 3、夏季新品 4、妖精的口袋----店铺展示 5、小狗电器-----优秀分类案例 6、客服中心 7、有线手持款---这里全都是有线首饰款&#xff0c;方便找到东西 8、裂帛 8.1裂帛分类模块 8.2 我点击了T恤 8.3 买雪纺衫&#xff0c;这里面全都是雪纺 …

mybatis与spring集成与spring aop集成pagehelper插件

Mybatis与Spring的集成 Mybatis是一款轻量级的ORM框架&#xff0c;而Spring是一个全栈式的框架&#xff0c;二者的结合可以让我们更加高效地进行数据持久化操作。 Mybatis与Spring的集成主要有两种方式&#xff1a;使用Spring的Mybatis支持和使用Mybatis的Spring支持。 使用…

python网络爬虫指南二:多线程网络爬虫、动态内容爬取(待续)

文章目录 一、多线程网络爬虫1.1 线程的基础内容、GIL1.2 创建线程的两种方式1.3 threading.Thread类1.4 线程常用方法和锁机制1.5 生产者-消费者模式1.5.1 生产者-消费者模式简介1.5.2 Condition 类协调线程 1.6 线程中的安全队列1.6 多线程爬取王者荣耀壁纸1.6.1 网页分析1.6…

在云服务器上安装Jenkins

说明&#xff1a;Jenkins是一个部署项目的平台&#xff0c;通过Jenkins可以省去从项目开发–>部署项目之间的所有流程&#xff0c;做到代码提交即上线。本文介绍在云服务CentOS上安装Jenkins。 前提 安装Jenkins之前&#xff0c;先要在云服务上安装JDK、Maven、Git&#x…

java八股文面试[多线程]——sleep wait join yield

sleep和wait有什么区别 sleep 方法和 wait 方法都是用来将线程进入阻塞状态的&#xff0c;并且 sleep 和 wait 方法都可以响应 interrupt 中断&#xff0c;也就是线程在休眠的过程中&#xff0c;如果收到中断信号&#xff0c;都可以进行响应并中断&#xff0c;且都可以抛出 In…

林业气象站——林业种植气象观测

林业气象站是一种用于观测林区气象环境的仪器&#xff0c;能够观测林区天气、土壤等自然环境参数&#xff08;温度、湿度、风速、风向、降雨量、气压、放射线、土壤湿度等&#xff09;&#xff0c;为开展环境观测、天气预报、灾害预警、林区虫害防治起到综合指导作用。 林业气…

lab7 thread

文章目录 Uthread: switching between threadstaskhints思路上下文的恢复和保存thread_createthread_schedule Using threads思路 Barrier Uthread: switching between threads 在这个练习中&#xff0c;你将为一个用户级别线程系统设计上下文切换机制&#xff0c;并实现它。 …

js实现数据关联查找更新。数据求和验证

为了实现这个功能我们和后端定义了数据结构 data:{id&#xff1a;‘’&#xff0c;formInfo:,formInfo2:,formInfo3:,formInfo4:, ......deailData:[ // 明细数据 // saleData 查询带出的对应明细序列号数据{ id:, ocopyId:, copyId:, odoId:, ......, saleData:[ { id:, oc…

stm32之4.时钟体系

3.时钟体系(给单片机提供一个非常稳定的频率信号) ①可以使用三种不同的时钟源来驱动系统时钟&#xff08;SYSCLK&#xff09;&#xff0c;CPU运行的频率为168MHZ&#xff1b; HSI(RC振荡器时钟&#xff0c;也就是高速内部时钟&#xff0c;一般来说很少用&#xff0c;因为精度…

二叉树的层序遍历及完全二叉树的判断

文章目录 1.二叉树层序遍历 2.完全二叉树的判断 文章内容 1.二叉树层序遍历 二叉树的层序遍历需要一个队列来帮助实现。 我们在队列中存储的是节点的地址&#xff0c;所以我们要对队列结构体的数据域重定义&#xff0c; 以上代码 从逻辑上来讲就是1入队&#xff0c;1出队&am…

字节跳动 从需求到上线全流程 软件工程流程 需求评估 MVP

走进后端开发流程 整个课程会带大家先从理论出发&#xff0c;思考为什么有流程 大家以后工作的团队可能不一样&#xff0c;那么不同的团队也会有不同的流程&#xff0c;这背后的逻辑是什么 然后会带大家按照走一遍从需求到上线的全流程&#xff0c;告诉大家在流程的每个阶段&am…

视频集中存储/直播点播平台EasyDSS内核无法启动是什么原因?

视频推拉流EasyDSS视频直播点播平台&#xff0c;集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体&#xff0c;可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 有用户反馈&#xff0c;下载了视频直播点播平台EasyDSS最新版本&a…

桃子叶片病害识别(Python代码,pyTorch框架,深度卷积网络模型,很容易替换为其它模型,带有GUI识别界面)

1.分为三类 健康的桃子叶片 &#xff0c;251张 桃疮痂病一般&#xff0c;857张 桃疮痂病严重&#xff0c;770 张 2. GUI界面识别效果和predict.py识别效果如视频所示桃子叶片病害识别&#xff08;Python代码&#xff0c;pyTorch框架&#xff0c;深度卷积网络模型&#xff0…

【数据结构】如何用栈实现队列?图文解析(LeetCode)

LeetCode链接&#xff1a;232. 用栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 注&#xff1a;本文默认读者已掌握栈与队列的基本操作 可以看这篇文章熟悉知识点&#xff1a;【数据结构】栈与队列_字节连结的博客-CSDN博客 目录 做题思路 代码实现 1. MyQueue 2. …

基于配置类方式管理 Bean

目录 一、完全注解开发理解 二、配置类和扫描注解 三、Bean定义组件 四、Bean注解细节 五、import 扩展 一、完全注解开发理解 Spring 完全注解配置&#xff08;Fully Annotation-based Configuration&#xff09;是指通过 Java配置类 代码来配置 Spring 应用程序&#…

【OCR识别】tess4j图片识别文字

什么是OCR? OCR &#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;是指电子设备&#xff08;例如扫描仪或数码相机&#xff09;检查纸上打印的字符&#xff0c;通过检测暗、亮的模式确定其形状&#xff0c;然后用字符识别方法将形状翻译成计算机…

MongoDB入门

简介 MongoDB是一个开源、高性能、支持海量数据存储的文档型数据库 是NoSQL数据库产品中的一种&#xff0c;是最像关系型数据库&#xff08;MySQL&#xff09;的非关系型数据库 内部采用BSON(二进制JSON)格式来存储数据,并支持水平扩展。 MongoDB本身并不是完全免费的,它对…

《C和指针》笔记10:作用域

结合上面的例子讲解C语言的作用域。 1. 代码块作用域 (block scope) 位于一对花括号之间的所有语句称为一个代码块。任何在代码块的开始位置声明的标识符都具有代码块作用域 (block scope)&#xff0c;表示它们可以被这个代码块中的所有语句访问。上图中标识为6、7、9、10的变…