Comment utiliser Java pour développer une application de séparation front-end et back-end basée sur JHipster

Comment utiliser Java pour développer une application de séparation front-end et back-end basée sur JHipster

Avant-propos :
Dans le développement logiciel d'aujourd'hui, l'architecture de séparation front-end et back-end est de plus en plus recherchée par les développeurs. JHipster est un outil puissant pour créer des applications Web modernes à l'aide de Java. Il combine des technologies telles que Spring Boot et Angular pour offrir la possibilité de développer rapidement des applications. Cet article explique comment utiliser Java pour développer une application de séparation front-end et back-end basée sur JHipster et fournit des exemples de code.

JHipster Introduction :
JHipster est une plateforme de développement permettant de générer des applications Web modernes. Il combine des technologies telles que Spring Boot, Spring Security, Angular, React et Vue pour simplifier le processus de création d'applications. JHipster fournit de nombreuses fonctions prêtes à l'emploi, telles que la gestion des utilisateurs, l'authentification et l'autorisation, l'accès aux bases de données, les pages frontales, etc. En utilisant JHipster, les développeurs peuvent rapidement créer une application entièrement fonctionnelle, efficace et fiable.

Architecture de séparation front-end et back-end :
L'architecture de séparation front-end et back-end développe, déploie et maintient le code front-end et back-end de manière indépendante. Le front-end communique avec le back-end via l'API, obtient des données et restitue la page. L'avantage de cette architecture est que le front-end et le back-end peuvent être développés en parallèle, réduisant ainsi les problèmes de coordination et de dépendance dans le processus de développement. Elle prend également en charge le développement d'applications multiplateformes et multiterminaux.

Étape 1 : Installez JHipster et créez un projet
Avant de commencer, assurez-vous d'avoir installé Java, Node.js et Yarn.

1. Ouvrez l'outil de ligne de commande et installez JHipster :

   npm install -g generator-jhipster

2. Créez un nouveau projet JHipster :

   jhipster

Suivez les invites et sélectionnez la pile technologique et les composants que vous souhaitez utiliser.

Étape 2 : Créer une application front-end

1. Dans le répertoire racine du projet, créez un dossier nommé "frontend" :

   mkdir frontend

2. Allez dans le dossier frontend et utilisez Angular CLI pour créer une nouvelle application Angular :

   cd frontend
   ng new myapp

3. Entrez dans le répertoire myapp et démarrez le serveur de développement :

   cd myapp
   ng serve

Maintenant, vous pouvez visiter http://localhost:4200 dans le navigateur pour afficher l'application Angular.

Étape 3 : Communiquer avec le backend

1. Ouvrez le fichier src/main/java/com/mycompany/myapp/config/Constants.java et configurez le chemin de l'API pour la communication front-end et backend :

   public static final String API_URL = "/api";

2. Ouvrez le fichier src/main/java/com/mycompany/myapp/config/SecurityConfiguration.java, permettant le partage de ressources entre origines croisées (CORS) :

   @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. Ouvrez src/main/java/com/mycompany/myapp/web/ rest/UserResource. java, modifiez le chemin de l'API lié à l'utilisateur en /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. Ouvrez le fichier frontend/src/app/app.component.ts, utilisez HttpClient pour obtenir les données de l'API backend :

   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;
    });
     }
   }

Grâce à l'exemple de code ci-dessus, l'application front-end affichera la liste des utilisateurs obtenue à partir du back-end sur la page.

Résumé :
En utilisant JHipster, vous pouvez facilement développer une application de séparation front-end et back-end basée sur Java. Les étapes ci-dessus fournissent un cadre de base que vous pouvez étendre et optimiser selon vos besoins. J'espère que cet article pourra vous aider à démarrer rapidement avec JHipster pour développer des applications de séparation front-end et back-end. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!