利用Java框架和前端框架來建立全端應用程式

建立全端應用程式涉及後端和前端開發，使用Java框架（Spring Boot）和前端框架（Angular）可以實現。後端（Java）：建立 Spring Boot 項目，新增 Spring Boot Starter Web 相依性。建立控制器類別處理請求（如 HomeController）。前端（Angular）：創建 Angular 專案。建立組件類別展示資料（如 HomeComponent）。連接後端和前端：在 Spring Boot 設定檔中設定 API 路徑。在 Angular 服務中更新請求路徑。實戰案例：TODO 應用程式後端創建 TodoController 和服務管理 TODO。

利用Java框架與前端框架建立全端應用程式

簡介

#全端開發涉及應用程式開發的各個方面，從後端到前端。在本文中，我們將展示如何使用Java框架（Spring Boot）和前端框架（Angular）來建立全端應用程式。

後端（Java）

建立Spring Boot 項目

使用SpringBoot Initializr建立新項目，指定以下依賴：

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

建立控制器

在src/main/java目錄中建立一個控制器類，例如HomeController.java：

@RestController
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "Hello, World!";
    }

}

前端（Angular）

建立Angular 專案

使用Angular CLI建立新專案：

ng new my-app --routing

建立元件

在src/app#目錄中建立元件，例如home.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  message = "Hello, World!";
}

將後端和前端連接起來

配置後端API

在Spring Boot設定檔（application. properties）中配置API路徑：

server.port=8080
spring.mvc.pathmatch.matching-strategy=ANT

#更新Angular服務

在src/app#目錄中的app. module.ts中更新服務：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  ...
})
export class AppModule { }

#實戰案例：建立簡單的TODO應用程式

##後端

建立
• TodoController.java來處理TODO操作。
定義
• Todo實體和TodoService來管理TODO。

前端

建立
• todo.component.ts來顯示TODO清單。
使用
• httpClient向API發送請求。

結語

以上是利用Java框架和前端框架來建立全端應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！