首页/阶段五 · 全栈打通
5 第 12 周~ · 全栈打通

把前端后端连成一条线，跑通并上线

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

持续进行 前提：前后端都能看懂 目标：独立跑通一条完整功能

本页目录

① 前后端本地联调 ② 独立做一个小功能 ③ 部署上线 ④ 按需深入的方向 ⑤ 长期成长建议 ✅ 毕业验收

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

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

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

前后端本地联调

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

🤝两边同时跑起来

启动后端（mvn spring-boot:run，比如跑在 localhost:8080）→ 启动前端（npm run dev，跑在 localhost:3000）→ 前端请求转发到后端

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

比喻：浏览器有个安保规矩：前端（3000 端口）想找后端（8080 端口）要数据，会被拦下问「你俩不是一家的，凭啥给你？」这就是跨域。

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

  • 前端配代理：在 Vite 配置里加 proxy，让前端把 /api 的请求偷偷转发给后端，浏览器就以为是「一家的」。
  • 后端开 CORS：后端配置允许指定来源访问。
联调三板斧：① 打开浏览器 F12 → Network 面板看请求发出去没、返回啥。② 看请求的 url、状态码（200 成功 / 404 找不到 / 500 后端报错）。③ 对不上就前后端各查一半。
2

独立做一个完整小功能

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

🧪建议练手项目：一个「留言板 / 待办清单」

麻雀虽小五脏俱全，把前四阶段全用上：

建表：数据库建一张 todo 表（id、内容、是否完成）。
后端：写 Controller / Service / Mapper，做出「增删改查」四个接口。
前端：做一个页面，用 el-table 显示列表、el-input 加新条目。
联调：用 Axios 把前端和后端接口接上，点添加能存进数据库、刷新还在。
打磨：加个「完成 / 删除」按钮，让整条线彻底跑通。
能独立做出这个，你就出师了。公司里再复杂的功能，本质都是这套「增删改查 + 一点业务逻辑」的放大版。
3

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

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

🚢从本机到服务器

比喻：本地开发 = 在自家厨房做饭自己吃；部署上线 = 把厨房搬进一家真正对外营业的餐厅，谁都能来点单。
环节大白话
前端打包npm run build 生成一堆静态文件，丢到服务器（或用 Nginx 托管）
后端打包Maven 打成一个 .jar 包，在服务器上 java -jar 跑起来
服务器一台买来的云主机（阿里云 / 腾讯云等），一直开机对外服务
Nginx门口的「接待 + 分流员」：静态页面它发，/api 请求它转给后端
域名把 www.xxx.com 绑到服务器 IP，别人就能用网址访问
心态：部署是运维范畴，新手了解流程、能照着文档 / 教程走一遍就很好。公司一般有现成的部署脚本或专人负责，你不用一开始就精通。
4

按需深入的方向

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

🌳后端进阶

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

🎨前端进阶

  • Vue2 / Nuxt2：老项目常见，语法和 Vue3 有差异，用到再对照学。
  • Uniapp：一套代码发小程序 / APP，本质还是 Vue。
  • 性能优化、组件封装、Hooks 复用：写熟了自然会想学。
切记：别一次性把技能树全点了。用到什么学什么，带着真实问题去学，记得牢、用得上。提前囤货只会忘光。
5

长期成长建议

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

毕业验收 · 你已经是全栈了

🏆 出师标准
能同时启动前端和后端，让它们在本地联调成功
遇到跨域、404、500 这些常见问题，知道去哪查、怎么解
能独立从零做出一个「增删改查」完整功能（前端页面 + 后端接口 + 数据库表）
了解部署上线的大致流程，能照文档把项目发布出去
面对陌生需求，能定位到该改哪个项目、哪一层，查文档 + 问 AI 解决
恭喜，你走完了最短全栈路线。你不必样样精通，但已经具备最珍贵的能力——能上手、能看懂、能查着解决。剩下的，交给一个个真实项目去打磨。
← 回到路线总览 重温第一阶段
← 上一阶段
④ Java 后端大脑