SPA项目开发之首页导航+左侧菜单

最新推荐文章于 2024-11-02 08:58:20 发布
最新推荐文章于 2024-11-02 08:58:20 发布
阅读量855 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cat_Jay_Fish/article/details/121234205
版权
本文详细介绍了如何使用Mock.js模拟Ajax响应，搭建Vue.js前端主界面，包括左侧树的收缩功能以及退出功能的实现。通过Mock.js动态生成随机响应数据，模拟真实开发场景，提高了开发效率。同时，文章展示了如何构建Vue组件，如AppMain、LeftNav和TopNav，以及利用Vue总线进行组件间通信，实现了侧边栏的展开和收缩。最后，添加了退出功能，点击后返回登录界面。
摘要由CSDN通过智能技术生成

课程目标

 

1.mock.js模拟响应Ajax请求

2.前台主界面的搭建

3.左侧树收缩功能（vue总线的概念）

4.退出功能

一.mock.js模拟响应Ajax请求

① 安装mockjs依赖

npm install mockjs -D              #只在开发环境使用

 

配置开发环境及生产环境

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

(1)dev.env.js

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

   MOCK: 'true'

      })

(2)prod.env.js

module.exports = {

NODE_ENV: '"production"',

MOCK: 'false'

      }

再去main.js做配置

//开发环境下才会引入mockjs

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

将mock文件导入Hbuilder

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 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)

结果展示

 可以看出消息框结果都是随机的，有成功有失败

 真实的模拟实际开发场景，如果按以前的jason开发，那么要么就是成功要么就是失败，不符合开发逻辑

二.前台主界面的搭建

① 将vue文件导入到公共文件compos当中

 

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'
			}
		},
		components:{
			LeftNav,TopNav
		}
	};
</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"  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
			}
		}
	}
</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')
			}
		}
	}
</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>

② 将img文件导入assets文件中

bg.png

 logo.png

 

 show.png

 sq.png

 ③  给界面去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,
			children:[{
			path: '/LeftNav',
			name: 'LeftNav',
			component: LeftNav,
		},{
			path: '/TopNav',
			name: 'TopNav',
			component: TopNav
		}]
		}
	]
})

再去Login.vue进行界面跳转

 this.$router.push({path:'/AppMain'});

结果展示

 

3.左侧树收缩功能（vue总线的概念） 

总线的概念：

专门用于处理变量的传参

1、定义总线

①、增加实例

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
//开发环境：true && require('@/mock')  会执行后面代码，也就是说mock.js会被导入到当前环境中
//生产环境：false && require('@/mock') 不会执行后面代码，也就是说mock.js不会引导到当前环境中
process.env.MOCK && require('@/mock')
import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // 新添加 1
import axios from '@/api/http'  //#vue项目对axios的全局配置      
//import axios from 'axios'
import VueAxios from 'vue-axios'


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

/* eslint-disable no-new */
new Vue({
  el: '#app',
    data(){
        return {
            //总线是一个vue的实例
            Bus:new Vue({
                
            })
        }
    },
  router,
  components: { App },
  template: '<App/>'
})

②、点击图标，图标切换

TopNav.vue

<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;
               
            }
        }
    }
</script>

2、完成收缩功能

TopNav.vue

<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.$root.Bus.$emit("collapsed-aside", this.collapsed);
            }
        }
    }
</script>

②、LeftNav.vue

<script>
    export default {
        data(){
            return{
                collapsed:false
            }
        },
        created(){
            this.$root.Bus.$on("collapsed-aside",(v)=>{
                this.collapsed=v;
            });
        }
    }
</script>

③、AppMain.vue 

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

    // 导出模块
    export default {
        data() {
            return {
                asideClass: 'main-aside'
            }
        },
        components: {
            LeftNav,
            TopNav
        },

        监听触发事件

         //钩子函数  当组件被访问就执行  on("事件名", 回调函数)
         //监听TopNav.vue中定义的方法collapsed-aside    v是方法中传过来的参数
        created() {
            this.$root.Bus.$on("collapsed-aside", (v) => {
                this.asideClass = v ? 'main-aside-collapsed':'main-aside';
            });
        }
    };
</script>

结果展示

 

四 退出功能

TopNav.vue

<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.$root.Bus.$emit("collapsed-aside", this.collapsed);
            },
            exit(){

                push里面传递jason对象
                this.$router.push({path:'/Login'});
            }
        }
    }
</script>

结果展示

点击退出按钮返回登录界面

 

 结束了，bye~

Lee_mons
关注
专栏目录
导航菜单栏
吕世良
09-19 408
一、导航菜单样式 二、代码如下： <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</
TypeError: Cannot read property ‘parentNode‘ of undefined.
DN金猿的博客
10-29 352
使用node js+vue+element plus开发。
扩展el-table，实现当showOverflowTooltip时，鼠标可移入tooltip功能
Bitter的博客
11-01 235
1.在utils里创建elTable.js。2.在main.js中引入 并绑在vue上。
基于SSM+VUE历史车轮网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
卓越软件开发的博客
11-01 756
源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿部署教程+代码讲解+代码时间修改教程。
Vue.js 构建可复用的组件
Davina_yu的博客
10-31 413
通过以上步骤，创建了一个可复用的按钮组件，并在主应用中注册和使用了它。这样的组件可以很容易地在不同的场景下重复使用，只需传递不同的属性即可定制其外观和行为。这对于构建大型的、复杂的前端应用是非常有用的。
el-table type=“selection“换页多选数据丢失的解决办法
weixin_46112174的博客
11-01 236
设置以后就可以保留之前选中的选项，但还要设置row-key。element里有一个。
基于Node.js+Vue+MySQL实现的（Web）图书管理系统
最新发布
神仙别闹的自留地
11-02 652
可对图书信息进行浏览、编辑（包括对图书的修改、入库、删除）浏览图书信息编辑图书信息：修改、入库、删除每天自动触发一次，扫描视图 reader_borrow，若发现当前有预期归还时间小于当前时间，则判断为超期，生成处罚记录，这个定时器将每天定时触发存储过程 proc_gen_ticketENABLE读者 0003 借了图书 0001，生成借书记录 reader_borrow 视图当他在 1 月 9 日前还书，没有生成罚单当他在 1 月 9 日后还书，生成罚单1）导航：/book。
【element ui系列】分享几种实现el-table表格单选的方法
u011203602的专栏
10-29 399
在实际的开发中，经常会用到从表格中选择一条记录的情况，虽然官方给出的例子，但是给人感觉看起来不明显，于是，在此基础上做了改进。2、采用单选框(radio)，双击取消选中。
【vue】13.深入理解递归组件
m0_59873661的博客
10-29 820
递归组件是指在一个组件的模板中直接或间接地调用自身。这种组件常用于构建具有层级结构的数据，如树形控件、菜单、评论系统等。递归组件的关键在于它有一个终止条件，以防止无限循环调用。递归组件是Vue.js强大功能之一，它为处理层级和嵌套数据提供了优雅的解决方案。通过理解和掌握递归组件的应用，我们可以构建出更加复杂和灵活的界面。在实际项目中，合理使用递归组件不仅可以提升开发效率，还能让代码更加简洁和易于维护。
SCSS在Vue中的用法
陈二狗的博客
10-29 626
SCSS在Vue中的用法
vue3中的pinia的使用方法
陈二狗的博客
10-29 485
Pinia在Vue 3中的使用方法
非父子组件之间的通信vue.js
2401_83905000的博客
10-30 277
【代码】非父子组件之间的通信vue.js。
在 Vue 中如何自动导入项目中的 less 和 scss 变量和文件
wbskb的博客
10-29 392
Vue 中自动导入项目中的 less变量和文件设置完成后不管用怎么办？如何自动导入 less 和 scss 、css 的公共变量和文件？
vue前端解决跨域问题
Wgq0731的博客
10-29 294
rewrite:重写请求的路径。所有以'/api'开头的请求路径，在转发到目标服务器之前，'/api'这部分会被移除。例如，如果前端发送了一个请求到'/api/users'，那么后端服务器实际接收到的请求路径将是'/users'。将changeOrigin设置为true，devServer会在发送请求前将请求的origin改为target指定的服务器的origin。'/api'代表当请求的路径以'/api'开头时，这个代理规则会被应用。target：目标服务器的地址，即请求将被转发到的服务器。
SCSS在Vue中切换主题颜色示例（mixin + scss方式，简单高效）
陈二狗的博客
10-30 435
SCSS在Vue中切换主题颜色示例（mixin + scss方式，简单高效）
第二十三章 Vue组件通信之非父子组件通信
Calvin的博客
10-30 672
注：在使用跨层级进行父组件和子孙组件进行共享数据时，能够进行简单数据类型（非响应式）及复杂数据类型（响应式）的共享，但是实际使用过程中，我们建议使用复杂类型来做数据共享，因为该类型的数据是响应式的，因此其他组件在获取使用时能够直接生效。前面几个章节我们重点讲解了在Vue中组件的关系类别及父子组件的通信解决方案，本章内容将详细讲解关于非父子组件间的通信解决方案。1. 创建一个都能访问到的事件总线 (空 Vue 实例) → 在utils包下创建EventBus.js。1.2.1. 实现步骤。
VUE errolog, vue 错误集
DavidsonGong的博客
10-29 331
As to command “npm install” on cmd or powershell, we must execute it under the program folder
Vue3+Cesium三维可视化项目开发资源包
12. **音视频与网站开发**：项目资源可能包含视频教程、操作演示或项目网站的开发素材。 13. **EDA和Proteus**：在硬件开发领域，EDA（电子设计自动化）工具如Proteus可用于电路设计、PCB布局等。 14. **RTOS**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值