2024年前端最全谷粒商城：10，音视频开发工程师面试题

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

5. like：双%的like

2.5. 新增分类

---

使用elementUI中的Cascader级联选择器做所属分类选择。

2.6. 设置数据不为空返回

---

使用注解@JsonInclude(JsonInclude.Include.NON_EMPTY)设置字段不为空的时候返回

2.7. 引入MyBatis引入分页插件

---

默认逆向生成代码分页有bug

需要引入MyBatis分页插件

新建配置文件夹，创建MyBatisConfigmybatis配置文件

package com.atguigu.gulimall.product.config;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;

import org.mybatis.spring.annotation.MapperScan;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.transaction.annotation.EnableTransactionManagement;

@Configuration

@EnableTransactionManagement //开启事务

@MapperScan(“com.zsy.product.dao”)

public class MyBatisConfig {

//引入分页插件

@Bean

public PaginationInterceptor paginationInterceptor() {

PaginationInterceptor paginationInterceptor = new PaginationInterceptor();

// 设置请求的页面大于最大页后操作， true调回到首页，false 继续请求 默认false

paginationInterceptor.setOverflow(true);

// 设置最大单页限制数量，默认 500 条，-1 不受限制

paginationInterceptor.setLimit(1000);

return paginationInterceptor;

}

}

配置好后前端分页功能即可正常显示

2.8. 设置品牌管理模糊查询

---

@override

public PageUtils queryPage(Map<String, Object> params) {

//1、获取key

String key = (String) params.get(“key”);

QueryWrapper queryWrapper = new QueryWrapper<>();

if (!StringUtils.isEmpty(key)) {

queryWrapper.eq(“brand_id”, key).or().like(“name”, key);

}

IPage page = this.page(

new Query().getPage(params),

queryWrapper

);

return new PageUtils(page);

}

2.9. 关联分类

---

一个品牌可以对应多个分类，一个分类也可以对应多个品牌。

1. 获取品牌关联的分类

/**

• 获取当前品牌关联的所有分类列表

*/

@GetMapping(“/catelog/list”)

//@RequiresPermissions(“product:categorybrandrelation:list”)

public R cateloglist(@RequestParam(“brandId”) Long brandId) {

List data = categoryBrandRelationService.list(

new QueryWrapper().eq(“brand_id”, brandId)

);

return R.ok().put(“data”, data);

}

2. 新增品牌与分类关联关系

三、品牌分类关联与级联更新

========================================================================

3.1. 同步更新数据保证数据一直

---

由于使用很多第三张中间表，在数据更新的时候要保证数据同步更新

rride

public void updateDetail(BrandEntity brand) {

//保证冗余字段的数据一致

this.updateById(brand);

if (!StringUtils.isEmpty(brand.getName())) {

//同步更新其他关联表中的数据

categoryBrandRelationService.updateBrand(brand.getBrandId(), brand.getName());

//TODO 更新其他关联

}

}

3.2. 自定义SQL语句

---

实现类中，通过this.baseMapper.xxx可以调用自定义SQL语句并传递参数

实体类中声明方法并使用@Param给参数重命名

对应mapper中书写SQL语句

四、平台属性

=================================================================

4.1. 属性分组模糊查询

---

修改接口，根据是否有key进行模糊查询

@Override

public PageUtils queryPage(Map<String, Object> params, Long cateLogId) {

String key = (String) params.get(“key”);

//select * from pms_attr_group where catelog_id=? and (attr_group_id=key or attr_group_name like %key%)

QueryWrapper wrapper = new QueryWrapper<>();

if (!StringUtils.isEmpty(key)) {

// 根据 key 模糊查询

wrapper.and(obj -> obj.eq(“attr_group_id”, key).or().like(“attr_group_name”, key));

}

if (cateLogId == 0) {

IPage page = this.page(new Query().getPage(params), wrapper);

return new PageUtils(page);

} else {

wrapper.eq(“catelog_id”, cateLogId);

IPage page = this.page(new Query().getPage(params), wrapper);

return new PageUtils(page);

}

}

4.2. Object划分

---

4.2.1. PO(persistant object)

PO(persistant object) 持久对象

PO 就是对应数据库中某个表中的一条记录，多个记录可以用 PO 的集合。 PO 中应该不包含任何对数据库的操作。

4.2.2. DO（Domain Object）

DO（Domain Object）领域对象

就是从现实世界中抽象出来的有形或无形的业务实体。

4.2.3. TO(Transfer Object)

TO(Transfer Object) ，数据传输对象

不同的应用程序之间传输的对象

4.2.4. DTO（Data Transfer Object）

DTO（Data Transfer Object）数据传输对象

这个概念来源于 J2EE 的设计模式，原来的目的是为了 EJB 的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，泛指用于展示层与服务层之间的数据传输对象。

4.2.5. VO(value object)

VO(value object) 值对象

通常用于业务层之间的数据传递，和 PO 一样也是仅仅包含数据而已。但应是抽象出的业务对象 , 可以和表对应 , 也可以不 , 这根据业务的需要 。用 new 关键字创建，由GC 回收的。

View object：视图对象；

接受页面传递来的数据，封装对象

将业务处理完成的对象，封装成页面要用的数据

4.2.6. BO(business object)

BO(business object) 业务对象

从业务模型的角度看 , 见 UML 元件领域模型中的领域对象。封装业务逻辑的 java 对象 , 通过调用 DAO 方法 , 结合 PO,VO 进行业务操作。business object: 业务对象 主要作用是把业务逻辑封装为一个对象。这个对象可以包括一个或多个其它的对象。 比如一个简历，有教育经历、工作经历、社会关系等等。 我们可以把教育经历对应一个 PO ，工作经历对应一个 PO ，社会关系对应一个 PO 。 建立一个对应简历的 BO 对象处理简历，每个 BO 包含这些 PO 。 这样处理业务逻辑时，我们就可以针对 BO 去处理。

4.2.7. POJO(plain ordinary java object)

POJO(plain ordinary java object) 简单无规则 java 对象

传统意义的 java 对象。就是说在一些 Object/Relation Mapping 工具中，能够做到维护数据库表记录的 persisent object 完全是一个符合 Java Bean 规范的纯 Java 对象，没有增加别的属性和方法。我的理解就是最基本的 java Bean ，只有属性字段及 setter 和 getter 方法！。

POJO 是 DO/DTO/BO/VO 的统称。

4.2.8. DAO(data access object)

DAO(data access object) ：数据访问对象

是一个 sun 的一个标准 j2ee 设计模式， 这个模式中有个接口就是 DAO ，它负持久层的操作。为业务层提供接口。此对象用于访问数据库。通常和 PO 结合使用， DAO 中包含了各种数据库的操作方法。通过它的方法 , 结合 PO 对数据库进行相关的操作。夹在业务逻辑与数据库资源中间。配合 VO, 提供数据库的 CRUD 操作.

4.3. 功能完善

---

新建vo文件夹

其中存放内容为返回给客户端的数据封装，为entity中对应内容的扩展

通过BeanUtils.copyProperties(attrEntity, respVo);方法可以将attrEntity内容复制到respVo中

4.4. 建立常量

---

gulimall-common中新建constant文件夹，存储系统中使用的常量

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

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

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）