小編精選 - 技術文章翻譯 · 06月23日

前端轉型全端（Java 後端）的快速上手指南

前端轉型全端（Java 後端）的快速上手指引

Start

最近公司要求所有開發，不論是前端、後端還是測開，一律轉成全端，在 Agent 的輔助下轉型，沒轍了。之前我還有點精神潔癖，想維持純潔性，現在真的沒辦法了，那就做吧。出去面試還能多賺一點錢呢，現在在公司這裡拿著前端的薪水幹著全端的活，先撐幾天吧，後面一定要跑路的🏃。

其實全端這件事情沒有那麼難，我說實話，在有了一定的語言基礎之後，哪怕 JS 和 Java 一個是強型別語言、一個是弱型別語言，但是前端其實很少直接用純 JS 寫東西，都是 TS，該有的東西其實都有，概念也都知道是什麼意思，不過就是換個語法形式寫。如果之前做過 Node，尤其是用過像 Nest 或 Midway 框架寫過後端，你會發現其實 Spring 之類的也就那樣了，不要怕，上手寫一下就好了，尤其是現在有 AI，看不懂的就問 AI，寫不出來的就讓 AI 寫，反正要有後端幫你 CR，大不了搞幾個故障出來，讓上面的老闆知道一下半吊子全端的厲害，順手領個大禮包跑路，這不是美滋滋～

好了，下面進入正文：

前端工程師的 Java 後端快速入門指南

這是一份專為有 JavaScript 基礎的前端工程師準備的 Java 後端入門教程。我會用你熟悉的 JS 概念來對比講解，幫你快速建立認知。

一、學習路線總覽

arduino 代碼解讀複製代碼階段一：Java 語言基礎（1-2 週）
├── 環境建置（JDK + IDEA + Maven）
├── 基礎語法（變數、型別、控制流程）
├── 物件導向（類別、介面、繼承、多型）
└── 進階特性（泛型、集合、例外、Lambda、Stream）

階段二：建置工具與生態（3-5 天）
├── Maven / Gradle（類似 npm）
└── 相依管理與專案結構

階段三：核心框架（2-3 週）
├── Spring / Spring Boot（核心，類似 Express 全家桶）
├── MyBatis / MyBatis-Plus（操作資料庫，類似 ORM）
└── Spring MVC（寫介面）

階段四：實戰配套（持續）
├── 資料庫（MySQL）
├── Redis（快取）
├── 介面測試（Postman）
└── 部署（Docker、伺服器）

二、環境建置（先動手）

工具作用前端類比JDK 17+Java 執行環境和編譯器Node.jsIntelliJ IDEA開發工具（社群版免費）VS CodeMaven套件管理 + 建置工具npm + webpack安裝 JDK 後，驗證：

bash 代碼解讀複製代碼java -version
javac -version

三、語法對比：從 JS 到 Java

核心差異先認知

維度JavaScriptJava型別系統動態弱型別靜態強型別（必須宣告型別）執行方式解譯執行先編譯成位元組碼再執行一切皆…一切皆物件（函式也是）一切皆類別（程式碼必須在類別裡）分號可選必須#### 1. 變數宣告

javascript 代碼解讀複製代碼// JavaScript
let name = "張三";
const age = 18;
var flag = true;
let num = 3.14;

java 代碼解讀複製代碼// Java：必須先宣告型別
String name = "張三";        // 字串
final int age = 18;          // final = JS 的 const
boolean flag = true;
double num = 3.14;

// Java 10+ 也支援型別推斷（但仍是靜態型別）
var city = "北京";  // 編譯器自動推斷為 String

2. 基本資料型別（這是 JS 沒有的概念）

JS 只有 number，Java 把數字分得很細：

java 代碼解讀複製代碼// 整數類
byte  b = 1;        // 1 位元組
short s = 2;        // 2 位元組
int   i = 100;      // 4 位元組，最常用
long  l = 100L;     // 8 位元組，注意加 L

// 浮點
float  f = 1.5f;    // 注意加 f
double d = 3.14;    // 最常用的小數型別

// 其他
char    c = 'A';    // 單個字元，用單引號
boolean flag = true;

重點：基本型別（小寫 int）和包裝型別（大寫 Integer）的差異。集合、泛型裡必須用包裝型別：List<Integer> 而不是 List<int>。

3. 字串

javascript 代碼解讀複製代碼// JS
let s = "hello";
let str = `你好 ${name}`;       // 模板字串
let len = s.length;            // 屬性

java 代碼解讀複製代碼// Java：String 是一個類別，length() 是方法
String s = "hello";
int len = s.length();           // 注意是方法，要括號

// 拼接
String str = "你好 " + name;

// Java 15+ 文字區塊（類似模板字串的多行）
String json = """
    {
        "name": "張三"
    }
    """;

// 字串格式化
String msg = String.format("你好 %s，今年 %d 歲", name, age);

4. 控制流程（基本一樣）

java 代碼解讀複製代碼// if-else 一致
if (age >= 18) {
    System.out.println("成年");
} else {
    System.out.println("未成年");
}

// for 迴圈一致
for (int i = 0; i < 10; i++) {
    System.out.println(i);
}

// 增強 for（類似 JS 的 for...of）
int[] arr = {1, 2, 3};
for (int item : arr) {
    System.out.println(item);
}

// switch（Java 14+ 新寫法很好用）
String result = switch (age) {
    case 18 -> "成年了";
    case 1, 2, 3 -> "小孩";
    default -> "其他";
};

5. 函式（方法）

javascript 代碼解讀複製代碼// JS：函式是一等公民，可以獨立存在
function add(a, b) {
    return a + b;
}
const add2 = (a, b) => a + b;

java 代碼解讀複製代碼// Java：方法必須寫在類別裡，且要宣告回傳型別和參數型別
public int add(int a, int b) {
    return a + b;
}

// 無回傳值用 void
public void printName(String name) {
    System.out.println(name);
}

// 修飾詞說明：
// public  = 存取權限（公開）
// int     = 回傳值型別
// add     = 方法名

四、物件導向：Java 的核心

JS 也有 class，但 Java 的 OOP 更嚴格、更體系化。

1. 類別與物件

javascript 代碼解讀複製代碼// JS
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    sayHi() {
        return `我是 ${this.name}`;
    }
}
const p = new Person("張三", 18);

java 代碼解讀複製代碼// Java
public class Person {
    // 1. 成員變數（欄位）需要宣告型別
    private String name;
    private int age;

    // 2. 建構方法（方法名 = 類別名，無回傳值）
    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }

    // 3. getter / setter（Java 習慣用私有欄位 + 公開方法存取）
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    // 4. 一般方法
    public String sayHi() {
        return "我是 " + name;
    }
}

// 使用
Person p = new Person("張三", 18);
System.out.println(p.sayHi());

2. 存取修飾詞（JS 幾乎沒有的概念）

修飾詞含義public任何地方都能存取private只能在本類別存取（最常用於欄位）protected本類別 + 子類別存取不寫同一個套件內存取#### 3. 繼承

java 代碼解讀複製代碼// extends 關鍵字（和 JS 一樣）
public class Student extends Person {
    private String school;

    public Student(String name, int age, String school) {
        super(name, age);   // 呼叫父類別建構，類似 JS 的 super()
        this.school = school;
    }

    // @Override 註解表示覆寫父類別方法
    @Override
    public String sayHi() {
        return "我是學生 " + getName();
    }
}

4. 介面（重點，JS 裡基本沒有）

介面 = 一套規範／契約，只定義「能做什麼」，不實作。

java 代碼解讀複製代碼// 定義介面
public interface Animal {
    void eat();            // 抽象方法，沒有方法本體
    void sleep();
}

// 實作介面用 implements
public class Dog implements Animal {
    @Override
    public void eat() {
        System.out.println("狗吃骨頭");
    }
    @Override
    public void sleep() {
        System.out.println("狗睡覺");
    }
}

TS 程式設計師會很熟悉：和 TypeScript 的 interface 概念類似，但 Java 介面是執行期真實存在的。

5. 抽象類別

java 代碼解讀複製代碼// 抽象類別：介於普通類別和介面之間，可以有實作也可以有抽象方法
public abstract class Shape {
    abstract double area();        // 抽象方法，子類別必須實作

    public void print() {          // 普通方法，可直接繼承使用
        System.out.println("面積是：" + area());
    }
}

五、集合框架（類似 JS 的陣列和物件）

javascript 代碼解讀複製代碼// JS
let arr = [1, 2, 3];
let map = { name: "張三" };
let set = new Set([1, 2, 3]);

java 代碼解讀複製代碼import java.util.*;

// List：有序可重複，類似 JS 陣列
List<String> list = new ArrayList<>();
list.add("a");
list.add("b");
String first = list.get(0);
int size = list.size();

// Map：鍵值對，類似 JS 物件/Map
Map<String, Integer> map = new HashMap<>();
map.put("張三", 18);
Integer age = map.get("張三");

// Set：不重複集合
Set<String> set = new HashSet<>();
set.add("a");
set.add("a");  // 重複無效

// 遍歷 Map
for (Map.Entry<String, Integer> entry : map.entrySet()) {
    System.out.println(entry.getKey() + ":" + entry.getValue());
}

六、泛型（和 TS 泛型類似）

泛型 = 型別參數化，讓程式碼復用且型別安全。

typescript 代碼解讀複製代碼// TypeScript
function identity<T>(arg: T): T {
    return arg;
}
let list: Array<string> = [];

java 代碼解讀複製代碼// Java 泛型
// 1. 泛型方法
public <T> T identity(T arg) {
    return arg;
}

// 2. 泛型在集合中（最常見）
List<String> names = new ArrayList<>();   // 只能放 String

// 3. 自訂泛型類別
public class Box<T> {
    private T content;

    public void set(T content) {
        this.content = content;
    }
    public T get() {
        return content;
    }
}

// 使用
Box<String> box = new Box<>();
box.set("hello");
String s = box.get();

後端開發中你會大量看到泛型，例如統一回傳結果 Result<User>、分頁 Page<Order>。

七、Lambda 與 Stream（前端會愛上的部分）

Java 8 引入了函式式編程，和 JS 的陣列方法極其相似。

javascript 代碼解讀複製代碼// JS
let nums = [1, 2, 3, 4, 5];
let result = nums
    .filter(n => n > 2)
    .map(n => n * 2)
    .reduce((a, b) => a + b, 0);

java 代碼解讀複製代碼// Java Stream（鏈式呼叫，幾乎一一對應）
List<Integer> nums = List.of(1, 2, 3, 4, 5);
int result = nums.stream()
    .filter(n -> n > 2)          // 篩選
    .map(n -> n * 2)             // 映射
    .reduce(0, Integer::sum);    // 歸約

// 收集成 List
List<Integer> doubled = nums.stream()
    .map(n -> n * 2)
    .collect(Collectors.toList());

// forEach
nums.forEach(n -> System.out.println(n));

JS 陣列方法Java Stream.filter()``.filter()``.map()``.map()``.reduce()``.reduce()``.forEach()``.forEach()``.find()``.findFirst()``.some()``.anyMatch()``.every()``.allMatch()---

八、例外處理

javascript 代碼解讀複製代碼// JS
try {
    throw new Error("出錯了");
} catch (e) {
    console.log(e.message);
} finally {
    console.log("結束");
}

java 代碼解讀複製代碼// Java：例外是分型別的
try {
    int result = 10 / 0;
} catch (ArithmeticException e) {       // 捕獲特定例外
    System.out.println("除零錯誤：" + e.getMessage());
} catch (Exception e) {                 // 備援
    System.out.println("其他錯誤");
} finally {
    System.out.println("結束");
}

// 主動拋出例外
throw new RuntimeException("自訂錯誤");

九、建置工具 Maven（類似 npm）

pom.xml 相當於 package.json：

xml 代碼解讀複製代碼<project>
    <groupId>com.example</groupId>      <!-- 組織名 -->
    <artifactId>demo</artifactId>       <!-- 專案名 -->
    <version>1.0.0</version>

    <!-- 相依，類似 dependencies -->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
</project>

Maven 指令npm 類比mvn install``npm install``mvn package``npm run build``mvn test``npm test> Maven 會從中央倉庫下載 jar 套件到本機 .m2 目錄（類似 node_modules，但為全域共享）。

十、核心框架介紹

框架是做什麼的？

框架作用前端類比Spring整個生態的核心，管理物件、解耦類似 Angular 的依賴注入體系Spring Boot簡化 Spring 設定，開箱即用類似 create-react-app / Vite 腳手架Spring MVC處理 HTTP 請求，寫介面類似 Express 的路由MyBatis / MyBatis-Plus操作資料庫類似 Prisma / TypeORMMySQL關聯式資料庫資料儲存Redis記憶體快取快取資料#### 核心概念：IoC 與依賴注入

這是 Spring 的靈魂。

javascript 代碼解讀複製代碼// 傳統方式：自己 new 物件
class UserService {
    constructor() {
        this.userDao = new UserDao();  // 自己建立依賴
    }
}

java 代碼解讀複製代碼// Spring：由容器建立和注入物件，你只管「要」
@Service
public class UserService {
    @Autowired               // 自動注入，不用自己 new
    private UserDao userDao;
}

理解：Spring 幫你管理所有物件（叫 Bean），需要的時候自動「餵」給你，讓程式碼解耦。

十一、Spring Boot 快速上手

1. 建立專案

造訪 start.spring.io，選擇：

Project: Maven
Language: Java
勾選相依：Spring Web、MyBatis Framework、MySQL Driver

下載後用 IDEA 開啟。

2. 專案結構

bash 代碼解讀複製代碼src/main/java/com/example/demo/
├── DemoApplication.java      # 啟動入口（類似 main.js）
├── controller/               # 介面層（類似路由）
├── service/                  # 業務邏輯層
├── mapper/                   # 資料庫操作層
└── entity/                   # 資料模型（類似 model）

src/main/resources/
└── application.yml           # 設定檔（類似 .env + config）

3. 啟動類別

java 代碼解讀複製代碼@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

4. 寫一個介面（對比 Express）

javascript 代碼解讀複製代碼// Express
app.get('/user/:id', (req, res) => {
    res.json({ id: req.params.id, name: "張三" });
});

java 代碼解讀複製代碼// Spring MVC
@RestController                          // 宣告這是介面控制器
@RequestMapping("/user")                 // 路由前綴
public class UserController {

    @GetMapping("/{id}")                 // GET /user/{id}
    public User getUser(@PathVariable Long id) {
        User user = new User();
        user.setId(id);
        user.setName("張三");
        return user;                     // 自動轉成 JSON
    }

    @PostMapping                         // POST /user
    public String create(@RequestBody User user) {  // 接收 JSON body
        return "建立成功：" + user.getName();
    }

    // 接收查詢參數 ?name=xxx
    @GetMapping("/search")
    public String search(@RequestParam String name) {
        return "搜尋：" + name;
    }
}

常用註解對照：

Spring 註解作用@RestController標記介面類別，回傳 JSON@GetMapping/@PostMapping對應 HTTP 方法@PathVariable路徑參數 /user/1``@RequestParam查詢參數 ?name=x``@RequestBody請求體 JSON#### 5. 設定資料庫

application.yml：

yaml 代碼解讀複製代碼server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

6. MyBatis-Plus 操作資料庫（推薦入門）

java 代碼解讀複製代碼// 1. 實體類別，對應資料庫表
@Data                              // Lombok 註解，自動生成 getter/setter
@TableName("user")
public class User {
    @TableId
    private Long id;
    private String name;
    private Integer age;
}

// 2. Mapper 介面，繼承後自動擁有增刪改查
public interface UserMapper extends BaseMapper<User> {
    // 基礎 CRUD 都內建了，複雜查詢才需要自己寫
}

// 3. 在 Service 中使用
@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public User getById(Long id) {
        return userMapper.selectById(id);     // 內建方法，直接查
    }

    public void add(User user) {
        userMapper.insert(user);              // 內建插入
    }

    public List<User> list() {
        return userMapper.selectList(null);   // 查全部
    }
}

7. 完整呼叫鏈

markdown 代碼解讀複製代碼HTTP 請求
    ↓
Controller（接收參數）
    ↓
Service（業務邏輯）
    ↓
Mapper（資料庫操作）
    ↓
MySQL

十二、學習建議與實戰路徑

推薦第一個練手專案：使用者管理系統

實作這些功能，把上面知識串起來：

使用者的增刪改查介面（CRUD）
分頁查詢
統一回傳結果封裝
全域例外處理
用 Postman 測試介面

統一回傳結果（實戰必備）

java 代碼解讀複製代碼// 用泛型封裝統一回傳格式
@Data
public class Result<T> {
    private int code;
    private String message;
    private T data;

    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>();
        result.code = 200;
        result.message = "成功";
        result.data = data;
        return result;
    }
}

// 使用
@GetMapping("/{id}")
public Result<User> getUser(@PathVariable Long id) {
    User user = userService.getById(id);
    return Result.success(user);
}

學習順序總結

markdown 代碼解讀複製代碼1. 先把語法部分敲一遍（1週）—— 重點：類別、介面、集合、泛型、Stream
2. 搭一個 Spring Boot 專案跑通 Hello World
3. 寫第一個 GET 介面，用 Postman 調通
4. 接資料庫，實作完整 CRUD
5. 完善：分頁、例外處理、參數驗證
6. 進階：Redis 快取、登入鑑權(JWT)、檔案上傳