Vue3+ElementPlus+Koa2 全栈开发后台系统=＞欢迎页实现,首页菜单功能实现,菜单交互及递归实现,面包屑实现⑦

最新推荐文章于 2024-03-07 14:14:43 发布
最新推荐文章于 2024-03-07 14:14:43 发布
阅读量1.4k 收藏 12
点赞数 6
分类专栏： # 【Vue3从基础到进阶】 文章标签： 前端框架 yarn vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/119655653
版权

本项目项目仓库地址:https://gitee.com/notlaughingzzm/vue3_elementPlus_admin.git

1.欢迎页实现

在这里插入图片描述

<template>
  <div class="welcome">
    <div class="content">
      <div class="sub-title">欢迎体验</div>
      <div class="title">Vue3通用后台管理系统</div>
      <div class="desc">
        - Vue3.0+ElementPlus+Node+Mongo打造通用后台管理系统
      </div>
    </div>
    <div class="img"></div>
  </div>
</template>

<script>
export default {
  name: "welcome",
};
</script>

<style lang="scss">
.welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
  .content {
    position: relative;
    bottom: 40px;
    .sub-title {
      font-size: 30px;
      line-height: 42px;
      color: #333;
    }
    .title {
      font-size: 40px;
      line-height: 62px;
      color: #409eff;
    }
    .desc {
      text-align: right;
      font-size: 14px;
      color: #999;
    }
  }
  .img {
    margin-left: 105px;
    background-image: url("./../assets/images/welcome.png");
    width: 371px;
    height: 438px;
  }
}
</style>

2.首页菜单功能实现

在这里插入图片描述

<template>
	<div class="basic-layout">
		<div :class="['nav', isCollapse ? 'fold' : 'unfold']">
			<!-- 系统logo -->
			<div class="logo">
				<img src='../assets/img/logo-small.png' alt=""/>
				<span>HHS_Admin</span>
			</div>

			<!-- 导航菜单 -->
			<el-menu :default-active="activeMenu" class="nav-menu" background-color="#001529"
			         :router="true" text-color="#fff" :collapse="isCollapse">
				<el-submenu index="1">
					<template #title>
						<i class="el-icon-setting"></i>
						<span>系统管理</span>
					</template>
					<el-menu-item index="1-1">用户管理</el-menu-item>
					<el-menu-item index="1-2">菜单管理</el-menu-item>
				</el-submenu>
				<el-submenu index="2">
					<template #title>
						<i class="el-icon-s-flag"></i>
						<span>审批管理</span>
					</template>
					<el-menu-item index="2-1">休假申请</el-menu-item>
					<el-menu-item index="2-2">待我审核</el-menu-item>
				</el-submenu>
			</el-menu>
		</div>

		<div :class="['content', isCollapse ? 'fold' : 'unfold']">
			<div class="top-crumb">
				<div class="top-crumb-left">
					<div class="fold-menu" @click="toggleNav">
						<i class="el-icon-s-operation"></i>
					</div>
					<div class="bread">
						面包屑
					</div>
				</div>
				<div class="user-info">
					<el-badge :is-dot="true" class="notice" type="danger">
						<i class="el-icon-bell"></i>
					</el-badge>

					<el-dropdown @command="handleCommand">
						<span class="username-span">
              zzm
						</span>
						<template #dropdown>
							<el-dropdown-menu>
									<el-dropdown-item command="user">个人中心</el-dropdown-item>
								<el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
								<el-dropdown-item command="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
			<div class="wrapper">
				<div class="main">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "home",
	data() {
		return {
			activeMenu: location.hash.slice(1),
			isCollapse: false,
			menuTree: [],
			userInfo:this.$store.state.userInfo
		}
	},
	mounted() {
	},
	methods: {
		toggleNav() {
			this.isCollapse = !this.isCollapse
		},
		handleCommand(key) {
			if (key === 'updatePwd') {
				this.$message.success('操作成功')
				this.$router.push('/updatePwd')
			} else if (key === 'logout') {
				this.$storage.clearAll()
				this.$store.commit('saveUserInfo','')
				this.userInfo = null
				this.$router.push('/login')
			}else if (key === 'user') {
				this.$router.push('/user')
			}

		},
	}
}
</script>

<style lang="scss" scoped>
.basic-layout {
	position: relative;

	.nav {
		position: fixed;
		width: 200px;
		height: 100vh;
		background-color: #001529;
		color: white;
		overflow-y: auto;
		overflow-x: hidden;
		transition: width 0.3s; // 收缩展开过渡动画

		.logo {
			display: flex;
			align-items: center;
			font-size: 18px;
			height: 50px;

			img {
				margin: 0 16px;
				width: 32px;
				height: 32px;
			}
		}

		.nav-menu {
			height: calc(100vh - 50px);
			border-right: none;
		}

		&.fold {
			width: 64px;
		}
		&.unfold {
			width: 200px;
		}
	}

	.content {
		margin-left: 200px;

		&.fold {
			margin-left: 64px;
		}
		&.unfold {
			margin-left: 200px;
		}

		.top-crumb {
			height: 50px;
			line-height: 50px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ddd;
			padding: 0 20px;

			.top-crumb-left {
				display: flex;
				align-items: center;
				.fold-menu {
					cursor: pointer;
				}
				.bread {
					margin-left: 10px;
				}
			}

			.user-info {
				.notice {
					margin-right: 20px;
					line-height: 25px;
				}

				.username-span {
					cursor: pointer;
					color: #4091ff;
				}
			}
		}

		.wrapper {
			background: #eef0f3;
			padding: 20px;
			height: calc(100vh - 50px);
			.main {
				background-color: #fff;
				height: 100%;
			}
		}
	}
}
</style>

3.菜单交互及递归实现

  • home.vue组件开发
<template>
	<div class="basic-layout">
		<div :class="['nav', isCollapse ? 'fold' : 'unfold']">
			<!-- 系统logo -->
			<div class="logo">
				<img src='../assets/img/logo-small.png' alt=""/>
				<span>HHS_Admin</span>
			</div>

			<!-- 导航菜单 -->
			<el-menu 
				:default-active="activeMenu" 
				class="nav-menu"
			 	background-color="#001529"
			  :router="true" 
				text-color="#fff" 
				:collapse="isCollapse">
				<tree-menu :menuTree="menuTree"/>
			</el-menu>
		</div>

		<div :class="['content', isCollapse ? 'fold' : 'unfold']">
			<div class="top-crumb">
				<div class="top-crumb-left">
					<div class="fold-menu" @click="toggleNav">
						<i class="el-icon-s-operation"></i>
					</div>
					<div class="bread">
						面包屑
					</div>
				</div>
				<div class="user-info">
					<el-badge :is-dot="noticeCount > 0 ? true : false" class="notice" type="danger">
						<i class="el-icon-bell"></i>
					</el-badge>

					<el-dropdown @command="handleCommand">
						<span class="username-span">
							{{userInfo.userName}}
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="user">个人中心</el-dropdown-item>
								<el-dropdown-item command="email65">邮箱:{{userInfo.userEmail}}</el-dropdown-item>
								<el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
								<el-dropdown-item command="logout">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
			<div class="wrapper">
				<div class="main">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import TreeMenu from './TreeMenu.vue'
export default {
	name: "home",
	components:{TreeMenu},
	data() {
		return {
			activeMenu: location.hash.slice(1),
			isCollapse: false,
			menuTree: [],
			userInfo:this.$store.state.userInfo,
			noticeCount:0
		}
	},
	mounted() {
		this.getNoticeCount()
		this.getMenuList()
	},
	methods: {
		toggleNav() {
			this.isCollapse = !this.isCollapse
		},
		handleCommand(key) {
			if (key === 'updatePwd') {
				this.$message.success('操作成功')
				this.$router.push('/updatePwd')
			} else if (key === 'logout') {
				this.$storage.clearAll()
				this.$store.commit('saveUserInfo','')
				this.userInfo = null
				this.$router.push('/login')
			}else if (key === 'user') {
				this.$router.push('/user')
			}

		},
		async	getNoticeCount(){
			const res = await this.$api.noticeCount()
			this.noticeCount = res
		},
		async	getMenuList(){
			try {
				const res = await this.$api.getMenuList()
				this.menuTree = res
			} catch (error) {
				console.error(error);
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.basic-layout {
	position: relative;

	.nav {
		position: fixed;
		width: 200px;
		height: 100vh;
		background-color: #001529;
		color: white;
		overflow-y: auto;
		overflow-x: hidden;
		transition: width 0.3s; // 收缩展开过渡动画

		.logo {
			display: flex;
			align-items: center;
			font-size: 18px;
			height: 50px;

			img {
				margin: 0 16px;
				width: 32px;
				height: 32px;
			}
		}

		.nav-menu {
			height: calc(100vh - 50px);
			border-right: none;
		}

		&.fold {
			width: 64px;
		}
		&.unfold {
			width: 200px;
		}
	}

	.content {
		margin-left: 200px;

		&.fold {
			margin-left: 64px;
		}
		&.unfold {
			margin-left: 200px;
		}

		.top-crumb {
			height: 50px;
			line-height: 50px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ddd;
			padding: 0 20px;

			.top-crumb-left {
				display: flex;
				align-items: center;
				.fold-menu {
					cursor: pointer;
				}
				.bread {
					margin-left: 10px;
				}
			}

			.user-info {
				.notice {
					margin-right: 20px;
					line-height: 25px;
				}

				.username-span {
					cursor: pointer;
					color: #4091ff;
				}
			}
		}

		.wrapper {
			background: #eef0f3;
			padding: 20px;
			height: calc(100vh - 50px);
			.main {
				background-color: #fff;
				height: 100%;
			}
		}
	}
}
</style>
  • TreeMenu.vue组件开发
<template>
  <template v-for="item in menuTree" :key="item._id">
    <el-submenu v-if="item.children && item.children.length>0 && item.children[0].menuType == 1" :key="item._id" :index="item.path">
			<template #title>
				<i :class="item.icon"></i>
				<span>{{item.menuName}}</span>
			</template>
			<tree-menu :menuTree="item.children"/>
	</el-submenu>
	<el-menu-item v-else-if="item.menuType == 1" :index="item.path" :key="item._id">{{item.menuName}}</el-menu-item>
  </template>
</template>

<script>
export default {
	name:'TreeMenu',
	props:{
		menuTree:{
			type:Array,
			default:()=>[]
		}
	}
}
</script>

<style>

</style>
  • api开发
/**
 * api管理
 */
import request from './../utils/request'
 
export default {
    login(params) {
        return request({
            url: '/users/login',
            method: 'post',
            data:params
        })
    },
    noticeCount(params) {
        return request({
            url: '/leave/count',
            method: 'get',
            data:{}
        })
    },
    getMenuList(){
        return request({
            url: '/menu/list',
            method: 'get',
            data:{} 
        })
    }
}

4.面包屑实现

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.path">
      <router-link to="/welcome" v-if="index == 0">{{
        item.meta.title
      }}</router-link>
      <span v-else>{{ item.meta.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script>
export default {
  name: "BreadCrumb",
  computed: {
    breadList() {
      return this.$route.matched;
    },
  },
};
</script>
  • Home.vue
<div class="bread">
    <BreadCrumb />
</div>

5.补充知识点

在这里插入图片描述

不停喝水
关注
  • 6
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
一款非常漂亮的后台管理系统页面
01-16
后台管理系统一款非常漂亮的后台页面,主要以蓝色为主,
【动画设计的vue后台管理欢迎页】
weixin_49612237的博客
07-13 1972
关于动画设计
vue3+ElementPlus快速实现简易面包屑功能
最新发布
ppj__的博客
03-07 1084
可以为每个路由配置附加自定义的元信息，例如页面标题、权限要求、面包屑导航等。这将输出一个数组，其中包含当前路由的所有嵌套路由记录。是一个用于配置路由元信息的对象。它是在路由配置对象中定义的一个属性。如果两个条件都满足，则将该项包含在过滤后的数组中。函数，该函数被调用以获取匹配的路由信息，并相应地更新。表示通过 Vue Router 的路由配置中的。属性，你可以在路由导航和组件中访问这些元信息。属性用于为每个面包屑项指定唯一的标识。变量，用于更新面包屑导航的路径列表。在面包屑项的内容部分，使用。
狂神说javavue教程中P16中的登录代码
study_slacker_的博客
05-28 395
<template> <div> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">欢迎登录</h3> <el-form-item label="账号" prop="username"> <el-in
Vue电商后台管理系统 美化Welcome组件页面
weixin_47505105的博客
04-02 2266
觉得一开始跟着老师做的Welcome页面太单调太简单了，于是进行了美化。
零基础快速开发全栈后台管理系统（Vue3+ElementPlus+Koa2）—项目概述篇（一）
道阻且长，行则将至。
03-11 1495
零基础快速开发全栈后台管理系统（Vue3+ElementPlus+Koa2）—项目概述篇（一）
Vue3+ElementPlus+Koa2 全栈开发后台系统 后台部分.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
Vue3+ElementPlus+Koa2 全栈开发后台系统.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
Vue3+ElementPlus+Koa2 全栈开发后台系统 前端部分.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
基于vue3+elementPlus的后台管理系统模板实现
03-03
基于vue3+elementPlus的后台管理系统模板实现
基于vue3+elementPlus的后台管理系统模板
02-18
基于vue3+elementPlus的后台管理系统模板
Vue 的双向绑定实现组合姓名的欢迎页面
m0_63911352的博客
04-18 308
Vue 的双向绑定实现组合姓名的欢迎页面
Vue3+ElementPlus+Koa2 全栈开发后台系统 =＞ 需要了解的一切①
Write less，do more
07-31 709
1.技术选型 2.能做到什么? 3.开发概述 4.涵盖部分内容 5.包含技术栈 6.系统模块 7.开发流程 8.核心技术 9.权限RBAC 10.审批流 11.审批流程图 12.项目图 1.登陆 2.首页 3.模块 13.章节介绍 14.得到的收获 ...
P9-Vue3后台管理系统-Element实现首页布局
Bruce小鬼
02-09 1394
P9-Vue3后台管理系统-Element实现首页布局 文章目录P9-Vue3后台管理系统-Element实现首页布局1.概述2.首页布局介绍2.1.首页布局分析2.2.首页布局结构设计2.3.首页样式结构设计3.左侧空间布局3.1. 复制Element官网card代码3.2. 应用到Home.vue组件中4.右侧空间布局4.1.右侧全局布局4.2.数据区域布局5.设置首页样式5.1.设置首页右侧数据区域5.2.设置首页右侧折线图和graph图样式5.3.设置首页左侧布局样式6.首页布局和样式完整代码6.1
后台管理系统--首页及登录认证
qq_63322025的博客
10-22 745
后台管理系统--首页及登录认证
Vue3+Element-Plus 动态加载主页Aside(左侧)菜单数据 二五
码侬人生
12-06 5063
1. 通过接口动态获取左侧菜单数据 1.1 获取接口前的注意事项 1. 按照接口文档要求，除了登录接口外，需要授权的API必须要在请求头中使用Authorization 字段提供 token 令牌 意思是说，访问接口必须得到服务器授权才能正常调用。 2. 如何获取服务器的授权认证。 前面章节已经讲过，登录成功后。服务器端会返回一个登录成功后的（ token）令牌，这个token 令牌就是权限认证的字段 （Authorization） 所以在请求一些授权API时，必须在请求头中使用（...
SPA项目开发之首页导航+左侧菜单
weixin_44557427的博客
09-01 210
一、SPA项目开发之首页导航+左侧菜单 1. Mock.js 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富 支持生成随机的文本、...
39.(前端)欢迎页面的设置
m0_63953077的博客
10-20 1153
创建子组件
Vue学习（三）开始编写登陆页面
weixin_42835514的博客
09-27 1052
Vue学习（三）Vue学习（三）解决Vue学习（二）熟悉项目结构时遇到的问题编写登陆组件布局 Vue学习（三） 解决Vue学习（二）熟悉项目结构时遇到的问题 Vue学习（二）熟悉项目结构 当时点击可视化面板中的serve无法运行，cmd中npm install然后npm run serve也无法运行。 仔细阅读窗口中的报错信息，发现基本都是一些格式问题，百度之后发现都是Eslint的原因，可以查看Eslint的常见错误。也可以直接关闭Eslint插件vue cli3关闭烦人的eslint 亲测有效 编写登陆
使用vue3+elementPlus menu 实现 手机端侧边菜单栏
05-27
好的，以下是使用Vue3和Element Plus实现手机端侧边菜单栏的步骤： 1. 安装Vue3和Element Plus 首先，你需要安装Vue3和Element Plus。你可以通过npm或yarn安装它们。具体安装命令如下： ``` npm install vue@next...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值