ElementUI之首页导航与左侧菜单

目录

一、Mock

1.1 什么是Mock.js

1.2 安装与配置

1.2.1 安装mock.js

1.2.2 引入mock.js

1.3 mock.js使用

1.3.1 定义测试数据文件

1.3.2 mock拦截Ajax请求

1.3.3 界面代码优化

二、总线

2.1 定义

2.2 类型分类

2.3 前期准备

2.4 配置组件与路由关系

2.4.1 配置组件

2.4.2 配置路由关系

2.5 展示效果

一、Mock

1.1 什么是Mock.js

主要特点和用途如下：

 Mock.js 在前端领域风靡的原因有几个：

1.2 安装与配置

1.2.1 安装mock.js

Win+R输入cmd打开命令提示符，执行以下命令进行mock.js安装，如下：

注：-D表示只在开发环境中使用。

package.json中有以下代码即安装成功，如下：

安装完成之后，我们需要引入mock.js。

1.2.2 引入mock.js

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置，如下：

dev.env.js：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

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

prod.env.js：

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

 main.js：

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

到这里我们引入部分就完成了。

1.3 mock.js使用

1.3.1 定义测试数据文件

在src目录下新建一个mock包，在mock包下定义测试数据文件，目录如下：

 login-mock.js：

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

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

1.3.2 mock拦截Ajax请求

在src/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)

1.3.3 界面代码优化

由于此次展示无需用到后端代码，所以博主就将昨天前后端交互用到的后端代码给备注了，换上了正常前后端分离开发所用的mock.js代码，如下：

Login.vue：

<template>
	<div class="login-wrap">
		<el-form class="login-container">
			<h1 class="title">用户登录</h1>
			<el-form-item label="">
				<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
			</el-form-item>
			<el-row style="text-align: center;margin-top:-10px">
				<el-link type="primary">忘记密码</el-link>
				<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
			</el-row>
		</el-form>
	</div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods:{
    gotoRegister(){
      this.$router.push('/Register');
    },
    doSubmit(){
      let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
      let params = {
        username: this.username,
        password: this.password
      };

      // axios.get(url, {
      //   params: params
      // }).then(r => {
      //   console.log(r);
      //   if (r.data.success) {
      //     this.$message({
      //       message: r.data.msg,
      //       type: 'success'
      //     });
      //   } else {
      //     this.$message.error(r.data.msg);
      //   }
      // }).catch(e => {
      // });

      axios.post(url,params).then(r => {
        console.log(r);
        // if (r.data.success) {
        //   this.$message({
        //     message: r.data.msg,
        //     type: 'success'
        //   });
        // } else {
        //   this.$message.error(r.data.msg);
        // }
        this.$message({
          message: r.data.message,
          type: r.data.code == 0 ? 'success' : 'error'
        });
      }).catch(e => {
      });
    }
  }
}
</script>


<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
    background-image: url('~@/assets/绿叶.jpg'); /* 使用背景图片的路径 */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}
.login-container {
	border-radius: 10px;
	margin: 0px auto;
	width: 350px;
	padding: 30px 35px 15px 35px;
	background: #fff;
	border: 1px solid #eaeaea;
	text-align: left;
	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
	margin: 0px auto 40px auto;
	text-align: center;
	color: #505458;
}
</style>

接着运行代码，测试结果如下：

二、总线

2.1 定义

2.2 类型分类

总线在计算机体系结构中扮演了关键的角色，它连接了中央处理器（CPU）、内存、外部设备和其他组件，允许它们之间进行数据传输和交互。总线可分为三个主要类型：

总线的存在简化了计算机系统内部通信的复杂性。在Java中，虽然你不能直接控制硬件的总线，但你可以通过Java编程语言和相关的库和框架来与底层硬件进行交互和通信。

2.3 前期准备

依需用到案例展示，我们需要用到三个组件和部分图片搭建页面，如下：

三个组件分别如下：

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">Main</el-main>
		</el-container>
	</el-container>
</template>

<script>
	// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'

	// 导出模块
	export default {
    components:{
      TopNav,LeftNav
    },
		data(){
      return{
          asideClass:'main-aside'
      }
    },
    created(){
      this.$root.Bus.$on('xxx',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：

<template>
	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
		<el-submenu index="1">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span>导航一</span>
			</template>
			<el-menu-item-group>
				<template slot="title">分组一</template>
				<el-menu-item index="1-1">选项1</el-menu-item>
				<el-menu-item index="1-2">选项2</el-menu-item>
			</el-menu-item-group>
			<el-menu-item-group title="分组2">
				<el-menu-item index="1-3">选项3</el-menu-item>
			</el-menu-item-group>
			<el-submenu index="1-4">
				<template slot="title">选项4</template>
				<el-menu-item index="1-4-1">选项1</el-menu-item>
			</el-submenu>
		</el-submenu>
		<el-menu-item index="2">
			<i class="el-icon-menu"></i>
			<span slot="title">导航二</span>
		</el-menu-item>
		<el-menu-item index="3" disabled>
			<i class="el-icon-document"></i>
			<span slot="title">导航三</span>
		</el-menu-item>
		<el-menu-item index="4">
			<i class="el-icon-setting"></i>
			<span slot="title">导航四</span>
		</el-menu-item>
	</el-menu>
</template>
<script>
	export default {
		data(){
		  return{
		      collapsed:false
		  }
		},
    created(){
      this.$root.Bus.$on('xxx',v=>{
        this.collapsed = v;
      });
    }
	}
</script>
<style>
	.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;
	}
</style>

TopNav.vue：

<template>
	<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
	 text-color="#fff" active-text-color="#ffd04b">
		<el-menu-item index="1">处理中心</el-menu-item>
		<el-submenu index="2">
			<template slot="title">我的工作台</template>
			<el-menu-item index="2-1">选项1</el-menu-item>
			<el-menu-item index="2-2">选项2</el-menu-item>
			<el-menu-item index="2-3">选项3</el-menu-item>
			<el-submenu index="2-4">
				<template slot="title">选项4</template>
				<el-menu-item index="2-4-1">选项1</el-menu-item>
				<el-menu-item index="2-4-2">选项2</el-menu-item>
				<el-menu-item index="2-4-3">选项3</el-menu-item>
			</el-submenu>
		</el-submenu>

		<el-menu-item index="3" disabled>消息中心</el-menu-item>
		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
	</el-menu> -->
	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
		<el-button class="buttonimg">
			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
		</el-button>
		<el-submenu index="2" class="submenu">
			<template slot="title">超级管理员</template>
			<el-menu-item index="2-1">设置</el-menu-item>
			<el-menu-item index="2-2">个人中心</el-menu-item>
			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
		</el-submenu>
	</el-menu>
</template>

<script>
	export default {
		data(){
		  return {
		      collapsed:false,
          imgshow:require('@/assets/img/show.png'),
          imgsq:require('@/assets/img/sq.png')
		  }
		}
    ,methods:{
      doToggle(){
        this.collapsed = ! this.collapsed;
        //this.$emit()
        //将是否折叠变量放入总线
        this.$root.Bus.$emit('xxx',this.collapsed);
      },
      exit(){
        this.$router.push("/");
      }
    }
	}
</script>

<style scoped>
	.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;
	}
</style>

图片目录结构如下：

2.4 配置组件与路由关系

接下来就是要想让我们的组件能够成功展示，我们需要去配置他们路由的一些关系，如下，

2.4.1 配置组件

在router包下加入以下代码，如下：

import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'

2.4.2 配置路由关系

在router包下加入以下代码，如下：

{
    path: '/AppMain',
    name: 'AppMain',
    component: AppMain,
    children: [
      {
        path: '/LeftNav',
        name: 'LeftNav',
        component: LeftNav
      },
      {
        path: '/TopNav',
        name: 'TopNav',
        component: TopNav
      }
    ]
  }]

main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'
import router from './router'

import axios from '@/api/http'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)
// 新添加3
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  data(){
    return{
      Bus:new Vue()
    }
  },
  components: { App },
  template: '<App/>'
})

2.5 展示效果

 展示代码效果如下：

最后使用ElementUI之首页导航与左侧菜单就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !