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 2019-07-03 15:45:47, par Mickael Baron, Rédacteur
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
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
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
-
Community ManagementCommunity ManagerMerci pour ce tutoriel que je trouve complet et bien pratiquele 06/07/2019 à 16:32
-
Mickael BaronRédacteurBonjour 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
le 27/08/2019 à 18:56 -
Serge TahéExpert éminentBonjour 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 : 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
Merci de ta réponse.
Sergele 27/08/2019 à 18:07 -
Serge TahéExpert éminentOui, 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).
Sergele 28/08/2019 à 10:08 -
Serge TahéExpert éminentBonjour 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.
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 ?
Sergele 28/08/2019 à 16:28 -
Mickael BaronRédacteurBonjour 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.
Mickaelle 28/08/2019 à 17:23 -
Serge TahéExpert éminentBonjour 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 :- OPTIONS http://127.0.0.1:9991/polldles
- Host: 127.0.0.1:9991
- User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0
- Accept: */*
- Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
- Accept-Encoding: gzip, deflate
- Access-Control-Request-Method: POST
- Access-Control-Request-Headers: content-type
- Referer: http://localhost:8080/
- Origin: http://localhost:8080
- DNT: 1
- Connection: keep-alive
- HTTP/1.1 500 Request failed.
- Date: Thu, 29 Aug 2019 15:08:38 GMT
- X-Powered-By: KumuluzEE/3.4.1
- Content-Length: 0
- Server: Jetty(9.4.15.v20190215)
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"}]}
- < Content-Type: text/plain
- < Access-Control-Allow-Origin: http://localhost:8080
- < Access-Control-Allow-Credentials: true
- < Access-Control-Allow-Methods: GET, POST
- < Allow: GET, POST
- < Access-Control-Allow-Headers: Content-Type, Accept
{"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"}
Sergele 29/08/2019 à 18:24 -
Mickael BaronRédacteurBonjour 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 ?
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'
}
})
le 30/08/2019 à 18:24 -
Serge TahéExpert éminentJe 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.
Sergele 30/08/2019 à 18:31 -
Serge TahéExpert éminentMickaë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
le 30/08/2019 à 18:59