Spring Boot與Angular集成開發

Spring Boot與Angular集成開發是一種現代化的全棧開發方式，它將Java Spring Boot后端與前端JavaScript框架Angular結合起來，以實現高效、快速的開發。以下是集成開發的步驟和一些關鍵要點：

1. 項目初始化

Spring Boot后端

1. 創建Spring Boot項目：

   • 使用Spring Initializr（https://start.spring.io/）創建一個新的Spring Boot項目。
   • 選擇必要的依賴項，如Web、Spring Data JPA、H2 Database等。

2. 項目結構：

   • 創建一個基本的項目結構，例如：

     my-spring-boot-app/
     ├── src/
     │   ├── main/
     │   │   ├── java/com/example/demo/
     │   │   │   └── DemoApplication.java
     │   │   ├── resources/
     │   │   │   ├── application.properties
     │   │   │   └── static/
     │   │   └── templates/
     │   └── test/
     └── pom.xml
     

3. 配置文件：

   • 編輯application.properties文件，配置數據庫連接、端口號等。

Angular前端

1. 創建Angular項目：

   • 使用Angular CLI（https://angular.io/cli）創建一個新的Angular項目。

   ng new my-angular-app
   

2. 項目結構：

   • 創建一個基本的項目結構，例如：

     my-angular-app/
     ├── src/
     │   ├── app/
     │   │   ├── app.component.ts
     │   │   ├── app.module.ts
     │   │   └── ...
     │   ├── assets/
     │   ├── environments/
     │   ├── favicon.ico
     │   ├── index.html
     │   ├── main.ts
     │   ├── polyfills.ts
     │   ├── test/
     │   └── tsconfig.json
     ├── angular.json
     ├── package.json
     └── tslint.json
     

3. 配置文件：

   • 編輯angular.json文件，配置構建和開發服務器。

2. 集成開發

后端API開發

1. 創建Controller：

   • 在Spring Boot項目中創建一個Controller來處理HTTP請求。

   @RestController
   @RequestMapping("/api")
   public class UserController {
   
       @Autowired
       private UserRepository userRepository;
   
       @GetMapping("/users")
       public List<User> getAllUsers() {
           return userRepository.findAll();
       }
   
       @PostMapping("/users")
       public User createUser(@RequestBody User user) {
           return userRepository.save(user);
       }
   }
   

2. 創建Repository：

   • 使用Spring Data JPA創建一個Repository接口。

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

前端服務開發

1. 創建服務：

   • 在Angular項目中創建一個服務來處理HTTP請求。

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
       providedIn: 'root'
   })
   export class UserService {
   
       private apiUrl = 'http://localhost:8080/api';
   
       constructor(private http: HttpClient) { }
   
       getAllUsers(): Observable<User[]> {
           return this.http.get(`${this.apiUrl}/users`);
       }
   
       createUser(user: User): Observable<User> {
           return this.http.post(`${this.apiUrl}/users`, user);
       }
   }
   

2. 創建組件：

   • 創建一個組件來顯示用戶列表和創建新用戶表單。

   import { Component, OnInit } from '@angular/core';
   import { UserService } from '../user.service';
   import { User } from '../user';
   
   @Component({
       selector: 'app-users',
       templateUrl: './users.component.html',
       styleUrls: ['./users.component.css']
   })
   export class UsersComponent implements OnInit {
   
       users: User[] = [];
       newUser: User = { name: '', email: '' };
   
       constructor(private userService: UserService) { }
   
       ngOnInit(): void {
           this.userService.getAllUsers().subscribe(data => {
               this.users = data;
           });
       }
   
       onSubmit() {
           this.userService.createUser(this.newUser).subscribe(data => {
               this.users.push(data);
               this.newUser = { name: '', email: '' };
           });
       }
   }
   

3. 運行和測試

后端運行

1. 啟動Spring Boot應用：

   ./mvnw spring-boot:run
   

前端運行

1. 啟動Angular開發服務器：

   ng serve
   

2. 訪問應用：

   • 打開瀏覽器，訪問http://localhost:4200，查看集成后的應用。

4. 總結

通過以上步驟，你已經成功地將Spring Boot后端與Angular前端集成在一起。這種集成方式使得前后端開發更加高效，代碼結構更加清晰，便于維護和擴展。