Wie man mit Java eine Front-End-Entwicklungsanwendung basierend auf JHipster entwickelt

So verwenden Sie Java, um eine Front-End-Entwicklungsanwendung basierend auf JHipster zu entwickeln

Vorwort:
Im Bereich der Front-End-Entwicklung ist JHipster ein sehr beliebtes Open-Source-Tool, das Entwicklern hilft, schnell moderne Webanwendungen zu erstellen. JHipster integriert viele häufig verwendete Front-End- und Back-End-Technologien, darunter Java, Spring Boot, Angular, React usw., sodass Entwickler schnell eine Webanwendung mit vollem Funktionsumfang erstellen können. In diesem Artikel wird erläutert, wie Sie mit Java eine auf JHipster basierende Front-End-Entwicklungsanwendung entwickeln, und es werden spezifische Codebeispiele bereitgestellt.

1. JHipster installieren
   Zuerst müssen wir JHipster installieren. JHipster ist ein Yeoman-basierter Codegenerator. Wir können ihn über npm installieren:

npm install -g generator-jhipster

Nach Abschluss der Installation können Sie überprüfen, ob die Installation erfolgreich war:

jhipster --version

2. Erstellen Sie ein neues JHipster-Projekt.
   Geben Sie die Befehlszeile ein Sie möchten ein Verzeichnis des Projekts erstellen und den folgenden Befehl ausführen:

jhipster

JHipster fordert Sie auf, einige Optionen zum Konfigurieren des Projekts auszuwählen, z. B. die Auswahl der Front-End-Technologie (Angular oder React), des Datenbanktyps usw. Wählen Sie je nach Bedarf.

3. Front-End-Anwendungen entwickeln
   JHipster stellt ein separates Verzeichnis für Front-End-Anwendungen bereit, das alle Front-End-Code- und Ressourcendateien enthält. Hier verwenden wir Angular als Front-End-Framework, Sie können jedoch auch andere Frameworks wie React verwenden.

Geben Sie das Front-End-Verzeichnis ein:

cd src/main/webapp

In diesem Verzeichnis sehen wir einen App-Ordner, der alle Angular-Code- und Ressourcendateien enthält.

Öffnen Sie das App-Verzeichnis und Sie finden ein Unterverzeichnis mit dem Namen „home“. Dies ist eine Beispielseite, von der aus Sie mit der Entwicklung Ihrer App beginnen können.

4. Frontend-Code schreiben
   Öffnen Sie die Datei im Home-Verzeichnis. Sie finden eine Datei mit dem Namen home.component.ts. Dies ist die Angular-Komponentendefinitionsdatei, die die Logik und Ansichten der Komponente enthält.

Wir können die Datei mit einem beliebigen Texteditor öffnen und mit dem Schreiben unseres Codes beginnen. Hier ist ein einfaches Beispiel:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  title = 'Hello, JHipster!';

  constructor() { }

  ngOnInit(): void {
  }
}

Der obige Code definiert eine Angular-Komponente namens HomeComponent, die über eine Eigenschaft namens title verfügt. Wir können dieses Attribut in HTML-Vorlagen verwenden, um Titel anzuzeigen.

5. Frontend-Vorlage schreiben
   Im Home-Verzeichnis finden Sie auch eine Datei mit dem Namen home.component.html. Dies ist die HTML-Vorlagendatei der Komponente, die die Ansicht der Komponente definiert.

Öffnen Sie home.component.html und schreiben Sie den folgenden Inhalt:

<h1 id="title">{{ title }}</h1>

Der obige Code zeigt einfach den Titel der Komponente an.

6. Führen Sie die Anwendung aus
   Gehen Sie zurück zum Stammverzeichnis des Projekts und führen Sie den folgenden Befehl aus, um die Anwendung zu starten:

./mvnw

Öffnen Sie nach erfolgreichem Start den Browser und besuchen Sie http://localhost:8080/. Sie werden es tun siehe eine „Hallo, JHipster!“-Seite.

7. Erweiterte Funktionen und erweiterte Entwicklung
   Zusätzlich zu den oben genannten Grundfunktionen bietet JHipster auch viele andere erweiterte Funktionen und erweiterte Entwicklungsoptionen, einschließlich Routing-Konfiguration, Authentifizierung und Autorisierung, API-Aufruf usw. Weitere Informationen finden Sie in der Dokumentation und den Community-Ressourcen von JHipster.

Fazit:
In diesem Artikel wird erläutert, wie Sie mit Java eine Front-End-Entwicklungsanwendung basierend auf JHipster entwickeln. Wir haben JHipster verwendet, um schnell eine Webanwendung mit vollem Funktionsumfang zu erstellen, den grundlegenden Front-End-Entwicklungsprozess demonstriert und spezifische Codebeispiele bereitgestellt. Ich hoffe, dieser Artikel kann Ihnen helfen, damit Sie JHipster besser für die Entwicklung von Front-End-Anwendungen nutzen können.

Das obige ist der detaillierte Inhalt vonWie man mit Java eine Front-End-Entwicklungsanwendung basierend auf JHipster entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!