◆ FULL-STACK ROADMAP

全栈开发 · 最短学习路线

从「不懂编程」到「能读懂 + 能上手」一套真实的全栈项目。后端主攻 Java 这套，前端主攻 Vue 这套，不绕弯路，只学能上手用得到的。

Vue 前端 Java 后端零基础友好建议 12~16 周

从第一阶段开始 → 看完整路线

🗺️先看懂这张图：你面对的是什么

前端（网站 / 小程序 / 后台界面）负责「给人看、让人点」的部分；它们都去找同一个 后端大脑 要数据。数据库存东西，缓存 / 搜索引擎让读取和搜索变快。

你不用一次学完所有东西。按下面的阶段顺序来：先能跑起来、再能看懂、然后能小改，最后才谈深入。

用户点击 → 前端界面 → 通过 API 发请求 → 后端处理 → 查数据库 → 原路返回 → 前端显示

◎

两条主线，学这两套就够

全栈 = 前端 + 后端。市面技术很多，本路线只押注最主流、就业面最广的两套，学了不浪费。

前端 Frontend

Vue 这套

做「给人看的界面」，跑在浏览器 / 小程序里。

JavaScriptVue 3 Vue RouterPinia Element PlusAxios TypeScriptVite

后端 Backend

Java 这套

做「真正处理业务、存数据」的大脑，跑在服务器上。

JavaSpring Boot MyBatis PlusMySQL / SQL 分层架构Redis ElasticsearchMaven

0

零基础扫盲 · 先把这些词搞懂

下面这些词你会天天听到。用生活里的比喻讲一遍，看懂了再往下走，学起来会顺很多。

🍽️一家「餐厅」，就是一套软件系统

把整套系统想象成一家餐厅，各个概念就对上了：

前端=大堂 · 菜单 · 餐桌客人（用户）能看见、能点、能摸的部分

后端=后厨客人看不见，真正做菜（处理业务、算钱、存数据）的地方

API=服务员 + 点菜单大堂和后厨之间传话的人，规定「怎么点、怎么上菜」

数据库=仓库 / 冰箱食材（数据）存放的地方，要用时去取

服务器=餐厅这栋楼一台一直开着的电脑，把后厨和仓库装在里面

🔀为什么要分「前端」和「后端」？

因为分工不同，硬凑一起会乱。

前端：管「好不好看、好不好用」。按钮放哪、颜色、点一下有没有反应。跑在用户的手机 / 电脑浏览器里。
后端：管「对不对、安不安全」。有没有权限、价格算得对不对、订单存没存上。跑在公司的服务器上。
好处：① 后端一套逻辑，能同时喂给 PC 网站、小程序、APP 三个前端，不用重复写。② 敏感操作（改价、扣钱）放后端，用户碰不到，安全。

📡API 到底是什么？（最重要）

API 全称「应用程序接口」。别被名字吓到，它就是前后端之间约定好的「对话规则」。

比如前端想要商品列表，它不能直接翻后端的仓库，而是按约定「喊一嗓子」：GET /api/products，意思是「给我商品列表」。后端听懂了，把数据打包好递回来。这个「喊话的地址 + 格式」就是一个 API。

常见约定：后端返回都套一个固定「信封」，里面有「成功没成功、数据是什么、错误提示」。这就是前后端约定的说话格式。

🧩几个天天见的配角

框架=装修好的毛坯房Vue / Spring Boot 帮你搭好架子，你只填内容，不用从零盖楼

库 / 依赖=买现成的家电别人写好的功能包，直接拿来用

Git=游戏存档给代码存档，改坏了能读档回去，多人协作不打架

Redis=桌上便利贴常用数据放手边，不用每次都跑去仓库拿，快

ES 搜索=图书馆检索台几十万条数据里搜关键词，秒出结果

编译 / 构建=把菜谱做成菜把你写的代码打包成能真正运行的成品

◈

学习路线 · 分 5 个阶段推进

点任意阶段进入详细教程。全程大白话，看一遍就懂。建议按顺序走，别跳。

1

第 1~2 周 · 打地基

编程通用基础

命令行、Git、JavaScript、HTML/CSS、VS Code —— 所有项目都用得上的入门 5 把钥匙。

命令行 Git JavaScript HTML/CSS

2

第 3~4 周 · 前端入门

Vue 3 起步

组件、响应式、路由、UI 组件库、用 Axios 调接口 —— 做出第一个能跑的页面。

Vue 3 Vue Router Element Plus Axios

3

第 5~7 周 · 前端进阶

TypeScript + 状态管理 + 工程化

看懂真实项目里的 TS 类型、Pinia 全局数据、api 目录封装，能定位并小改功能页面。

TypeScript Pinia 接口封装 ECharts

4

第 8~11 周 · 后端大脑

Java + Spring Boot

Java 基础、Controller→Service→Mapper 分层、MyBatis Plus 查库、SQL，能从接口追到数据库。

Java Spring Boot MyBatis Plus SQL

5

第 12 周~ · 全栈打通

前后端联调 + 上线 + 按需补齐

把前后端串成一条线，学会联调、部署，以及 Redis / 搜索 / 权限等按需深入的方向。

前后端联调部署上线 Redis / ES

☰

知识点清单 · 什么必学、什么先跳过

别贪多。带红点的先学透，绿点的等真用到再说，避免一开始就被劝退。

知识点	属于	用在哪	优先级
命令行 / Git	基础	全部	必学
JavaScript	前端	所有前端 + Node	必学
Vue 3 + Router + Axios	前端	所有 Vue 页面	必学
Element Plus 组件库	前端	后台 / 中台	必学
Java + Spring Boot 分层	后端	核心服务	必学
MyBatis Plus + SQL	后端	所有数据操作	必学
TypeScript	前端	中大型前端项目	先看懂
Pinia / Vuex 状态管理	前端	多页面共享数据	先看懂
Redis / Elasticsearch	后端	高级模块	以后再说
权限 / 支付 / 消息队列	后端	特定模块	以后再说
ECharts / 富文本 / 地图	前端	各类插件	以后再说

✦

新手最该记住的 5 条心法

先跑起来再说。任何项目第一步是照着命令让它在本机运行，看到界面比看代码更提气。

改一点看一点。改个文字、改个颜色，刷新看变化，建立「我能控制它」的感觉。

顺藤摸瓜。点击界面某个按钮 → 找它调的接口 → 找后端对应代码，一条线走通胜过看十页文档。

不必全懂。缓存、支付、搜索这些等真正碰到那个功能再学，现在学了也会忘。

多用 AI 问。看不懂的代码直接贴给 AI 让它逐行解释，这是你最快的老师。

好了，开始第一阶段 →