Mon article
Première section
Premier paragraphe
Deuxième section
Deuxième paragraphe
Troisième paragraphe
Salut !
Tu es sur l'accueil de mon site (index.php ). Tu veux aller sur une autre page ?
Re - bonjour !
Je me souviens de toi ! Tu t'appelles !
Et tu as ans.
Now you see me
--- # Séance 6 : Routes et API | Vue.js BUT Sur cette séance nous allons réexploiter les éléments vus précédement pour mettre en place un lien sur chaque pays pour arriver sur une fiche détaillée. [hashtag](https://cours.davidannebicque.fr/vue.js-but/but2/seance-6-routes-et-api#objectifs) Objectifs ----------------------------------------------------------------------------------------------------------- * Créer une route qui prend en paramètre un pays * Ajouter un lien sur chaque pays * Modifier la vue FIchePays.vue pour afficher les informations du pays en fonction du paramètre passé dans l'URL * Mettre un minimum en forme les données du pays (image du drapeau), nom du pays, langues parlées, monnaie, capitale, superficie, etc. Résultat attendu [PreviousSéance 4-5 : Composants et APIchevron-left](https://cours.davidannebicque.fr/vue.js-but/but2/seance-4-5-composants-et-api) [NextSéance 7 : Evénements et Formulaireschevron-right](https://cours.davidannebicque.fr/vue.js-but/but2/seance-7-evenements-et-formulaires) Last updated 1 year ago --- # FAQ | Programmation Orientée Objet en PHP (B.U.T.) circle-info Cette partie évoluera en fonction de vos questions récurrentes, et des problèmes rencontrés [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/faq#utiliser-limage-docker-mmi) Utiliser l'image Docker MMI ----------------------------------------------------------------------------------------------------------------------------------------------- Patrice Gommery a créé une image Docker avec Apache2, Mariadb, PHP8.1 pour les MMI. Il faut installer docker sur votre système et démarré Docker. Ensuite : 1. Créer un dossier www pour la persistance des données (c'est à dire qu'elles ne soient pas effacées dès que vous arrêté docker). Vous pouvez créer le dossier ou vous voulez (mais évitez le bureau !) 2. Dans ce dossier www, créez un sous-dossier html et dans celui-ci une page index.php avec le contenu (au final on doit avoir : `???/www/html/index.php`) **Ces deux étapes ne sont à faire que la première fois que l'on crée le container.** Le dossier /var/www/html contiendra ensuite toutes les pages et l'arborescence que vous voulez exploiter en cours. Les fichiers ne seront pas effacés lors de l'arrêt du container. 1. On crée le container : (Exemple sous Windows, seul le chemin du dossier sera différent sur un mac ou sous linux) `docker run -dti --name lampbut1 -v C:\Users\VotreUser\BUT1\www:/var/www -v datalampbut1:/var/lib/mysql -p 8080:80 mmi3docker/lampbut1` Quelques explications : * Docker run crée le container (et le démarre) * \-dti (pour que le container soit exécuter en arrière-plan et accessible par un terminal interactif, et aussi pour qu'il ne s'arrête pas tout seul) * \--name lampbut1 (lampbut1 sera le nom du container, vous pouvez l'appeler comme vous voulez) * \-v C:\\Users\\VotreUser\\BUT1\\www :/var/www ( Création d'un volume pour la persistance des données après l'arrêt du container . * C:\\Users\\VotreUser\\BUT1\\www est votre dossier local, donc à adapter selon votre configuration * /var/www est le dossier du container dans lequel apache (et d'autres services stockent les données). Pour être plus précis apache stocke par défaut dans /var/www/html, mais j'ai laissé /var/www pour pouvoir créer d'autres dossiers en hébergement, donc ne changer pas, laissez /var/www) * \-v datalampbut1:/var/lib/mysql (Création d'un volume persistant pour les données de mysql. là pas besoin de chemin en local, Docker va créer lui-même le volume en local et le nommera datalampbut1. Vous pouvez le nommer autrement si vous voulez , mais ne changer pas /var/lib/mysql ça c'est le dossier de stockage des bases sur le container) * \-p 8080:80 (Redirection du port 80 du container sur le port 8080 en local, vous pouvez bien sur mettre autre chose que 8080 si vous voulez) * mmi3docker/lampbut1 est le nom du depot Docker sur lequel j'ai stocké l'image (et qui sera donc recopier sur votre poste lors de la première création d container) 1. Comme tous les services sont dans le même container (ce qui n'est pas forcément une bonne pratique, mais pour commencer en S1 c'est très bien et plus facile), il faut lancer les services manuellement sur le container. Rien de compliqué, saisissez simplement la commande : docker exec lampbut1 /root/bootmmi.sh (ou lampbut1 est le nom que vous avez donné au container) Voilà c'est tout. Votre container est créé et lancé. Pour vérifier, ouvrez un navigateur avec l'URL : localhost:8080 (ou le port que vous avez mis au démarrage) Si vous avez fait correctement les étapes 1 et 2, vous devriez afficher la configuration de php 8.1 active sur le serveur web. Si vous voulez créer d'autres pages et les tester, créez-les dans votre dossier www/html c'est aussi simple que ça. Pour voir si la base de données fonctionne : localhost:8080/adminer (le login est adminer, le mot de passe : 123456) Si vous voulez manipulez les bases en lignes de commande : docker exec -ti lampbut1 mysql Si vous voulez accéder au shell: docker exec -ti lampbut1 /bin/bash (Attention si vous créez des dossiers et fichiers ailleurs que dans /var/www, rien ne sera conservé à l'arrêt du container, idem si vous installez de nouveaux paquets) Pour arrêter le container : docker stop lampbut1 Pour le relancer docker start lampbut1 (Si vous avez créé des pages ou une base de données, vous pouvez constater que tout est encore là) [PrécédentOrganisation du courschevron-left](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php) [SuivantSéance A : Introduction à la POOchevron-right](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-1) Mis à jour il y a 3 ans --- # Séance A : Introduction à la POO | Programmation Orientée Objet en PHP (B.U.T.) CM1 [Programmation Orientée Objetpresentations.davidannebicque.frchevron-right](https://presentations.davidannebicque.fr/r313.html) Support de cours [PrécédentFAQchevron-left](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/faq) [SuivantSéance B : Concepts de la POOchevron-right](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2) Mis à jour il y a 4 mois --- # Séance E : Héritage & Encapsulation | Programmation Orientée Objet en PHP (B.U.T.) [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-5#cours) Cours -------------------------------------------------------------------------------------------------------------------- Nous avons vu dans la séance 3, le principe de l’encapsulation et dans la séance 4 le principe de l’héritage. Voyons maintenant comment combiner les deux. Principe : L’encapsulation consiste à déclarer **PRIVATE** les propriétés de la classe. Cela reste vrai qu’il y ait héritage au non. Mais dans le cas de l’héritage, les propriétés déclarées **PRIVATE** ne sont accessibles que dans la classe déclarant ces propriétés. Une classe Fille ne peut accéder aux propriétés héritées que si elles ont été déclarées en **PROTECTED**. Donc dans le cas de l'héritage on choisira de déclarer les propriétés en **PROTECTED** pour faciliter la manipulation des propriétés par les classes filles. [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-5#pour-resumer-la-visibilite-des-proprietes) Pour résumer la visibilité des propriétés -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Les visibilités suivantes existent en PHP et peuvent s'appliquer aux propriétés et aux méthodes. * **public** pourra être appelé partout, on évitera d'utiliser cette solution sur les propriétés * **private** ne pourra être appelé que dans la classe. * **protected** ne pourra être appelé que dans la classe et les classes qui en hérite. [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-5#exercice) Exercice -------------------------------------------------------------------------------------------------------------------------- La classe **Vehicule** possède les propriétés suivantes : * marque * puissance * kilometrage Les méthodes sont * Le constructeur * La méthode `parcourir($distance)` qui cumule les kilomètres parcourus par le véhicule * La méthode `lire_caracteristiques()` qui retourne les valeurs des propriétés du véhicule. **Nous avons déjà écrit cette classe dans la** [**séance 2**arrow-up-right](https://app.gitbook.com/s/-LjKrFSyq65TEN9dTgPU/seance2/sujet.md) **. Vous pouvez/devez la reprendre et modifier la visibilité des propriétés** La classe Voiture hérite de Vehicule. * Elle possède en plus la propriété privée type qui permet de distinguer les berlines, des SUV, des 4x4 et des breaks (‘berline’,’suv’,’4x4’,’break’). Attention, seules ces valeurs sont possibles. Tout autre valeur est invalide et affichera une erreur. * La méthode `lire_type()` permet de connaître le type de véhicule. ### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-5#a-faire) A FAIRE * Créez les deux classes dans un fichier nommé vehicule.php * Créez une application td5.php : * Une instance de Vehicule. Exemple de votre choix * Deux instances de Voiture, Exemples à votre convenance. * Testez votre application en utilisant les différentes méthodes des différentes instances. * Que se passe-t-il lorsque l'on appelle la méthode lire\_caractéristique() sur une Voiture ? Modifiez votre code pour que lire\_caractéristique() puisse afficher toutes les informations de la voiture. * Créez une nouvelle classe, Bus, qui héritera de Véhicule et qui contiendra comme propriétés le nombre de place assise et le nombre d'essieux (les axes portant les roues). [PrécédentCorrections séance Dchevron-left](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/corrections-seance-d) [SuivantSéance F : Héritage multiplechevron-right](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-6) Mis à jour il y a 1 an * [Cours](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-5#cours) * [Pour résumer la visibilité des propriétés](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-5#pour-resumer-la-visibilite-des-proprietes) * [Exercice](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-5#exercice) * [A FAIRE](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-5#a-faire) --- # Séance B : Concepts de la POO | Programmation Orientée Objet en PHP (B.U.T.) [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#objectifs) Objectifs ---------------------------------------------------------------------------------------------------------------------------- * Mettre en œuvre les concepts de propriété et de méthode. * Mettre en œuvre les concepts de classe et d’objet * Construire une application PHP Orienté Objet circle-info Pour les TD et TP de POO nous allons travailler en local pour gagner en efficacité et éviter de devoir uploader le code sur un serveur pour tester. Le plus simple est d'utiliser l'image docker que vous avez créé en WR314 : https://docs.mmi-troyes.fr/books/wr314-2025/page/seance01-container-buts3. Vous pouvez aussi utiliser une version logiciel tel que _WampServer_ ou _Xamp_ pour Windows, ou _MAMP_ pour MacOs, si vous rencontrez des difficultés avec Docker. [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#enonce-et-travail-a-faire) Enoncé et travail à faire ------------------------------------------------------------------------------------------------------------------------------------------------------------ ### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#exercice-1) Exercice 1 #### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#les-proprietes) **Les propriétés** Un Véhicule est un **OBJET** du monde réel. La classe se caractérise par : * Sa marque (du texte) * Sa puissance en CV (un nombre entier) * Son kilométrage (un nombre décimal) #### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#les-methodes) **Les méthodes** Utiliser un véhicule a pour effet d’augmenter la valeur du kilométrage. On souhaite pouvoir afficher les caractéristiques du véhicule #### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#programmation) **Programmation** * Le code de la classe _Vehicule_ (avec une majuscule) doit être enregistré dans le fichier V**ehicule.php** * Le code de l’application doit être enregistré dans le fichier **tp1\_vehicule.php**. * Utilisez la commande _require_ pour appeler la classe _Vehicule_ dans l’application. * Ecrire la classe pour définir les propriétés et les méthodes de l’objet _Vehicule_ * Ecrire une application : * qui instanciera les deux véhicules suivants Nom du véhicule marque puissance kilometrage vehicule1 RENAULT 90 15000 vehicule2 PEUGEOT 110 20000 * qui affiche les caractéristiques des deux véhicules * qui modifie la puissance de la vehicule1 : nouvelle valeur 110 * qui affiche le kilométrage des véhicules après un déplacement : le vehicule1 parcoure 3500 km et la vehicule2 parcoure 1500 km. ### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#exercice-2) Exercice 2 Considérant qu'un chien est caractérisé par sa race, son âge et son poids, définissez une classe permettant de le représenter. Un chien est par ailleurs un animal qui vieillit, et qui peut prendre du poids. On peut afficher toutes les caractéristiques des chiens. 1. Définir la classe Chien 2. Créer le fichier tp1\_chien.php pour tester la classe. 3. Créer les deux chiens suivants : Nom du chien Race Age Poids Chien1 Labrador 4 25 Chien2 Berger Allemand 6 20 Ecrire le code permettant de réaliser les étapes suivantes : * Afficher les données des chien1 et chien2 * Le chien1 prend un an de plus (c'est son anniversaire :)) * Le chien2 mange et grossit de 1,5Kg * Le chien1 perd 2kg * A chaque étape afficher les informations du chien. [PrécédentSéance A : Introduction à la POOchevron-left](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-1) [SuivantSéance C : Encapsulationchevron-right](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-3) Mis à jour il y a 5 mois * [Objectifs](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#objectifs) * [Enoncé et travail à faire](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#enonce-et-travail-a-faire) * [Exercice 1](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#exercice-1) * [Exercice 2](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2#exercice-2) --- # Séance C : Encapsulation | Programmation Orientée Objet en PHP (B.U.T.) #### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-3#rappels-de-cours) Rappels de Cours L’encapsulation consiste à déclarer les propriétés (attributs) en **private** (ou protected) au lieu de public. **Pourquoi ?** Pour l’intégrité des données, c’est-à-dire pour que les propriétés ne prennent pas n’importe quelles valeurs. Le programmeur d’une classe va ainsi construire un code fiable. Le programmeur utilisant de cette classe n’aura pas à se préoccuper de l’intégrité du code qu’il utilise. L’unique façon d’assurer d’y arriver est donc de rendre inaccessible les attributs sauf en créant des méthodes publiques qui permettront de s’assurer que les valeurs prises restes dans celles admises. Ces méthodes filtrent donc l’usage des attributs. On appelle une méthode publique qui permet d'accéder à une propriété un _getter_ (car commence en général par getXxxx) ou un _accesseur_, et on nomme une méthode publique qui permet de définir ou de modifier une propriété un _setter_ (car commence en général par setXxxx) ou un _mutateur_. Remarque : il est possible de déclarer des méthodes privées (qui ne seront utilisée que dans la classe elle même). Cela permet de renforcer la stabilité du code et ces évolutions. #### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-3#objectifs-de-la-seance) Objectifs de la séance * Comprendre le concept d’encapsulation. * Mettre en œuvre l’encapsulation #### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-3#exercice-n-1) EXERCICE N°1 Voici le code la classe Personne. personne.php Copier nom=$n; $this->prenom=$p; $this->age=$a; } // Définition du comportement sePresente() public function sePresente(): string { return 'Je m\'appelle '.$this->prenom.' '.$this->nom.' et j\'ai '.$this->age.' ans '; } } ?> Les propriétés sont déclarées **private**. Voici le code de l’application seance3\_exo1.php. A FAIRE * Créez les deux fichiers personne.php et seance3\_exo1.php. * Testez seance3\_exo1.php et répondez aux questions * Pourquoi l’exécution du code de seance3\_exo1.php renvoie une erreur ? * Donnez une solution simple pour permettre l’exécution normale de ce code #### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-3#exercice-2) EXERCICE 2 Nous allons ici modifier le code de la classe Personne pour répondre à un nouveau cahier des charges. Le nom d’une personne sera obligatoirement en majuscules. Le programmeur qui utilisera cette classe pourra créer une instance sans se soucier de cette contrainte. C’est donc à la classe de gérer conversion du nom en majuscules. Voici comment. Code de la classe Personne2 Voici le code de l’application seance3\_exo2.php A FAIRE * Créez une nouvelle version du code de la classe (Personne2) et de l’application (seance3\_exo2) * Testez seance3\_exo2.php #### [hashtag](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-3#exercice-n-3) Exercice N°3 Nous allons écrire la classe connexion\_sql qui permet de gérer la connexion à des bases de données MYSQL. Chaque fois que nous aurons besoin de gérer une connexion à une base de données, il suffira de créer une instance de cette classe. L’exercice proposé se limitera à quelques propriétés et quelques méthodes. La classe ne sera donc pas opérationnelle. Mais sa programmation devra nous permettre d’assimiler le concept d’encapsulation. **Ecrire la classe ConnexionSQL :** Les propriétés * adresseip : adresse IP du serveur * nombase : nom de la base de données * utilisateur : nom de l’utilisateur * mdp : mot de passe Les méthodes * constructeur * lire\_connexion qui retourne adresseip, nombase et utilisateur. **Ecrire l’application seance3\_exo3.php** * Testez le code **Questions complémentaires** * modifier la classe Connexion\_SQL pour vous assurer que l'IP donnée par l'utilisateur est dans un format valide. Sinon, afficher un message d'erreur. [PrécédentSéance B : Concepts de la POOchevron-left](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-2) [SuivantSéance D : Héritagechevron-right](https://cours.davidannebicque.fr/programmation-orientee-objet-en-php/decouverte/seance-4) Mis à jour il y a 3 ans seance3\_exo1.php Copier sePresente().'Message is: {{ message }}
Copy const message = ref('Hello Vue!') `v-model` peut être utilisé sur des `` de différents types, des éléments ` Copy Copy Copy --- # Séance 1 | LP MIOT file-download 5MB [cours.pptx](https://3554184702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTtJnVXa0NgEzStTXndrZ%2Fuploads%2FRDFAvttJ2rf4ahAnP5AE%2Fcours.pptx?alt=media&token=f65ed8e0-c6b4-426a-abf4-51f01f152cce) downloadDownload[arrow-up-right-from-squareOpen](https://3554184702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTtJnVXa0NgEzStTXndrZ%2Fuploads%2FRDFAvttJ2rf4ahAnP5AE%2Fcours.pptx?alt=media&token=f65ed8e0-c6b4-426a-abf4-51f01f152cce) Support de cours ### [hashtag](https://cours.davidannebicque.fr/lp-miot/seance-1#structure-minimale-dune-page) Structure minimale d'une page CopyUn texte ici
` : Un paragraphe * `
` : Insérer une image. src est le lien vers l'image (soit une adresse web, soit un fichier).
###
[hashtag](https://cours.davidannebicque.fr/lp-miot/seance-1#quelques-parametres-css)
Quelques paramètres CSS
* `color` : Couleur du texte
* `background-color` : Couleur du fond
* `border: 1px solid #123456` : Couleur de la bordure, 1px d'épaisseur, de couleur #123456
[PreviousPlanningchevron-left](https://cours.davidannebicque.fr/lp-miot)
[NextSéance 2chevron-right](https://cours.davidannebicque.fr/lp-miot/seance-2)
Last updated 3 years ago
* [Structure minimale d'une page](https://cours.davidannebicque.fr/lp-miot/seance-1#structure-minimale-dune-page)
* [Editeur de code](https://cours.davidannebicque.fr/lp-miot/seance-1#editeur-de-code)
* [Quelques balises HTML](https://cours.davidannebicque.fr/lp-miot/seance-1#quelques-balises-html)
* [Quelques paramètres CSS](https://cours.davidannebicque.fr/lp-miot/seance-1#quelques-parametres-css)
---
# Séance 6-b : Introduction à Nuxt 3 | Vue.js BUT
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#objectifs)
🎯 Objectifs
------------------------------------------------------------------------------------------------------------------------
* Découvrir Nuxt et ses apports (SSR, SSG, SEO).
* Migrer une app Vue vers Nuxt.
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#quest-ce-que-nuxt.js)
Qu'est-ce que Nuxt.Js ?
----------------------------------------------------------------------------------------------------------------------------------------------
Nuxt (https://nuxt.com/), vesion 4 aujourd'hui, est un framework construit au‑dessus de Vue 3 qui facilite la création d'applications universelles (fullstack) : sites statiques, applications server‑rendered (SSR) ou applications hybridées. Nuxt vise à fournir une structure et des conventions pour accélérer le développement (routing automatique, layouts, plugins, modules, import automatisés, ...). Sa runtime moderne repose sur Nitro (moteur serveur agnostique) et offre un excellent support pour le rendu côté serveur, le prerendering, le déploiement serverless et l'optimisation des performances.
Points clés de Nuxt 3 / 4 :
* Routing automatique via `pages/`.
* Layouts et slots globaux via `layouts/`.
* API server intégrée via `server/` (endpoints API côté serveur).
* Nitro : abstraction du serveur.
* Modules & plugins pour étendre les fonctionnalités (auth, i18n, analytics).
* Support SSR, SSG et ISR (hybride) natif.
* Intégration simple avec Vite, TypeScript et Pinia.
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#comparatif-nuxt-vs-vue-grand-lignes)
Comparatif Nuxt vs Vue (grand lignes)
* Vue :
* Framework UI (lib) pour construire des interfaces réactives côté client.
* Idéal pour des applications SPA où l'on contrôle la configuration et l'outillage.
* Nécessite d'ajouter manuellement routing, SSR/SSG, structure de dossiers si besoin.
* Nuxt :
* Framework construit sur Vue, fournit conventions et scaffolding.
* Ajoute des fonctionnalités prêtes à l'emploi : SSR/SSG, routage automatique, API server.
* Réduit la configuration initiale, facilite le SEO et le déploiement sur des plateformes serverless.
**Quand choisir Nuxt ?**
* Projet nécessitant SEO, SSR ou génération statique.
* Besoin d'une structure rapide, modules prêts à l'emploi et déploiement serverless.
**Quand choisir Vue seul ?**
* Projet front uniquement où SSR/SSG n'est pas nécessaire.
* Besoin d'une configuration fine et légère, ou intégration dans une architecture existante.
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#modes-de-rendu-tableau-synthetique)
Modes de rendu — tableau synthétique
Mode
Description courte
Avantages
Inconvénients
Cas d'usage
CSR (Client‑Side Rendering)
Le rendu HTML est généré côté client par le navigateur après téléchargement des JS
Interactions rapides après initial load ; développement simple
Mauvais SEO, temps au premier rendu plus long
SPA internes, dashboards authentifiés
SSR (Server‑Side Rendering)
Le serveur renvoie du HTML pré‑rendu pour chaque requête
Meilleur SEO, premier rendu rapide, partage social (meta)
Charge serveur plus importante, complexité (hydration)
Sites publics, e‑commerce, blogs dynamiques
SSG (Static Site Generation)
Pages générées à la build en HTML statique (prérendu)
Très performant, sécurisé, scale gratuit (CDN)
Moins adapté au contenu très dynamique sans revalidation
Documentation, blogs, landing pages
ISR (Incremental Static Regeneration) / Revalidation
SSG + possibilité de régénérer des pages après build (à la demande ou périodiquement)
Meilleure cohérence entre perf et dynamique
Complexité additionnelle, dépend du provider
Sites commerce avec catalogue mis à jour souvent
Edge Rendering / SSR@Edge
Rendu SSR exécuté côté edge (CDN) proche de l'utilisateur
Très faible latence, meilleure SEO globalement
Support dépendant du provider et du runtime
Sites internationaux, latence critique
* * *
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#structure-nuxt)
Structure Nuxt
Pour que Nuxt fonctionne de manière optimale, il faut respecter une certaine structure de dossiers. Voici les principaux répertoires et fichiers :
* `pages/` : routage automatique (chaque fichier = route)
* `layouts/` : templates globaux (ex : default, auth)
* `components/` : composants réutilisables
* `composables/` : composables auto‑importés
* `plugins/` : registres et initialisations (ex : axios, i18n)
* `server/` : endpoints server (API) et middleware
* `app.vue` / `nuxt.config.ts` : configuration globale
La documentation ici est très explicite : https://nuxt.com/docs/4.x/guide/directory-structure/app/app
**/!\\ Depuis la version 4, la structure est déportée dans un dossier** `**app/**` **pour plus de flexibilité.**
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#modules-nuxt)
Modules Nuxt
Nuxt dispose d'un écosystème riche de modules (https://nuxt.com/modules) pour ajouter des fonctionnalités courantes facilement, par exemple :
* Authentification (ex : `@nuxtjs/auth-next`)
* Internationalisation (i18n) (ex : \`@nuxtjs/i18n
* Analytics (ex : `@nuxtjs/google-analytics`)
* CMS (ex : `@nuxtjs/content`)
* ...
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#routage-avec-nuxt)
Routage avec Nuxt
-------------------------------------------------------------------------------------------------------------------------------------
Le routage dans Nuxt (https://nuxt.com/docs/4.x/getting-started/routing) est automatique via le dossier `pages/`. Chaque fichier `.vue` dans ce dossier devient une route accessible. Il est possible de créer des routes dynamiques, imbriquées, et de configurer des meta‑tags via la propriété `definePageMeta`.
Voici quelques exemples :
* `pages/index.vue` → `/`
* `pages/about.vue` → `/about`
* `pages/blog/index.vue` → `/blog`
* `pages/blog/[id].vue` → `/blog/:id` (route dynamique)
* `pages/dashboard/settings.vue` → `/dashboard/settings` (route imbriquée)
* `pages/user/[...slug].vue` → `/user/*` (catch-all)
`definePageMeta` pour configurer les meta‑tags SEO (https://nuxt.com/docs/4.x/getting-started/seo-meta#usehead)
/!\\ definePageMeta dans la version 3 de Nuxt.
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#exercice)
Exercice
-------------------------------------------------------------------------------------------------------------------
Migrer une application Vue 3 existante vers Nuxt 4 :
1. Créer un nouveau projet Nuxt 4 (`npm create nuxt@latest`).
2. Déplacer et adapter vos fichiers
3. Les composables, services et stores Pinia doivent être placés dans `composables/`, `services/` et `stores/` respectivement.
4. Les views (pages) doivent être placées dans `pages/` avec le routage automatique. Vous pourrez retirer les imports et configurations de Vue Router.
La sécurité, avec Nuxt, (authentification, autorisation) sera vue dans la séance suivante.
[PreviousSéance 6-a : TypeScriptchevron-left](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-a-typescript)
[NextSéance 7 : Nuxt & APIchevron-right](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api)
Last updated 3 months ago
* [🎯 Objectifs](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#objectifs)
* [Qu'est-ce que Nuxt.Js ?](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#quest-ce-que-nuxt.js)
* [Comparatif Nuxt vs Vue (grand lignes)](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#comparatif-nuxt-vs-vue-grand-lignes)
* [Modes de rendu — tableau synthétique](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#modes-de-rendu-tableau-synthetique)
* [Structure Nuxt](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#structure-nuxt)
* [Modules Nuxt](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#modules-nuxt)
* [Routage avec Nuxt](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#routage-avec-nuxt)
* [Exercice](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3#exercice)
Copy
---
# Séance 7 : Nuxt & API | Vue.js BUT
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#objectifs)
🎯 Objectifs
---------------------------------------------------------------------------------------------------------
* Consommer des données dans Nuxt.
* Gérer l’authentification avec middleware.
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#partie-theorique)
📖 Partie théorique
-----------------------------------------------------------------------------------------------------------------------
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#data-fetching)
Data fetching
Source : https://nuxt.com/docs/4.x/getting-started/data-fetching
Nuxt propose plusieurs helpers pour récupérer des données de façon déclarative et compatible SSR/SSG : `useFetch` et `useAsyncData` sont les plus courants. Ils sont auto‑importés et s'intègrent au cycle de rendu (server ou client) de Nuxt.
Principes clés :
* Les appels faits pendant la phase serveur sont exécutés avant l'envoi du HTML (meilleur SEO et fast first paint).
* Les helpers gèrent automatiquement l'état `pending` / `error` et la réhydratation côté client.
* Les résultats peuvent être mis en cache et revalidés (revalidation) selon la configuration.
####
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#usefetch)
useFetch
https://nuxt.com/docs/4.x/getting-started/data-fetching#usefetch
Exemple :
####
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#useasyncdata)
useAsyncData
https://nuxt.com/docs/4.x/getting-started/data-fetching#useasyncdata
Exemple :
####
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#quand-utiliser-lun-ou-lautre)
Quand utiliser l'un ou l'autre
* `useFetch` : très pratique pour des appels simples dans le setup d'un composant/page.
* `useAsyncData` : préférable si vous voulez contrôler la clé de cache, le transform ou la revalidation.
Autres utilitaires liés :
* `useState()` : stocke un état réactif côté serveur/client (idéal pour partager une valeur entre pages sans Pinia). Exemple :
* `useNuxtApp().$fetch` ou `$fetch` : utilitaires pour faire des requêtes internes ou externes.
####
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#server-api-endpoints)
Server API (endpoints)
Nuxt offre un dossier `server/api/` pour créer des endpoints server‑side. Exemple :
Puis côté client :
Bonnes pratiques et pièges courants :
* Préférer `$fetch`/`useFetch` pour les appels internes aux endpoints Nuxt (optimisations internes).
* Faire attention aux appels indésirables côté client (watch, effets) — utiliser `lazy: true` si nécessaire.
* Gérer les erreurs et l'état de chargement pour afficher des loaders ou des messages clairs.
* Pour des pages statiques (SSG), vérifier si le contenu doit être revalidé (ISR-like) et configurer la revalidation via `useAsyncData` ou des hooks de build.
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#middleware-de-route)
Middleware de route
source : https://nuxt.com/docs/4.x/getting-started/routing#route-middleware
* Nuxt permet de définir des middlewares pour protéger des routes (authentification, autorisation).
Ecrire le middleware dans `middleware/auth.js` (par exemple) :
* Appliquer le middleware globalement dans `nuxt.config.ts` ou localement dans une page avec `definePageMeta`.
Il est aussi possible d'utiliser des modules (https://nuxt.com/modules?category=Security&sortBy=stars) pour gérer l'authentification plus facilement ou de manière plus complète, en intégrant des providers OAuth, JWT, etc.
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#appel-api-avec-un-token-jwt)
Appel API avec un token JWT
------------------------------------------------------------------------------------------------------------------------------------------
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#en-vuejs-avec-fetch)
en VueJs avec fetch
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#en-nuxtjs-avec-usefetch)
en NuxtJs avec useFetch
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#travaux-pratiques)
📝 Travaux pratiques
-------------------------------------------------------------------------------------------------------------------------
* Reconnectér les appels API de l’application Vue 3 précédente en Nuxt.
* Créer page `/login`.
* Stocker token JWT dans Pinia/localStorage.
* Protéger l'ajout d'une tâche avec middleware.
[PreviousSéance 6-b : Introduction à Nuxt 3chevron-left](https://cours.davidannebicque.fr/vue.js-but/but3/seance-6-b-introduction-a-nuxt-3)
[NextSéance 8 : Nuxt avancé & SEOchevron-right](https://cours.davidannebicque.fr/vue.js-but/but3/seance-8-nuxt-avance-seo)
Last updated 3 months ago
* [🎯 Objectifs](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#objectifs)
* [📖 Partie théorique](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#partie-theorique)
* [Data fetching](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#data-fetching)
* [Middleware de route](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#middleware-de-route)
* [Appel API avec un token JWT](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#appel-api-avec-un-token-jwt)
* [en VueJs avec fetch](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#en-vuejs-avec-fetch)
* [en NuxtJs avec useFetch](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#en-nuxtjs-avec-usefetch)
* [📝 Travaux pratiques](https://cours.davidannebicque.fr/vue.js-but/but3/seance-7-nuxt-api#travaux-pratiques)
Copy
// 1) useFetch : wrapper autour de fetch/$fetch, simple et pratique
const { data, pending, error } = await useFetch('/api/tasks')
// data.value contient le JSON ; pending.value indique le chargement
Copy
// 2) useAsyncData : utile pour nommer/mettre en cache explicitement
const { data: tasks } = await useAsyncData('tasks', () => $fetch('/api/tasks'))
// useAsyncData permet de définir une clé, un transform, et des options de server/lazy
Copy
const count = useState('count', () => 0) // persisté dans l'instance Nuxt (par requête/utilisateur)
Copy
// server/api/tasks.get.js
export default defineEventHandler(async (event) => {
// logique serveur (lecture DB, appel externe, auth)
return [{ id: 1, title: 'Tâche' }]
})
Copy
const { data } = await useFetch('/api/tasks')
Copy
export default defineNuxtRouteMiddleware((to, from) => {
const isAuthenticated = useAuthStore().isAuthenticated
if (!isAuthenticated && to.path !== '/login') {
return navigateTo('/login')
}
})
Copy
export default definePageMeta({
middleware: 'auth'
})
Copy
const token = 'votre_token_jwt_ici';
fetch('https://wra506d.davidannebicque.ovh/api/ws-xx/channels', {
headers: {
'Authorization': `Bearer ${token}`
}
})
.then(response => response.json())
.then(data => console.log(data));
Copy
const token = 'votre_token_jwt_ici';
const { data, error } = await useFetch('https://wra506d.davidannebicque.ovh/api/ws-xx/channels', {
headers: {
'Authorization': `Bearer ${token}`
}
});
---
# Séance 11 : Projet – Développement | Vue.js BUT
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#objectifs)
🎯 Objectifs
----------------------------------------------------------------------------------------------------------------------
* Construire page channel avec messages.
* Gérer création et rafraîchissement des messages.
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#partie-theorique)
📖 Partie théorique
------------------------------------------------------------------------------------------------------------------------------------
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#relations-entre-entites)
Relations entre entités
* Channel → Messages → User
* Organisation des données et affichage par channel
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#polling-simple)
Polling simple
* Rafraîchissement régulier des messages pour simuler le temps réel.
* Utilisation de setInterval ou d’une fonction dédiée.
###
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#ux)
UX
* Loaders pour indiquer le chargement
* Toasts pour les notifications
* Gestion des erreurs pour améliorer l’expérience utilisateur
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#exemples)
💻 Exemples
--------------------------------------------------------------------------------------------------------------------
[hashtag](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#travaux-pratiques)
📝 Travaux pratiques
--------------------------------------------------------------------------------------------------------------------------------------
* Créer page `/channel/:id`.
* Afficher messages d’un channel.
* Formulaire pour poster message.
* Rafraîchir via polling.
[PreviousSéance 10 : Projet – Kick-off réseau socialchevron-left](https://cours.davidannebicque.fr/vue.js-but/but3/seance-10-projet-kick-off-reseau-social)
[NextSéance 12 : Projet – Finalisationchevron-right](https://cours.davidannebicque.fr/vue.js-but/but3/seance-12-projet-finalisation)
Last updated 4 months ago
* [🎯 Objectifs](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#objectifs)
* [📖 Partie théorique](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#partie-theorique)
* [Relations entre entités](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#relations-entre-entites)
* [Polling simple](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#polling-simple)
* [UX](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#ux)
* [💻 Exemples](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#exemples)
* [📝 Travaux pratiques](https://cours.davidannebicque.fr/vue.js-but/but3/seance-11-projet-developpement#travaux-pratiques)
Copy
Premier paragraphe
Deuxième paragraphe
Troisième paragraphe
| A | |
| B | C |
| A | B |
| C |
| Code produit | Prix Unitaire | Quantité | Prix Total |
|---|---|---|---|
| ABC123 | 12.23 € | 1 | 12.23 € |
| CDE456 | 14.00 € | 2 | 28.00 € |
| CDE786 | 10.00 € | 4 | 40.00 € |
| CFG456 | 21.00 € | 2 | 42.00 € |
| Total | 122.23 € | ||
Artiste ajouté avec l\'id numéro '.$id.'
'; $artiste2 = $am->getById($id); echo ''.$artiste2->sePresente().'
'; ?>La page demandée n'existe pas.
Artiste ajouté avec l\'id numéro '.$id.'
'; $artiste2 = $am->getById($id); echo ''.$artiste2->sePresente().'
'; ?>| "; if ($creature) { echo $creature->getNom(); } else { echo " "; } echo " | "; } echo "
Type moteur : '.$this->typeMoteur.', Nombre de passagers: '.$this->nbPassagers.', Tonnage : '.$this->tonnage.', Nombre d\'essieux : '.$this->nbEssieux.'
'; } } VoitureTourisme Copier consommation = $consommation; } public function afficherCaracteristiques(): string { $texte = parent::afficherCaracteristiques(); $texte .= 'Consommation : '.$this->consommation.'
Température : °C
CopyTempérature : °C
CopyBienvenue {{ user.name }} !
Veuillez vous connecter
Recherche : {{ searchQuery }}
Compteur : {{ count }}
{{ user.name }} - {{ user.age }} ans
Nom complet : {{ fullName }}
{{ data }}
{{ task.description }}
{{ task.priority }}Assigné à : {{ assignedTo }}
{{ task.description }}
Êtes-vous sûr de vouloir supprimer cette tâche ?
{{ taskToDelete.title }}
Contenu principal
© 2024 Mon site
Message is: {{ message }}
Copier const message = ref('Hello Vue!') `v-model` peut être utilisé sur des entrées de différents types, des éléments `{{ task.description }}
{{ task.description }}
Commencez par créer votre première tâche !