全栈打通：联调与上线

前后端你都会看了，这一阶段学会让它们「握手」：本地联调、解决跨域、部署上线，再认识一下 Redis / 搜索 / 权限这些「按需深入」的方向。到这里，你就是一名能上手的全栈了。

先说人话：这一阶段是「毕业设计」

前面各篇像是分别学会了「说话」和「听话」，这一阶段是让前端和后端真正对上话、跑成一条完整的线，并且能把成品发布到网上让别人访问。

💡 比喻： 前面在驾校分别练了「打方向」和「踩离合」，这一阶段是真正独立开车上路、跑完全程——从起点（用户点击）到终点（数据落库）再原路开回来。

前后端本地联调

让你电脑上的前端，去连你电脑上的后端。这是全栈开发每天都在做的事。

两边同时跑起来

启动你上一篇《Java 后端速通》写的后端（IDEA 点运行，跑在 localhost:8080）→ 启动你前端速通《Vue 3 入门》篇建的前端（npm run dev，跑在 localhost:5173）→ 前端请求发给后端

第一个联调练习（强烈推荐）

把前端速通《Vue 3 入门》篇「文章列表」页面里 Axios 请求的地址，从 jsonplaceholder 换成你上一篇《Java 后端速通》写的 http://localhost:8080/user/list——页面上显示出你自己数据库里的数据那一刻，前后端在你手里第一次握手成功。

你一定会遇到的「跨域」问题

💡 比喻： 浏览器有个安保规矩：前端（5173 端口）想找后端（8080 端口）要数据，会被拦下问「你俩不是一家的，凭啥给你？」这就是跨域。上面的练习十有八九会撞上它——撞上了才算真学到。

解决办法（知道有这回事即可，具体照抄配置）：

• 前端配代理：在 Vite 配置里加 proxy，让前端把 /api 的请求偷偷转发给后端，浏览器就以为是「一家的」。
• 后端开 CORS：后端配置允许指定来源访问。

联调三板斧

① 打开浏览器 F12 → Network 面板看请求发出去没、返回啥。② 看请求的 url、状态码（200 成功 / 404 找不到 / 500 后端报错）。③ 对不上就前后端各查一半。

独立做一个完整小功能

检验学习成果的唯一标准：能不能自己从头做出一个「增删改查」。

毕业设计：一个「待办清单 / 留言板」

麻雀虽小五脏俱全，把前面各篇全用上。要求全程不抄整套教程，卡住了才去查、去问 AI：

1. 建表：数据库建一张 todo 表（id、内容 content、是否完成 done）。
2. 后端：新建（或复用上一篇《Java 后端速通》的）项目，写 Controller / Service / Mapper，做出「查列表、新增、改状态、删除」四个接口，每个都先用浏览器 / Postman 单独测通。
3. 前端：新建（或复用前端速通《Vue 3 入门》篇的）项目，做一个页面：el-input + 按钮负责添加，el-table 显示列表，每行带「完成 / 删除」按钮。
4. 联调：用 Axios 把四个接口接上，解决跨域。验收动作：添加一条 → 刷新页面还在 → 去数据库里能看到这条记录。
5. 收尾：前后端各自 git commit 存档；行有余力就照部署上线一节把它部署到一台云服务器上，发链接给朋友看。

能独立做出这个，你就出师了

公司里再复杂的功能，本质都是这套「增删改查 + 一点业务逻辑」的放大版。

部署上线（了解流程即可）

让你做的东西从「只有自己电脑能看」变成「全世界都能访问」。

从本机到服务器

💡 比喻： 本地开发 = 在自家厨房做饭自己吃；部署上线 = 把厨房搬进一家真正对外营业的餐厅，谁都能来点单。

环节	大白话
前端打包	npm run build 生成一堆静态文件，丢到服务器（或用 Nginx 托管）
后端打包	Maven 打成一个 .jar 包，在服务器上 java -jar 跑起来
服务器	一台买来的云主机（阿里云 / 腾讯云等），一直开机对外服务
Nginx	门口的「接待 + 分流员」：静态页面它发，/api 请求它转给后端
域名	把 www.xxx.com 绑到服务器 IP，别人就能用网址访问

心态

部署是运维范畴，新手了解流程、能照着文档 / 教程走一遍就很好。公司一般有现成的部署脚本或专人负责，你不用一开始就精通。

按需深入的方向

这些是「进阶技能树」，不是入门必修。工作中真碰到那个需求，再回来点亮它。

后端进阶

• Redis 缓存：热点数据放内存里，读得飞快，减轻数据库压力。（高并发时用）
• Elasticsearch 搜索：海量数据里做关键词搜索，秒出结果。（做搜索功能时用）
• 权限认证：登录、Token、谁能访问哪些接口。（几乎每个项目都会碰）
• 事务、消息队列、定时任务：处理复杂业务时逐个了解。

前端进阶

• Vue2 / Nuxt2：老项目常见，语法和 Vue3 有差异，用到再对照学。
• Uniapp：一套代码发小程序 / APP，本质还是 Vue。
• 性能优化、组件封装、Hooks 复用：写熟了自然会想学。

切记

别一次性把技能树全点了。用到什么学什么，带着真实问题去学，记得牢、用得上。提前囤货只会忘光。

长期成长建议

出师之后，怎么持续变强。

1. 多读别人的代码。看优秀项目怎么组织，比自己闭门造车快十倍。
2. 坚持顺藤摸瓜。每接一个新需求，都完整走一遍「前端 → 接口 → 后端 → 数据库」，越走越熟。
3. 把 AI 当结对搭档（参看 AI 速通）。看不懂的代码让它解释，卡住的报错让它诊断，思路不清让它梳理。
4. 记录踩过的坑。同一个错误别栽第二次，建个自己的笔记本。
5. 先能用，再优雅。先把功能做出来跑通，再谈重构和优化，别一开始就追求完美。

什么才算出师

出师标准（这是整条路线的终点线）

1. 联调：完成了「把文章列表数据源换成自己后端」的练习，亲手解决过一次跨域
2. 排错：遇到 404 / 500 / 跨域报错，能用 F12 Network 面板判断问题在前端还是后端
3. 毕业设计：待办清单真的独立做出来了——页面能加、能删、能改状态，数据落在自己的数据库里
4. 存档：毕业设计的前后端都有 Git 提交记录，commit 信息能看懂你每步做了啥
5. 上线（加分项）：了解部署流程；能照文档把项目发到一台服务器上更佳
6. 解决问题的姿势：面对陌生需求，能定位到该改哪个项目、哪一层，查文档 + 问 AI 推进

恭喜，你走完了最短全栈路线

你不必样样精通，但已经具备最珍贵的能力——能上手、能看懂、能查着解决。剩下的，交给一个个真实项目去打磨。