2024年SPA项目开发之首页导航栏+左侧菜单，2024年最新今日头条测试面试题

最新推荐文章于 2024-07-08 23:14:45 发布

2401_84616922

最新推荐文章于 2024-07-08 23:14:45 发布

阅读量951

点赞数 18

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616922/article/details/138684062

版权

程序员专栏收录该内容

106 篇文章 0 订阅

订阅专栏

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

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

}

②、LeftNav.vue

<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

导航二

导航三

导航四

③、TopNav.vue

超级管理员

设置

个人中心

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

④、导入图片/src/assets/img/…

公共组件在components目录下，业务组件在views目录下

2、配置路由

src/router/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: ‘/’,

component: Login

{

path: ‘/Reg’,

component: Reg

{

path: ‘/Login’,

component: Login

{

path: ‘/AppMain’,

component: AppMain,

children: [{

path: ‘/LeftNav’,

component: LeftNav

{

path: ‘/TopNav’,

component: TopNav

}

]

})

3、登录成功跳主界面

修改登录界面登录成功后跳主界面

src/views/Login.vue（登录）登录成功跳转到主界面

submitForm() {

let url = this.axios.urls.SYSTEM_USER_DOLOGIN;

this.axios.post(url, this.ruleForm).then((resp) => {

console.log(resp);

if (resp.data.code == 1) {

this.$message({

message: resp.data.msg,

type: ‘success’

});

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

} else {

this.$message({

message: resp.data.msg,

type: ‘warning’

});

}

}).catch(function(error) {

console.log(error);

});

}

接下来运行会报一些错，下面会一一解决

①asideClass属性未定义

解决：在AppMain.vue中定义asideClass属性

折叠

.main-aside-collapsed

不折叠

.main-aside

// 导出模块

export default {

**data() {

return {

// 默认为不折叠

asideClass: ‘main - aside’

}

}**

};

②没有注册LeftNav 和TopNav

解决：在AppMain.vue中注册LeftNav和TopNav

// 导出模块

export default {

data() {

return {

// 默认为不折叠

asideClass: ‘main - aside’

}

},

components: {

TopNav,

LeftNav

}

};

③TopNav.vue中collapsed?imgshow:imgsq属性未定义（:src=“collapsed?imgshow:imgsq” ）

**：即v-bind：**是vue修饰的属性

解决：在TopNav.vue中定义collapsed?imgshow:imgsq属性

export default {

**data() {

return {

collapsed: false,

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

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

**}

}**

}

要通过require（‘@/’）添加图片的地址（注意/表示src目录下的文件）

collapsed?imgshow:imgsq

三元运算符，当collapsed为true时选择第一个（imgshow），当collapsed为false时选择第二个（imgsq）

将下面不用的属性删除

@open=“handleOpen” @close=“handleClose”

:collapse-transition=“bb”

到这里项目就没有报错了

三，左侧树收缩功能

==========

但是点击收起图标会报错，因为没有定义方法

解决：

①、增加实例

src/main.js

new Vue({

el: ‘#app’,

**data() {

return {

Bus: new Vue({**

**})

}

},**

router,

components: {

App

},

template: ‘’

})

②点击图标，图标切换

src/components/TopNav.vue

export default {

data() {

return {

// 默认不折叠

collapsed: false,

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

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

}

},

**methods: {

doToggle() {

this.collapsed = !this.collapsed;

}

}**

}

完善收缩功能

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】