前端|SPA项目实现首页导航以及左侧菜单前端框架|vue.js

前言上一篇文章简单的分享了SPA项目实现登录注册以及在开发过程中遇到的一些问题。本篇文章将要分享的内容为SPA项目实现首页导航以及左侧菜单。
一、准备工作 1、安装mockjs的依赖

【前端|SPA项目实现首页导航以及左侧菜单】npm install mock -D 只在开发环境使用

文章图片

2、配置开发环境及生产环境 dev.env

module.exports = merge(prodEnv, { NODE_ENV: '"development"', MOCK: 'true' })

prod.env

module.exports = { NODE_ENV: '"production"', MOCK: 'false' }

在main.js引入mock

//开发环境下才会引入mockjs process.env.MOCK && require('@/mock')

3、mock的使用

前后端分离的开发中，我们通常使用mock进行数据的模拟，我们总不能等后端人员搞完再做吧。所以我们可以使用模拟数据，其中数据的内容需要根据需求前端人员与后端人员商定好。

在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置

index.js

import Mock from 'mockjs' //引入mockjs，npm已安装 import action from '@/api/action' //引入请求地址//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时 Mock.setup({ // timeout: 400//延时400s请求到数据 timeout: 200 - 400 //延时200-400s请求到数据 })//引登陆的测试数据，并添加至mockjs import loginInfo from '@/mock/json/login-mock.js' let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN') Mock.mock(s1, "post", loginInfo) // Mock.mock(s1, /post|get/i, loginInfo)

// const loginInfo = { //code: -1, //message: '密码错误' // }//使用mockjs的模板生成随机数据 const loginInfo = { 'code|0-1': 0, 'msg|3-10': 'msg' } export default loginInfo;

二、界面搭建 AppMain.vue

.main-container { height: 100%; width: 100%; box-sizing: border-box; } .main-aside-collapsed { /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */ width: 64px !important; height: 100%; background-color: #334157; margin: 0px; } .main-aside { width: 240px !important; height: 100%; background-color: #334157; margin: 0px; } .main-header, .main-center { padding: 0px; border-left: 2px solid #333; }

LeftNav.vue

.el-menu-vertical-demo:not(.el-menu--collapse) { width: 240px; min-height: 400px; } .el-menu-vertical-demo:not(.el-menu--collapse) { border: none; text-align: left; } .el-menu-item-group__title { padding: 0px; } .el-menu-bg { background-color: #1f2d3d !important; } .el-menu { border: none; } .logobox { height: 40px; line-height: 40px; color: #9d9d9d; font-size: 20px; text-align: center; padding: 20px 0px; } .logoimg { height: 40px; }

TopNav.vue

.el-menu-vertical-demo:not(.el-menu--collapse) { border: none; } .submenu { float: right; } .buttonimg { height: 60px; background-color: transparent; border: none; } .showimg { width: 26px; height: 26px; position: absolute; top: 17px; left: 17px; } .showimg:active { border: none; }

文章图片

三、左侧树收缩左侧树的收缩代码在搭建的部分一并放上去了。这里主要讲的是总线。

这个界面可见，收缩的按钮在顶部的导航条。我们点击顶部的导航条需要将左侧的树收起或者展开。顶部导航条和左侧的数有同一参数，我们根据这个参数collapsed的内容判断是收起还是展开。改变它的样式。

这里我们用到了总线。
我们将collapsed的值放在总线中，谁需要使用谁就去总线中调用。方便传值。

如果不用总线，我们需要将collapsed的值由TopNav传递到AppMain中，再由AppMain传递到LeftNav中。

AppMain.vue

.main-container { height: 100%; width: 100%; box-sizing: border-box; } .main-aside-collapsed { /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */ width: 64px !important; height: 100%; background-color: #334157; margin: 0px; } .main-aside { width: 240px !important; height: 100%; background-color: #334157; margin: 0px; } .main-header, .main-center { padding: 0px; border-left: 2px solid #333; }

LeftNav.vue

.el-menu-vertical-demo:not(.el-menu--collapse) { width: 240px; min-height: 400px; } .el-menu-vertical-demo:not(.el-menu--collapse) { border: none; text-align: left; } .el-menu-item-group__title { padding: 0px; } .el-menu-bg { background-color: #1f2d3d !important; } .el-menu { border: none; } .logobox { height: 40px; line-height: 40px; color: #9d9d9d; font-size: 20px; text-align: center; padding: 20px 0px; } .logoimg { height: 40px; }

TopNav.vue

.el-menu-vertical-demo:not(.el-menu--collapse) { border: none; } .submenu { float: right; } .buttonimg { height: 60px; background-color: transparent; border: none; } .showimg { width: 26px; height: 26px; position: absolute; top: 17px; left: 17px; } .showimg:active { border: none; }

文章图片

四、退出登录

.el-menu-vertical-demo:not(.el-menu--collapse) { border: none; } .submenu { float: right; } .buttonimg { height: 60px; background-color: transparent; border: none; } .showimg { width: 26px; height: 26px; position: absolute; top: 17px; left: 17px; } .showimg:active { border: none; }