IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Développer une application web avec Vue.js et Vue CLI, mise en oeuvre des concepts (partie 2),
Un tutoriel de Mickael Baron et Mahamadou Diabate

Le , par Mickael Baron
22 commentaires

634PARTAGES

6  0 
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
Vous avez lu gratuitement 18 927 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

22 commentaires
Commenter Signaler un problème
Community Management
Avatar de Community Management
Community Manager https://www.developpez.com
Le 06/07/2019 à 16:32
Merci pour ce tutoriel que je trouve complet et bien pratique
2  0 
Mickael Baron
Avatar de Mickael Baron
Rédacteur https://www.developpez.com
Le 27/08/2019 à 18:56
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
1  0 
Serge Tahé
Avatar de Serge Tahé
Expert éminent https://www.developpez.com
Le 27/08/2019 à 18:07
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 
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
0  0 
Serge Tahé
Avatar de Serge Tahé
Expert éminent https://www.developpez.com
Le 28/08/2019 à 10:08
Citation Envoyé par Mickael Baron Voir le message
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
0  0 
Serge Tahé
Avatar de Serge Tahé
Expert éminent https://www.developpez.com
Le 28/08/2019 à 16:28
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
0  0 
Mickael Baron
Avatar de Mickael Baron
Rédacteur https://www.developpez.com
Le 28/08/2019 à 17:23
Bonjour Serge,

C'est l'objectif de la ressource définie par la classe CrossDomainFilter de lever le problème de CORS pour la phase de développement.

Normalement la classe devrait y être (prise en compte depuis la classe PolldleApplication)

Je viens de faire le test depuis une exécution backend sous Eclipse et ça fonctionne.

Mickael
0  0 
Serge Tahé
Avatar de Serge Tahé
Expert éminent https://www.developpez.com
Le 29/08/2019 à 18:24



Citation Envoyé par Mickael Baron  Voir le message
Bonjour Serge,

C'est l'objectif de la ressource définie par la classe CrossDomainFilter de lever le problème de CORS pour la phase de développement.

Normalement la classe devrait y être (prise en compte depuis la classe PolldleApplication)

Je viens de faire le test depuis une exécution backend sous Eclipse et ça fonctionne.

Mickael

Bonjour Mickaël,

Je ne suis pas sûr de comprendre ta réponse. La classe [CrossDomainFilter] est quelque chose qui est côté serveur REST ? Je crois avoir suivi la démarche du tuto pour lancer celui-ci. Ai-je oublié quelque-chose ou la classe est-elle opérationnelle nativement ?

De mon côté, l'erreur est la suivante. Je travaille sous windows 10. J'exécute l'application [PollDLE] à l'adresse [http://localhost:8080]. Elle est exécutée par un navigateur Firefox. Lorsque je crée un PollDLE, voici les échanges réseau qui prennent place :

[PollDLE] envoie les entêtes HTTP suivants vers le serveur REST :



  1. OPTIONS http://127.0.0.1:9991/polldles
  2. Host: 127.0.0.1:9991
  3. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
  4. Accept: */*
  5. Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
  6. Accept-Encoding: gzip, deflate
  7. Access-Control-Request-Method: POST
  8. Access-Control-Request-Headers: content-type
  9. Referer: http://localhost:8080/
  10. Origin: http://localhost:8080
  11. DNT: 1
  12. Connection: keep-alive

Il ne fait pas une requête POST mais OPTIONS (ligne 1) car il demande des autorisations au serveur REST (lignes 7, 8, 10). Le serveur REST lui répond de la façon suivante :



  1. HTTP/1.1 500 Request failed.
  2. Date: Thu, 29 Aug 2019 15:08:38 GMT
  3. X-Powered-By: KumuluzEE/3.4.1
  4. Content-Length: 0
  5. Server: Jetty(9.4.15.v20190215)

On voit en ligne 1 que le serveur a répondu par une erreur 500, ce qui clôt le dialogue client-serveur. Pourquoi a-t-il répondu ainsi ?

Si je prends un client indépendant et fais la requête suivante : [POST http://127.0.0.1:9991/polldles] en mettant le corps JSON suivant :



{"question":"aimez-vous vue.js ?","pollOptions":[{"name":"un peu"},{"name":"beaucoup"},{"name":"pas du tout"}]}

alors le serveur envoie bien les entêtes HTTP du CORS (lignes 2-6) :



  1. < Content-Type: text/plain
  2. < Access-Control-Allow-Origin: http://localhost:8080
  3. < Access-Control-Allow-Credentials: true
  4. < Access-Control-Allow-Methods: GET, POST
  5. < Allow: GET, POST
  6. < Access-Control-Allow-Headers: Content-Type, Accept

avec la réponse JSON :



{"question":"aimez-vous vue.js ?","polldleOptions":[{"id":1,"name":"un peu","destroyed":false},{"id":2,"name":"beaucoup","destroyed":false},{"id":3,"name":"pas du tout","destroyed":false}],"key":null,"pathUrl":"1"}

Donc on dirait que le serveur n'aime pas la commande [Options] envoyée par Firefox. Ça ne marche pas non plus avec Chrome. J'ai donc un problème. Je suis le seul ? Je vais continuer à chercher.

Serge
0  0 
Mickael Baron
Avatar de Mickael Baron
Rédacteur https://www.developpez.com
Le 30/08/2019 à 18:24
Bonjour Serge,

Désolé pour le retard.

Je ne suis pas sûr de comprendre ta réponse. La classe [CrossDomainFilter] est quelque chose qui est côté serveur REST ? Je crois avoir suivi la démarche du tuto pour lancer celui-ci. Ai-je oublié quelque-chose ou la classe est-elle opérationnelle nativement ?
Oui elle est côté serveur. C'est une classe qui est présent dans le code fourni comme exemple.

Tu lances le projet Vue.js depuis quel répertoire ? Le répertoire contenant l'intégralité du projet '/polldle-vue' ou les répertoires utilisés pour les différents exercices ?

Normalement la méthode HTTP utilisée est POST car c'est une création de ressource.

J'attends ta réponse. De mon côté, j'ai testé et c'est nickel. Pour la requête HTTP côté Vue.js, on va clairement que c'est du POST


var request = new Request(process.env.VUE_APP_SERVER_URL + "/polldles", {
method: "POST",
body: JSON.stringify(polldleObject),
headers: {
'Content-Type': 'application/json'
}
})
Mickael
0  0 
Serge Tahé
Avatar de Serge Tahé
Expert éminent https://www.developpez.com
Le 30/08/2019 à 18:31
Citation Envoyé par Mickael Baron Voir le message
Bonjour Serge,

Désolé pour le retard.

Oui elle est côté serveur. C'est une classe qui est présent dans le code fourni comme exemple.

Tu lances le projet Vue.js depuis quel répertoire ? Le répertoire contenant l'intégralité du projet '/polldle-vue' ou les répertoires utilisés pour les différents exercices ?

Normalement la méthode HTTP utilisée est POST car c'est une création de ressource.

J'attends ta réponse. De mon côté, j'ai testé et c'est nickel. Pour la requête HTTP côté Vue.js, on va clairement que c'est du POST

Mickael
Je lance l'application à partir d'un dossier que j'ai créé pour suivre le tuto. Je n'ai pas essayé de la lancer à partir de [/pooldle-vue]. je vais essayer pour voir. Tu utilises quel navigateur pour exécuter [PollDLE] ? Moi, j'ai testé avec Firefox, Chrome et Edge, mais pas Safari.

Serge
0  0 
Serge Tahé
Avatar de Serge Tahé
Expert éminent https://www.developpez.com
Le 30/08/2019 à 18:59
Citation Envoyé par Mickael Baron Voir le message
Bonjour Serge,

Tu lances le projet Vue.js depuis quel répertoire ? Le répertoire contenant l'intégralité du projet '/polldle-vue' ou les répertoires utilisés pour les différents exercices ?

Mickael
Mickaël,

Je viens de tester le code téléchargé du tutoriel. J'ai exécuté le code du dossier [/polldle-vue]. J'ai le même problème. Lorsque j'ai voulu créer le sondage, Firefox a envoyé une commande [OPTIONS] au serveur qui a répondu avec une erreur 500. Pour avoir déjà rencontré ce problème, le comportement de Firefox est normal. Il aurait fallu que le serveur accepte la commande [OPTIONS] et renvoie les entêtes CORS attendus par Firefox. Firefox aurait ensuite fait la requête POST demandée par le code exécuté et je sais que celle-ci fonctionne puisque je l'ai faite à la main avec un client tiers.

Ce que je ne comprends pas, c'est que ça marche pour toi.

Par ailleurs, lorsque je fais le [Create PollDLE], le serveur signale une série d'exceptions sur sa console.

Serge

PS : je te joins une image
0  0 
Commenter Signaler un problème