2024年vue实现树形结构，Web前端高级面试framework

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

//课程分类列表（树形）

@Override

public List getAllOneTwoSubject() {

//1 查询所有一级分类

QueryWrapper wrapperOne = new QueryWrapper<>();

wrapperOne.eq(“parent_id”,“0”);

List oneSubjectList = baseMapper.selectList(wrapperOne);

//2 查询所有2级分类

QueryWrapper wrapperTwo = new QueryWrapper<>();

wrapperTwo.ne(“parent_id”,“0”);

List twoSubjectList = baseMapper.selectList(wrapperTwo);

//创建list集合，用于存储最终封装数据

List finalSubjectList = new ArrayList<>();

//3、封装一级分类

for (int i = 0; i < oneSubjectList.size(); i++) {

EduSubject eduSubject = oneSubjectList.get(i);

OneSubject oneSubject = new OneSubject();

BeanUtils.copyProperties(eduSubject,oneSubject);

//在一级分类循环遍历查询所有的二级分类

//创建list集合封装每一个一级分类的二级分类

List twoFinalSubjectList = new ArrayList<>();

for (int j = 0; j < twoSubjectList.size(); j++) {

EduSubject tSubject = twoSubjectList.get(j);

if(tSubject.getParentId().equals(oneSubject.getId())){

TwoSubject twoSubject = new TwoSubject();

BeanUtils.copyProperties(tSubject,twoSubject);

twoFinalSubjectList.add(twoSubject);

}

}

//把一级下面所有的二级分类放入一级分类中

oneSubject.setChildren(twoFinalSubjectList);

finalSubjectList.add(oneSubject);

}

//4、封装二级分类

return finalSubjectList;

}

5、前端

JavaScript

import request from ‘@/utils/request’

export default {

//1 课程分类列表

getSubjectList() {

return request({

url: ‘/eduservice/subject/getAllSubject’,

method: ‘get’

})

}

}

Vue页面

<el-tree

ref=“tree2”

:data=“data2”

:props=“defaultProps”

:filter-node-method=“filterNode”

class=“filter-tree”

default-expand-all

/>

上一篇：【Vue知识体系总结 4】Vue组件化开发

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

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