De zéro à wow: construire une application Angular GPT adaptée aux débutants

Section 1 : Introduction ?️

De quoi parle cet article

Bienvenue dans le voyage passionnant de la création de votre toute première application Angular ! Cet article est spécialement conçu pour les débutants qui souhaitent se plonger dans le monde du développement Web. Ensemble, nous créerons une application de chat simple mais puissante, optimisée par l'API GPT d'OpenAI. En chemin, vous découvrirez comment Angular, un framework front-end populaire, permet aux développeurs de créer des applications Web évolutives et modernes.

Que vous soyez entièrement nouveau dans le codage ou que vous débutiez tout juste avec Angular, cet article vous guidera à chaque étape du processus, garantissant qu'aucune expérience préalable n'est requise.

Pourquoi angulaire ?

Angular est l'un des frameworks les plus polyvalents pour créer des applications Web interactives et dynamiques. Voici pourquoi nous l'avons choisi pour ce projet :

• Adapté aux débutants : Angular offre une expérience de développement structurée et cohérente, ce qui en fait un excellent choix pour ceux qui débutent.
• Intégration TypeScript : il exploite TypeScript, un sur-ensemble de JavaScript fortement typé, pour améliorer la productivité et détecter les erreurs pendant le développement.
• Écosystème puissant : avec des fonctionnalités telles que l'injection de dépendances intégrée, des composants réutilisables et une communauté active, Angular vous permet de créer des applications de qualité professionnelle.

Ce que vous réaliserez

À la fin de cet article, vous aurez :

1. Une application entièrement fonctionnelle basée sur GPT : une application de chat simple et interactive où les utilisateurs peuvent poser des questions et recevoir des réponses du modèle GPT d'OpenAI.
2. Connaissance angulaire : une compréhension fondamentale de la manière dont les composants, services et configurations angulaires s'assemblent pour créer une application Web.
3. Expérience d'intégration d'API : découvrez comment connecter des applications angulaires à des API externes, comme le GPT d'OpenAI, via des requêtes HTTP.

Ce qui rend cet article spécial

Contrairement à de nombreux tutoriels, ce guide vous guide non seulement dans la création d'une application, mais fournit également des explications claires pour chaque étape, vous aidant ainsi à comprendre les concepts sous-jacents d'Angular. À la fin, vous disposerez non seulement d’une application fonctionnelle, mais également de la confiance nécessaire pour construire vos propres projets.

? Prêt à commencer à coder ? Dans la section suivante, nous explorerons les outils de base et la configuration requis pour créer cette application.

? Référentiel de code complet : Vous pouvez trouver le code source complet de ce didacticiel ici.

Section 2: Se préparer à apprendre Angular: devenir un développeur angulaire

Avant de commencer à construire votre application angulaire alimentée par GPT, il est important de préparer votre environnement et de vous familiariser avec les outils et les concepts que vous utiliserez. Cette section vous guide étape par étape pour assurer une expérience de configuration et d'apprentissage en douceur.

Ce dont vous avez besoin pour apprendre d'abord

Pour créer une application angulaire, il y a quelques compétences fondamentales que vous devez acquérir:

1. HTML et CSS

• ce qu'ils sont :
  • HTML (Hypertext Markup Language) définit la structure de votre page Web.
  • CSS (feuilles de style en cascade) est utilisée pour styliser le contenu.
• pourquoi ils sont importants : Les composants angulaires reposent sur des modèles HTML et des styles CSS pour définir leur structure et leur apparence.
• Ressources :
  • HTML et CSS pour les débutants: Article
  • HTML Crash Course: Video

2. DéspactScript

• ce que c'est : TypeScript est un superset fortement typé de JavaScript, utilisé par Angular pour améliorer la qualité et la maintenabilité du code.
• pourquoi c'est important : Angular utilise les dactylographies pour des fonctionnalités telles que la vérification des types, les interfaces et les décorateurs.
• Ressource :
  • Docs officiels de TypeScript
  • TypeScript Crash Course: Video

3. Node.js

• ce que c'est :
  Node.js est un runtime javascript que Angular utilise pour gérer les dépendances et exécuter des outils de développement.

• Comment installer :

1. Téléchargez l'installateur de votre système d'exploitation sur le site officiel de Node.js.
2. Suivez les instructions pour terminer l'installation.
3. Vérifiez l'installation:

   node -v
   npm -v

4. Git Basics

• ce que c'est : Git est un système de contrôle de version qui vous permet de suivre les modifications et de collaborer efficacement.
• Étapes de clé :
  1. Installer Git: Git d'installation Guide.
  2. Initialiser un référentiel:

   git init

• Ressource :
  • GUT GUIDE BASICS

Configuration de la CLI angulaire

La CLI angulaire (interface de ligne de commande) est un outil puissant qui vous aide à échafauder et à gérer les projets angulaires sans effort.

1. Installez la CLI angulaire à l'échelle mondiale à l'aide de NPM:

   npm install -g @angular/cli

1. Vérifiez l'installation:

   ng version

1. Ressource :
   • Documentation CLI angulaire

Obtenir votre clé API Openai

Vous aurez besoin d'une touche API pour connecter votre application angulaire à l'API GPT d'Openai.

1. Créez un compte Openai :
   • Inscrivez-vous à Openai.
2. Générez votre clé API :
   • Accédez à la section des touches API.
   • Cliquez sur Créer une nouvelle clé et copier la touche générée.

⚠️ IMPORTANT : Gardez votre clé API privée pour éviter un accès non autorisé.

Se familiariser avec Angular

Prenez le temps de comprendre la structure et l’écosystème d’Angular. Voici quelques ressources utiles:

1. Tutoriels officiels :
   • L'équipe angulaire fournit des guides adaptés aux débutants pour vous aider à démarrer.
   • Tutoriels angulaires
2. Documentation angulaire :
   • Utilisez la documentation officielle comme référence tout au long de votre voyage.
   • Documentation angulaire
3. communautés pour rejoindre :
   • Reddit angulaire
   • Stack Overflow - Questions angulaires
   • Communauté de discorde angulaire : s'engager avec les développeurs pour poser des questions et partager les connaissances.

? vous êtes prêt!

Avec l'environnement mis en place et les connaissances fondamentales en place, vous êtes prêt à commencer à planifier votre application alimentée par GPT.

Suivant: Section 3: Planification de l'application de chat à propulsion GPT .

Section 3: Planification de l'application de chat alimentée par GPT

Avant de plonger dans le codage, il est essentiel d'avoir un plan clair. Dans cette section, vous comprendrez l'objectif de l'application, les technologies impliquées et le fonctionnement de l'application.

Aperçu de l'application

L'objectif est de construire une interface de chat gpt GPT qui permet aux utilisateurs d'envoyer une invite et de recevoir des réponses de l'API GPT d'OpenAI. L'application se concentrera sur la simplicité et la convivialité tout en introduisant des concepts angulaires clés.

Caractéristiques clés:

• une interface de chat conviviale.
• Intégration avec l'API GPT d'OpenAI pour gérer les invites et générer des réponses.
• une conception réactive pour une meilleure convivialité.

Technologies que vous utiliserez

Pour donner vie à cette application, vous comptez sur les technologies suivantes:

1. Angular :

   • Angular sert de cadre Frontend pour construire une interface utilisateur dynamique et évolutive.
   • Vous tirerez parti des fonctionnalités angulaires telles que composants , services , et injection de dépendance .

2. API GPT d'Openai :

   • L'API GPT alimentera les réponses du chatbot.
   • Vous utiliserez l'API CHAT EXCELIONS API pour envoyer et recevoir des invites utilisateur.

Comment fonctionne l'application

Voici une ventilation étape par étape du fonctionnement de votre application:

1. Entrée utilisateur :
   • L'utilisateur saisit une invite dans le champ de saisie du chat.
2. Demande API :
   • L'entrée est envoyée à l'API GPT d'OpenAI à l'aide du service client HTTP d'Angular.
3. Gestion des réponses :
   • L'API GPT génère une réponse basée sur l'invite et la renvoie.
4. Afficher la réponse :
   • La réponse est affichée dans l'interface de chat pour que l'utilisateur puisse la voir.

Se préparer au développement

Rappel de clé API :

Avant de continuer, assurez-vous d'avoir :

1. Inscrit pour un compte OpenAI.
2. Généré et enregistré en toute sécurité votre clé API. Vous en aurez besoin pour configurer le service GPT dans votre application.

? Prochaines étapes : Maintenant que vous avez un plan, il est temps de configurer votre projet Angular dans la Section 4 : Configuration du projet Angular.

Fantastique ! Prêt à aller de l'avant avec la Section 4 : Mise en place du projet Angular. Faisons-le ! ??️

Section 4 : Configuration du projet angulaire

Une fois votre environnement prêt et un plan clair en place, il est temps de créer les bases de votre application Angular basée sur GPT. Dans cette section, vous allez configurer le projet Angular, explorer sa structure et vous assurer que tout fonctionne correctement.

Installer la CLI angulaire

Si vous n'avez pas encore installé la CLI Angular, voici un bref récapitulatif :

1. Ouvrez votre terminal et exécutez la commande suivante pour installer la CLI globalement :

   node -v
   npm -v

1. Vérifiez l'installation :

   git init

Créez et explorez votre projet

1. Générer un nouveau projet :
   • Utilisez la CLI angulaire pour échafauder un nouveau projet :

   npm install -g @angular/cli

1. Accédez à votre répertoire de projets :
   • Une fois le projet créé, déplacez-vous dans le dossier du projet :

   ng version

Aperçu de la structure du projet

Angular génère une structure de projet par défaut. Voici les dossiers et fichiers clés :

• src/app :
  • Le dossier principal où réside le code de votre application.
  • Vous créerez ici des composants, des services et des modules.
• angular.json :
  • Le fichier de configuration de votre application Angular.
• package.json :
  • Liste toutes les dépendances et scripts de votre projet.
• node_modules :
  • Contient toutes les dépendances installées pour l'application.

Comprendre cette structure vous aidera à naviguer dans votre projet au fur et à mesure de votre développement.

Première exécution : testez votre configuration

1. Démarrez le serveur de développement Angular :

   node -v
   npm -v

1. Ouvrez votre navigateur et accédez à :

   git init

1. Vous devriez voir l'application Angular par défaut en cours d'exécution. Si la page se charge avec succès, votre configuration est terminée !

? Prochaines étapes : Une fois les bases en place, il est temps de commencer à créer les fonctionnalités de base de votre application de chat basée sur GPT dans la Section 5 : Créer l'application de chat.

Section 5 : Création de l'application de chat angulaire alimentée par GPT

Maintenant que votre projet Angular est configuré, il est temps de créer la fonctionnalité principale : l'application de chat alimentée par GPT. Dans cette section, vous allez créer un composant de chat, mettre en œuvre le service GPT et les connecter ensemble pour une expérience entièrement fonctionnelle.

Créer le composant de discussion

Les composants angulaires sont les éléments constitutifs de votre application. Suivez ces étapes pour créer un composant de discussion autonome :

1. Générer le composant :
   • Utilisez la CLI angulaire pour générer un composant de discussion autonome :

   npm install -g @angular/cli

1. Que se passe-t-il :
   • Cette commande crée les fichiers suivants dans src/app/components/chat/ :
     • chat.component.ts (logique et structure)
     • chat.component.html (modèle HTML)
     • chat.component.css (styles)

Mettre à jour le modèle de composant de discussion

Pour créer l'interface de chat, mettez à jour chat.component.html :

   ng version

Explication :

1. Injection de dépendances : Le GptService est injecté dans le composant via le constructeur.
2. Liaison bidirectionnelle : La variable userInput est liée au pour une gestion transparente des entrées.</li> <li> <strong>Intégration API</strong> : la fonction sendPrompt() appelle le service GPT, gère les réponses et met à jour la variable de réponse.</li> </ol> <h2> Créer le service GPT </h2> <p>Les services d'Angular gèrent les données et la logique qui peuvent être réutilisées entre les composants. Suivez ces étapes pour créer et configurer le service GPT :</p> <ol> <li> <strong>Générer le service</strong> : <ul> <li>Exécutez la commande suivante : </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <ol> <li> <strong>Mettre à jour la logique du service GPT</strong> : <ul> <li>Ouvrez src/app/services/gpt.service.ts et mettez-le à jour comme suit : </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> ng version </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Explication</strong> :</p> <ol> <li> <strong>HttpClient</strong> : utilisé pour envoyer des requêtes HTTP à l'API GPT d'OpenAI.</li> <li> <strong>generateResponse()</strong> : envoie l'invite de l'utilisateur à l'API et renvoie un observable avec la réponse.</li> <li> <strong>Clé API</strong> : remplacez « votre-clé-api-ici » par votre clé API OpenAI actuelle.</li> </ol> <h2> Styliser le composant de discussion </h2> <p>Ajoutez un style de base à chat.component.css :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Explication</strong> :</p> <ul> <li>Le conteneur de discussion centre l'interface de discussion.</li> <li>Les styles de zone de texte et de bouton garantissent la convivialité et l'esthétique.</li> </ul> <h2> Sécuriser votre clé API avec des variables d'environnement </h2> <p>Le codage en dur des données sensibles telles que les clés API dans vos fichiers de service est risqué. Une meilleure approche consiste à utiliser des <strong>variables d'environnement</strong> pour sécuriser vos clés. Cette section vous guidera sur la façon de configurer et d'utiliser les fichiers d'environnement dans votre projet Angular.</p> <h3> Étape 1 : Créer des fichiers d'environnement </h3> <ol> <li> Accédez au répertoire src/ de votre projet. </li> <li>Créez un nouveau dossier nommé environnements s'il n'existe pas déjà.</li> <li>Dans le dossier environnements/, créez deux fichiers : <ul> <li> environnement.ts : pour les paramètres de développement.</li> <li> environnement.prod.ts : Pour les paramètres de production.</li> </ul> </li> </ol> <h3> Étape 2 : ajoutez votre clé API </h3> <ol> <li>Ouvrez le fichier environnement.ts et définissez votre clé API : </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <ol> <li>Ouvrez le fichier environnement.prod.ts et ajoutez la même clé pour la production : </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <hr> <h3> Étape 3 : Mettre à jour le service GPT </h3> <p>Modifiez le fichier gpt.service.ts pour utiliser la variable d'environnement au lieu d'une clé API codée en dur :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> ng version </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <hr> <h3> Étape 4 : Empêcher la validation de données sensibles </h3> <ol> <li>Ouvrez le fichier .gitignore dans le répertoire racine de votre projet.</li> <li>Ajoutez la ligne suivante pour ignorer vos fichiers d'environnement : </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p>Cela garantit que vos clés API et vos données sensibles ne seront pas incluses dans le contrôle de version.</p> <hr> <h3> Étape 5 : Instructions de configuration de l'environnement de partage </h3> <p>Lorsque vous travaillez en équipe ou partagez le projet, fournissez des instructions claires (comme cette section) sur la façon de créer et de configurer les fichiers d'environnement. Évitez de partager de véritables clés API.</p> <hr> <p> ? <strong>Pourquoi utiliser des variables d'environnement ?</strong><br><br> Cette approche assure la sécurité de vos informations sensibles tout en permettant différentes configurations pour les environnements de développement et de production. C’est une bonne pratique pour le développement Web moderne.</p> <p> ? <strong>Prochaines étapes</strong> : Maintenant que le composant de chat et le service GPT sont prêts, vous allez intégrer le composant dans votre application dans la <strong>Section 6 : Test de votre application</strong>.</p> <h2> Section 6: Tester votre application </h2> <p> Maintenant que votre application de chat alimentée par GPT est construite, il est temps de le tester et de s'assurer que tout fonctionne comme prévu. Cette section vous guidera dans l'exécution de votre application localement, testera ses fonctionnalités et le dépannage des problèmes communs. </p> <h2> Exécutez l'application localement </h2> <ol> <li> Démarrez le serveur de développement: </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <ol> <li> Ouvrez votre navigateur et accédez à: </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <ol> <li> <strong> ce que vous devriez voir </strong>: </li> </ol> <p> <img src="https://img.php.cn/upload/article/000/000/000/173791657235976.png" alt="Image description" loading="lazy" style="max-width:90%" style="max-width:90%"> </p> <ul> <li> L'application angulaire par défaut doit se charger avec votre composant de chat personnalisé à alimentation GPT au centre. </li> <li> Si vous pouvez interagir avec l'interface de chat et obtenir des réponses de l'API, félicitations! Votre application fonctionne. </li> </ul> <h2> Interagir avec l'interface de chat </h2> <ol> <li> Entrez un message ou une question dans le champ de saisie de chat. </li> <li> Cliquez sur le bouton <strong> Envoyer </strong>. </li> <li> Attendez que l'API GPT réponde. La réponse doit s'afficher dans la zone de réponse sous l'entrée. </li> </ol> <p> <img src="https://img.php.cn/upload/article/000/000/000/173791657346022.png" alt="Image description" loading="lazy" style="max-width:90%" style="max-width:90%"> </p> <h2> Conseils de dépannage </h2> <p> Si quelque chose ne fonctionne pas comme prévu, utilisez la liste de contrôle suivante pour déboguer votre application: </p> <h3> Problèmes et solutions courantes </h3> <ol> <li> <strong> La page ne charge pas </strong>: <ul> <li> Vérifiez la sortie du terminal pour les erreurs lors de l'exécution de Ng. </li> <li> Assurez-vous que toutes les dépendances sont installées: </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> npm install -g @angular/cli </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <ol> <li> <p> <strong> Aucune réponse de l'API GPT </strong>: </p> <ul> <li> Vérifiez votre clé API dans le fichier Environment.ts. </li> <li> Vérifiez les fautes de frappe dans votre URL de service GPT (https://api.openai.com/v1/chat/completions). </li> <li> Assurez-vous que vous avez inclus les en-têtes nécessaires (autorisation et type de contenu). </li> </ul> </li> <li> <p> <strong> CORS Problèmes </strong>: </p> <ul> <li> Assurez-vous que votre navigateur ne bloque pas les demandes d'API en raison du partage des ressources d'origine transversale (COR). </li> <li> Si nécessaire, utilisez une extension de navigateur ou configurez votre backend pour autoriser les COR. </li> </ul> </li> <li> <p> <strong> Erreur dans la console </strong>: </p> <ul> <li> Recherchez des messages d'erreur dans la console du développeur du navigateur. </li> <li> Si l'erreur se rapporte à l'API, revérifiez votre configuration de service. </li> </ul> </li> <li> <p> <strong> Problèmes de style </strong>: </p> <ul> <li> Assurez-vous que les styles de chat.component.css sont appliqués correctement. </li> <li> Utilisez des outils de développeur de navigateur pour inspecter le DOM et déboguer CSS. </li> </ul> </li> </ol> <p>? <strong> Pro Tipt </strong>: Vérifiez régulièrement le terminal et la console du navigateur pour tout avertissement ou erreur. Ceux-ci fournissent souvent des conseils utiles pour le dépannage. </p> <p>? <strong> Étapes suivantes </strong>: Une fois que votre application est testée et fonctionnelle, vous pouvez l'améliorer davantage dans <strong> Section 7: Prendre les étapes suivantes </strong>. </p> <h2> Section 7: Prendre les prochaines étapes </h2> <p> Félicitations! Vous avez réussi à construire et à tester une application de chat alimentée par GPT utilisant Angular. Maintenant, explorons les améliorations et les techniques spécifiques aux angulaires pour élever votre application et développer vos compétences. </p> <h2> Améliorer votre application </h2> <ol> <li> <p> <strong> Indicateurs de chargement </strong>: </p> <ul> <li> Améliorez l'expérience utilisateur en ajoutant un fileur de chargement ou un message en attendant une réponse. </li> <li> Utilisez la directive Angular * ngif pour afficher un spinner conditionnellement pendant les appels HTTP. </li> </ul> </li> <li> <p> <strong> Style avec matériau angulaire </strong>: </p> <ul> <li> Améliorez l'apparence de votre application avec des composants de matériau angulaire. </li> <li> Installez le matériau angulaire: </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> node -v npm -v </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <ul> <li> Ajouter des composants préfilés comme des boutons, des champs d'entrée et des boîtes de dialogue pour un look poli. </li> <li>? Çons <strong> Ressource </strong>: Documentation du matériel angulaire. </li> </ul> <ol> <li> <strong> Validation du formulaire </strong>: <ul> <li> Implémenter la validation des entrées des utilisateurs pour garantir que les invites répondent aux critères (par exemple, non vides, limites de caractère). </li> <li> Utilisez Formbuilder d'Angular et des formulaires réactifs pour gérer l'état du formulaire et la logique de validation. </li> </ul> </li> </ol> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> git init </pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <ol> <li> <p> <strong> Réutilisabilité avec les composants partagés </strong>: </p> <ul> <li> Extraire des éléments d'interface utilisateur réutilisables, tels que des boutons ou des champs d'entrée, dans des composants partagés. </li> <li> Utilisez ces composants sur plusieurs parties de votre application pour maintenir la cohérence. </li> </ul> </li> <li> <p> <strong> routage </strong>: </p> <ul> <li> Ajoutez plusieurs pages à votre application, comme une page de paramètres pour la personnalisation ou une page d'aide pour les conseils des utilisateurs. </li> <li> Utilisez un routeur angulaire pour configurer et naviguer entre ces pages. </li> <li>? Çons <strong> Ressource </strong>: Guide de routage angulaire. </li> </ul> </li> <li> <p> <strong> Gestion de l'État </strong>: </p> <ul> <li> Gérer l'état à l'échelle de l'application, tels que l'historique de chat ou les préférences des utilisateurs, en utilisant des services angulaires ou des bibliothèques de gestion d'État comme NGRX. </li> <li>? Çons <strong> Ressource </strong>: Introduction à ngrx. </li> </ul> </li> </ol> <h2> Connexion à d'autres points de terminaison </h2> <p> Apprendre à travailler avec les API est une compétence cruciale dans le développement angulaire. Pratiquez en intégrant des points de terminaison supplémentaires dans votre application: </p> <ol> <li> <p> <strong> Intégration de l'API REST </strong>: </p> <ul> <li> Expérimentez la connexion aux API publiques, telles que les API météorologiques ou les nouvelles. </li> <li> Utilisez HttpClient d'Angular pour récupérer les données et l'afficher dynamiquement dans votre application. </li> <li>? Çons <strong> Ressource </strong>: Guide HttpClient angulaire. </li> </ul> </li> <li> <p> <strong> opérations crud </strong>: </p> <ul> <li> Créez une fonctionnalité simple pour créer, lire, mettre à jour et supprimer les données à l'aide d'une API RESTFul. </li> <li> Pratiquez des formulaires de construction pour les entrées, des listes pour l'affichage des données et l'édition / supprimer les fonctionnalités. </li> </ul> </li> <li> <p> <strong> Gestion des erreurs </strong>: </p> <ul> <li> Apprenez à gérer les erreurs de l'API avec élégance en utilisant l'opérateur Catcherror d'Angular dans RXJS. </li> <li> Afficher les messages d'erreur conviviaux pour une meilleure convivialité. </li> </ul> </li> </ol> <h2> Partagez votre travail </h2> <ol> <li> <p> <strong> Déployez votre application </strong>: </p> <ul> <li> hébergez votre application à l'aide de plates-formes comme Firebase, Vercel ou Netlify. </li> <li>? Çons <strong> Ressource </strong>: Guide de déploiement angulaire. </li> </ul> </li> <li> <p> <strong> collaborer avec les autres </strong>: </p> <ul> <li> Partagez votre code sur GitHub et invitez les commentaires ou les contributions de la communauté angulaire. </li> <li> Inclure un fichier de réadme avec des instructions de configuration et une vue d'ensemble du projet. </li> </ul> </li> </ol> <p>? <strong> Étapes suivantes </strong>: <br> Continuez à affiner votre application, à expérimenter les fonctionnalités d'Angular et à créer plus de projets pour approfondir votre compréhension. Angular propose des outils puissants pour créer des applications Web dynamiques et évolutives - les maîtriser est votre prochain jalon! </p> <h2> Section 8: Conclusion </h2> <p> Vous avez parcouru un long chemin! De la mise en place de votre environnement de développement à la construction et au test de votre application de chat alimentée par GPT, vous avez réussi à faire vos premiers pas dans le développement angulaire. En cours de route, vous avez acquis des compétences critiques comme la création de composants, la gestion des services et l'intégration des API. </p> <h2> Ce que vous avez accompli </h2> <ul> <li> <strong> a construit une application angulaire fonctionnelle </strong>: Vous avez créé une interface de chat alimentée par GPT en utilisant le framework et les outils puissants d'Angular. </li> <li> <strong> Fondamentaux angulaires apprises </strong>: Des composants à l'injection de dépendance, vous avez exploré les caractéristiques de base d'Angular. </li> <li> <strong> connecté aux API externes </strong>: Vous avez intégré une API tierce et géré efficacement les demandes HTTP. </li> <li> <strong> a suivi les meilleures pratiques </strong>: En utilisant des variables environnementales et des techniques de développement sécurisées, vous avez adopté des normes de codage professionnelles. </li> </ul> <h2> Appel à l'action </h2> <p> Votre voyage dans le développement angulaire ne fait que commencer. Voici comment vous pouvez continuer à progresser: </p> <ol> <li> <p> <strong> Pratiquez régulièrement </strong>: </p> <ul> <li> Créez plus de projets pour consolider votre compréhension des concepts angulaires. </li> <li> Expérimentez avec des fonctionnalités telles que le routage, la gestion de l'État et les animations. </li> </ul> </li> <li> <p> <strong> Explorer des sujets angulaires avancés </strong>: </p> <ul> <li> découvrez le chargement paresseux, l'optimisation des performances et le test des applications angulaires. </li> <li>? Çons <strong> Ressource </strong>: <ul> <li> Sujets avancés angulaires. </li> <li> Angular & Ai </li> </ul> </li> </ul> </li> <li> <p> <strong> Rejoignez la communauté </strong>: </p> <ul> <li>Interagissez avec d'autres développeurs Angular pour obtenir de l'inspiration et du soutien.</li> <li>Contribuez à des projets Angular open source pour perfectionner vos compétences.</li> </ul> </li> <li> <p><strong>Restez à jour</strong> :</p> <ul> <li>Angular est un framework en constante évolution. Suivez le blog officiel d'Angular et les chaînes communautaires pour rester informé des nouvelles fonctionnalités et des meilleures pratiques.</li> </ul> </li> </ol> <h2> Encouragement </h2> <p>Commencer quelque chose de nouveau peut être intimidant, mais rappelez-vous : <strong>chaque expert était autrefois un débutant.</strong> Les efforts que vous avez déployés pour apprendre Angular porteront leurs fruits à mesure que vous continuerez à construire et à grandir. Avec les ressources et les connaissances dont vous disposez désormais, vous êtes bien équipé pour entreprendre des projets plus ambitieux.</p> <p> ? <strong>Keep Building</strong> : Le monde du développement Web est vaste et regorge d'opportunités. Angular n'est que le début : approfondissez, expérimentez et donnez vie à vos idées. N'hésitez pas à poser des questions le cas échéant ou à apporter des contributions, vous êtes les bienvenus !</p> <blockquote> <p> ? <strong>Explorez le code</strong> : Le code source complet de ce projet est disponible sur GitHub. N'hésitez pas à cloner, modifier ou contribuer au projet !</p> </blockquote> <p>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!</p> </div> </div> <div style="height: 25px;"> <div style="display: inline-flex;float: right; color:#333333;">source：dev.to</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/fr/faq/1796761348.html" title="Acheter des comptes PayPal vérifiés"> <span>Article précédent：Acheter des comptes PayPal vérifiés</span> </a> <a href="https://www.php.cn/fr/faq/1796761352.html" title="Acheter des comptes Square vérifiés"> <span>Article suivant：Acheter des comptes Square vérifiés</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Déclaration de ce site Web</div> <div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers articles par auteur</div> <ul> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers numéros</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176411.html" target="_blank" title="function_exists() ne peut pas déterminer la fonction personnalisée" class="wdcdcTitle">function_exists() ne peut pas déterminer la fonction personnalisée</a> <a href="https://www.php.cn/fr/wenda/176411.html" class="wdcdcCons">Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-29 11:01:01</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>3</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2626</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176410.html" target="_blank" title="Comment afficher la version mobile de Google Chrome" class="wdcdcTitle">Comment afficher la version mobile de Google Chrome</a> <a href="https://www.php.cn/fr/wenda/176410.html" class="wdcdcCons">Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-23 00:22:19</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>11</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2751</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176407.html" target="_blank" title="La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas." class="wdcdcTitle">La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas.</a> <a href="https://www.php.cn/fr/wenda/176407.html" class="wdcdcCons">Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-19 15:37:47</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2334</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176406.html" target="_blank" title="Il n'y a aucune sortie dans la fenêtre parent" class="wdcdcTitle">Il n'y a aucune sortie dans la fenêtre parent</a> <a href="https://www.php.cn/fr/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-18 23:52:34</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2196</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/fr/wenda/176405.html" target="_blank" title="Où sont les didacticiels sur la cartographie mentale CSS ?" class="wdcdcTitle">Où sont les didacticiels sur la cartographie mentale CSS ?</a> <a href="https://www.php.cn/fr/wenda/176405.html" class="wdcdcCons">Didacticiel</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-16 10:10:18</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2303</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Rubriques connexes</div> <a href="https://www.php.cn/fr/faq/zt" target="_blank">Plus> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/rgzndjbgn"><img src="https://img.php.cn/upload/subject/202407/22/2024072213313958393.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Quel est le concept de base de l'intelligence artificielle" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/rgzndjbgn" class="title-a-spanl" title="Quel est le concept de base de l'intelligence artificielle"><span>Quel est le concept de base de l'intelligence artificielle</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/sxtscygdbzff"><img src="https://img.php.cn/upload/subject/202407/22/2024072212332926826.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Étapes pour supprimer l'un des systèmes doubles" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/sxtscygdbzff" class="title-a-spanl" title="Étapes pour supprimer l'un des systèmes doubles"><span>Étapes pour supprimer l'un des systèmes doubles</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/gq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214384374719.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Qu'est-ce qu'un lecteur optique" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/gq" class="title-a-spanl" title="Qu'est-ce qu'un lecteur optique"><span>Qu'est-ce qu'un lecteur optique</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/slsforbiddenj"><img src="https://img.php.cn/upload/subject/202407/22/2024072213430040129.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="403solution interdite" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/slsforbiddenj" class="title-a-spanl" title="403solution interdite"><span>403solution interdite</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/wxpyqlgdhxygd"><img src="https://img.php.cn/upload/subject/202407/22/2024072211491952895.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="WeChat Moments, deux tirets et un point" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/wxpyqlgdhxygd" class="title-a-spanl" title="WeChat Moments, deux tirets et un point"><span>WeChat Moments, deux tirets et un point</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/consolejksgmd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214231551829.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="A quoi sert l'interface de la console ?" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/consolejksgmd" class="title-a-spanl" title="A quoi sert l'interface de la console ?"><span>A quoi sert l'interface de la console ?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/cydjymjs"><img src="https://img.php.cn/upload/subject/202407/22/2024072212140985046.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction aux noms de domaine de premier niveau couramment utilisés" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/cydjymjs" class="title-a-spanl" title="Introduction aux noms de domaine de premier niveau couramment utilisés"><span>Introduction aux noms de domaine de premier niveau couramment utilisés</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/fr/faq/mobiwjzmdk"><img src="https://img.php.cn/upload/subject/202407/22/2024072212242360144.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment ouvrir le fichier mobi" /> </a> <a target="_blank" href="https://www.php.cn/fr/faq/mobiwjzmdk" class="title-a-spanl" title="Comment ouvrir le fichier mobi"><span>Comment ouvrir le fichier mobi</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">Recommandations populaires</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="que signifie js" href="https://www.php.cn/fr/faq/482163.html">que signifie js</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment convertir une chaîne en tableau en js ?" href="https://www.php.cn/fr/faq/461802.html">Comment convertir une chaîne en tableau en js ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment actualiser la page en utilisant javascript" href="https://www.php.cn/fr/faq/473330.html">Comment actualiser la page en utilisant javascript</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment supprimer un élément dans le tableau js" href="https://www.php.cn/fr/faq/475790.html">Comment supprimer un élément dans le tableau js</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment utiliser la fonction sqrt" href="https://www.php.cn/fr/faq/415276.html">Comment utiliser la fonction sqrt</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Tutoriels populaires</div> <a target="_blank" href="https://www.php.cn/fr/course.html">Plus> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Tutoriels associés <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Recommandations populaires<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Derniers cours<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="https://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div>1430567 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/74.html" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" href="https://www.php.cn/fr/course/74.html">Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine</a> <div class="wzrthreerb"> <div>4283407 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="https://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div>2604422 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="https://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div>512522 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/2.html" title="Tutoriel d'introduction PHP base zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutoriel d'introduction PHP base zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel d'introduction PHP base zéro" href="https://www.php.cn/fr/course/2.html">Tutoriel d'introduction PHP base zéro</a> <div class="wzrthreerb"> <div>871040 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="https://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div >1430567 temps d'étude</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="https://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div >2604422 temps d'étude</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="https://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div >512522 temps d'étude</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/901.html" title="Introduction rapide au développement web front-end" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Introduction rapide au développement web front-end"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Introduction rapide au développement web front-end" href="https://www.php.cn/fr/course/901.html">Introduction rapide au développement web front-end</a> <div class="wzrthreerb"> <div >216532 temps d'étude</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/234.html" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Maîtrisez les didacticiels vidéo PS à partir de zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" href="https://www.php.cn/fr/course/234.html">Maîtrisez les didacticiels vidéo PS à partir de zéro</a> <div class="wzrthreerb"> <div >907061 temps d'étude</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="https://www.php.cn/fr/course/1648.html" title="[Web front-end] Démarrage rapide de Node.js" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Démarrage rapide de Node.js"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Démarrage rapide de Node.js" href="https://www.php.cn/fr/course/1648.html">[Web front-end] Démarrage rapide de Node.js</a> <div class="wzrthreerb"> <div >8705 temps d'étude</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/1647.html" title="Collection complète de cours full-stack de développement Web étranger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Collection complète de cours full-stack de développement Web étranger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Collection complète de cours full-stack de développement Web étranger" href="https://www.php.cn/fr/course/1647.html">Collection complète de cours full-stack de développement Web étranger</a> <div class="wzrthreerb"> <div >6894 temps d'étude</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/1646.html" title="Aller au langage pratique GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Aller au langage pratique GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Aller au langage pratique GraphQL" href="https://www.php.cn/fr/course/1646.html">Aller au langage pratique GraphQL</a> <div class="wzrthreerb"> <div >5779 temps d'étude</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/1645.html" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" href="https://www.php.cn/fr/course/1645.html">Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape</a> <div class="wzrthreerb"> <div >774 temps d'étude</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/fr/course/1644.html" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" href="https://www.php.cn/fr/course/1644.html">Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures</a> <div class="wzrthreerb"> <div >29439 temps d'étude</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Derniers téléchargements</div> <a href="https://www.php.cn/fr/xiazai">Plus> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">effets Web <div></div></div> <div class="swiper-slide" data-id="twof">Code source du site Web<div></div></div> <div class="swiper-slide" data-id="threef">Matériel du site Web<div></div></div> <div class="swiper-slide" data-id="fourf">Modèle frontal<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code de contact du formulaire de message d'entreprise jQuery" href="https://www.php.cn/fr/toolset/js-special-effects/8071">[bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets de lecture de boîte à musique HTML5 MP3" href="https://www.php.cn/fr/toolset/js-special-effects/8070">[Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets spéciaux du menu de navigation d'animation de particules cool HTML5" href="https://www.php.cn/fr/toolset/js-special-effects/8069">[Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code d'édition par glisser-déposer du formulaire visuel jQuery" href="https://www.php.cn/fr/toolset/js-special-effects/8068">[bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code du lecteur de musique Kugou imitation VUE.JS" href="https://www.php.cn/fr/toolset/js-special-effects/8067">[Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Jeu de boîte de poussée HTML5 classique" href="https://www.php.cn/fr/toolset/js-special-effects/8066">[effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="défilement jQuery pour ajouter ou réduire des effets d'image" href="https://www.php.cn/fr/toolset/js-special-effects/8065">[Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effet de zoom de survol de la couverture de l'album personnel CSS3" href="https://www.php.cn/fr/toolset/js-special-effects/8064">[Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8328" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8327" title="Modèle de page de guide de CV personnel aux couleurs fraîches" target="_blank">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8326" title="Modèle Web de CV de travail créatif de concepteur" target="_blank">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8325" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8324" title="Modèle HTML5 réactif pour les établissements de services éducatifs" target="_blank">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8323" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne" target="_blank">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8322" title="La technologie informatique résout le modèle de site Web d'entreprise Internet" target="_blank">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8321" title="Modèle de site Web de service de trading de devises de style violet" target="_blank">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3078" target="_blank" title="Matériau vectoriel d'éléments d'été mignons (EPS+PNG)">[Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3077" target="_blank" title="Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)">[Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3076" target="_blank" title="Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)">[image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3075" target="_blank" title="Matériau vectoriel de chapeau de graduation doré (EPS+PNG)">[Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3074" target="_blank" title="Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)">[Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3073" target="_blank" title="Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes">[Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3072" target="_blank" title="Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)">[image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-materials/3071" target="_blank" title="Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)">[Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8328" target="_blank" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8327" target="_blank" title="Modèle de page de guide de CV personnel aux couleurs fraîches">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8326" target="_blank" title="Modèle Web de CV de travail créatif de concepteur">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8325" target="_blank" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8324" target="_blank" title="Modèle HTML5 réactif pour les établissements de services éducatifs">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8323" target="_blank" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8322" target="_blank" title="La technologie informatique résout le modèle de site Web d'entreprise Internet">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/fr/toolset/website-source-code/8321" target="_blank" title="Modèle de site Web de service de trading de devises de style violet">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p> </div> <div class="footermid"> <a href="https://www.php.cn/fr/about/us.html">À propos de nous</a> <a href="https://www.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a> <a href="https://www.php.cn/fr/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1738439183"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> </body> </html>