从 Vue 到万物：AI 加速下的前端开发者全栈进化论【第二课】

Day 2 | Java + Spring Boot：前端人看懂后端的第一步

为什么是 Java？为什么是 Spring Boot？

前端开发者选后端语言，往往在 Java / Node.js / Go 之间纠结。我的建议：选 Java。

不是因为 Java 最好，而是因为 Java 的问题你能搜到答案、企业里用 Java 的项目最多、Spring Boot 生态最完整。

如果你已经是 Node.js 深度用户，Java 看起来会像"严格的 TypeScript"------强类型、编译期检查、OOP 原生支持。这些对前端人来说，反而是熟悉的味道（TypeScript 已经在训练你了）。

Java 与 TypeScript 的对照学习法

不要孤立地学 Java，用 TypeScript 做锚点：

TypeScript / 前端概念	Java / Spring Boot 对应
`interface User`	`class User` 或 `@Data` 注解类
`async function fetchUser(id)`	`public User getUser(Long id)`
`axios.post('/api/login', data)`	`@PostMapping` + `@RequestBody`
`useState<User>()`	类成员变量 + `@Autowired`
全局状态（Pinia/Vuex）	Spring Bean（单例 Service）
`router.push('/home')`	`return "redirect:/home"` 或 `ResponseEntity`

这种对照不是语法类比，是心智模型的映射。当你用 TS 理解 Java，很多概念可以直接迁移。

Spring Boot 请求全链路（重点！）

这是全栈学习最核心的一张图，搞清楚它，后端学习事半功倍：

sql 复制代码

HTTP 请求（来自前端）
    ↓
Filter（安全过滤：CORS、JWT 校验）
    ↓
Interceptor（前置处理：登录状态检查等）
    ↓
Controller（接收请求：@GetMapping / @PostMapping）
    ↓
    ├─ 参数绑定：@RequestBody（JSON转Java对象）
    ├─ 参数校验：@Valid（@NotBlank / @NotNull）
    └─ 路径变量：@PathVariable
    ↓
Service（业务逻辑：@Service）
    ↓
Mapper / DAO（数据访问：@Mapper / MyBatis注解）
    ↓
MySQL（执行 SQL）
    ↓
逐级返回：Mapper → Service → Controller
    ↓
Result 包装（统一响应结构）
    ↓
HTTP 响应（JSON 返回前端）

用 AI 帮你生成这张图的代码示例：

java 复制代码

// Controller：接收请求
@RestController
@RequestMapping("/api/accidents")
public class AccidentController {

    @Autowired
    private AccidentService accidentService;

    // GET /api/accidents?id=1
    @GetMapping
    public Result<?> getById(@RequestParam Long id) {
        Accident accident = accidentService.getById(id);
        return Result.success(accident);
    }

    // POST /api/accidents  (前端：axios.post('/api/accidents', data))
    @PostMapping
    public Result<?> create(@Valid @RequestBody Accident accident) {
        accidentService.save(accident);
        return Result.success(null);
    }
}

对比前端的等效代码：

typescript 复制代码

// 前端 Vue3：axios 是你写的 HTTP 请求
import axios from 'axios'

// GET 等效
const res = await axios.get('/api/accidents?id=1')
const accident = res.data.data

// POST 等效
await axios.post('/api/accidents', { title: '事故A', severity: '严重' })

看到了吗？@GetMapping 对应 axios.get，@PostMapping 对应 axios.post。只是后端多了一层参数绑定和返回值包装。

无 Maven 环境的增量编译（实战技巧）

真实项目中，很多 Spring Boot 后端没有 Maven（或 CI/CD 环境限制）。用 javac 直接编译是必须掌握的技能：

bash 复制代码

# 编译单文件（加 lombok 支持）
javac -encoding UTF-8 -parameters \
  -cp "target/run/BOOT-INF/lib/*" \
  -d target/run/BOOT-INF/classes \
  src/main/java/com/sx/accident/controller/AccidentController.java

# 启动后端（无 Maven）
cd target/run
DB_PASSWORD=123456 NACOS_CONFIG_ENABLED=true \
  java -cp "BOOT-INF/classes;BOOT-INF/lib/*" \
  com.sx.accident.AccidentApplication \
  --server.port=8080

踩坑经验： --server.port=8080 参数不可省，否则 Spring Boot 随机分配端口，前端联调直接抓瞎。Nacos 开关 NACOS_CONFIG_ENABLED=false 时走本地 application.yml，true 时拉远程配置。

今日任务清单

用 AI 生成对照代码：让 AI 给你写一个最简单的 Spring Boot Controller，对应你用 Vue3 + axios 写的一个 CRUD 页面。对照学习，一眼就懂。
阅读真实项目的 Controller ：
- 文件位置：accident-server/src/main/java/com/sx/accident/controller/
- 重点关注：参数怎么绑定（@RequestBody、@RequestParam）、返回值是什么结构
启动后端验证 ：确保 java -cp "..." AccidentApplication --server.port=8080 能跑起来，GET http://localhost:8080/api/accidents 返回 JSON

思维升级

Controller 就是你前端 axios 调用的"另一端"。搞懂参数怎么绑定、返回值怎么包装，前端联调就成功了一半。