跳到主要內容

初探 Vue 與 Spring boot 的對話之Backend (SpringBoot-Backend)

 簡單Backend Spring boot 開發並公開 REST API

1.實作連結Database (H2/Mysql)

2.使用初始化數據腳本方式，初始測試資料



使用 Spring Initializr 建立 Spring Boot 項目

可參考 Spring Boot 初探 文章


新增 Maven 依賴項


備註: Lombok 一個 Java 函式庫，只需一個註解。從此告別編寫 getter 或 equals 方法的繁瑣，您的類別就擁有了功能齊全的構建器,像setter、getter、logger…等等

可參考官網 https://projectlombok.org/


完整目錄


以下為此專案相關代碼


建立 JPA Entity


import lombok.AllArgsConstructor;

import lombok.Builder;

import lombok.Data;

import lombok.NoArgsConstructor;


import java.io.Serializable;


import jakarta.persistence.Column;

import jakarta.persistence.Entity;

import jakarta.persistence.GeneratedValue;

import jakarta.persistence.GenerationType;

import jakarta.persistence.Id;

import jakarta.persistence.Table;


@Data

@NoArgsConstructor

@AllArgsConstructor

@Builder

@Entity

@Table(name = "users")

public class User implements Serializable {


    @Id

    @GeneratedValue(strategy = GenerationType.IDENTITY)

    private Long id;

    

    @Column(name = "username", nullable = false)

    private String username;


    @Column(name = "password", nullable = false)

    private String password;


    @Column(name = "first_name", nullable = false)

    private String firstName;


    @Column(name = "last_name")

    private String lastName;

    

    @Column(name = "email", nullable = false, unique = true)

    private String email;

    

}



建立 Spring Data JPA Repository


public interface UserRepository extends JpaRepository<User, Long> {


}



建立 Spring Controller REST API - /api/users


@RestController

@RequestMapping("/api")

// 參考 探 CORS (Cross-Origin Resource Sharing，跨來源資源共享) 問題 文章

@CrossOrigin(origins = "http://localhost:8080")

public class UserController {


    @Autowired

    private UserRepository userRepository;


    @GetMapping("/users")

    public List<User> fetchUsers(){

        return userRepository.findAll();

    }

}



修改 Spring Boot 應用程式設定檔 - JPA配置與屬性

application.yaml (此處以H2 為 DB，如果要用mysql  記得切換相關設定)


server:

  port: 8088

spring:

  application:

    name: springboot-backend

  devtools:

    restart:

      enabled: true

  datasource:

    # the configuration for the H2 database

    url: jdbc:h2:mem:testdb

    username: sa

    password: 123456

    driverClassName: org.h2.Driver

  # the configuration for the MySQL database

    # url: jdbc:mysql://localhost:3306/testdb?useSSL=false&serverTimezone=UTC

    # driverClassName: com.mysql.cj.jdbc.Driver

    # username: mysql

    # password: 123456

  jpa:

    show-sql: true

    generate-ddl: true

    defer-datasource-initialization: true #延遲數據源初始化

    database-platform: org.hibernate.dialect.H2Dialect

    # database-platform: org.hibernate.dialect.MySQLDialect

    hibernate:

      ddl-auto: create-drop

# 初始化數據腳本

  sql:

    init:

      schema-locations: classpath:schema-h2.sql

      data-locations: classpath:data.sql

      encoding: utf-8

      mode: ALWAYS




使用基本 SQL 腳本初始化資料庫，測試使用

將檔案存放在 /src/main/resources 目錄徑


schema-h2.sql

DROP TABLE IF EXISTS users;

CREATE TABLE users (

  id INT NOT NULL AUTO_INCREMENT,

  email VARCHAR(255) NOT NULL,

  first_name VARCHAR(255) NOT NULL,

  last_name VARCHAR(255) DEFAULT NULL,

  password VARCHAR(255) NOT NULL,

  username VARCHAR(255) NOT NULL,

  PRIMARY KEY (id),

  CONSTRAINT email_unique_users UNIQUE (email)

);



data.sql

INSERT INTO users (email, first_name, last_name, password, username) VALUES ('danny@example.com','danny','yu','123456','dannyu');

INSERT INTO users (email, first_name, last_name, password, username) VALUES ('tom@example.com','tom','wu','123456','tomwu');

INSERT INTO users (email, first_name, last_name, password, username) VALUES ('joy@example.com','joy','cheng','123456','joycheng');

INSERT INTO users (email, first_name, last_name, password, username) VALUES ('jack@example.com','jack','wang','123456','jackwang');




編譯專案

danny@Danny-Yu springboot-backend % mvn clean install -Dmaven.test.skip=true                                         


…

…

[INFO] -------------------< com.dannyyu:springboot-backend >-------------------

[INFO] Building springboot-backend 0.0.1-SNAPSHOT

[INFO]   from pom.xml

[INFO] --------------------------------[ jar ]---------------------------------

[INFO] 

…

…


[INFO] --- install:3.1.4:install (default-install) @ springboot-backend ---

[INFO] Installing /Users/danny/Desktop/projects/springboot-backend/pom.xml to /Users/danny/.m2/repository/com/dannyyu/springboot-backend/0.0.1-SNAPSHOT/springboot-backend-0.0.1-SNAPSHOT.pom

[INFO] Installing /Users/danny/Desktop/projects/springboot-backend/target/springboot-backend-0.0.1-SNAPSHOT.jar to /Users/danny/.m2/repository/com/dannyyu/springboot-backend/0.0.1-SNAPSHOT/springboot-backend-0.0.1-SNAPSHOT.jar

[INFO] ------------------------------------------------------------------------

[INFO] BUILD SUCCESS

[INFO] ------------------------------------------------------------------------

[INFO] Total time:  2.367 s

[INFO] Finished at: 2025-11-29T16:20:11+08:00

[INFO] ------------------------------------------------------------------------

danny@Danny-Yu springboot-backend % 


使用 maven 運行 App

danny@Danny-Yu springboot-backend % mvn exec:java -Dexec.mainClass="com.dannyyu.backend.SpringbootBackendApplication"

WARNING: A terminally deprecated method in sun.misc.Unsafe has been called

…

…

  .   ____          _            __ _ _

 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \

( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \

 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )

  '  |____| .__|_| |_|_| |_\__, | / / / /

 =========|_|==============|___/=/_/_/_/


 :: Spring Boot ::                (v3.5.8)


2025-11-29T17:20:50.300+08:00  INFO 4508 --- [springboot-backend] [lication.main()] c.d.b.SpringbootBackendApplication       : Starting SpringbootBackendApplication using Java 25.0.1 with PID 4508 (/Users/danny/Desktop/projects/springboot-backend/target/classes started by danny in /Users/danny/Desktop/projects/springboot-backend)

…

…


2025-11-29T17:20:51.728+08:00  INFO 4508 --- [springboot-backend] [lication.main()] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port 8088 (http) with context path '/'

2025-11-29T17:20:51.747+08:00  INFO 4508 --- [springboot-backend] [lication.main()] c.d.b.SpringbootBackendApplication       : Started SpringbootBackendApplication in 1.619 seconds (process running for 3.566)


最後，測試，是否如預期執行正確

Postman 測試工具

使用 API 測試工具開發，Postman 是一個可以模擬 HTTP Request 的工具(包含HTTP 請求方法 get、post、delete、put)，能夠快速測試您的 API 是否能正常的請求資料，得到正確的請求結果

Postman 的官方下載網站: https://www.postman.com/downloads/


Postman 測試呼叫API 查詢 User 資料 http://localhost:8088/api/users







標籤：

留言

張貼留言

這個網誌中的熱門文章

初探 Vue 呼叫 API 出現 CORS 跨來源資源共享 問題原因

提要:   在 {初探Vue 與 Spring boot 的對話} 專案 ，前端 Vue 應用程式 串接 後端 API 伺服器 ，axios 呼叫 API 時出現以下，”無法取得回應內容 (No 'Access-Control-Allow-Origin' header is present on the requested resource)：” 錯誤訊息，根據查找相關資料 ，出現以下原因。 瀏覽器開發工具 錯誤訊息 畫面 錯誤原因: “ Access to XMLHttpRequest at ” from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource” 瀏覽器為了安全考量，實施了同源政策。 當您的前端應用程式 (http://localhost:8080) 嘗試呼叫一個不同來源 (不同協議、不同域名或不同埠號) 的 API 伺服器 (http://localhost:8088) 時，瀏覽器會主動阻止這個請求，除非伺服器明確地允許這個跨來源的存取。 同源政策限制(Same-Origin Policy): 同源政策限制了程式碼和不同網域資源間的互動，同源是指兩份網頁具備相同協定、埠號（如果有指定）以及主機位置 範例: 表列哪些 URL 與 URL http://www.example.com/api/p1 屬於同源： URL                                                   | 結果   | 原因 --------------------------------------------------------------------- http://www.example.com/api/p2     |...
張貼留言
閱讀完整內容

初探 Vue 與 Spring boot 的對話之Frontend (Vue-Frontend)

  Front-end Vue 使用 REST API 建立 Vite 專案 可參考 { Vue 3 初探}  文章 danny@Danny-Yu projects % npm create vite@latest Need to install the following packages: create-vite@8.2.0 Ok to proceed? (y) y > npx > "create-vite" │ ◇   Project name: │   vue-frontend │ ◇   Select a framework: │   Vue │ ◇   Select a variant: │   TypeScript │ ◇   Use rolldown-vite (Experimental)?: │   No │ ◇   Install with npm and start now? │   Yes │ ◇   Scaffolding project in /Users/danny/Desktop/projects/vue-frontend... │ ◇   Installing dependencies with npm... added 47 packages, and audited 48 packages in 27s 6 packages are looking for funding   run `npm fund` for details found 0 vulnerabilities │ ◇   Starting dev server... > vue-frontend@0.0.0 dev > vite   VITE v7.2.4   ready in 411 ms   ➜   Local:   http://localhost:5173/   ➜   Network: use --host to expose   ➜   press h + enter to show...
張貼留言
閱讀完整內容

初探 Spring 中的循環依賴

原因: 當兩個或多個 bean 直接或間接地相互依賴時, 就會出現 Circular Dependency (循環依賴) 如: Bean A -> Bean B -> Bean A import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class BeanA {          @Autowired     private BeanB beanB;     public String sayHi() {         return "Hi! 我是 Class A.";     } } import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class BeanB {          @Autowired     private BeanA beanA;     public String sayHi() {         return "Hi! 我是 Class B.";     } } 編譯時不會出現問題 danny@Danny-Yu demo % mvn clean install -Dmaven.test.skip=true                           ... ... [INFO] Installing /Users/danny/Desktop/projects/demo/target/dem...
張貼留言
閱讀完整內容