全栈技术全景图

一次请求的完整旅程

以商城的"搜索商品"为例，把整个技术栈铺开看：

① 用户输入关键词，点击搜索
② 浏览器（Vue/React 页面）发出请求
       │  URL: https://api.mall.com/api/product/search?keyword=手机&page=1
       ▼
③ Nginx（反向代理，处理域名、HTTPS、负载均衡）
       │  转发到后端服务
       ▼
④ Spring Boot（后端服务）
       │  Controller 接收请求 → Service 处理业务 → Mapper 访问数据库
       ▼
⑤ MySQL（存储数据）
       │  返回查询结果
       ▼
⑥ 后端把结果包装成 JSON 返回浏览器
⑦ 前端渲染商品列表，用户看到结果

技术分层与选型

本教程采用国内互联网公司最主流的技术组合：

① 前端表现层

技术	作用	本教程
HTML / CSS / JavaScript	页面基础三件套	第 3 部分
TypeScript	带类型的 JS，大项目必备	第 3 部分
Vue 3 + Vite	前端框架 + 构建工具	第 4 部分
React 18 + Vite	前端框架（双实现）	第 5 部分
Element Plus / Ant Design	企业级组件库	第 4 / 5 部分

② 后端服务层

技术	作用
Java 17 + Spring Boot 3	后端主框架，自动配置 + 内置 Tomcat
Spring MVC	处理 HTTP 请求映射（Controller）
MyBatis-Plus	数据访问层，写 SQL 的增强工具
Knife4j / Swagger	自动生成接口文档
JWT + Spring Security	登录认证与接口鉴权

③ 数据存储层

技术	作用
MySQL 8	业务数据存储（用户/商品/订单）
Redis	缓存、会话（进阶章节会提）

④ 部署运维层

技术	作用
Docker	把应用打包成镜像，环境一致性
Nginx	反向代理、静态资源、HTTPS
云服务器（阿里云/腾讯云）	应用运行的地方
GitHub Actions	CI/CD 自动构建发布
Kubernetes (K8s)	容器编排，微服务进阶

⑤ 工程化与协作

技术	作用
Git + GitHub	版本控制与代码托管
Maven	Java 依赖管理与构建
npm workspaces	前端 monorepo 依赖管理
Postman / Apifox	接口调试

一张图总览

flowchart LR
    A[用户浏览器] -->|HTTPS| B[Nginx]
    B -->|/api 反向代理| C[Spring Boot]
    C --> D[MyBatis-Plus]
    D --> E[(MySQL)]
    B -->|静态资源| F[Vue / React 打包产物]
    F -->|接口调用| B

现在不用都掌握

这张全景图是"地图"，学完整本教程你就能独自把整条链路搭起来。每一块后续都有对应章节展开。