Discussion :

[Mickael Baron]

Bonjour,

Je vous propose un tutoriel en trois parties concernant le développement d'application web monopage (Single-Page Application) avec Vue.js.

Cette deuxième partie présente les principaux concepts de Vue.js au travers d'un exemple complet.

Voici le plan

• présentation de l'exemple qui servira de fil rouge ;
• création du squelette du projet PollDLE avec Vue.js et Vue CLI ;
• initialisation des modèles et des vues pour les différents composants ;
• mise en place des bindings entre les modèles et les vues via l'utilisation du templating (interpolation et les directives) ;
• utilisation des propriétés calculées (computed) et des observateurs (watch) ;
• détail du fonctionnement d'un composant pour savoir développer, instancier et dialoguer avec un composant ;
• invocation d'un service web Rest pour modifier ou retourner la valeur d'un modèle ;
• paramétrage du système de routage pour les changements de valeurs d'URL.

L'exemple est appelé PollDLE qui est une application pour créer et soumettre des sondages. PollDLE ~= Poll + la dernière partie de Doo DLE (Doodle est une application de planification de rendez-vous, très connue pour être simple d'utilisation)

L'URL du tutoriel : https://mbaron.developpez.com/tutori...ise-en-oeuvre/

Le code source complet de l'exemple PollDLE est disponible à cette adresse : https://github.com/mickaelbaron/vuej...e-tutorial-src

Profiter de cette discussion pour laisser des commentaires.

Tutoriel écrit avec ❤️

Mickael



Retrouver les meilleurs cours et tutoriels pour apprendre JavaScript

[Community Management]

Merci pour ce tutoriel que je trouve complet et bien pratique

[Serge Tahé]

Bonjour Mickaël,

Tout d'abord merci pour ce tutoriel qui m'intéresse beaucoup. Je suis arrivé au lancement du serveur REST écrit en Java. J'ai l'erreur suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
λ "%JAVA_HOME%/bin/java.exe" -cp "polldle-server/target/dependency/*:polldle-server/target/classes" com.kumuluz.ee.EeApplication                                                                                                                      
Error: Could not find or load main class com.kumuluz.ee.EeApplication                                                      
Caused by: java.lang.ClassNotFoundException: com.kumuluz.ee.EeApplication

J'ai vérifié : la classe [com.kumuluz.ee.EeApplication] n'existe effectivement pas. Où est mon problème ? La compilation s'est déroulée normalement.

Merci de ta réponse.

Serge

[Mickael Baron]

Bonjour Serge,

Merci beaucoup de t'intéresser à notre tutoriel.

J'ai fait les expérimentations sous macOS. Je pense, à toi de vérifier à l'exécution, que le séparateur au niveau du classpath est ; et non : Les joies du multiplateforme ...

Tu peux donc essayer cela

"%JAVA_HOME%/bin/java.exe" -cp "polldle-server/target/dependency/*;polldle-server/target/classes" com.kumuluz.ee.EeApplication

Mickael

[Serge Tahé]

Bonjour Serge,

Merci beaucoup de t'intéresser à notre tutoriel.

J'ai fait les expérimentations sous macOS. Je pense, à toi de vérifier à l'exécution, que le séparateur au niveau du classpath est ; et non : Les joies du multiplateforme ...

Tu peux donc essayer cela



Mickael

Oui, c'était bien ça. Merci. Dans le même esprit, sous windows, au lieu de [export var=valeur], on écrit [set var=valeur] (pou fixer le port du serveur).

Serge

[Serge Tahé]

Bonjour aux auteurs du tutoriel,

J'ai le problème suivant ;

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://127.0.0.1:9991/polldles. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

Le problème vient du fait que l'application [PollDLE] est disponible en test à l'URL [http://localhost:8080]. C'est là que l'application [vue ui] l'a lancée. L'application [PollDLE] fait des requêtes au serveur REST à l'URL [http://localhost:9991]. C'est donc une requête CORS, une requête inter-domaines. Celles-ci ne sont possibles que si le serveur envoie des entêtes HTTP bien précises. Or ici, il ne les envoie apparemment pas et donc le navigateur exécutant l'application [PollDLE] a refusé de mener la requête à son terme.

Comment puis-je contourner ce problème en mode développement ? En production, l'application [PollDLE] et le serveur REST seront servis sur le même port et donc le même domaine ce qui éliminera les requêtes inter-domaines qui posent problème ici. Vous comment procédiez-vous en mode développement de l'application ?

Serge

[sbeu]

Vraiment pénibles ces problèmes de CORS... En dev, vous pouvey passer outre en installant un plugin dans le navigateur. Par exemple le plugin "Cors everywhere"
Ca résoud le problème de CORS en dev.

[Mickael Baron]

Vraiment pénibles ces problèmes de CORS... En dev, vous pouvey passer outre en installant un plugin dans le navigateur. Par exemple le plugin "Cors everywhere"

J'y avais pensé, mais j'ai préféré résoudre le problème côté serveur, c'est une habitude que je prends maintenant. Je note pour le plugin 👍

Merci

Mickael

[Couzin78]

Bonjour,

tout d'abord merci pour ce tutoriel intéressant.

Je poste ce message car j'ai relevé une incohérence, je m'explique :

Dans la partie IV.Templating avec Vue.js on utilise le polldle-vue-02 :
Nous vous invitons à vous positionner dans le répertoire polldle-vue-02 pour profiter des codes qui vont illustrer cette section. Pensez à faire $ npm install pour installer les modules et $ npm run serve pour démarrer l'exécution en mode développement.

Ensuite dans la partie IV-B-6 Rendu Conditionnel on utilise le polldle-vue-04 :
Nous vous invitons à vous positionner dans le répertoire polldle-vue-04 pour profiter des codes qui vont illustrer cette section. Pensez à faire $ npm install pour installer les modules et $ npm run serve pour démarrer l'exécution en mode développement.

Le polldle-vue-04 contient déjà les réponses à inscrire dans ResultPolldle. On peut en déduire facilement qu'il faut en réalité aller dans le polldle-vue-03, et qu'il y a eu un "décalage".
Ca relève peut-être un peu de "pinaillage" mais sur le coup cela surprend et on se pose des questions.

Ai-je vu juste ou suis-je passé à côté de quelque chose ?

Amicalement

[Mickael Baron]

Bonjour,

Tout d'abord grand merci de l'intérêt que vous portez à cet article.

J'ai lu plusieurs fois votre message et j'ai compris d'où viens l'erreur. Il y a une coquille dans la version en ligne. Pour la section "IV-B-6. Rendu conditionnel" il fallait lire polldle-vue-03

Je fais les modifications et merci pour le retour

Mickael

[haddocks]

Bonjour,
tout d'abord merci pour ce tuto.
A la partie "Compiler et exécuter le code serveur", j'entre la commande "mvn clean package". tout se passe bien.

Ensuite dans le terminal, j'entre "set KUMULUZEE_SERVER_HTTP_PORT=9991", parce que avec "export", ça n'à pas l'air de fonctionner.

Ensuite, toujours dans la console, j'entre "java -cp "polldle-server/target/dependency/*;polldle-server/target/classes" com.kumuluz.ee.EeApplication" , j'ai remplacé ":" par ";" pour que ça fonctionne. Mais j'ai une erreur sur la première ligne :

"2023-08-19 20:44:40.921 INFO -- com.kumuluz.ee.configuration.sources.FileConfigurationSource -- Unable to load configuration from file. No configuration files were found."

Et les 2 dernières indiquent ceci :
"2023-08-19 20:44:42.365 WARNING -- org.glassfish.jersey.server.wadl.WadlFeature -- JAXBContext implementation could not be found. WADL feature is disabled.

2023-08-19 20:44:42.611 INFO -- com.kumuluz.ee.EeApplication -- KumuluzEE started successfully"

Ensuite en me plaçant dans "polldle-vue-15", lorsque je clic sur "creer le polldle" la phrase "Problem to create a new Polldle." s'affiche dans la vue et la console indique :
"fail to fetch"

Qu'est ce qui ne va pas ? je travaille sous Windows 11.