Comment utiliser Java pour développer une application de développement front-end basée sur JHipster

Comment utiliser Java pour développer une application de développement front-end basée sur JHipster

Avant-propos :
Dans le domaine du développement front-end, JHipster est un outil open source très populaire qui aide les développeurs à créer rapidement des applications Web modernes. JHipster intègre de nombreuses technologies front-end et back-end couramment utilisées, notamment Java, Spring Boot, Angular, React, etc., permettant aux développeurs de créer rapidement une application Web complète. Cet article expliquera comment utiliser Java pour développer une application de développement front-end basée sur JHipster et fournira des exemples de code spécifiques.

1. Installer JHipster
   Tout d'abord, nous devons installer JHipster. JHipster est un générateur de code basé sur Yeoman, nous pouvons l'installer via npm :

npm install -g generator-jhipster

Une fois l'installation terminée, vous pouvez vérifier si l'installation a réussi :

jhipster --version

2. Créez un nouveau projet JHipster
   Entrez la ligne de commande que vous souhaitez créer le répertoire du projet et exécutez la commande suivante :

jhipster

JHipster vous demandera de sélectionner certaines options pour configurer le projet, telles que la sélection de la technologie frontale (Angular ou React), du type de base de données, etc. Choisissez en fonction de vos besoins.

3. Développer des applications frontales
   JHipster fournit un répertoire séparé pour les applications frontales, qui contient tout le code frontal et les fichiers de ressources. Ici, nous utiliserons Angular comme framework front-end, mais vous pouvez également choisir d'utiliser d'autres frameworks tels que React.

Entrez dans le répertoire front-end :

cd src/main/webapp

Dans ce répertoire, nous pouvons voir un dossier d'application, qui contient tout le code angulaire et les fichiers de ressources.

Ouvrez le répertoire de l'application et vous trouverez un sous-répertoire nommé home. Ceci est un exemple de page à partir de laquelle vous pouvez commencer à développer votre application.

4. Écrivez le code frontal
   Ouvrez le fichier dans le répertoire personnel, vous trouverez un fichier nommé home.component.ts. Il s'agit du fichier de définition du composant angulaire, qui contient la logique et les vues du composant.

Nous pouvons ouvrir le fichier à l'aide de n'importe quel éditeur de texte et commencer à écrire notre code. Voici un exemple simple :

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 {
  }
}

Le code ci-dessus définit un composant angulaire appelé HomeComponent, qui possède une propriété appelée title. Nous pouvons utiliser cet attribut dans les modèles HTML pour afficher les titres.

5. Modèle front-end d'écriture
   Dans le répertoire personnel, vous trouverez également un fichier nommé home.component.html. Il s'agit du fichier modèle HTML du composant qui définit la vue du composant.

Ouvrez home.component.html et écrivez le contenu suivant :

<h1>{{ title }}</h1>

Le code ci-dessus affiche simplement le titre du composant.

6. Exécutez l'application
   Retournez au répertoire racine du projet et exécutez la commande suivante pour démarrer l'application :

./mvnw

Après un démarrage réussi, ouvrez le navigateur et visitez http://localhost:8080/, vous voir une page "Bonjour, JHipster!".

7. Fonctions avancées et développement avancé
   En plus des fonctions de base ci-dessus, JHipster fournit également de nombreuses autres fonctions avancées et options de développement avancées, notamment la configuration du routage, l'authentification et l'autorisation, les appels API, etc. Vous pouvez en savoir plus grâce à la documentation et aux ressources communautaires de JHipster.

Conclusion :
Cet article présente comment utiliser Java pour développer une application de développement front-end basée sur JHipster. Nous avons utilisé JHipster pour créer rapidement une application Web complète, démontré le processus de développement front-end de base et fourni des exemples de code spécifiques. J'espère que cet article pourra vous apporter de l'aide afin que vous puissiez mieux utiliser JHipster pour développer des applications frontales.

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!