SPA项目实现首页导航以及左侧菜单

前言

上一篇文章简单的分享了SPA项目实现登录注册以及在开发过程中遇到的一些问题。本篇文章将要分享的内容为SPA项目实现首页导航以及左侧菜单。

---

一、准备工作

       1、 安装mockjs的依赖

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)

         login-mock.js

 

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }

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

二、界面搭建

        AppMain.vue

        LeftNav.vue

        TopNav.vue

三、左侧树收缩 

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

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

这里我们用到了总线。

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

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

  AppMain.vue

        LeftNav.vue

        TopNav.vue

 

四、退出登录

 

---

总结

        本文仅简单的讲述了，登录后主页的搭建、左侧菜单的收起展开以及简单的介绍了一下总线。如有错误还望指正。谢谢啦。