Die Kombination aus Java-Framework und Front-End-Angular-Framework

Antwort: Das Java-Backend-Framework und das Angular-Frontend-Framework können integriert werden, um eine leistungsstarke Kombination für die Erstellung moderner Webanwendungen bereitzustellen. Schritte: Erstellen Sie ein Java-Backend-Projekt und wählen Sie die JPA-Abhängigkeiten Spring Web und Spring Data aus. Definieren Sie Modell- und Repository-Schnittstellen. Erstellen Sie einen REST-Controller und stellen Sie Endpunkte bereit. Erstellen Sie ein Angular-Projekt. Fügen Sie eine Spring Boot Java-Abhängigkeit hinzu. Konfigurieren Sie CORS. Integrieren Sie Angular in Angular-Komponenten.

Integration von Java Backend Framework und Angular Frontend Framework

Java Backend Framework und Angular Frontend Framework sind eine leistungsstarke Kombination zum Erstellen moderner Webanwendungen. In diesem Artikel wird die Integration des Java-Frameworks und des Angular-Frameworks vorgestellt, einschließlich praktischer Fälle von Spring Boot und Angular.

Schritte:

1. Erstellen Sie ein Java-Backend-Projekt. Erstellen Sie ein Spring Boot-Projekt mit Spring Initializr. Wählen Sie die folgenden Abhängigkeiten aus: Spring Web Modelle und Repositorys

Erstellen Sie die Produktentität im Modellpaket und definieren Sie eine ProductRepository-Repository-Schnittstelle.

• 3. Erstellen Sie einen REST-Controller.
• Erstellen Sie einen ProductController im Controller-Paket und stellen Sie REST-Endpunkte für die Interaktion mit Produktentitäten bereit.

4. Erstellen Sie ein Angular-Projekt. Führen Sie den folgenden Befehl im Projektordner aus, um ein Angular-Projekt zu erstellen:

ng new [project-name]

. 5. Fügen Sie die Spring Boot-Java-Abhängigkeit hinzu , Spring Boot Java-Abhängigkeiten hinzufügen:

"dependencies": {
  ...
  "spring-boot": "^2.6.6",
  ...
}

6. Konfigurieren Sie CORS

Konfigurieren Sie in der Spring Boot-Anwendung Cross-Origin Resource Sharing (CORS) in der Web-Sicherheitskonfiguration:

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
            ...
    }

}

7. Integrieren Sie Angular

Komponenten verwenden den vom Spring Boot Java-Dienst bereitgestellten Endpunkt. Das folgende Beispiel zeigt, wie man die Produktliste von ProductController erhält:

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products: Product[];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<Product[]>('/api/products').subscribe(products => {
      this.products = products;
    });
  }
}

Praktischer Fall: Spring Boot und Angular

Dieser praktische Fall erstellt eine einfache Produktverwaltungsanwendung.

Backend: Spring Boot wird verwendet, um eine RESTful-API zur Verwaltung von Produkten zu erstellen.

Frontend:

Angular wird verwendet, um die Benutzeroberfläche zu erstellen, die es Benutzern ermöglicht, Produkte anzuzeigen und zu erstellen.

Führen Sie die Anwendung aus:

Führen Sie im Java-Projekt mvn spring-boot:run aus.

Führen Sie im Angular-Projekt ng Serve aus.

Die Anwendung wird auf dem konfigurierten Port ausgeführt (standardmäßig 8080). Sie können die Produktliste unter der folgenden URL anzeigen: http://localhost:4200/products.

Das obige ist der detaillierte Inhalt vonDie Kombination aus Java-Framework und Front-End-Angular-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!