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

    目录

    一， mock的使用

    1.1.下载依赖 npm install mockjs -D

    1.2.引入到main.js中使用

    1.3.添加默认接口数据

    1.4.绑定接口数据

     二、主界面搭建&左侧树收缩功能（vue总线的概念）

    主界面布局：

    2.1、导入图片

    2.2、导入AppMain.vue / LeftMav.vue / TopNav.vue

    2.3、AppMain.vue中注册使用组件

    2.4、router/index.js中添加路由和组件的映射

    2.5、修改添加组件中需要用到的变量

    总线：

    1、在main.js中创建一个变量，这个变量就是vue实例

    2、在子组件中通过this.$root.Bus.$emit注册事件进行传参

    3、在需要用到总线中变量时，通过this.$root.Bus.$on获取总线中的变量值

     三、退出功能

    一， mock的使用

    1.1.下载依赖 npm install mockjs -D

     下载成功：

    1.2.引入到main.js中使用

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

    dev.env:

    1. 'use strict'
    2. const merge = require('webpack-merge')
    3. const prodEnv = require('./prod.env')
    4.  
    5. module.exports = merge(prodEnv, {
    6.   NODE_ENV: '"development"',
    7.   MOCK:'true'
    8. })

    prod.env:

    1. 'use strict'
    2. module.exports = {
    3.   NODE_ENV: '"production"',
    4.   MOCK:'false'
    5. }

    1.3.添加默认接口数据

    把mock文件夹导入到src中，然后在json下的文件里造数据

    login-mock.js

    1. // const loginInfo = {
    2. // 	code: -1,
    3. // 	message: '密码错误'
    4. // }
    5.  
    6. //使用mockjs的模板生成随机数据
    7. const loginInfo = {
    8. 	'code|0-1': 0,
    9. 	'msg|3-10': 'msg'
    10. }
    11. export default loginInfo;

    1.4.绑定接口数据

    mock/inde.js:

    1. import Mock from 'mockjs' //引入mockjs，npm已安装
    2. import action from '@/api/action' //引入请求地址
    3.  
    4. //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
    5. Mock.setup({
    6. 	// timeout: 400  //延时400s请求到数据
    7. 	timeout: 200 - 400 //延时200-400s请求到数据
    8. })
    9.  
    10. //引登陆的测试数据，并添加至mockjs
    11. import loginInfo from '@/mock/json/login-mock.js'
    12. let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
    13. Mock.mock(s1, "post", loginInfo)
    14. // Mock.mock(s1, /post|get/i, loginInfo)

    效果展示：

     二、主界面搭建&左侧树收缩功能（vue总线的概念）

    主界面布局：

    2.1、导入图片

    2.2、导入AppMain.vue / LeftMav.vue / TopNav.vue

    2.3、AppMain.vue中注册使用组件

    2.4、router/index.js中添加路由和组件的映射

    2.5、修改添加组件中需要用到的变量

    AppMain.vue：

    1. <template>
    2. 	<el-container class="main-container">
    3. 		<el-aside v-bind:class="asideClass">
    4. 			<LeftNav>LeftNav>
    5. 		el-aside>
    6. 		<el-container>
    7. 			<el-header class="main-header">
    8. 				<TopNav>TopNav>
    9. 			el-header>
    10. 			<el-main class="main-center">Mainel-main>
    11. 		el-container>
    12. 	el-container>
    13. template>
    14.  
    15. <script>
    16. 	// 导入组件
    17. 	import TopNav from '@/components/TopNav.vue'
    18. 	import LeftNav from '@/components/LeftNav.vue'
    19.  
    20. 	// 导出模块
    21. 	export default {
    22. 		components:{
    23.       TopNav,LeftNav
    24.     },
    25.     data(){
    26.       return {
    27.         asideClass:'main-aside'
    28.       }
    29.     },
    30.     created(){
    31.       //总总线上取出this.collapsed变量
    32.       this.$root.Bus.$on("collapsed-side",v => {
    33.         this.asideClass = v ? 'main-aside-collapsed' : 'main-aside' ;
    34.       });
    35.     }
    36. 	};
    37. script>
    38. <style scoped>
    39. 	.main-container {
    40. 		height: 100%;
    41. 		width: 100%;
    42. 		box-sizing: border-box;
    43. 	}
    44.  
    45. 	.main-aside-collapsed {
    46. 		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    47. 		width: 64px !important;
    48. 		height: 100%;
    49. 		background-color: #334157;
    50. 		margin: 0px;
    51. 	}
    52.  
    53. 	.main-aside {
    54. 		width: 240px !important;
    55. 		height: 100%;
    56. 		background-color: #334157;
    57. 		margin: 0px;
    58. 	}
    59.  
    60. 	.main-header,
    61. 	.main-center {
    62. 		padding: 0px;
    63. 		border-left: 2px solid #333;
    64. 	}
    65. style>

    LeftNav.vue：

    1. <template>
    2. 	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#334157"
    3. 	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    4. 		
    5. 		<div class="logobox">
    6. 			<img class="logoimg" src="../assets/img/logo.png" alt="">
    7. 		div>
    8. 		<el-submenu index="1">
    9. 			<template slot="title">
    10. 				<i class="el-icon-location">i>
    11. 				<span>导航一span>
    12. 			template>
    13. 			<el-menu-item-group>
    14. 				<template slot="title">分组一template>
    15. 				<el-menu-item index="1-1">选项1el-menu-item>
    16. 				<el-menu-item index="1-2">选项2el-menu-item>
    17. 			el-menu-item-group>
    18. 			<el-menu-item-group title="分组2">
    19. 				<el-menu-item index="1-3">选项3el-menu-item>
    20. 			el-menu-item-group>
    21. 			<el-submenu index="1-4">
    22. 				<template slot="title">选项4template>
    23. 				<el-menu-item index="1-4-1">选项1el-menu-item>
    24. 			el-submenu>
    25. 		el-submenu>
    26. 		<el-menu-item index="2">
    27. 			<i class="el-icon-menu">i>
    28. 			<span slot="title">导航二span>
    29. 		el-menu-item>
    30. 		<el-menu-item index="3" disabled>
    31. 			<i class="el-icon-document">i>
    32. 			<span slot="title">导航三span>
    33. 		el-menu-item>
    34. 		<el-menu-item index="4">
    35. 			<i class="el-icon-setting">i>
    36. 			<span slot="title">导航四span>
    37. 		el-menu-item>
    38. 	el-menu>
    39. template>
    40. <script>
    41. 	export default {
    42. 		data(){
    43.       return {
    44.         collapsed:false
    45.       }
    46.     },
    47.     created(){
    48.       //总总线上取出this.collapsed变量
    49.       this.$root.Bus.$on("collapsed-side",v => {
    50.         this.collapsed = v ;
    51.       });
    52.     }
    53. 	}
    54. script>
    55. <style>
    56. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    57. 		width: 240px;
    58. 		min-height: 400px;
    59. 	}
    60.  
    61. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    62. 		border: none;
    63. 		text-align: left;
    64. 	}
    65.  
    66. 	.el-menu-item-group__title {
    67. 		padding: 0px;
    68. 	}
    69.  
    70. 	.el-menu-bg {
    71. 		background-color: #1f2d3d !important;
    72. 	}
    73.  
    74. 	.el-menu {
    75. 		border: none;
    76. 	}
    77.  
    78. 	.logobox {
    79. 		height: 40px;
    80. 		line-height: 40px;
    81. 		color: #9d9d9d;
    82. 		font-size: 20px;
    83. 		text-align: center;
    84. 		padding: 20px 0px;
    85. 	}
    86.  
    87. 	.logoimg {
    88. 		height: 40px;
    89. 	}
    90. style>

    TopNav.vue：

    1. <template>
    2. 	
    3. 	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    4. 		<el-button class="buttonimg">
    5. 			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    6. 		el-button>
    7. 		<el-submenu index="2" class="submenu">
    8. 			<template slot="title">超级管理员template>
    9. 			<el-menu-item index="2-1">设置el-menu-item>
    10. 			<el-menu-item index="2-2">个人中心el-menu-item>
    11. 			<el-menu-item @click="exit()" index="2-3">退出el-menu-item>
    12. 		el-submenu>
    13. 	el-menu>
    14. template>
    15.  
    16. <script>
    17. 	export default {
    18. 		data(){
    19. 		  return {
    20. 		    collapsed:false,
    21.         imgsq:require('@/assets/img/sq.png'),
    22.         imgshow:require('@/assets/img/show.png')
    23. 		  }
    24. 		},
    25.     methods:{
    26.       doToggle(){
    27.         this.collapsed = !this.collapsed;
    28.         // 将this.collapsed 放到总线上
    29.         this.$root.Bus.$emit("collapsed-side",this.collapsed);
    30.       },
    31.         exit(){
    32.       this.$router.push({path:'/Login'})
    33.       }
    34.     }
    35. 	}
    36. script>
    37.  
    38. <style scoped>
    39. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    40. 		border: none;
    41. 	}
    42.  
    43. 	.submenu {
    44. 		float: right;
    45. 	}
    46.  
    47. 	.buttonimg {
    48. 		height: 60px;
    49. 		background-color: transparent;
    50. 		border: none;
    51. 	}
    52.  
    53. 	.showimg {
    54. 		width: 26px;
    55. 		height: 26px;
    56. 		position: absolute;
    57. 		top: 17px;
    58. 		left: 17px;
    59. 	}
    60.  
    61. 	.showimg:active {
    62. 		border: none;
    63. 	}
    64. style>

     router/index.js：

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import AppMain from '@/components/AppMain'
    5. import LeftNav from '@/components/LeftNav'
    6. import TopNav from '@/components/TopNav'
    7. import Login from '@/views/Login'
    8. import Reg from '@/views/Reg'
    9.  
    10. Vue.use(Router)
    11.  
    12. export default new Router({
    13.   routes: [{
    14.       path: '/',
    15.       name: 'Login',
    16.       component: Login
    17.     },
    18.     {
    19.       path: '/Login',
    20.       name: 'Login',
    21.       component: Login
    22.     },
    23.     {
    24.       path: '/Reg',
    25.       name: 'Reg',
    26.       component: Reg
    27.     },
    28.     {
    29.       path: '/AppMain',
    30.       name: 'AppMain',
    31.       component: AppMain,
    32.       children: [{
    33.           path: '/LeftNav',
    34.           name: 'LeftNav',
    35.           component: LeftNav
    36.         },
    37.         {
    38.           path: '/TopNav',
    39.           name: 'TopNav',
    40.           component: TopNav
    41.         }
    42.       ]
    43.     }
    44.   ]
    45. })

     效果展示：

     收缩：

    总线：

    1、在main.js中创建一个变量，这个变量就是vue实例

    2、在子组件中通过this.$root.Bus.$emit注册事件进行传参

    3、在需要用到总线中变量时，通过this.$root.Bus.$on获取总线中的变量值

     三、退出功能

    给退出按钮添加一个点击事件进行跳转页面即可

    1. exit(){
    2.         this.$router.push({path:'/Login'})
    3.       }

     

  • 相关阅读:
    cv2.approxPolyDP函数实现轮廓线的多边形逼近
    百度SEO优化技巧大全（轻松掌握优化技巧）
    MVCC机制与BufferPool缓存机制
    13.MongoDB聚合管道
    学生护眼灯色温多少合适？推荐色温在4000K的暖光护眼台灯
    【BurpSuite】插件开发学习之J2EEScan（下）-主动扫描(21-30)
    [shell,hive] 在shell脚本中将hiveSQL分离出去
    php-java-net-python-大学生兼职信息交流系统网站计算机毕业设计程序
    目标检测YOLO实战应用案例100讲-基于YOLO的道路交通标志识别（续）
    多肽RGD修饰乳清白蛋白/肌白蛋白/豆清白蛋白/蓖麻蛋白/豌豆白蛋白1b ( PA1b)纳米粒（实验原理）
  • 原文地址：https://blog.csdn.net/weixin_64313980/article/details/126813363