Wie man mit Java eine auf JHipster basierende Front-End- und Back-End-Trennanwendung entwickelt

So verwenden Sie Java, um eine Front-End- und Back-End-Trennungsanwendung basierend auf JHipster zu entwickeln

Vorwort:
In der heutigen Softwareentwicklung wird die Front-End- und Back-End-Trennungsarchitektur von Entwicklern zunehmend nachgefragt. JHipster ist ein leistungsstarkes Tool zum Erstellen moderner Webanwendungen mit Java. Es kombiniert Technologien wie Spring Boot und Angular, um die Möglichkeit zu bieten, Anwendungen schnell zu entwickeln. In diesem Artikel wird erläutert, wie Sie mithilfe von Java eine auf JHipster basierende Front-End- und Back-End-Trennanwendung entwickeln, und Codebeispiele bereitstellen.

JHipster Einführung:
JHipster ist eine Entwicklungsplattform zur Generierung moderner Webanwendungen. Es kombiniert Technologien wie Spring Boot, Spring Security, Angular, React und Vue, um den Prozess der Anwendungserstellung zu vereinfachen. JHipster bietet viele sofort einsatzbereite Funktionen wie Benutzerverwaltung, Authentifizierung und Autorisierung, Datenbankzugriff, Frontend-Seiten usw. Durch den Einsatz von JHipster können Entwickler schnell eine voll funktionsfähige, effiziente und zuverlässige Anwendung erstellen.

Front-End- und Back-End-Trennarchitektur:
Die Front-End- und Back-End-Trennarchitektur entwickelt, implementiert und verwaltet den Front-End- und Back-End-Code unabhängig voneinander. Das Frontend kommuniziert über die API mit dem Backend, ruft Daten ab und rendert die Seite. Der Vorteil dieser Architektur besteht darin, dass Front-End und Back-End parallel entwickelt werden können, wodurch Koordinations- und Abhängigkeitsprobleme im Entwicklungsprozess reduziert werden. Außerdem wird die Entwicklung von Multiplattform- und Multi-Terminal-Anwendungen unterstützt.

Schritt 1: JHipster installieren und Projekt erstellen
Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie Java, Node.js und Yarn installiert haben.

1. Öffnen Sie das Befehlszeilentool und installieren Sie JHipster:

   npm install -g generator-jhipster

2. Erstellen Sie ein neues JHipster-Projekt:

   jhipster

Folgen Sie den Anweisungen und wählen Sie den Technologie-Stack und die Komponenten aus, die Sie verwenden möchten.

Schritt 2: Erstellen Sie eine Frontend-Anwendung

1. Erstellen Sie im Stammverzeichnis des Projekts einen Ordner mit dem Namen „frontend“:

   mkdir frontend

2. Gehen Sie zum Frontend-Ordner und verwenden Sie Angular CLI, um eine neue Angular-Anwendung zu erstellen:

   cd frontend
   ng new myapp

3. Geben Sie das myapp-Verzeichnis ein und starten Sie den Entwicklungsserver:

   cd myapp
   ng serve

Jetzt können Sie http://localhost:4200 im Browser aufrufen, um die Angular-Anwendung anzuzeigen.

Schritt 3: Mit dem Backend kommunizieren

1. Öffnen Sie die Datei src/main/java/com/mycompany/myapp/config/Constants.java und konfigurieren Sie den API-Pfad für die Front-End- und Backend-Kommunikation:

   public static final String API_URL = "/api";

2. Öffnen Sie die Datei src/main/java/com/mycompany/myapp/config/SecurityConfiguration.java, um Cross Origin Resource Sharing (CORS) zu ermöglichen:

   @Configuration
   @EnableWebSecurity
   @EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
   public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
   
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // ...
   
        http.cors()
            .and()
            .csrf()
            .disable()
            .headers()
            .frameOptions()
            .disable()
            .cacheControl()
            .disable();
    }
   }

3. Öffnen Sie src/main/java/com/mycompany/myapp/web/ rest/UserResource.java-Datei, ändern Sie den benutzerbezogenen API-Pfad in /api/users:

   @RestController
   @RequestMapping("/api")
   public class UserResource {
   
    // ...
   
    @GetMapping("/users")
    public ResponseEntity<List<UserDTO>> getAllUsers(Pageable pageable) {
        Page<UserDTO> page = userService.getAllManagedUsers(pageable);
        HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(ServletUriComponentsBuilder.fromCurrentRequest(), page);
        return ResponseEntity.ok().headers(headers).body(page.getContent());
    }
   }

4. Öffnen Sie die Datei frontend/src/app/app.component.ts, verwenden Sie HttpClient, um die Backend-API-Daten abzurufen:

   import { Component } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'app-root',
     template: `
    <h1>Users</h1>
    <ul>
      <li *ngFor="let user of users">{{user.login}}</li>
    </ul>
     `,
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     users: any[];
     
     constructor(private http: HttpClient) {
    this.http.get('/api/users').subscribe((data: any[]) => {
      this.users = data;
    });
     }
   }

Durch das obige Codebeispiel zeigt die Front-End-Anwendung die vom Back-End erhaltene Benutzerliste auf der Seite an.

Zusammenfassung:
Mit JHipster können Sie ganz einfach eine Java-basierte Front-End- und Back-End-Trennanwendung entwickeln. Die oben genannten Schritte stellen ein Grundgerüst bereit, das Sie bei Bedarf erweitern und optimieren können. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, schnell mit JHipster zu beginnen, um Front-End- und Back-End-Trennungsanwendungen zu entwickeln. Viel Spaß beim Codieren!

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