SPA项目左侧树形菜单显示和顶部导航

最新推荐文章于 2024-09-04 16:31:50 发布
最新推荐文章于 2024-09-04 16:31:50 发布
阅读量500 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/what_to/article/details/99242818
版权

SPA项目左侧树形菜单显示和顶部导航

Mock使用

在上一次的代码中我们实现了前后端的绑定，今天我们就来讲一下前后端的分离
那么在这里我们就有一个疑惑了，那么数据就该怎么来呢，在这里我将用到Mock
来模拟数据让他展示出来
1. Mock.js
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

众所周知Mock.js因为两个重要的特性风靡前端:
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
拦截Ajax请求
不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

更多内容，可以云Mockjs官方查看“http://mockjs.com/”

2. Mock.js使用步骤
2.1 安装mockjs依赖
npm install mockjs -D（在命令提示符加入即可）
2.2 引入
为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

(1)dev.env
MOCK: ‘true’

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

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

(2)prod.env
MOCK: ‘false’

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

(3)main.js
//开发环境下才会引入mockjs

  process.env.MOCK && require('@/mock')

login-mock.js

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

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

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'

Vue.use(Router)

export default new Router({
	routes: [{
			path: '/',
			name: 'Login',
			component: Login
		}, {
			path: '/Login',
			name: 'Login',
			component: Login
		},
		{
			path: '/Reg',
			name: 'Reg',
			component: Reg
		},
		{
			path: '/AppMain',
			name: 'AppMain',
			component: AppMain
		},
		{
			path: '/LeftNav',
			name: 'LeftNav',
			component: LeftNav
		},
		{
			path: '/TopNav',
			name: 'TopNav',
			component: TopNav
		}
	]
})

在这里插入图片描述

整体配置和效果显示

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 {
		data() {
			return {
				/* 是否折叠 */
				asideClass: 'main-aside-collapsed '
			}
		},
		components: {
			TopNav,
			LeftNav
		},
		created() {
			this.$root.Bus.$on("collapsed-side", (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>

LeftNve.vue

<template>
	<el-menu default-active="2" class="el-menu-vertical-demo" 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("collapsed-side", (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>

TopNve.vue

<template>
	<el-menu default-active="2" class="el-menu-vertical-demo" 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("collapsed-side", (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>

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'
import 'element-ui/lib/theme-chalk/index.css'
// process.env.MOCK && require('@/mock')
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import axios from '@/api/http' 
import VueAxios from 'vue-axios'
// import axios from 'axios'
// import qs from 'qs'


Vue.use(ElementUI)
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

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

在这里插入图片描述
在这里插入图片描述

爕藝響
关注
SPA项目实现首页导航以及左侧菜单
qq_62331938的博客
09-11 407
本文仅简单的讲述了，登录后主页的搭建、左侧菜单的收起展开以及简单的介绍了一下总线。
SPA 项目开发 之 首页导航&左侧菜单
qq_44641053的博客
08-10 2244
SPA 项目开发 之 首页导航&左侧菜单SPA 项目开发 之 首页导航&左侧菜单Mock.js登陆与注册页面的跳转HBuild 主要代码components 目录Routerviews 目录效果展示 SPA 项目开发 之 首页导航&左侧菜单 需要实现的功能： 1、mock.js模拟响应ajax请求 2、通过js代码完成路由的跳转 3、后台主界面的搭建 4、退...
多种左侧树形菜单导航
04-22
左侧树形菜单导航大全,提供多种左侧树形实例
SAP ABAP ALV创建动态树形菜单
SAP ABAP开发技能记录分享
12-04 399
第三、 四层级别，下一级别包括上一级别的相关信息，在创建内表时可能包括；比如子类可以拥有父类的一些信息，孙类级别则包含子类以上的相关信息。这些信息为后续数据处理更直接更方便的提供了需要的信息。创建的合同越多，使用树形菜单能比较直观的地显示，而且展开下阶也能明确的知识相关的信息，比如合同中的出口成品有哪些。第二、 每一级别，其node_key编制有规律性；这样才能处理复杂的事件响应；第一、 Node_key一定要区分，不能重复，否则出错；创建动态树形菜单——ALV。
Vue导航栏
最新发布
sbxjhvdddjdjd的博客
09-04 1138
首先我们需要一个公共的导航栏，里面的div内容就不展示了，主要展示的是引用的步骤，具体的div样式，在elementUI的官网有。Vue的项目中，导航栏是经常需要使用到的，主要的是如何将公共的导航栏引用到页面上，这里主要讲解常用的两种方式。在我们需要显示的页面，将meta下的属性值设置为ture，不需要的设置为false，默认不进行配置就是不显示。前面说了，meta下的属性是自定义的，并不是网上说的是keepAlive进行绑定的。在vue给的官方文档中，meta是这样定义的。你会发现，效果依然是完美的！
vue 顶部导航
PiscesGirl的博客
05-17 4231
      &lt;template&gt; &lt;div class="app"&gt;    &lt;div id="NavSlide"&gt;         &lt;nav&gt;            &lt;img src="../assets/img/logo.png"/&gt;            &lt;p  @click="to
（翻译）顶部导航 vs 左侧导航：哪种方式更好
gc_2299的博客
11-24 951
顶部导航和左侧导航，哪个更适合用户使用？网页设计人员已经为此争论了很久，许多人有自己的结论，但另一些人则心情矛盾。事实上，这个问题并没有绝对的答案，与用户相关的设计，最重要的是看上下文环境。
Vue3+TypeScript项目（中）顶部导航组件
m0_65435970的博客
03-13 1305
【代码】Vue3+TypeScript项目（中）顶部导航。
树形菜单的两种实现方式
10-23
树形菜单是用户界面设计中常见的一种数据结构展示方式，尤其在网站导航、文件系统浏览等场景中广泛应用。本文将详细介绍树形菜单的两种主要实现方式：基于CSS的静态页面和基于Ajax的动态更新。 一、CSS静态页面的树...
SPA项目开发之首页导航与左侧菜单 - mock.js模拟数据
qq_63492318的博客
09-13 846
我们在main.js中定义一个变量，为总线；main.jsnew Vue({router,data() {return {//在Vue根实例中定一个变量，这个变量就是vue实例，它就是总线}},})3.2 改变收缩图标的样式methods: {//将 this.collapsed 放到总线上}}测试一下没有问题；2、在LeftNav.vue中使用钩子函数，从总线上取出this.collapsed变量data(){return {}},
SPA项目开发之动态实现左侧菜单栏&分页查询功能
qq_63492318的博客
09-14 461
实现左侧树形菜单数据的绑定，以及文章列表分页查询功能...
一个基于vue2的可浮于顶部的导航轴
08-12
一个基于vue2的可浮于顶部的导航轴
vue实现顶部菜单栏
01-18
vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换 先看展示结果： 点击第一个按钮，显示内容1 点击第二个按钮，展示内容2 下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙) 数据标注 案
single-spa的demo,微前端的最佳方案,可以实现多种代码框架共存
09-23
single-spa的demo微前端的最佳方案,可以实现多种代码框架共存
vue实现顶部导航栏
呵呵的牛
03-28 9817
vue实现顶部导航栏
Vue实现顶部导航栏设计
m0_52204142的博客
10-21 7827
效果图： 完整代码： <template> <div class="title"> <div class="title-left"> <div class="title-left-image"></div> <router-link to="/unusedOrder"> 　　 <span class="">导航一</spa
Vue自定义网页顶部导航栏
热门推荐
京茶吉鹿的博客
04-12 1万+
veu实现网页顶部导航栏，vue-router，VueRouter
vue pc官网顶部导航栏组件
m0_61672533的博客
12-08 1091
vue pc官网顶部导航栏组件
Vue实战第3章：主页设计之顶部导航栏
孙君的空间站
02-01 1万+
Vue实战第3章：主页设计之顶部导航栏
Vue SPA项目优化实践：从20s到秒开
"Vue SPA项目优化技术点及实践案例" Vue单页应用（SPA）由于其组件化和动态加载的特点，往往会导致较大的初始加载体积，影响用户体验，特别是首屏加载速度。本文通过一个具体的Vue项目实例，探讨了优化Vue SPA项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值