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

    目录

    一、mock.js模拟响应ajax请求

    1.下载依赖 npm install mock -D 

             1.1添加配置开发环境及生产环境

             1.2 面试题

    2.引入到main.js中使用

    3. 添加默认接口数据

    4.绑定接口数据

    二、 前台主界面的搭建

    三、左侧树收缩功能（vue总线的概念） 

    1.改变TopNav上的图标样式

     2.改变LeftNav上的左侧导航栏的样式

     3.该表APPMain上左侧菜单栏的展示区域

     总线

    四、退出功能 

    五、总结 

    1.mockjs的使用

     2.AppMain的布局

    3、总线 

    4.退出

    一、mock.js模拟响应ajax请求

    mock的使用：就是用来造各个后台数据接口的数据

    mock.js的使用步骤：

            1.下载依赖 npm install mock -d        只在开发环境使用

            2.引入到main.js中使用

            3.添加默认接口数据

            4.绑定接口数据

    1.下载依赖 npm install mock -D 

     1.1添加配置开发环境及生产环境

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

    ① dev.env.js        开发环境          

    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.js        生产环境

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

    1.2 面试题

    1. package com.zking.vue.web;
    2.  
    3. public class Demo {
    4.  
    5. //	process.env.MOCK && require('@/mock')
    6. 	
    7. 	public static void main(String[] args) {
    8. 		if(test1() && test2()) {
    9. 			System.out.println("开始打包");
    10. 		}
    11. 	}
    12. 	
    13. 	private static boolean test1() {
    14. 		System.out.println("第1个条件");
    15. 		return false;
    16. 	}
    17. 	
    18. 	private static boolean test2() {
    19. 		System.out.println("第2个条件");
    20. 		return true;
    21. 	}
    22. 	
    23. 	
    24. }

     它运行的结果只会打印中间那条数据如图所示：

     运行结果如图所示：

     2.引入到main.js中使用

    1. // process.env.MOCK 为 false ，那么require('@/mock')   不执行的；process.env.MOCK在生产环境下为false
    2. process.env.MOCK && require('@/mock') //开发环境下才会引入mockjs

    3. 添加默认接口数据

    目前我们就造了一个数据        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;

    4.绑定接口数据

    1.把刚才造的数据引入 到index.js文件中

    2.拿到接口地址

     如果有第二个接口，就在弄一个js文件，在去模拟接口返回的数据，接着在去index.js去引入，在获取接口地址，在进行绑定就好了。

    启动项目，我们就没有启动后台了。

    运行的结果就是，可能成功可能失败  如图所示：

    二、 前台主界面的搭建

    1.导入图片

    2.导入APPMain.vue/LeftNav.vue/TopNav.vue

    3.AppMain.vue中注册使用组件

    4.router/index.js中添加路由与组件的映射

    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. 		
    23. 	};
    24. script>
    25. <style scoped>
    26. 	.main-container {
    27. 		height: 100%;
    28. 		width: 100%;
    29. 		box-sizing: border-box;
    30. 	}
    31.  
    32. 	.main-aside-collapsed {
    33. 		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    34. 		width: 64px !important;
    35. 		height: 100%;
    36. 		background-color: #334157;
    37. 		margin: 0px;
    38. 	}
    39.  
    40. 	.main-aside {
    41. 		width: 240px !important;
    42. 		height: 100%;
    43. 		background-color: #334157;
    44. 		margin: 0px;
    45. 	}
    46.  
    47. 	.main-header,
    48. 	.main-center {
    49. 		padding: 0px;
    50. 		border-left: 2px solid #333;
    51. 	}
    52. 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" :collapse-transition="bb">
    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. 		
    43. 	}
    44. script>
    45. <style>
    46. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    47. 		width: 240px;
    48. 		min-height: 400px;
    49. 	}
    50.  
    51. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    52. 		border: none;
    53. 		text-align: left;
    54. 	}
    55.  
    56. 	.el-menu-item-group__title {
    57. 		padding: 0px;
    58. 	}
    59.  
    60. 	.el-menu-bg {
    61. 		background-color: #1f2d3d !important;
    62. 	}
    63.  
    64. 	.el-menu {
    65. 		border: none;
    66. 	}
    67.  
    68. 	.logobox {
    69. 		height: 40px;
    70. 		line-height: 40px;
    71. 		color: #9d9d9d;
    72. 		font-size: 20px;
    73. 		text-align: center;
    74. 		padding: 20px 0px;
    75. 	}
    76.  
    77. 	.logoimg {
    78. 		height: 40px;
    79. 	}
    80. 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. 		
    19. 	}
    20. script>
    21.  
    22. <style scoped>
    23. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    24. 		border: none;
    25. 	}
    26.  
    27. 	.submenu {
    28. 		float: right;
    29. 	}
    30.  
    31. 	.buttonimg {
    32. 		height: 60px;
    33. 		background-color: transparent;
    34. 		border: none;
    35. 	}
    36.  
    37. 	.showimg {
    38. 		width: 26px;
    39. 		height: 26px;
    40. 		position: absolute;
    41. 		top: 17px;
    42. 		left: 17px;
    43. 	}
    44.  
    45. 	.showimg:active {
    46. 		border: none;
    47. 	}
    48. style>

      导入我们的图片：

      

    进行配置 、添加路由   

    注意在我们配置的过程中，可能会出现错误，有可能是缓存的问题，我们重新启动一下项目就好了

    router/index.js

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. // 3.定义路由与组件的对应关系
    4. import HelloWorld from '@/components/HelloWorld'
    5. import AppMain from '@/components/AppMain'
    6. import LeftNav from '@/components/LeftNav'
    7. import TopNav from '@/components/TopNav'
    8. import Login from '@/views/Login'
    9. import Reg from '@/views/Reg'
    10.  
    11.  
    12. Vue.use(Router)
    13.  
    14. // 						4.生成路由对象
    15. export default new Router({
    16. 	routes: [{
    17. 			path: '/',
    18. 			// 这个可要可不用
    19. 			name: 'Login',
    20. 			component: Login
    21. 		},
    22. 		{
    23. 			path: '/Login',
    24. 			name: 'Login',
    25. 			component: Login
    26. 		},
    27. 		{
    28. 			path: '/Reg',
    29. 			name: 'Reg',
    30. 			component: Reg
    31. 		},
    32. 		{
    33. 			path: '/AppMain',
    34. 			name: 'AppMain',
    35. 			component: AppMain,
    36. 			children: [{
    37. 					path: '/LeftNav',
    38. 					name: 'LeftNav',
    39. 					component: LeftNav
    40. 				},
    41. 				{
    42. 					path: '/TopNav',
    43. 					name: 'TopNav',
    44. 					component: TopNav
    45. 				}
    46. 			]
    47. 		}
    48. 	]
    49. })

     当我们点击提交的时候，成功了要跳转到我们的页面里面去，我们要在login.vue中添加一行代码

    这样就没有问题了

    我们在进一步调整样式：

    三、左侧树收缩功能（vue总线的概念） 

     

    1.改变TopNav上的图标样式

    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. 				imgshow: require('@/assets/img/show.png'),
    22. 				imgsq: require('@/assets/img/sq.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({
    33. 					path: '/Login'
    34. 				})
    35. 			}
    36. 		}
    37. 	}
    38. script>
    39.  
    40. <style scoped>
    41. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    42. 		border: none;
    43. 	}
    44.  
    45. 	.submenu {
    46. 		float: right;
    47. 	}
    48.  
    49. 	.buttonimg {
    50. 		height: 60px;
    51. 		background-color: transparent;
    52. 		border: none;
    53. 	}
    54.  
    55. 	.showimg {
    56. 		width: 26px;
    57. 		height: 26px;
    58. 		position: absolute;
    59. 		top: 17px;
    60. 		left: 17px;
    61. 	}
    62.  
    63. 	.showimg:active {
    64. 		border: none;
    65. 	}
    66. style>

     运行结果如图所示：

     2.改变LeftNav上的左侧导航栏的样式

    1. <template>
    2. 	<el-menu default-active="2" class="el-menu-vertical-demo" 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>

    运行结果如图所示：

     3.该表APPMain上左侧菜单栏的展示区域

    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. /* 折叠 */
    46. 	.main-aside-collapsed {
    47. 		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    48. 		width: 64px !important;
    49. 		height: 100%;
    50. 		background-color: #334157;
    51. 		margin: 0px;
    52. 	}
    53.  
    54. /* 不折叠 */
    55. 	.main-aside {
    56. 		width: 240px !important;
    57. 		height: 100%;
    58. 		background-color: #334157;
    59. 		margin: 0px;
    60. 	}
    61.  
    62. 	.main-header,
    63. 	.main-center {
    64. 		padding: 0px;
    65. 		border-left: 2px solid #333;
    66. 	}
    67. style>

    运行结果如图所示：

     总线

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

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

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

    四、退出功能 

     最终还有剩余的代码     main.js

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. // process.env.MOCK 为 false ，那么require('@/mock')   不执行的；process.env.MOCK在生产环境下为false
    5. process.env.MOCK && require('@/mock') //开发环境下才会引入mockjs
    6. // 引入elementUI
    7. import ElementUI from 'element-ui' // 新添加 1
    8. import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式不同，要放在import App from './App'; 之前
    9. import App from './App'
    10. // 1.引入vue的路由依赖   已有
    11. import router from './router'
    12. import axios from '@/api/http'  //#vue项目对axios的全局配置    
    13. // import axios from 'axios'  
    14. import VueAxios from 'vue-axios'
    15.  
    16. Vue.use(VueAxios,axios)
    17. Vue.use(ElementUI)   // 新添加 3  使用ElemenUI
    18. Vue.config.productionTip = false
    19.  
    20. /* eslint-disable no-new */
    21. new Vue({
    22.   el: '#app',
    23.   // 5.挂载  已有
    24.   router,
    25. 	data(){
    26. 		return {
    27. 			// 在vue根实例中定义变量，这个变量就是vue实例，它总线
    28. 			// props this.$emit
    29. 			Bus:new Vue({
    30. 				
    31. 			})
    32. 		}
    33. 	},
    34.   components: { App },
    35.   template: '<App/>'
    36. })

    五、总结 

    1.mockjs的使用

    mock.js的使用步骤：

            1.安装mock.js依赖 npm install mock -d        只在开发环境使用

                    默认数据添加

                            mock/josn/login-mock.js

                            mock/index.js

            2.引入到main.js中使用

                    conf

                            dev.env mock:true

                            prod.env mock:false

                            && require("#mock")

            3.添加默认接口数据

            4.绑定接口数据

     2.AppMain的布局

    导入准备好的三个组件

    APPMain使用TopNav        LeftNav        components：{}

    router/index.js      配置映射关系

    注意：要定义好各个组件中定义好的变量

    3、总线 

    why：组件之间的传递比较复杂

            父传子：props

            子传父：$emit

            如果组件之间没有直接的父子关系，就需要通过不断的父传子，子传父的方式进行变量

            值的传递

     

    在mian.js中vue根实例中定义vue实例变量Bus

    通过 this.$root.Bus.$emit('xxxx',参数值);

            向总线Bus中存储变量值

    通过 在钩子函数Created中 this.$root.Bus.$on('xxxx',(参数值)=>{})；

            在总线Bus中取出存储的变量值

            

    4.退出 

    this.$router.push({}) 

  • 相关阅读:
    Centos安装Redis --使用wget
    快速使用vscode写python
    软件测试 app自动化02 Appium常用的元素定位工具 元素的属性 元素定位方法
    记录jeecgboot中j-vxe-table事件
    黑马C++ 03 提高4 —— STL常用容器_string容器/vector容器/deque容器
    About 9.25 This Week
    centOS7安装rabbitMQ
    Oracle常用数值型函数
    X32位汇编和X64位区别无参函数分析（一）
    MC33665 + MC33774 控制流程及 TPL3 帧结构介绍
  • 原文地址：https://blog.csdn.net/weixin_67465673/article/details/126812753