17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面

这期开始主页面的编写，在src\views目录下创建主页面Home.vue，主要是管理系统页面布局，头部和左侧导航栏。

一、Home.vue 页面

1.1 Home.vue 页面html部分：

<template><el-container class="home-wrap"><!-- header start --><el-header class="flex"><div class="logo flex-item"><i class="el-icon-date"></i> 工作周报</div><div class="user-info"><el-dropdown @command="handleCommand"><el-button type="primary"><i class="el-icon-user-solid el-icon--left"></i>{{userInfo.name}}</el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item command="loginOut">退出</el-dropdown-item></el-dropdown-menu></el-dropdown></div></el-header><!-- header end --><div class="container-wrap"><!-- aside-nav start --><div class="aside-wrap"><el-menu:default-active="activePath"background-color="#283643"text-color="#fff"active-text-color="#1CC09F"router><el-menu-item v-for="item in menuList" :key="item.url" :index="item.url"@click="handleSelect(item.url)"><i :class="item.icon"></i><span slot="title">{{item.name}}</span></el-menu-item></el-menu></div><!-- aside-nav end --><!-- main start --><div class="main-wrap"><router-view/></div><!-- main end --></div></el-container>
</template>

1.2 Home.vue 页面js部分：

<script>
import { userLogout } from '@/config/interface'
export default {data () {return {menuList: this.$store.state.menuList,activePath: null,reqFlag: {logout: true}}},components: {},computed: {userInfo: function () {let userInfo = this.$store.state.userInforeturn userInfo}},watch: {'$route': function (to, from) {this.activePath = to.meta.pagePath}},created () {this.activePath = this.$route.meta.pagePath},methods: {handleCommand (command) {if (command == 'loginOut') {this.loginOut()}},// 登出loginOut () {const url = userLogoutif (this.reqFlag.logout) {this.reqFlag.logout = falselet params = {}this.$http(url, params).then(res => {if (res.code == 1) {localStorage.clear()this.$store.dispatch('saveUserInfo', {})this.$common.toast('登出成功', 'success', false)this.$router.replace({ path: '/' })}this.reqFlag.logout = true})}},// 解决element导航中，当前导航路由标识和当前路由一致时，点击当前导航，页面不刷新问题handleSelect (indexPath) {if (indexPath == this.$route.path) {this.$common.shallowRefresh(this.$route.name)}}}
}
</script>

1.3 Home.vue 页面展示：

二、项目链接

周报管理系统git仓库链接： nodeJs工作周报后台管理系统OA模板

程序员接单_竹立荷塘的博客-CSDN博客

17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面相关推荐

html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
nodejs+express+mysql(后台实例项目练习4—实现机构新增功能)
nodejs+express+mysql(后台实例项目练习-搭建项目) nodejs+express+mysql(后台实例项目练习2-数据库链接网页跳转 iframe框架路径问题模板引擎 ) no ...
cms php vue 开源_lucms —— 基于 Vue 和 Laravel 开发的后台管理系统
lucms -- 基于 Vue 和 Laravel 开发的后台管理系统由 Ucer 创建于2年前, 最后更新于 1年前版本号 #1 36802 views 8 likes 0 collects 项 ...
基于Vue+ElementUI实现的数据分析后台管理系统
项目介绍一款 Java 语言基于 SpringBoot2.x.MybatisPlus.Vue.ElementUI.MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化.组件化.可插拔的前后 ...
基于vue和nodejs毕业设计酒店预约管理系统
RuoYi Vue - 若依框架的 Vue 版本，免费开源、生态强大、专业的 admin 后台管理系统，基于 Vue + Element
有一段时间没有推荐 admin 框架了,若依这款后台框架很强大,提供了 vue 版本,很实用,推荐给大家. 关于若依 RuoYi 中文名称叫若依,名字十分二次元,是一个后台管理系统,后端基于经典技术组 ...
基于Vue和NodeJs摄影网站的设计与实现
随着互联网技术和信息化技术的不断深入发展,利用互联网技术进行信息化管理有了很大的提高,从而使得信息管理变的越来越快捷.面对互联网的发展提升引发的新的办公方式,照相馆管理人员急需要一套摄影网站管理系统来 ...
基于ThinkPHP+Element的低代码后台开发框架，开箱即用无需配置
========================================================= 开发文档社区地址官网地址演示地址立即下载 ========= ...
vue 回车查询按钮_前后端分离商城，前端基于Vue后端nodejs包含小程序源码免费分享...
先转发,然后加关注,私信"购物"即可获取源码下载链接项目简介本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现 ...

17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面

一、Home.vue 页面

1.1 Home.vue 页面html部分：

1.2 Home.vue 页面js部分：

1.3 Home.vue 页面展示：

二、项目链接

17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面相关推荐

最新文章

热门文章