SPA首页导航和左侧菜单

最新推荐文章于 2024-04-17 01:47:45 发布
最新推荐文章于 2024-04-17 01:47:45 发布
阅读量711 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chiyangj/article/details/108269920
版权

这里写目录标题

使用mockjs模拟

什么是mock.js

Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

mock.js重要特性

数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
拦截Ajax请求
不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

mock.js的安装引用

进入项目的盘符如：

安装mockjs依赖
npm install mockjs -D #只在开发环境使用

在这里插入图片描述

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

在这里插入图片描述

dev.env.js

在这里插入图片描述

prod.env.js

在这里插入图片描述

mock.js在main.js引入

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

在这里插入图片描述

mock.js拦截路由配置

目录和文件创建

在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置，
/src/mock/index.js
.
在这里插入图片描述

.
在这里插入图片描述

引登陆的测试数据，并添加至mockjs

1.在login-mock.js中使用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')
//拦截post请求
Mock.mock(s1, "post", loginInfo)
//正则拦截post与get请求
// Mock.mock(s1, /post|get/i, loginInfo)t
登陆gat提交后跳转到首页
this.axios.get(this.axios.urls.SYSTEM_USER_DOLOGIN, {
					params: params
				}).then(resp => {
					let data = resp.data;
					if (data.code == "1") {
						this.$message({
							message: data.msg,
							type: 'success'
						});
						this.$router.push('Main');
					} else {
						this.$message({
							message: data.msg,
							type: 'error'
						});
					}

				}).catch(resp => {});

首页

首页Main.vue,嵌套了头部导航（TopNav.vue）,和左侧菜单（LeftAside.vue）

在这里插入图片描述

leftAside.vue
<template>
	<el-menu router :default-active="$router.path" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
	 active-text-color="#ffd04b" :collapse="leftCollapsed">
		<!-- <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-menu-item index="/Home">
			<i class="el-icon-s-home"></i>
			<span slot="title">首页</span>
		</el-menu-item>

	
		<!-- <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 {
		name: 'LeftAside',
		props: ['leftCollapsed'],
		data: function() {
			return {
				treeNodes: []

			}
		},
		created: function() {
				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>
TopNav.vue头部管理·
<template>
	<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()">
			<!--  :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 index="2-3" @click="exeit()">退出</el-menu-item>
		</el-submenu>
	</el-menu>
</template>

<script>
	export default {
		name: 'TopNav',
		data: function() {
			return {
				collapsed: false,
				//读取图片路径
				imgshow: require('../assets/img/show.png'),
				imgsq: require('../assets/img/sq.png')
			}
		},
		methods: {
			doToggle: function() {
				this.collapsed = !this.collapsed;
				this.$emit('topnav-collapsed',this.collapsed);
				
			},
			exeit: function() {
				this.$confirm('是否注销并退出本站?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '成功退出!'
					});
					this.$router.push('/');
				}).catch();

			}
		}
	}
</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>
Mian.js首页
<template>
	<el-container class="main-container">
		<el-aside :class="isCollapsed">
			<LeftAside :left-collapsed="collapsed"></LeftAside>
		</el-aside>
		<el-container>
			<el-header class="main-header">
				<TopNav @topnav-collapsed="mainCollapsed"></TopNav>
			</el-header>
			<el-main class="main-center">
        <router-view/>
      </el-main>
		</el-container>
	</el-container>
</template>

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

	// 导出模块
	export default {
		name:'Main',
		data:function(){
			return{
				collapsed:false
			}
		},
		methods:{
			mainCollapsed: function(c){
				this.collapsed=c;
				console.log("Main组件=%s", this.collapsed);
				
			}
			
		},
		components:{
			LeftAside,
			TopNav
		},
		computed:{
			isCollapsed:function(){
				return this.collapsed?'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>

头部点击退出

在这里插入图片描述

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

在这里插入图片描述

不落飞行
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue之路由（SPA开发模式）
m0_52681702的博客
11-02 1111
一、什么是SPA 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取 的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 优势；...
实现layui左侧菜单右侧显示页面内容的静态文件
10-26
本项目涉及的主题是“实现layui左侧菜单右侧显示页面内容”，这是一个典型的单页应用（SPA）布局模式，常用于构建管理后台界面。下面将详细讲解如何利用layui实现这一功能。 1. layui基础： layui是一款基于...
使用vue-cli搭建SPA项目
kissship的博客
09-21 396
SPA项目是一种Web应用程序的架构，其主要特点是整个应用程序在加载后，只会加载一次页面（通常是一个HTML文件），之后的用户交互都在这个页面上进行，通过JavaScript动态地更新内容，而不需要每次用户操作都重新加载整个页面。SPA通常使用前端框架（如React、Angular、Vue.js等）来实现，这些框架允许开发人员创建交互性强、用户体验良好的Web应用程序。Vue CLI（Vue Command Line Interface）是一个用于创建、配置和管理Vue.js项目的官方命令行工具。
SPA项目开发（CRUD&表单验证）
m0_62604616的博客
09-13 646
拷入后会报错，将title和editFormVisible、editForm赋值。①、将以下拷入Articles.vue中分页条下面。然后更改doSearch中的以下代码，改成第二个代码。关闭窗体方法和handleEdit中调用以上该方法。然后先加入一个方法closeDialog。2、通过点击 新增/编辑将表单对应窗口弹出。②、 写一个方法 handleEdit。handleEdit方法中加入以下代码。1、拷入表单组件 el-from。写个方法：clearData。在关闭窗体方法中加入以下代码。
SPA项目开发之登录注册
m0_75280563的博客
04-07 231
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取// 请求拦截器});自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
SPA项目开发之首页导航+左侧菜单(1)
最新发布
2301_79655496的博客
04-17 255
Main// 导入组件// 导出模块data(){return {},// 注册组件**/* 折叠 *//* 在CSS中，通过对某一样式声明!important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */important;/* 不折叠 */important;topNav:定义变量**data(){return{// 不折叠时需显示的图片}**LeftNav:记得将不用的因素清掉导航一分组一选项1选项2。
侧栏导航spa美容时尚网站模板4899.zip
08-16
在这个模板中，“侧栏导航”是指网站设计中的一个重要元素，即在页面左侧或右侧固定显示的导航菜单，用户可以随时通过它访问各个页面，提升用户体验。SPA和美容时尚网站通常需要展示服务项目、技师介绍、预约系统...
多级菜单的图标添加及路由配置.rar
09-01
在Web开发中，多级菜单通常用于构建复杂的导航系统，特别是在大型应用或网站中，它可以帮助用户方便地浏览和访问深层结构的内容。本资源“多级菜单的图标添加及路由配置.rar”似乎提供了关于如何在项目中实现这种...
英文SPA美容院HTML响应式模板
12-04
【标题】"英文SPA美容院HTML响应式模板"所涉及的知识点主要集中在网站设计与开发领域，特别是关于HTML模板和响应式设计的应用。这是一款专为SPA美容院设计的网页模板，旨在提供一种美观且适应不同设备显示的网页布局...
vue路由--网站导航功能详解
10-17
Vue 路由是 Vue.js 应用程序中用于管理页面导航的核心组件，它允许我们根据 URL 的变化来动态加载不同的组件，实现单页应用(SPA)中的页面切换。Vue Router 是官方推荐的路由库，它与 Vue.js 深度集成，提供了强大的...
SPA富应用开发
qq_64662981的博客
03-15 1623
此命令执行后，需注销，重新登录，才生效。sudo usermod -aG docker $USER # $USER 是当前登录的用户。（PS：在执行完docker version之后，应当显示docker的版本类型）、# 使用阿里 docker 镜像，提高镜像拉取速度。# 以非 root 用户身份使用 docker。初始化操作：gitbook init。ifconfig查看虚拟机的ip地址。
SPA项目开发之首页导航栏+左侧菜单，前端驱动工程师面试题
m0_57077948的博客
04-04 824
mock.js模拟响应ajax请求前台主界面的搭建退出功能左侧树收缩功能（vue总线的概念）一，mock.js模拟响应ajax请求1，什么是mock.js？前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：老大，接口文档还没输出，我的好多活干不下去啊！后端小哥，接口写好了没，我要测试啊！前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点**众所周知Mock.js因为两个重要的特性风靡前端:①数据类型丰富**
SPA项目开发之动态树+数据表格+分页，2024年最新从零开始系统化学Web前端
m0_57473261的博客
04-10 700
要放在AppMain.vue的children下编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
SPA项目开发之首页导航+左侧菜单
leixinyuya的博客
11-10 969
课程目标 1、mock.js模拟响应ajax请求 2、后台主界面的搭建 3、退出功能 4、左侧树收缩功能（vue总线的概念） Mock.js 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 1. 老大，接口文档还没输出，我的好多活干不下去啊！ 2. 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发...
SPA项目开发--表单校验+增删改功能
weixin_67450855的博客
09-16 435
一、表单校验 1.1表单组件 el-form 1.2通过点击新增/编辑将表单对应窗口弹出 1.3给表单设置规则 rules 1.4当表单提交时要校验规则 二、增删改功能实现 2.1保证编辑窗口的正常弹出 2.2表单校验通过后，调用后台数据接口完成新增功能
SPA项目首页导航以及左侧菜单
only老K的博客 qq:1025271924
09-28 426
目录安装mockjs依赖查看是否成功配置开发环境及生产环境dev.env.jsprod.env.jsmain.js测试：前台主界面的搭建拷贝组件以及配置组件配置问题一效果图退出功能Vue总线概念图解左侧树收缩功能效果： 安装mockjs依赖 安装方法不在啰嗦 npm install mockjs -D 查看是否成功 配置开发环境及生产环境 dev.env.js 'use strict' ...
SPA-Vue企业级开发模式
Harden_zsc的博客
10-28 421
vue-spa 什么是SPA？ SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。 SPA的优缺点 优点 1、减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次 2、并且把大量操作都放到了浏览器中去完成 3、前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备 4、而且前端只关注前端、后端只操作数据，各司其职 缺点 1、首屏加载速度可能会很长 2、SEO（搜索引擎优化）
spa项目之首页导航+左侧菜单
qq_46705598的博客
08-22 287
首页导航+左侧菜单mock.js模拟响应ajax请求安装mock的使用配置开发环境及生产环境登陆与注册页面的跳转使用this.$router.push({})实现路由跳转vue Bus总线 mock.js模拟响应ajax请求安装 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率 Mock.js有两个重要的特性风靡前端: 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求 不需要修改既有代码，就可以拦截
svelte-spa-router 导航守卫
06-09
svelte-spa-router 提供了一个 `onBeforeNavigation` 钩子函数，可以用来实现导航守卫。在这个函数中，你可以通过返回一个布尔值来决定是否允许用户进行导航操作。 例如，你可以在 `onBeforeNavigation` 中检查用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值