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

最新推荐文章于 2023-04-10 10:56:15 发布
最新推荐文章于 2023-04-10 10:56:15 发布
阅读量232 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43934140/article/details/99062496
版权

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

Mock.js使用步骤

1.1 安装mockjs依赖

  在控制台输入以下代码
  npm install mockjs -D              #只在开发环境使用

1.2 引入

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

  (1)dev.env

  module.exports = merge(prodEnv, {

  NODE_ENV: '"development"',

  MOCK: 'true'

  })

  

  (2)prod.env

  module.exports = {

  NODE_ENV: '"production"',

  MOCK: 'false'

  }



  (3)main.js

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

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



  注1：import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案

      后者支持动态引入，也就是require(${path}/xx.js)

demo

文件目录
在这里插入图片描述
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:{
			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>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</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
			}
		},
		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>

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:{
			exit(){
				this.$router.push({
					path:'/Login'
				})
			},
			doToggle(){
				this.collapsed =! this.collapsed;
				this.$root.Bus.$emit("collapsed-side",this.collapsed);
			}
		}
		
	}
</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>

index.js（mock）

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, "get", 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;

index.js（router）

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'
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
		}
	]
})

login。js

<template>
	<div class="login-wrap">
		<el-form :model="ruleForm" class="demo-ruleForm login-container">
			<h3 style="text-align: center;"> 用户登录</h3>
			<el-form-item label="用户名">
				<el-input v-model="ruleForm.uname"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="ruleForm.pwd"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width: 100%;" type="primary" @click="doLogin()">提交</el-button>
			</el-form-item>
			<el-link type="primary">忘记密码</el-link>
			<el-link type="primary" @click="toReg">用户注册</el-link>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
					uname: '',
					pwd: ''
				}
			};
		},
		methods: {
			toReg() {
				this.$router.push({
					path: '/Reg'
				})
			},
			doLogin() {
				let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
				//get请求
				this.axios.get(url, {
					params: this.ruleForm
				}).then((response) => { //成功的回调函数
					console.log(response);
					if (response.data.code == 1) {
						this.$message({
							showClose: true,
							message: response.data.msg,
							type: 'success',
						});
						this.$router.push({
							path:'/AppMain'
						})
					} else {
						this.$message({
							showClose: true,
							message: response.data.msg,
							type: 'error'
						});
					}
				}).catch((response) => { //失败的回调函数(异常)
					console.log(response);
				});



				/* post请求 */
				/* qs.stringify()  将json转为键值对形式 */
				/* axios.post(url, qs.stringify(this.ruleForm)).then((response) =>{
					console.log(response);
					if (response.data.code == 1) {
						this.$message({
							showClose: true,
							message: response.data.msg,
							type: 'success'
						});
					} else {
						this.$message({
							showClose: true,
							message: response.data.msg,
							type: 'error'
						});
					}
				}).catch(function(error) {
					console.log(error);
				}); */
			}
		}
	}
</script>

<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url(data:image/svg+xml;
		
		background-color: #112346;
		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>

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'


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/>'
})
E往如前
关注
专栏目录
Element ui中menu组件(el-menu/el-menu-item/el-submenu/template) 层级结构和用法
robertzsun
07-24 9万+
初学者，刚接触，用到不知道怎么回事刚接触，今天就特意各种粘贴复制示例代码，终于自己试出来了，具体的结构层级关系。 看完就能知道这个menu的结构上怎么组织和使用 1. 我准备的示例： 先上代码，格式加了空行，方便看结构：（前期模板组件的导入和注册都略过了） <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#
SPA项目之使用mockJS模拟响应，首页菜单伸缩功能
weixin_55966394的博客
11-15 995
大纲： 1.使用mockJS模拟登陆请求的响应，实现脱离后端数据 2.使用elementUI做首页左侧菜单栏，并作出伸缩功能 3.了解‘总线’ 4.退出功能 一、使用mockJS Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 官网：Mock.js 特性： 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。 .
Vue使用教程和后台商品管理系统分享（详细完整教程讲解）
最新发布
a910247的博客
04-10 1963
随着软件开发不断进步，前后端框架技术也取得重大进步，前端主要Layui经典框架，还有谷歌flutter和如今流行的Vue框架，后端主要是Spring框架，尤其是SpringBoot应用非常广泛，而前端这门技术也越来越重要，很多人都开启了学习Vue技术，本文就介绍了Vue的基础内容以及后台管理系统项目分享。
SPA项目开发之登录注册
m0_65795902的博客
09-11 2010
SPA项目开发之登录注册
SPA开发首页导航+左侧菜单
qq_44493832的博客
08-11 340
文章目录1. Mock.js2. Mock.js使用步骤3.登陆与注册页面的跳转4.后台首页AppMain.vue的创建5.vue Bus总线 1. Mock.js 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 老大，接口文档还没输出，我的好多活干不下去啊！ 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockj...
Spa之首页导航与左侧菜单栏
water_java的博客
09-28 611
结合我的博文https://blog.csdn.net/water_java/article/details/101454595观看 不需要再启动eclipse的Tomcat 1、mock.js模拟响应ajax请求 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来...
SPA项目左侧树形菜单显示和顶部导航
阳某的博客
08-10 624
目录Mock使用整体配置和效果显示 Mock使用 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。我们可以不用返回后台就能获取直接想要的格式的数据，区别与Json的是它不是死的，json是定死的 Mock使用： 1、npm install mockjs -D 先下载引入所需文件,下载好后你的package.json会出现mock的版本...
vue+element UI 实现无限极分类（二）
前端技术的学习整理
06-28 1554
这是自己项目的经历，真是很复杂！！！大概记录一下代码的逻辑可以无限添加el-submenu 和el-menu-item&lt;template&gt; &lt;div class='leftList' style=' overflow:auto'&gt; &lt;el-aside width="99%" style="background-color:#2c3e50;"&gt; ...
elementUI导航高亮问题
qq_36711388的博客
04-02 1523
问题1：当页面设置了标签点击跳转路由的时候，导航栏高亮和当前不一致，还是高亮原来的导航 解决方法：在菜单导航组件中监听路由变化 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#f...
vue顶部菜单加左侧菜单_Vue框架Element UI教程-左侧导航栏（四）
weixin_33800724的博客
12-31 2028
在用Element UI框架的时候default-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b">服务大厅在场服务历史服务系统设置权限管理角色管理...
vue刷新后menu激活态定位当前路由
Kuroko's Development Notes
09-20 3910
方法： 利用el-menu 自带属性 default-active 匹配当前路由 $route.path 实例： &lt;el-menu :unique-opened="true" :router="true" :collapse="isCollapse" class="elMenu" text-color="#fff" background-color="#37363B"
事件总线 this.$bus.$emit() this.$bus.$on
weixin_43764828的博客
09-19 2168
当 goodsItem 需要调scroll.vue的方法， 方案一：可以用vuex 共享一个状态，在goodsItem去改变vuex的状态。然后在根组件中去监听vuex状态变化。 方案二：事件总线 在goodsItem发送事件this.$bus.$emit(‘imgOnload’) 在根组件中 监听 this.$bus.$on('imgOnload',()=>{ 这里在做具体的事情 }) ...
webpack与SPA开发环境搭建指南
"详解webpack与SPA实践之开发环境搭建" 在现代前端开发中，Webpack 和单页应用程序（SPA）已经成为主流的开发模式。本篇文章主要关注的是如何使用Webpack来搭建一个适用于SPA开发的环境。让我们逐步深入这个话题。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值