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

<template>
	<el-container class="main-container">
		<el-aside v-bind:class="asideClass">
			<LeftNav>LeftNav>
		el-aside>
		<el-container>
			<el-header class="main-header">
				<TopNav>TopNav>
			el-header>
			<el-main class="main-center">Mainel-main>
		el-container>
	el-container>
template>
 
<script>
	// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'
 
	// 导出模块
	export default {
    data(){
      return {
        asideClass:'main-aside'
      }
    },
    components:{
      TopNav,
      LeftNav
    },
    created(){
      this.$root.Bus.$on('collapsed-aside',(v)=>{
        this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
      })
    }
	};
script>
<style scoped>
	.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;
	}
style>

        LeftNav.vue