const http = require('http');

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
  // 设置响应头
  res.writeHead(200, { 'Content-Type': 'text/plain' });

  // 返回响应内容
  res.end('Hello, World!\n');
});

// 监听端口
server.listen(3000, () => {
  console.log('Server running at http://127.0.0.1:3000/');
});

在这个示例中，我们创建了一个简单的 HTTP 服务器，它监听端口 3000 ，并在每次请求时返回“Hello, World!”的响应。 http.createServer() 方法接受一个回调函数，这个回调函数会在每次收到 HTTP 请求时执行。

处理 URL 和请求参数

通过解析 URL 和请求参数，我们可以根据请求路径或查询字符串来处理不同的业务逻辑。

const url = require('url');

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url, true); // 解析 URL

  // 处理不同的请求路径
  if (parsedUrl.pathname === '/') {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('<h1>Home Page</h1>');
  } else if (parsedUrl.pathname === '/about') {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('<h1>About Page</h1>');
  } else {
    res.writeHead(404, { 'Content-Type': 'text/html' });
    res.end('<h1>404 Not Found</h1>');
  }
});

server.listen(3000, () => {
  console.log('Server running at http://127.0.0.1:3000/');
});

处理 POST 请求

对于 POST 请求，Node.js 也可以处理请求体数据，通常需要监听 data 和 end 事件来处理数据流。

const server = http.createServer((req, res) => {
  if (req.method === 'POST') {
    let body = '';
    
    // 监听数据传入
    req.on('data', chunk => {
      body += chunk.toString(); // 将二进制数据转为字符串
    });

    // 数据接收完成
    req.on('end', () => {
      res.writeHead(200, { 'Content-Type': 'application/json' });
      res.end(JSON.stringify({ message: 'Data received', data: body }));
    });
  }
});

server.listen(3000, () => {
  console.log('Server running at http://127.0.0.1:3000/');
});

WebSocket 实现实时通信

WebSocket 是一种基于 TCP 的协议，它实现了全双工通信，使得客户端和服务器可以在建立初次连接后，进行持续的、实时的双向数据通信。相较于传统的 HTTP 请求响应模型，WebSocket 极大提升了数据交互的效率，尤其适用于需要频繁通信的场景，例如实时聊天、股票行情、游戏等。

WebSocket 通信的实现过程

下面的代码通过 Node.js 原生模块实现了 WebSocket 的基础原理，包括 HTTP 升级、数据帧处理等。整个过程分为四个步骤：

通过 HTTP 创建一个服务 ：首先我们需要启动一个 HTTP 服务器，等待客户端发起连接请求。
升级协议 ：当客户端请求 WebSocket 连接时，服务器通过 HTTP 101 状态码切换协议，升级为 WebSocket。
建立 WebSocket 连接 ：一旦协议升级成功，服务器和客户端就可以通过 WebSocket 进行通信。
WebSocket 通信 ：双方通过特定格式的数据帧进行消息的发送与接收。

代码实现

import http from "node:http";
import crypto from "node:crypto";

// 1. 创建一个 http server
const server = http.createServer((req, res) => {
  console.log("http server", http.STATUS_CODES);
  const errorCode = 400;
  res.writeHead(errorCode, {
    "Content-Type": "text/plain",
  });
  res.end(
    `${http.STATUS_CODES[errorCode]}，你不能这样访问，因为我是一个 ws 服务`
  );
});

// 2. 升级协议
server.on("upgrade", (req, socket, head) => {
  const key = req.headers["sec-websocket-key"];
  const acceptValue = generateAcceptValue(key);
  const resHeaders = [
    "HTTP/1.1 101 Switching Protocols",
    "Upgrade: websocket",
    "Connection: Upgrade",
    `Sec-WebSocket-Accept: ${acceptValue}`,
  ];

  // 发送 WebSocket 协议切换的响应头
  socket.write(resHeaders.join("\r\n") + "\r\n\r\n");

  /**
   * 数据接收
   */
  socket.on("data", (buffer) => {
    // 接收到的数据是 WebSocket 帧，直接 toString 可能会有问题
    console.log("收到的数据帧:", buffer.toString());

    // 发送一个 pong 响应
    socket.write(generateWebsocketFrame("pong"));
  });

  /**
   * 发送消息
   */
  const frame = generateWebsocketFrame("hello");
  socket.write(frame);
});

// 监听 3000 端口
server.listen(3000, () => {
  console.log("server is running on http://localhost:3000");
});

/**
 * 根据客户端的 WebSocket key 生成 Sec-WebSocket-Accept 值
 */
function generateAcceptValue(secWebsocketKey: string) {
  return crypto
    .createHash("sha1")
    .update(secWebsocketKey + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11", "binary")
    .digest("base64");
}

/**
 * 生成 WebSocket 数据帧
 * @param data 要发送的文本消息
 */
function generateWebsocketFrame(data: string) {
  // 将字符串转换为 buffer 处理
  const message = Buffer.from(data);
  // 分配一个新的 buffer 存储 WebSocket 帧
  const frame = Buffer.alloc(2 + message.length);
  
  // 数据帧的第一个字节是标志位，表示 FIN 位和操作码 (0x81 代表 FIN = 1 和 Text Frame)
  frame[0] = 0x81;
  
  // 数据帧的第二个字节表示数据长度（小于 126 的情况）
  frame[1] = message.length;
  
  // 将消息内容拷贝到 frame 中，从第三个字节开始
  message.copy(frame, 2);

  console.log("生成的数据帧:", message, frame);
  
  return frame;
}

代码详解

创建 HTTP 服务 ：首先我们创建了一个普通的 HTTP 服务器，当客户端通过 HTTP 请求时，返回 400 错误码，表明该服务仅支持 WebSocket 连接。
升级协议 ：当客户端发送 Upgrade: websocket 请求头时，服务器会捕获到 upgrade 事件。在这个事件处理程序中，我们通过 Sec-WebSocket-Accept 头部完成 WebSocket 协议的升级。

Sec-WebSocket-Accept 是通过客户端发来的 Sec-WebSocket-Key 计算出的一个 Base64 编码的字符串，确保通信的合法性。
完成协议升级后，服务器可以通过双工连接 (socket) 与客户端通信。

WebSocket 数据帧 ：WebSocket 的通信是基于数据帧的。在这个例子中， generateWebsocketFrame 函数构造了一个简单的文本帧，消息内容为 "hello"。WebSocket 帧由标志位、数据长度和实际数据组成。
通信过程 ：一旦 WebSocket 连接建立，服务器可以接收客户端发送的数据，并可以使用 socket.write 发送数据帧给客户端，实现双向通信。

使用 Express 简化 HTTP 开发

Express 概述

Express 是一个基于 Node.js 的 Web 框架，提供了简洁的 API 和丰富的中间件支持，能够帮助开发者快速构建 Web 应用。

使用 Express 创建基本 HTTP 服务器

Express 可以极大地简化 HTTP 服务器的创建和路由管理。

const express = require('express');
const app = express();

// 设置基本路由
app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

app.get('/about', (req, res) => {
  res.send('About Page');
});

// 启动服务器
app.listen(3000, () => {
  console.log('Express server running at http://127.0.0.1:3000/');
});

与原生 http 模块相比，Express 提供了更强大的路由系统和中间件机制，使开发者能够更高效地处理请求。

中间件机制

Express 中的中间件是处理请求和响应的核心机制。我们可以通过中间件来处理请求数据、验证权限、日志记录等操作。

const express = require('express');
const app = express();

// 中间件示例
app.use((req, res, next) => {
  console.log(`Request received: ${req.method} ${req.url}`);
  next(); // 调用 next() 继续执行
});

// 路由
app.get('/', (req, res) => {
  res.send('Hello, Express with Middleware!');
});

// 启动服务器
app.listen(3000, () => {
  console.log('Express server with middleware running at http://127.0.0.1:3000/');
});

【中高级】你认为设计一个好的服务端架构体系，需要包含哪些模块和结构？

设计一个好的服务端架构体系，涉及到多个核心模块和结构，确保服务的性能、可维护性、安全性以及扩展性。以及常用的设计模式、架构原则（如 MVC）、数据库驱动等其他重要部分。

网络层

HTTP 服务器 ：这是服务端最基础的部分，通过 HTTP 协议处理请求与响应。通过路由解析 URL，分发给相应的控制器来处理不同的请求类型。可以使用 Node.js 的 http 模块或使用更高层的框架如 Express 。
WebSocket ：用于实时通信，支持双向通信，通常用于需要实时更新的场景，如在线聊天、游戏等。Node.js 提供第三方库如 ws 来实现 WebSocket。
TCP/IP 通信 ：Node.js 的 net 模块可以用于实现底层 TCP 连接，适用于需要持久连接和高性能传输的场景，比如文件传输或实时流媒体。

中间件处理

Cookie 管理 ：用于保存客户端会话信息，常用于身份认证和持久登录。通过 cookie-parser 中间件可以轻松处理请求中的 Cookie，并设置 Cookie 响应。
CORS ：允许服务器接受跨域请求，确保浏览器能够与不同源的 API 通信。通过 cors 中间件，可以灵活配置允许的来源和请求头信息。
Body 解析 ：在处理 POST 请求时，服务端需要解析请求体，通常包括 application/json 和 application/x-www-form-urlencoded 数据类型。可以使用 express.json() 和 express.urlencoded() 来自动解析这些数据。
日志记录 ：使用 morgan 等中间件来记录请求信息、错误日志等，帮助开发者快速调试并在生产环境中监控应用运行状态。
压缩传输 ：通过 compression 中间件启用 Gzip 压缩，减少传输数据的大小，提升响应速度。

缓存层

HTTP 缓存控制 ：通过设置 Cache-Control 和 ETag 响应头来优化静态资源的缓存管理，减少不必要的请求，提升性能。
内存缓存 ：对于 API 数据或频繁访问的数据，可以使用内存缓存如 Node-cache 或 Redis 来减少数据库查询和重复计算。Node.js 集成 Redis 还可以用于分布式缓存，保证缓存数据在多台服务器之间的一致性。

数据库层

数据库驱动 ：Node.js 支持多种数据库的连接，常用的关系型数据库驱动有 MySQL、PostgreSQL，而 NoSQL 数据库驱动如 MongoDB 也很流行。通过这些驱动可以实现与数据库的高效交互。
ORM ：对象关系映射工具如 Sequelize （适用于关系型数据库）和 Mongoose （适用于 MongoDB）简化了数据库的操作，通过类和对象操作数据库表与记录，避免手写 SQL。
连接池与事务管理 ：使用数据库连接池能够复用数据库连接，减少频繁创建和销毁连接的开销，同时使用事务管理能够确保多个数据库操作的原子性，防止数据不一致。

安全层

身份认证与授权 ：常见的身份认证方法包括使用 JWT（JSON Web Token）或 OAuth2。JWT 是无状态的，令牌携带用户信息，可以用于服务端和客户端之间的身份认证。
数据加密 ：通过 HTTPS 进行传输加密，确保数据在网络上传输的安全性。对于用户密码等敏感数据，使用 bcrypt 或 argon2 进行加密存储。
输入验证与清理 ：通过对用户输入的数据进行验证和清理，可以有效防止常见的攻击，如 SQL 注入和 XSS 攻击。使用库如 express-validator 进行数据验证。

架构设计模式

MVC 架构 ：Model-View-Controller 是一种常见的架构模式，将应用逻辑分为三层：
- Model ：处理数据和业务逻辑，管理与数据库的交互。
- View ：负责向客户端展示数据，通常是 HTML 或 JSON 格式的响应。
- Controller ：负责接收请求并调用相应的 Model 来处理业务逻辑，最后返回响应。
服务拆分与微服务 ：将单一的大型服务拆分为多个独立的小服务（微服务），每个服务专注于特定的业务功能，可以独立开发、部署和扩展。
中间件架构 ：通过中间件链式调用，逐步处理请求，例如身份验证、日志记录、权限校验等。中间件解耦了业务逻辑，使代码更具可维护性。

任务调度与异步处理

任务队列 ：任务队列用于处理耗时的后台任务或异步任务。可以使用 RabbitMQ 或 Redis 的队列功能，将任务推入队列并异步处理。
定时任务 ：通过 cron 或 node-schedule 来调度周期性任务，例如定时发送邮件或定期执行数据库备份。
异步处理 ：Node.js 原生支持异步编程，使用 Event Loop 来处理高并发请求，配合 Promise 或 async/await 语法，可以高效处理异步逻辑。

性能优化

负载均衡 ：在高并发场景下，通过负载均衡将请求分发到多个服务实例，防止单个服务超载。负载均衡策略包括轮询、最小连接数等。
数据库优化 ：通过建立索引、使用查询缓存等手段优化数据库性能

。同时，对于大批量的数据库操作可以采用批量处理，减少数据库开销。

CDN 与静态资源管理 ：通过内容分发网络（CDN）加速静态资源的分发，如图片、CSS、JS 文件。CDN 缓存能够显著提升用户访问速度，并减少服务器的带宽负载。

【专家级】详述 IoC、AOP 原理，假设让你设计一个企业级服务端框架，有没有思路？

NestJS 是目前非常流行的企业级 Node.js 框架，它是一个基于 TypeScript 的框架，灵感来自 Angular，专注于构建模块化、易维护的服务端架构。

它利用了：

面向对象编程（OOP）
函数式编程（FP）
函数式响应编程（FRP）
依赖注入（IoC）
面向切面编程（AOP）

这些特性使其成为构建企业级应用程序的理想选择。

基础架构设计

模块化设计

NestJS 的模块系统采用了类似于 Angular 的模块化设计理念。每个应用程序至少有一个根模块（ AppModule ），应用中的各个功能模块可以独立划分为不同的模块，每个模块负责不同的功能。模块之间可以互相导入、导出依赖，从而形成一个可扩展的体系。

@Module 装饰器 ：用来定义一个模块，模块包含组件（如控制器、服务）以及模块之间的依赖关系。
模块导入与导出 ：模块可以通过 imports 导入其他模块，通过 exports 导出自己提供的服务或模块，允许其他模块使用。

示例代码：

import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { UserService } from './user.service';

@Module({
  controllers: [UserController],
  providers: [UserService],
})
export class UserModule {}

控制反转（IoC）

控制反转 （Inversion of Control, IoC）是一种设计模式，将依赖关系的创建与管理交由框架自动处理。NestJS 使用 IoC 容器来自动注入服务，并通过依赖注入（Dependency Injection, DI）来管理应用的依赖关系。

依赖注入

NestJS 中的依赖注入是 IoC 的核心，通过构造函数或属性注入的方式实现服务之间的依赖。

Constructor Injection（构造函数注入） ：通过在类的构造函数中声明依赖，NestJS 自动将已注册的服务实例注入其中。

import { Injectable } from '@nestjs/common';

@Injectable()
export class UserService {
  findAll() {
    return 'Get all users';
  }
}

@Injectable()
export class AppService {
  constructor(private readonly userService: UserService) {}

  getUsers() {
    return this.userService.findAll();
  }
}

IoC 容器与 Providers ： Providers 是服务的提供者，NestJS 的 IoC 容器管理这些 Providers 的生命周期，并通过 @Injectable 装饰器注册服务。
动态模块 ：NestJS 提供了动态模块功能，允许在运行时动态创建模块，这对于根据环境或配置加载不同的模块非常有用。

生命周期管理

NestJS IoC 容器负责管理服务的生命周期，从实例化到销毁，提供了 OnModuleInit 和 OnModuleDestroy 生命周期钩子来控制服务的初始化与销毁过程。

面向切面编程（AOP）

面向切面编程 （Aspect-Oriented Programming, AOP）是一种编程范式，旨在通过分离关注点来提高代码的模块化。AOP 通过拦截方法调用，在方法前后执行增强逻辑。NestJS 实现 AOP 的方式主要通过 **拦截器**、**中间件** 和守卫等机制。

AOP 基本概念

拦截器（Interceptors） ：拦截器可以在请求进入控制器前和返回响应前后执行增强操作，如日志记录、性能监控等。

import {
  Injectable,
  NestInterceptor,
  ExecutionContext,
  CallHandler,
} from '@nestjs/common';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    console.log('Before...');
    const now = Date.now();
    return next
      .handle()
      .pipe(tap(() => console.log(`After... ${Date.now() - now}ms`)));
  }
}

中间件（Middleware） ：NestJS 中的中间件是请求处理的一个层，类似于 Express 中的中间件，它们可以在请求到达控制器之前执行一些通用逻辑。
守卫（Guards） ：守卫是 AOP 的另一种形式，用来控制某些请求是否有权执行。比如，常用于身份验证与权限检查。

import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    const request = context.switchToHttp().getRequest();
    return this.validateRequest(request);
  }

  validateRequest(request: any) {
    // 权限验证逻辑
    return true;
  }
}

动态代理与横切关注点

在 AOP 中，**横切关注点**是那些与业务逻辑无关的代码，如日志、权限、事务管理等。NestJS 使用动态代理的方式对方法进行拦截和增强，允许开发者在不修改原有业务逻辑的情况下，增加横切关注点。

数据库与持久化

NestJS 提供了非常丰富的数据库集成支持，包括 TypeORM（适用于关系型数据库）和 Mongoose（适用于 MongoDB）。开发者可以使用这些 ORM 工具方便地与数据库交互，进行 CRUD 操作、事务管理等。

TypeORM 支持 ：通过 NestJS 提供的 @nestjs/typeorm 模块，开发者可以无缝集成 TypeORM，处理复杂的数据库关系与查询。

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { User } from './user.entity';
import { UserService } from './user.service';

@Module({
  imports: [TypeOrmModule.forFeature([User])],
  providers: [UserService],
})
export class UserModule {}

Mongoose 支持 ：NestJS 还提供了 @nestjs/mongoose 模块，用于集成 MongoDB 的 Mongoose ORM，支持无模式化设计，灵活操作 NoSQL 数据。

消息队列与异步任务

在企业级应用中，处理异步任务是非常重要的一环。NestJS 通过集成 Redis 和 RabbitMQ 等消息队列，实现了任务队列和异步任务调度。

任务调度 ：通过 @Cron 装饰器可以轻松实现定时任务调度，如每天定时发送邮件、定期数据清理等。
消息队列 ：通过 Redis 或 RabbitMQ 集成，开发者可以创建消息队列处理后台异步任务，保证系统的高可用性与可扩展性。

微服务与模块化拆分

NestJS 原生支持 **微服务架构**，通过 @nestjs/microservices 模块，开发者可以构建基于 GRPC、Kafka 等协议的微服务。

微服务模块设计 ：通过拆分业务模块，将其部署为多个独立的服务，并通过消息队列、事件驱动架构等方式进行通信。
事件驱动通信 ：NestJS 的微服务模块允许通过消息模式和事件订阅来处理服务之间的通信，确保高可扩展性和容错性。

IoC 和 AOP 详细概念与实现原理

控制反转（IoC）

控制反转 是一种设计原则，它将对象的依赖关系交给外部管理，而不是由对象自行创建依赖。通过 IoC，应用程序的组件之间可以更好地解耦，依赖关系的创建和管理交由框架的 IoC 容器完成。

IoC 原理

依赖倒置原则 ：高层模块不应该依赖低层模块，二者都应该依赖抽象；抽象不应该依赖具体实现，具体实现应该依赖抽象。
依赖注入 ：NestJS 提供了构造函数注入、属性注入等方式，将依赖注入到服务中。
IoC 容器 ：NestJS 中的 IoC 容器负责管理所有服务的生命周期，并通过 @Injectable() 装饰器注册服务。

面向切面编程（AOP）

面向切面编程 是一种通过将程序的业务逻辑与横切关注点分离，提升代码模块化的编程方式。AOP 通过在方法执行前后动态织入增强逻辑，实现横切关注点的管理。

AOP 原理

切面（Aspect） ：表示一个横切关注点的抽象。它通过拦截器、守卫、日志等方式，在程序的执行过程中动态增强功能。
连接点（Join Point） ：表示程序执行的某个具体点，如方法调用、异常抛出等。
通知（Advice） ：表示在特定的连接点执行的增强行为，如日志记录、权限校验。

简历优化（35K+ 简历模板）

技能描述

熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想
掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG
熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理
掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建
丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎
丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理
基于 Node.js 开发脚手架、打包构建优化工具及中间件服务
掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
团队管理经验，并在项目架构设计与性能优化方面具有丰富经验
算法与编程技术
- 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
- 重点掌握动态规划的基本概念、解题步骤和经典题目。
3D 数字孪生平台开发经验
- 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
- 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
- 熟悉材质、光效和粒子系统的实现与优化。
全面性能优化能力
- 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
- 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
- 具有应用性能优化经验，包括数据结构优化和应用模块更新。
- 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

遇到了什么问题 question，需求
怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
具体方案落地
结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
【优化】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
【 自研 OA 打通 】...

STAR

【技术栈】

Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
数据库 ：MySQL
管理工具 ：SVN

【产品前端研发负责人】

情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)
大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)
企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
前端性能、异常与行为监控
3D 可视化数字孪生低代码实战 💥
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践

年包 50W+ 薪资长线规划

核心要素

全面的技术储备
1. 框架基础
  - Vue 和 React 经验：包括 Vue3 + Typescript 和 React18（Hooks、Concurrent）
  - 掌握框架原理：React 生态库（React-Router、Redux）和 Vue 生态库原理
2. 工程化能力
  - 构建工具：Webpack、Vite、Rspack、ESBuild、swc
  - CI/CD 自动化：自动化构建和自动化部署
3. 基建能力
  - Node.js、命令行工具开发（Cli）
  - UI 库、图表库、工具库开发
4. 业务领域经验
  - 管理系统和图表类应用
  - 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
项目经验
- 参与过至少两个大型项目，并主导过一个复杂项目
1. 管理系统：包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
2. 其他领域项目：如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
面试表现
1. 个人介绍
  - 准备个人介绍草稿，涵盖基本信息、技术栈和项目重难点
2. STAR 法则
  - 问题描述：阐述遇到的问题或需求
  - 解决方案评估：方案对比与选择（如 React 状态管理：redux、mobx、jotai、recoil，Vue3 使用 Pinia）
  - 方案实施：具体的实施步骤
  - 反思与优化：项目反思及优化建议
3. 面试准备
  - 重点复习知识点：如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
  - 技术储备：结合项目经验展示技术在项目中的应用
学历提升
1. 现有学历：大专
2. 未来计划：尽快取得本科证书（不需要注明具体年限）
3. 学历背景：民办学校
4. 内推建议：应对学历和工作经历问题，通过内推提升机会

补足短板

项目简单，管理后台一做就是大半年，天天 CRUD
- 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
- 找一些不错的项目练手
- 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
- 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）
技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）
架构、方案设计没碰过
- React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
- Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
没有专精的技能或业务
- 自驱（假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
- 与生俱来有些东西，好奇心、自驱力、清晰规划
- 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、内推

⚠️ 暂不支持的文档区域，【文档小组件】

跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
协同编辑器（文档类、画板类）wangEditor、CKEditor
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
大厂 UI 组件库（Vue3）整体设计与开发实践
大厂业务 Hooks 库（React 18）整体设计与开发实践
埋点与数据监控平台实战
3D 可视化数字孪生实战 💥
- 基于 cesium 方案的 WebGIS 开发实践
- 基于 WebGL 3D 可视化开发实践

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

微前端在分拆原子应用场景下的落地与实践
协同编辑器从零到一架构实现
推动团队基建落地
- React UI 库
- Vue Composition API 库
- 企业级脚手架
数字孪生平台整体架构设计
企业级无代码可视化平台实践（Vue3）
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化整体实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

关键在于通过学术教育或网络资源加强基础知识；
在简历中以多种方式展示对前端的热情，展现个人潜力；
积极探索前沿技术，关注国内外技术动态；
尝试开发小型项目或参与社区开源项目；
建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

关注社区中关于进阶的资料和路线，强化基础知识；
深入掌握常用框架的高级用法，探索其原理；
在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；
思考提高团队效率的方法，例如：
- 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
- 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
- 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
- 尝试搭建CI/CD平台，维护公司内部的通用npm包；
- 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
协助或主导业务目标制定，合理推动项目达成预期效果；
是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】

前端前沿技术爱好者

Nest 服务端开发与原理深度剖析，《NestJS 实战》作者带你领略框架设计之美

【 初中级 】有使用过 Nodejs 开发过服务端吗？

服务端开发基础

Node.js HTTP 服务端开发

创建基本的 HTTP 服务器

处理 URL 和请求参数

处理 POST 请求

WebSocket 实现实时通信

WebSocket 通信的实现过程

代码实现

代码详解

使用 Express 简化 HTTP 开发

Express 概述

使用 Express 创建基本 HTTP 服务器

中间件机制

【 中高级 】你认为设计一个好的服务端架构体系，需要包含哪些模块和结构？

网络层

中间件处理

缓存层

数据库层

安全层

架构设计模式

任务调度与异步处理

性能优化

【 专家级 】详述 IoC、AOP 原理，假设让你设计一个企业级服务端框架，有没有思路？

基础架构设计

模块化设计

控制反转（IoC）

依赖注入

生命周期管理

面向切面编程（AOP）

AOP 基本概念

动态代理与横切关注点

数据库与持久化

消息队列与异步任务

微服务与模块化拆分

IoC 和 AOP 详细概念与实现原理

控制反转（IoC）

IoC 原理

面向切面编程（AOP）

AOP 原理

简历优化（35K+ 简历模板）

技能描述

项目描述

大家先看这段描述：

深度优化一下

STAR

其实还不够，这些项目才是求职香饽饽

年包 50W+ 薪资长线规划

核心要素

补足短板

妙码学院——全程陪跑、督学、内推

妙码学院全网独家项目实战矩阵

不同阶段对前端人的硬性要求

1~3年

3~5年

5年以上

职业规划指导

【初中级】有使用过 Nodejs 开发过服务端吗？

【中高级】你认为设计一个好的服务端架构体系，需要包含哪些模块和结构？

【专家级】详述 IoC、AOP 原理，假设让你设计一个企业级服务端框架，有没有思路？