MapFlow

PUBLIC LEARNING ROADMAP

成为可独立交付的全栈工程师:前端+后端+部署+运维两年路径 学习技能树

由 Skill Tree Engine 确定性生成的只读快照

37 个知识节点 · intermediate

发布者:hellozyb

知识目录

基础概念

Web 基础三件套 (HTML/CSS/JavaScript)

掌握网页结构、样式与基础交互的核心语言,是全栈前端起点

建议预留 90 分钟

学习目标

  • 理解HTML语义化标签与页面结构
  • 会用CSS布局与基础盒模型与响应式单位
  • 理解JavaScript基础变量函数与流程控制

关键概念

  • 语义化HTML
  • 盒模型与flex/grid
  • CSS选择器
  • JS基础语法

为什么学习

  • 作为从零起步的第一块基石,需要能独立写出语义化结构与常用样式后的第一可运行网页

如何检验理解

  • 能不看教程从空白页写出一张带表单、浮动布局和基本事件的静态页面

基础概念

开发环境、终端与Git版本控制

搭建设计环境并掌握Git提交与协作,是工程化与团队协作的前提

建议预留 90 分钟

学习目标

  • 配置编辑器与命令行常用操作
  • 掌握git add/commit/branch/merge基本流程
  • 理解commit历史与回退

关键概念

  • 终端命令
  • git init/commit/branch
  • 远程仓库
  • 合并冲突

为什么学习

  • 任何真实项目都要版本管理与命令行操作,需达到日常随手使用而不被阻塞

如何检验理解

  • 能初始化仓库、创建分支、提交变更并解决一次最基础的合并冲突

基础概念

HTTP 协议与网络基础

理解请求响应、状态码与方法,是前后端通通信与安全的前提

建议预留 60 分钟

学习目标

  • 理解HTTP请求/响应结构与方法语义
  • 识别常见状态码与缓存/头字段含义
  • 理解Cookie与无状态特性

关键概念

  • HTTP方法
  • 状态码
  • 请求/响应头
  • Cookie/Session

为什么学习

  • 前后端分离、API设计与认证均建立在HTTP理解之上,需明白其机制而非背参数

如何检验理解

  • 能用抓包工具解释一次页面请求的状态码、头字段与请求流程

核心技能

Linux命令行与服务器基础

掌握Linux文件系统、进程、权限与网络命令,是部署与运维的根基

建议预留 120 分钟

学习目标

  • 熟练常用Linux命令与文件权限
  • 管理进程、服务与端口
  • 使用SSH远程连接与查看日志

关键概念

  • 文件系统与权限
  • 进程/端口
  • SSH
  • systemd/service

为什么学习

  • 部署与运维环境以Linux为主,需能在服务器上导航、查日志与操作服务

如何检验理解

  • 能在远程服务器上用命令行创建部署目录、查看进程与端口并排查权限问题

核心技能

现代 JavaScript 与 ES6+ 语法

掌握箭头函数、解构、类、模块等现代语法,统一推进前后端JavaScript基础

建议预留 120 分钟

学习目标

  • 精通箭头函数、解构与模板字符串
  • 掌握类与模块导入导出
  • 熟悉数组/对象的高阶遍历方法

关键概念

  • ES6+语法
  • 块作用域与闭包
  • 模块系统
  • 解构与展开

为什么学习

  • 前后端都以现代JS为基础,需能把语法熟练迁移到不同场景中编写可读代码

如何检验理解

  • 能纯手写使用解构、箭头函数、模板字符与ES模块组织的一段业务逻辑

核心技能

数据库基础与 SQL 设计

掌握关系型表设计范式与SQL增删改查,服务于持久化与查询优化

建议预留 150 分钟

学习目标

  • 理解表、主外键与1:N关系设计
  • 熟练SELECT/INSERT/UPDATE与JOIN
  • 理解索引与基本查询优化

关键概念

  • 数据库范式
  • 关系模型
  • SQL语句
  • 索引

为什么学习

  • 绝大多数业务数据落在关型库中,设计中大型项目必须能手写常用查询与表关系设计

如何检验理解

  • 能为一个业务需求设计含外键关系与索引的多表结构并写出联表统计查询

核心技能

Git协作与代码评审深化

掌握分支模型、rebase与代码评审,适应团队中大项目协作开发

建议预留 90 分钟

学习目标

  • 理解Git Flow/Feature分支工作流
  • 掌握rebase与冲突高级处理
  • 能进行代码评审与自查

关键概念

  • 分支工作流
  • rebase/merge
  • code review
  • 语义化提交

为什么学习

  • 中大型项目必须多人协作,需要能遵循工作流管理分支并参与评审,保证可合并交付

如何检验理解

  • 能按功能分支工作流独立完成一次含PR评审修改并成功合入主干的协作

补充知识

Java 语言与面向对象基础

了解Java语法与面向对象,作为可选备选后端栈的认知基础

建议预留 120 分钟

学习目标

  • 认识Java类、对象、接口与集合
  • 能读懂Java方法签名与运行方式

关键概念

  • 类与对象
  • 继承/接口
  • Java集合

为什么学习

  • 目标以Node为主,Java作为了解层面的备选,用于读懂存量系统而非深钻

如何检验理解

  • 能读懂带类与接口的基础Java代码并指出其主要面向对象结构

基础概念

DOM 操作与事件机制

理解DOM结构、选择器、事件流与浏览器原理,奠定框架底层认知

建议预留 90 分钟

学习目标

  • 理解DOM树与节点选择操作
  • 掌握事件流与事件委托
  • 理解浏览器渲染基本流程

关键概念

  • DOM树
  • 事件冒泡/捕获
  • 事件委托
  • 重绘与回流

为什么学习

  • 框架屏蔽了DOM细节但需理解其机制以排错与调优,做到懂原理就可上手框架

如何检验理解

  • 能用原生JS实现增删改查节点并正确解释事件冒泡与委托

核心技能

JavaScript 异步编程 (Promise/async-await)

掌握异步任务、Promise链与async/await,是全栈请求驱动的核心能力

建议预留 120 分钟

学习目标

  • 精通Promise、async/await与错误处理
  • 掌握并发控制与竞态规避
  • 理解事件循环中微任务/宏任务

关键概念

  • Promise
  • async/await
  • 事件循环
  • 并发与竞态

为什么学习

  • 前后端与I/O均基于异步模型,需吃透并发与异常处理才能处理中大型工程

如何检验理解

  • 能重构回调为可读async/await并正确处理并发Promise.all与错误降级

补充知识

Spring Boot 快速构建后端(备选栈)

了解自动配置与starter思想以快速识别Java后端项目结构

建议预留 90 分钟

学习目标

  • 认识Spring Boot工程目录与注解
  • 能启动应用并识别依赖注入注解

关键概念

  • Spring Boot
  • starter
  • REST控制器
  • 依赖注入

为什么学习

  • 非本路径主力后端,仅需能识别与初步运行一个Spring Boot工程以便阅读对接现网

如何检验理解

  • 能按脚手架启动一个Spring Boot服务并读懂一个REST控制器的大致逻辑

核心技能

TypeScript 与类型化工程基础

用静态类型提升中大型项目可维护性,为框架与Node开发筑牢质量

建议预留 120 分钟

学习目标

  • 掌握基础类型、接口与联合类型
  • 使用泛型抽象可复用工具
  • 能接入主流框架的TS支持

关键概念

  • type/interface
  • 泛型
  • 类型推断
  • 配置tsconfig

为什么学习

  • 中大型项目要求类型安全以减少回归,需要把类型思维贯穿到前后端主要代码中

如何检验理解

  • 能为一个接口数据定义type/interface并处理联合与泛型,编译期发现类型错误

基础概念

组件化思想与框架选型

理解组件复用理念并对比React/Vue特点,为选型与心智模型打下基础

建议预留 60 分钟

学习目标

  • 理解组件封装与数据流单向原则
  • 对比React/Vue渲染与生态差异

关键概念

  • 组件化
  • 单向数据流
  • 声明式UI
  • 框架取舍

为什么学习

  • 需先建立组件化思维再深入某一框架,理解二者差异帮助生态衔接与迁移

如何检验理解

  • 能说明React与Vue在模板、状态与生态上的主要取舍并判断适用项目类型

核心技能

Node.js 运行时与事件循环

理解非阻塞I/O、模块系统与事件循环,是Node后端架构的根基

建议预留 90 分钟

学习目标

  • 理解CommonJS/ESM模块差异
  • 理解事件循环与阻塞/非阻塞I/O
  • 能排查回调地狱与内存泄漏方向

关键概念

  • 事件循环
  • 非阻塞I/O
  • 模块系统
  • 线程池

为什么学习

  • 主力后端以Node为主,需理解其单线程事件模型才能写好高并发网络服务

如何检验理解

  • 能解释Node事件循环阶段并用其模型设计一次高并发读写的处理方案

核心技能

前端构建工具链 (Vite/Webpack)

掌握构建配置、模块打包与开发/生产环境,支撑前端工程化与上线

建议预留 120 分钟

学习目标

  • 理解模块打包与tree-shaking
  • 能配置开发代理与构建产物
  • 掌握环境变量与构建优化举措

关键概念

  • Vite/Webpack
  • 模块与缓存
  • 代码分割
  • 构建配置

为什么学习

  • 中大型前端需要可配置的构建与打包体系,须能针对实际项目做配置与优化

如何检验理解

  • 能基于Vite搭建一个带TS/别名/环境变量与构建优化的可交付前端工程

核心技能

React 核心:JSX 渲染与组件

掌握JSX与函数/类组件、props机制,主力前端栈的基础

建议预留 120 分钟

学习目标

  • 精通JSX语法与元素渲染
  • 理解函数组件与组件复用
  • 正确管理props与条件渲染

关键概念

  • JSX
  • 组件与props
  • 渲染与reconciliation
  • 受控/非受控

为什么学习

  • 选定React为主力框架以满足精通一个框架的要求,需把组件组合能力应用到实际界面

如何检验理解

  • 能拆解页面为可复用组件树并正确通过props实现数据从父到底的传递

补充知识

Vue 内核:模板语法与响应式(认知)

认识Vue模板指令与响应式思路,作为补充框架增强市场适配能力

建议预留 90 分钟

学习目标

  • 认识Vue模板指令与数据绑定
  • 理解其响应式基本机制

关键概念

  • 模板指令
  • 响应式
  • v-model
  • 生命周期

为什么学习

  • 并非主力,但Vue在存量与中小项目常见,达到能接手维护与小幅开发的程度即可

如何检验理解

  • 看懂并基于模板指令完成一个带数据响应的小功能组件

核心技能

Node 后端框架 (Express/Koa)

掌握服务器进程、中间件模型与路由,搭建可维护的Node网络服务

建议预留 120 分钟

学习目标

  • 理解中间件洋葱模型与顺序
  • 设计分层路由与控制器
  • 接入日志、校验与错误处理

关键概念

  • 中间件
  • 路由
  • MVC/分层
  • 错误处理

为什么学习

  • 作为主力后端须独立用它打造分层清晰、含中间件的可扩展服务

如何检验理解

  • 能独立搭建含路由、中间件、错误处理与参数校验的REST服务并通过接口冒烟测试

核心技能

React Hooks 与副作用管理

用useState/useEffect等Hook驱动函数组件状态与副作用,构建复杂UI

建议预留 150 分钟

学习目标

  • 精通常用Hook与自定义Hook
  • 理解依赖数组与闭包陷阱
  • 管理异步副作用与清理

关键概念

  • useState
  • useEffect
  • 自定义Hook
  • 依赖与闭包

为什么学习

  • 中大型界面交互复杂,需熟练用Hooks管理状态与副作用避免逻辑失控

如何检验理解

  • 能把一个含数据拉取与用户交互的页面用自定义Hook抽象并保持在提交/竞态无误

核心技能

现代UI组件库与样式方案

集成Tailwind/Ant Design等提升开发效率,构建统一视觉与间距规范

建议预留 90 分钟

学习目标

  • 集成并二次封装UI组件库
  • 使用CSS方案做响应式与主题定制

关键概念

  • 组件库
  • Atomic CSS
  • 主题变量
  • 响应式

为什么学习

  • 真实交付需快速搭建质量界面,需要按规范使用既有组件库与响应式样式方案

如何检验理解

  • 能基于一个主流组件库按设计规范完整实现一个带表单与表格的交互页面

核心技能

RESTful API 设计与前后端分离

设计规范资源接口、版本与错误结构,确立前后端契约边界

建议预留 120 分钟

学习目标

  • 设计资源化REST接口与版本策略
  • 制定统一错误与分页响应约定
  • 理解前后端职责边界与联调

关键概念

  • RESTful
  • 接口契约
  • 资源建模
  • 文档化

为什么学习

  • 作为全栈核心贯通能力,接口契约质量直接决定中大型项目可分头协作可测试

如何检验理解

  • 能为一个资源域设计完整REST接口含状态码、分页、过滤与统一错误并在文档化后自测通过

补充知识

Vue3 组合式 API(认知)

认识setup与Composition API组织逻辑,补充Vue侧能力

建议预留 90 分钟

学习目标

  • 认识setup与组合式逻辑组织
  • 使用ref/reactive处理状态

关键概念

  • setup
  • ref/reactive
  • 组合式函数
  • 生命周期

为什么学习

  • Vue虽非主力,组合式API是Vue项目主流,达到能维护并按开发现状小幅扩展即可

如何检验理解

  • 能用setup/ref与生命周期完成一个可反馈交互的Vue3逻辑块

核心技能

数据持久化与 ORM

使用ORM完成对象-关系映射与CRUD,并配合迁移管理数据模型

建议预留 120 分钟

学习目标

  • 熟练ORM实体与查询构建
  • 理解事务与并发一致
  • 使用迁移管理Schema演进

关键概念

  • ORM映射
  • Repository查询
  • 事务
  • 数据库迁移

为什么学习

  • 后端访问数据库需通过ORM,理解其映射与事务边界以便写出安全数据操作

如何检验理解

  • 能在服务中用ORM完成含事务的对象CRUD并通过迁移管理表结构

核心技能

Docker 容器化与应用打包

编写镜像并编排多容器应用,让服务可复现可移植地部署

建议预留 150 分钟

学习目标

  • 编写高效Dockerfile与多阶段构建
  • 用Compose编排多容器
  • 理解镜像层与资源限制

关键概念

  • 镜像/容器
  • Dockerfile
  • docker compose
  • 网络与卷

为什么学习

  • 容器化是现代可交付应用的基础,需为应用写镜像并用docker compose管理依赖服务

如何检验理解

  • 能为前后端+数据库编写Dockerfile与compose并本地一键拉起整套应用

核心技能

前端路由与导航

实现SPA路由、懒加载与守卫,管理前端页面流转与权限入口

建议预留 90 分钟

学习目标

  • 配置路由表与动态导入懒加载
  • 实现路由守卫做鉴权拦截
  • 处理嵌套路由与传参

关键概念

  • SPA路由
  • 懒加载
  • 路由守卫
  • History模式

为什么学习

  • 中大型前端需以路由组织页面并借此实现鉴权与代码按页拆分提升体验

如何检验理解

  • 能为应用建立含懒加载、嵌套与权限守卫的路由体系并验证刷新与跳转正确

核心技能

身份认证与授权 (JWT/Session)

实现登录会话与令牌鉴权,保护业务接口与资源访问权限

建议预留 120 分钟

学习目标

  • 理解JWT签发校验与刷新
  • 设计并落地RBAC权限模型
  • 在网关/中间件层统一鉴权

关键概念

  • JWT
  • Session/Cookie
  • 刷新令牌
  • RBAC

为什么学习

  • 任何真实业务都需要身份体系,须能把认证授权贯通前后端与数据库

如何检验理解

  • 能实现完整的注册登录+刷新令牌+角色权限拦截,并对未授权与过期做统一处理

补充知识

跨域问题与 CORS 处理

理解同源策略与CORS配置,保证前后端分离环境下请求畅通

建议预留 45 分钟

学习目标

  • 理解同源策略与简单/预检请求
  • 配置服务端CORS与凭据策略

关键概念

  • 同源策略
  • CORS白名单
  • 预检OPTIONS
  • withCredentials

为什么学习

  • 前后端分离常态下联调必遇跨域,理解机制后可做到正确配置而非乱开全放

如何检验理解

  • 能解释一次OPTIONS预检流程并为服务正确配置受限来源的CORS白名单

核心技能

网络安全基础防护

掌握XSS/CSRF/SQL注入/HTTPS等漏洞原理与基础防护

建议预留 120 分钟

学习目标

  • 识别并防御XSS/CSRF/SQL注入
  • 使用参数化查询与内容安全策略
  • 配置HTTPS与凭据保护

关键概念

  • XSS
  • CSRF
  • SQL注入
  • TLS/HTTPS

为什么学习

  • 交付可上线应用需自带基础安全防护,理解原理并在编码中主动做输入输出处理

如何检验理解

  • 能审计并修复自身Demo中的XSS/SQL注入/CSRF隐患并正确启用HTTPS传输

核心技能

软件工程方法论与系统设计

掌握敏捷迭代、需求拆解与架构设计原则,支撑中大型工程可控推进

建议预留 150 分钟

学习目标

  • 理解敏捷迭代与需求澄清
  • 掌握模块化/分层/解耦设计原则
  • 能产出接口与数据模型方案

关键概念

  • 敏捷迭代
  • 需求拆解
  • SOLID/分层
  • 架构权衡

为什么学习

  • 独立交付中大型项目需要从需求到实现的方法论约束,做到小步迭代与演进式架构

如何检验理解

  • 能把一个模糊需求拆成可验收的用户故事与技术方案并给出分层架构草图

核心技能

Nginx 反向代理与站点接入

用Nginx做静态托管、反向代理、负载与缓存,打通线上访问链路

建议预留 90 分钟

学习目标

  • 配置server与location反代
  • 接入SSL证书与缓存与gzip
  • 理解动静分离与负载转发

关键概念

  • 反向代理
  • 负载均衡
  • SSL证书
  • upstream

为什么学习

  • 生产环境服务入口普遍走Nginx,需能将前后端服务正确代理并配置HTTPS与缓存头

如何检验理解

  • 能为前后端站点配置反向代理与HTTPS并正确转发携带header,验证访问正常

核心技能

CI/CD 持续集成与自动化部署

搭建从提交到构建测试到部署的流水线,实现交付流程自动化

建议预留 180 分钟

学习目标

  • 编写CI配置做构建与测试
  • 搭建构建产物到服务器的自动部署
  • 设计带环境的发布策略与回滚

关键概念

  • CI/CD流水线
  • Artifact
  • Webhooks
  • 环境与发布策略

为什么学习

  • 中大型项目持续演进需自动化流水线降低回归与手工出错,做到一键/自动部署

如何检验理解

  • 能为项目配置一条push触发构建测试并部署到服务器的可复用流水线

核心技能

全局状态管理 (Redux Toolkit/Pinia)

用全局Store管理跨组件共享的复杂业务状态

建议预留 150 分钟

学习目标

  • 理解单一数据源与selector
  • 配置Slice/store并处理异步action
  • 权衡何时用全局而非局部状态

关键概念

  • reducer
  • selector
  • 异步action
  • Store结构

为什么学习

  • 页面与模块间共享且异步的状态增多后需要统一Store,做到正确建模即可用于复杂界面

如何检验理解

  • 能为一个含登录态与购物车式共享状态的应用建立可预测的全局Store并处理异步副作用

核心技能

前端发起 HTTP 请求 (Axios/Fetch)

封装请求层统一处理鉴权、错误、重试,连接前端与后端接口

建议预留 90 分钟

学习目标

  • 封装可复用的axios实例拦截器
  • 统一处理加载态与错误重试
  • 拼接URL参数与取消请求

关键概念

  • Axios/Fetch
  • 请求拦截器
  • 统一错误处理
  • Abort

为什么学习

  • 前后端耦合在请求层落合,需封装可复用客户端自动携带令牌与统一处理错误以支撑规模化

如何检验理解

  • 能为项目封装带拦截器、自动带token与统一错误提示的请求客户端并被多处复用

核心技能

云平台部署与弹性伸缩

在主流云上部署服务并利用负载均衡与自动扩展保障可用性

建议预留 180 分钟

学习目标

  • 创建云服务器并配置安全组与VPC
  • 接入对象存储与数据库服务
  • 配置负载均衡与自动扩展

关键概念

  • IaaS/PaaS
  • 安全组/负载均衡
  • 托管数据库
  • 自动伸缩

为什么学习

  • 独立运维需能在云上搭建高可用服务并对接存储与网络,支撑真实上线

如何检验理解

  • 能在云上按生产标准部署一套带数据库与备份、通过健康检查的应用并配置扩展策略

核心技能

测试与质量保障

编写单元、集成与端到端测试,建立回归安全网保障可持续演进

建议预留 150 分钟

学习目标

  • 编写单元/集成测试与断言
  • 为关键接口做集成与E2E覆盖
  • 建立最小可行测试金字塔

关键概念

  • 单元测试
  • 集成测试
  • 端到端测试
  • 覆盖率

为什么学习

  • 独立收敛中大型项目前需用测试锁定行为,在快速迭代中保障质量与回归可控

如何检验理解

  • 能为后端单元函数与关键接口编写单测与集成测试并使构建在失败时报红

核心技能

监控、日志与线上问题定位

采集日志与指标配置告警,能快速定位并恢复线上故障

建议预留 150 分钟

学习目标

  • 统一接入结构化日志并采集
  • 配置指标监控与告警阈值
  • 用日志链路定位并回滚故障

关键概念

  • 结构化日志
  • 指标监控
  • 告警
  • 分布式追踪

为什么学习

  • 运维目标要求能通过观测体系在线上问题发生时快速判断根因与恢复服务

如何检验理解

  • 能为服务接日志与分析、采集关键指标并配置一条当错误率上升发出告警的规则

核心技能

独立中大型全栈项目实践

从需求分析到开发、部署、监控全流程独立交付一个真实复杂度项目

建议预留 600 分钟

学习目标

  • 独立拆分需求并设计方案与里程碑
  • 串联前后端工程质量与自动化测试
  • 完成云端部署、CI/CD与监控复盘

关键概念

  • 端到端交付
  • 工程化
  • 发布与运维
  • 复盘迭代

为什么学习

  • 作为两年目标的收官检验,以真实规模项目综合运用前后端/部署/运维全部所学并独立交付

如何检验理解

  • 独立交付一个含登录/CRUD/权限并带CICD流水线上线于云且配有监控与告警的可访问项目

前置关系与知识联系

结合互动地图查看具体关系类型,再选择下一步。