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

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！

router,

components: { App },

template: ‘’

})

引入工具：

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)

总结mock.js的使用：

①、定义接口调用返回的json格式

②、返回的json格式与对应的接口请求地址进行绑定index.js

s1指地址：http://localhost:8080/t_216/userAction_login.action

let s1 = action.getFullPath(‘SYSTEM_USER_DOLOGIN’)

Mock.mock(s1, “post”, loginInfo)

呈现结果：结果随机产生，有成功有失败

二、总线的概念

---

1、将组件导入

AppMain.vue:

Main

LeftNav.vue:

<el-menu default-active=“2” class=“el-menu-vertical-demo” @open=“handleOpen” @close=“handleClose” background-color=“#334157”

text-color=“#fff” active-text-color=“#ffd04b” :collapse=“collapsed” :collapse-transition=“bb”>

导航一

分组一

选项1

选项2

选项3

选项4

选项1

导航二

导航三

导航四

TopNav.vue:

<img class=“showimg” :src=“collapsed?imgshow:imgsq” @click=“doToggle()”>

超级管理员

设置

个人中心

<el-menu-item @click=“exit()” index=“2-3”>退出

2、导入图片

3、配置组件

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

}

]

}

]

})

4、登录跳转界面

Login.js文件中添加登陆成功后的界面的跳转：

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

5、定义变量，注册组件

AppMain:

Main

// 导入组件

import TopNav from ‘@/components/TopNav.vue’

import LeftNav from ‘@/components/LeftNav.vue’

// 导出模块

**export default {

data(){

return {

asideClass:‘main-aside’

}

},

// 注册组件

components:{

TopNav,LeftNav

}

};**

.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;

}

topNav:定义变量

**

export default {

data(){

return{

collapsed:false,

// 不折叠时需显示的图片

imgshow:require(‘@/assets/img/show.png’),

imgsq:require(‘@/assets/img/sq.png’)

}

}

}**

LeftNav:记得将不用的因素清掉

**<el-menu default-active=“2” class=“el-menu-vertical-demo”  background-color=“#334157”

text-color=“#fff” active-text-color=“#ffd04b” :collapse=“collapsed”>**

导航一

分组一

选项1

选项2

选项3

选项4

选项1

导航二

导航三

导航四

**

export default {

data(){

return{

collapsed:false

}

}

}

**

.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;

最后

分享一些资料给大家，我觉得这些都是很有用的东西，大家也可以跟着来学习，查漏补缺。

《Java高级面试》

《Java高级架构知识》

《算法知识》

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！
enu–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;

最后

分享一些资料给大家，我觉得这些都是很有用的东西，大家也可以跟着来学习，查漏补缺。

《Java高级面试》

[外链图片转存中…(img-vIn3TZLB-1714746144917)]

《Java高级架构知识》

[外链图片转存中…(img-WU3I2yMb-1714746144918)]

《算法知识》

[外链图片转存中…(img-12C4gShj-1714746144918)]

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！