最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

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

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

org.springframework.boot

spring-boot-starter-websocket

创建 WebSocket 配置类，开启 WebSocket 支持

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

在 xxx-framework 下的 com.xxx.framework.config 包下添加该类：

package com.lrjas.framework.config;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**

• 开启WebSocket支持

*/

@Configuration

public class WebSocketConfig {

@Bean

public ServerEndpointExporter serverEndpointExporter() {

return new ServerEndpointExporter();

}

}

添加 WebSocketServer 类，创建 webSocket 端点

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

package com.lrjas.framework.ws;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.stereotype.Component;

import javax.websocket.*;

import javax.websocket.server.PathParam;

import javax.websocket.server.ServerEndpoint;

import java.io.IOException;

import java.util.concurrent.CopyOnWriteArraySet;

// @ServerEndpoint 声明并创建了webSocket端点, 并且指明了请求路径

// id 为客户端请求时携带的参数, 用于服务端区分客户端使用

@ServerEndpoint(“/WebSocketServer/{sid}”)

@Component

public class WebSocketServer {

// 日志对象

private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);

// 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。

private static int onlineCount = 0;

// concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。

private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();

// private static ConcurrentHashMap<String,WebSocketServer> websocketList = new ConcurrentHashMap<>();

// 与某个客户端的连接会话，需要通过它来给客户端发送数据

private Session session;

// 接收sid

private String sid = “”;

/*

• 客户端创建连接时触发

• */

@OnOpen

public void onOpen(Session session, @PathParam(“sid”) String sid) {

this.session = session;

webSocketSet.add(this); // 加入set中

addOnlineCount(); // 在线数加1

log.info(“有新窗口开始监听:” + sid + “, 当前在线人数为” + getOnlineCount());

this.sid = sid;

try {

sendMessage(“连接成功”);

} catch (IOException e) {

log.error(“websocket IO异常”);

}

}

/**

• 客户端连接关闭时触发

**/

@OnClose

public void onClose() {

webSocketSet.remove(this); // 从set中删除

subOnlineCount(); // 在线数减1

log.info(“有一连接关闭！当前在线人数为” + getOnlineCount());

}

/**

• 接收到客户端消息时触发

*/

@OnMessage

public void onMessage(String message, Session session) {

log.info(“收到来自窗口” + sid + “的信息:” + message);

// 群发消息

for (WebSocketServer item : webSocketSet) {

try {

item.sendMessage(message);

} catch (IOException e) {

e.printStackTrace();

}

}

}

/**

• 连接发生异常时候触发

*/

@OnError

public void onError(Session session, Throwable error) {

log.error(“发生错误”);

error.printStackTrace();

}

/**

• 实现服务器主动推送(向浏览器发消息)

*/

public void sendMessage(String message) throws IOException {

log.info(“服务器消息推送：”+message);

this.session.getBasicRemote().sendText(message);

}

/**

• 发送消息到所有客户端

• 指定sid则向指定客户端发消息

• 不指定sid则向所有客户端发送消息

• */

public static void sendInfo(String message, @PathParam(“sid”) String sid) throws IOException {

log.info(“推送消息到窗口” + sid + “，推送内容:” + message);

for (WebSocketServer item : webSocketSet) {

try {

// 这里可以设定只推送给这个sid的，为null则全部推送

if (sid == null) {

item.sendMessage(message);

} else if (item.sid.equals(sid)) {

item.sendMessage(message);

}

} catch (IOException e) {

continue;

}

}

}

public static synchronized int getOnlineCount() {

return onlineCount;

}

public static synchronized void addOnlineCount() {

WebSocketServer.onlineCount++;

}

public static synchronized void subOnlineCount() {

WebSocketServer.onlineCount–;

}

public static CopyOnWriteArraySet getWebSocketSet() {

return webSocketSet;

}

}

创建 controller，用于模拟服务端消息发送

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

package com.lrjas.web.wms.controller;

import com.lrjas.common.core.controller.BaseController;

import com.lrjas.framework.ws.WebSocketServer;

import org.apache.shiro.authz.annotation.RequiresPermissions;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import java.io.IOException;

import java.util.HashMap;

import java.util.Map;

@Controller

@RequestMapping(“/wms/websocket”)

public class WebSocketController extends BaseController

{

private String prefix = “wms/websocket”;

@RequiresPermissions(“wms:websocket:view”)

@GetMapping()

public String socket() {

return prefix + “/websocket”; // 页面的访问路径

}

@RequiresPermissions(“wms:websocket:edit”)

//推送数据接口

@ResponseBody

@RequestMapping(“/push/{cid}”)

public Map<String, Object> pushToWeb(@PathVariable String cid, String message) {

if (message == null) {

message = “我是消息!!!”;

}

Map<String, Object> result = new HashMap<>();

try {

WebSocketServer.sendInfo(message, cid);

result.put(“code”, 200);

result.put(“msg”, “success”);

} catch (IOException e) {

e.printStackTrace();

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

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

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

没有过了解？
19.vue-cli 替我们做了哪些工作？
…
[外链图片转存中…(img-53APwA5e-1715896119381)]

算法

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

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    [外链图片转存中…(img-RfLMEvmV-1715896119382)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666