前端学习（1884）vue之电商管理系统电商系统之实现侧边栏的折叠和展开

目录结构

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'Vue.use(Router)const router= new Router({routes:[{path:'/',redirect:'/login'},{path:'/login',component:Login},{path:'/home',component:Home}]
})
//挂载路由导航守卫
router.beforeEach((to,from,next)=>{if(to.path==='/login') return next();//获取tokenconst tokenStr=window.sessionStorage.getItem('token')if(!tokenStr) return next('/login')next();
})export default router

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png"></div><!-- 表单区域--><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 登录区域--><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div>
</div></template><script>
export default{data(){return{//这是登录表单的数据loginForm:{username:'geyao',password:'12345678'},// 表单验证loginFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入用户密码', trigger: 'blur' },{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }]}}},methods:{resetLoginForm(){// console.log(this)this.$refs.loginFormRef.resetFields();},login(){this.$refs.loginFormRef.validate(async valid =>{if(!valid) return;const {data:res}=await this.$http.post('login',this.loginForm);if(res.meta.status!==200) return this.$message.error('登录失败');this.$message.success('登录成功');// 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; //   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问//   1.2 token 只应在当前网站打开期间生效，所以将token保存在window.sessionStorage.setItem('token', res.data.token)// 2、通过编程式导航跳转到后台主页, 路由地址为：/homethis.$router.push('/home')});}}
}
</script><style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}
.login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff;
}.avatar_box {width: 130px;height: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}.login_form {position: absolute;bottom: 60px;width: 100%;padding: 0 20px;box-sizing: border-box;
}.btns {display: flex;justify-content: center;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
Vue.config.productionTip = false
//导入全局样式
import './assets/css/global.css'import axios from 'axios'
Vue.prototype.$http=axios
axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/"
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {// console.log(config)// 为请求头对象，添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem('token')// 在最后必须 return configreturn config
})
Vue.config.productionTip=false;
new Vue({router,render: h => h(App)
}).$mount('#app')

global.css

/* 全局样式 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;}

element.js

import Vue from 'vue'//弹框提示
import {Message,Button,Form,FormItem,Input,Container,Header,Aside,Main,Menu,Submenu,MenuItemGroup,MenuItem,
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.prototype.$message = Message

Home.vue

<template><el-container class="home-container"><el-header>Header<div><img src="../assets/logo.png" alt /><span>电商管理系统</span></div>
<el-button type="info" @click="logout">退出</el-button></el-header><el-container><el-aside :width="isCollapse"><div class="toggle-button" @click="togleCollapse">|||</div><el-menu  background-color="#333744" text-color="#fff" active-text-color="#409FFF" :unique-opened="true" :collapse="isCollapse" :collapse-transition="false"><!-- :unique-opened="true"->只允许展开一个菜单 --><!-- :unique-opened="true"->只允许展开一个菜单 --><!-- :collapse-transition="false" -> 关闭动画 --><!-- router -> 导航开启路由模式 --><!-- 一级菜单  --><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><!-- 二级菜单 --><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><el-main>Main</el-main>
</el-container>
</el-container>
</template><script>
export default{data(){return{menulist:[],iconObj: {'125': 'iconfont icon-user','103': 'iconfont icon-tijikongjian','101': 'iconfont icon-shangpin','102': 'iconfont icon-danju','145': 'iconfont icon-baobiao'},isCollapse:false}},//获取所有菜单created () {this.getMenuList()// this.activePath = window.sessionStorage.getItem('activePath')},methods:{logout(){window.sessionStorage.clear();this.$router.push("/login");},// 获取请求菜单async getMenuList () {const { data: res } = await this.$http.get('menus')if (res.meta.status !== 200) return this.$message.error(res.meta.msg)this.menulist = res.dataconsole.log(res)},// 菜单的折叠与展开togleCollapse () {this.isCollapse = !this.isCollapse},}
};
</script><style lang="less" scoped>
.home-container{height: 100%;
}
.el-header {background-color: #373f41;display: flex;justify-content: space-between;padding-left: 0;align-items: center;color: #fff;font-size: 20px;> div {display: flex;align-items: center;img {height: 40px;}span {margin-left: 15px;}}
}
.el-aside {background-color: #333744;.el-menu{border-right: none;}}
.el-main {background-color: #eaedf1;
}
.iconfont{margin-right: 10px;
}
.toggle-button {background-color: #4A5064;font-size: 10px;line-height: 24px;color: #fff;text-align: center;letter-spacing: 0.2em;// 鼠标放上去变成小手cursor: pointer;
}
</style>

.prettierrc

{"semi":false,"singleQuote":true
}

eslintrc.js

module.exports = {root: true,env: {node: true},extends: ['plugin:vue/essential','@vue/standard'],parserOptions: {parser: 'babel-eslint'},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren':0}
}

运行结果

前端学习（1884）vue之电商管理系统电商系统之实现侧边栏的折叠和展开相关推荐

Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
计算机毕业设计基于springboot+vue+elementUI的网吧管理系统(源码+系统+mysql数据库+Lw文档）
项目介绍随着我国的经济发展,人们的生活水平也有了一定程度的提高,对网络的要求也越来越高,很多家庭都有了自己的电脑,但是很多时候大家在家里玩电脑的时候找不到那种玩耍的气氛和氛围,这个时候大家就都选择了 ...
前端学习（1886）vue之电商管理系统电商系统之首页路由的重定向主页侧边栏路由链接的改造
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1885）vue之电商管理系统电商系统之首页路由的重定向
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1883）vue之电商管理系统电商系统之每次只能打开一个菜单项并解决边框问题
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1882）vue之电商管理系统电商系统之设置字体颜色并添加标签
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1881）vue之电商管理系统电商系统之双层for循环渲染数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1880）vue之电商管理系统电商系统之获取左侧菜单数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（1879）vue之电商管理系统电商系统之通过axios拦截器添加token认证
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

前端学习（1884）vue之电商管理系统电商系统之实现侧边栏的折叠和展开

前端学习（1884）vue之电商管理系统电商系统之实现侧边栏的折叠和展开相关推荐

最新文章

热门文章