Spring Boot 後端串接 Vue3 前端完整教學（含 Supabase PostgreSQL）

1. 在 IntelliJ 建立 Spring Boot 專案

步驟如下：

1. 打開 IntelliJ IDEA
2. File → New → Project
3. 選 Spring Initializr
4. 選擇：
   • Java 17 or 21
   • Maven
   • Packaging: Jar
5. 新增套件（Dependencies）：
   • Spring Web
   • Spring Data JPA
   • PostgreSQL Driver
   • Lombok

建立後 IntelliJ 會生成基本專案骨架。

2. 加入 Maven Dependencies（讓 @ 生效）

一般 Spring Boot 專案的 pom.xml 如：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
    <groupId>org.postgresql</groupId>
    <artifactId>postgresql</artifactId>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

新增完後：

右上角 Maven → Reload All Projects

原本的紅字會變成黃字 → 套件成功載入。

3. Spring Boot 資料夾結構與類別用途（超清楚版）

src/main/java/
 ├─ entity/        ← 資料庫對應的類別
 ├─ repository/    ← 連接資料庫（DAO）
 ├─ service/       ← 商業邏輯處理
 ├─ controller/    ← API 入口
 ├─ dto/           ← 前後端交換資料的格式
 ├─ config/        ← 設定檔（CORS / Bean / 連線設定）
 └─ Application.java  ← 主程式入口

各層解說

• Entity： 資料表的 Java 版本，會對應 PostgreSQL 的欄位。
• Repository： 提供 CRUD 方法，如 findAll(), save()。
• Service： 管邏輯，例如驗證、流程控制。
• DTO： 要傳給前端的資料模型。
• Controller： 定義 API，如 @GetMapping, @PostMapping。
• Config： 處理 CORS、Bean 設定等。
• Application 主程式： 專案真正啟動時的入口。

4. application.properties：連線 Supabase PostgreSQL

在 src/main/resources/ 裡建立：

spring.datasource.url=jdbc:postgresql://YOUR_DB_HOST:5432/postgres
spring.datasource.username=postgres
spring.datasource.password=YOUR_SUPABASE_PASSWORD

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

Supabase 會提供 PostgreSQL 連線資訊。

5. 寫 Entity / Repository / Service / Controller / DTO / Config

Entity

@Entity
@Data
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;
}

Repository

public interface UserRepository extends JpaRepository<User, Long> {
}

Service

@Service
public class UserService {
    @Autowired
    private UserRepository repo;

    public List<User> getAll() {
        return repo.findAll();
    }
}

Controller

@RestController
@RequestMapping("/api/users")
@CrossOrigin("*")
public class UserController {

    @Autowired
    private UserService service;

    @GetMapping
    public List<User> getAllUsers() {
        return service.getAll();
    }
}

DTO（Data Transfer Object）

DTO 用來定義前後端交換資料的格式，它只包含必要的欄位，並且有助於保護內部實體類別的結構。

public class UserDTO {
    private Long id;
    private String name;

    // 預設構造方法、getter、setter
    public UserDTO(Long id, String name) {
        this.id = id;
        this.name = name;
    }

    // 其他getter和setter方法
}
    

在 Controller 中，將 Entity 轉換為 DTO 進行返回：

@RestController
@RequestMapping("/api/users")
@CrossOrigin("*")
public class UserController {

    @Autowired
    private UserService service;

    @GetMapping
    public List<UserDTO> getAllUsers() {
        List<User> users = service.getAll();
        return users.stream()
                    .map(user -> new UserDTO(user.getId(), user.getName())) // 將 Entity 轉換為 DTO
                    .collect(Collectors.toList());
    }
}
    

Config（配置類別）

Config 類別負責設定應用程式的特定配置，例如 CORS 設置、Bean 設置等。

1. CORS 設置：

如果前端和後端部署在不同的域名或端口上，需要配置 CORS 來允許跨域請求。

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允許所有路徑
                .allowedOrigins("http://localhost:5173") // 允許來自該源的請求
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允許的 HTTP 方法
                .allowedHeaders("*"); // 允許的標頭
    }
}
    

2. Bean 設置：

可以在 `Config` 類別中自定義一些 Bean，例如 ObjectMapper 設置 JSON 格式化等。

@Configuration
public class BeanConfig {

    @Bean
    public ObjectMapper objectMapper() {
        return new ObjectMapper().enable(SerializationFeature.INDENT_OUTPUT);
    }
}
    

3. 數據庫連接配置：

雖然通常 `application.properties` 已經能滿足大多數的配置需求，但如果需要額外的配置，可以在 `Config` 類別中設置。

@Configuration
@EnableJpaRepositories(basePackages = "com.example.repository")
public class JpaConfig {
    // 可在此進行額外的 JPA 配置
}
    

6. Application 主程式

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

執行後端：按右上角綠色箭頭 RUN

Spring Boot 會開啟 server → http://localhost:8080

7. 使用 WebStorm 開啟 Vue3 專案

建立專案：

npm init vue@latest
npm install
npm install axios
npm run dev

前端執行在：http://localhost:5173/

8. Vue3 前端串接後端 API

在 src/services/api.js：

import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:8080/api",
});

export default api;

在 Vue 組件中：

import api from "../services/api.js";

onMounted(async () => {
    const res = await api.get("/users");
    console.log(res.data);
});

成功後：前端會印出後端資料。

9. 避免學校或租屋處防火牆

許多學校（包括大學宿舍）與租屋處會擋：

• 後端 8080 port
• 跨網域流量
• LAN 內部 IP（如 192.168.x.x）

最簡單解法： 👉 連自己手機的 WiFi 熱點（最乾淨、不會被擋）

我當初後端連不到，就是這個原因。