滨海住房和城乡建设局网站,开发app工具,晋中住房保障和城乡建设局网站,网站做项目目录
一、前言介绍
二、结构解析
三、页面拆分
#xff08;一#xff09;页面拆分
1.侧边栏页面#xff08;固定#xff09;--Aside.vue
2.顶部页面#xff08;固定#xff09;--Header.vue
3.主体页面#xff08;不固定的#xff09;--示例用UserView…目录
一、前言介绍
二、结构解析
三、页面拆分
一页面拆分
1.侧边栏页面固定--Aside.vue
2.顶部页面固定--Header.vue
3.主体页面不固定的--示例用UserView.vue
二页面组装-Manage.vue 四、运行
代码获取 一、前言介绍 在上一篇文章中已经介绍了如何去实现前后端数据的交互并在前端显示出来 初学者SpringBootVue打通前后端详细步骤从零开始--项目阶段3_云边的快乐猫的博客-CSDN博客 本篇文章是给这个项目增加上侧边栏和顶部点击不同的侧边栏菜单会有不同的页面效果。 二、结构解析
前端使用的技术还是VueElement-ui还用到elementui里面的布局容器。
页面要分成3部分组成分别是侧边栏、顶部和主体3部分。然后再把这3部分页面组装合并在一个Manage.vue页面里面。
其中侧边栏和主体部分可以固定点击侧边栏中的菜单时候主体部分就通过路由切换到对应的页面。 这种结构的优点与缺点
使用侧边栏的系统实际上是单页面系统运行用户体验会更好但是缺点就是SEO搜索曝光率没有多页面的好典型的网易云就是单页面的系统。就是整体框架不会变只是变里面的内容。这样用户体验度会比较好。
若依开源项目运行超链接也是一样的 三、页面拆分与组装
一页面拆分 没有拆分之前的集成代码 https://download.csdn.net/download/m0_52861000/88244356?spm1001.2014.3001.5501 1.侧边栏页面固定--Aside.vue
因为侧边栏页面是固定位置的而且是通用的就是点击菜单栏这个都存在的除了登录页面不存在所以这个页面写在vue的通用页面components包目录下。命名为Aside.vue !-- Aside.vue --
templateel-aside :widthasideWidth !--asideWidth下面脚本里面定义了宽度初始为200 --div styleheight: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: centerimg :srcrequire(/assets/logo.png) stylewidth: 30px; altspan classlogo-title v-show!isCollapse无敌系统/span/div!-- isCollapse动态收缩栏。collapse-transitionfalse表示收缩不使用过渡效果 --!--fff菜单选中时为白色。rgba(255, 255, 255, 0.65)没有选中时候为淡灰色。还有加载当前的路由路径。边框为无边框 --el-menu router :collapseisCollapse :collapse-transitionfalse background-color#001529active-text-color#fff text-colorrgba(255, 255, 255, 0.65) :default-active$route.pathstyleborder: noneel-menu-item index/i classel-icon-s-home/ispan slottitle系统首页/span/el-menu-itemel-submenu index2template slottitlei classel-icon-menu/ispan信息管理/span/templateel-menu-item index/user用户管理/el-menu-itemel-menu-item index/admin管理员管理/el-menu-item/el-submenuel-submenu index3template slottitlei classel-icon-menu/ispan部门管理/span/templateel-menu-item index/work上班打卡/el-menu-itemel-menu-item index/rest下班打开/el-menu-item/el-submenu/el-menu/el-aside
/templatescript
export default {name: Aside,props: {asideWidth: String,isCollapse: Boolean// 其他需要的 props}// 其他逻辑和方法
};
/scriptstyle
/* 侧边栏里面选中菜单的背景色 !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__titlei:nth-child(1) {margin-top: 2px; /* 用来微调菜单栏里面图标和文字上下对齐的 */
}
/* 菜单栏展开箭头样式位置去掉也没关系 */
.el-submenu__titlei.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;
}
/style2.顶部页面固定--Header.vue 因为顶部页面是固定位置的而且是通用的就是点击菜单栏这个都存在的除了登录页面不存在所以这个页面写在vue的通用页面components包目录下。命名为Header.vue !-- Header.vue --
templatediv classaael-header styleheight: 60px; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);!-- 侧边栏展开收缩collapseIcon点击侧边栏图标样式 handleCollapse绑定了图标点击事件脚本 还有图标大小为30px--i :classcollapseIcon clickhandleCollapse stylefont-size: 30px/i!-- 绑定字体距离图标的距离、还有点击图标跳转的路由 --el-breadcrumb separator/ stylemargin-left: 20pxel-breadcrumb-item :to{ path: / }首页/el-breadcrumb-itemel-breadcrumb-item :to{ path: / }课程管理/el-breadcrumb-item/el-breadcrumb!--点击收缩栏时候的头部弹性布局justify-content推向右边 。align-items内容居中 --div styleflex: 1; display: flex; justify-content: flex-end; align-items: center!-- placementbottom按钮触发下方弹出 cursor: pointer鼠标放到这里变成一个手指--el-dropdown placementbottomdiv styledisplay: flex; align-items: center; cursor: pointer!-- 图标的设置和宽度 --img :srcrequire(/assets/logo.png) stylewidth: 30px; altspan管理员/span/div!-- 顶部的触碰显示下来信息 --el-dropdown-menu slotdropdownrouter-link to/person styletext-decoration: noneel-dropdown-item个人信息/el-dropdown-item/router-linkrouter-link to/change-password styletext-decoration: noneel-dropdown-item修改密码/el-dropdown-item/router-linkel-dropdown-item clickhandleLogout退出登录/el-dropdown-item/el-dropdown-menu/el-dropdown/div/el-header/div
/templatescript
export default {name: Header,props: {collapseIcon: String,handleCollapse: Function// 其他需要的 props}// 其他逻辑和方法
};
/scriptstyle/style3.主体页面不固定的--示例用UserView.vue
主体页面界面就是自由嵌套一个完整页面进去的。我这里做示范把上一个做的页面放进来 二页面组装-Manage.vue
1.接下来就要把这些侧边栏、顶部、主体页面组装放到一个新页面里面。这里也是放到通用文件components里面命名为Manage.vue !-- 左右结构左边是菜单栏、右边是一个大盒子分为通用顶部上和变换的主体下 --
templateel-containerAside :asideWidthasideWidth :isCollapseisCollapse /div stylewidth: 100%;flex-wrap: wrap;Header :collapseIconcollapseIcon :handleCollapsehandleCollapse /el-mainrouter-view / !-- 表示当前页面的子路由会在router-view /里面展示 --/el-main/div/el-container
/templatescript
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
