Hello à tous,

Je viens vous voir pour avoir un peu d'explications. En fait, j'ai parlé à un ami d'un projet que j'étais en train d'essayer de développer en PHP/MySQL, dans lequel je me sentais un peu bloqué/à l'étroit. Il m'a conseillé d'essayer de le développer en NodeJS/MongoDB, en me disant que ça serait plus flexible (et puis, j'ai envie de m'y mettre depuis quelques mois donc c'était l'occasion d'avoir un projet sur lequel bosser au fil de mon apprentissage).
Voilà quelques semaines que j'ai commencé petit à petit à me renseigner, et les technologies NodeJS et VueJS m'intéressent bien. NodeJS pour l'aspect modulaire et donc pour le potentiel, VueJS parce que la démo que j'ai regardée sur leur site internet me plaît beaucoup.

Depuis avant-hier donc, j'essaie de voir comment développer une petite app toute simple qui pourrait allier NodeJS et VueJS, mais voilà : je me sens un peu perdu. Je crois que mon erreur a été de prendre un tuto NodeJS et d'essayer de le coller à un tuto VueJS.

Exemple de situation dans laquelle je ne comprends plus ce que je fais : j'ai mon main.js qui se connecte à la db, récupère une liste, et avec un res.render (EJS) appelle un template HTML, avec les arguments, qui affiche la liste. Juste que là tout va bien... Sauf que maintenant j'essaie d'intégrer VueJS dans la bataille, et c'est là que je ne comprends plus. L'intégration de VueJS dans mon main.js (qui est lancé avec la commande `node main.js`) se fait via quelques lignes simples :

new Vue({
el:'#app',
data : {
message: 'Hello BOY'
}
})

Et bien sûr, dans le fichier EJS qui est appelé par `res.render`, {{ message }} n'affiche rien d'autre que... {{ message }}...
Alors je pense que c'est normal, que je m'y prends mal, mais du coup, tout ça est nouveau pour moi, et tellement d'éléments arrivent d'un coup que j'ai du mal à m'y repérer.
Vous pourriez me donner quelques conseils sur la façon d'organiser mon travail, pour que nodeJS et les modules puissent m'être utiles, tout en affichant les résultats grâce à VueJS ?

Merci par avance !!!

M.

Il faut que tu sépares le front (vue ici) du back (node).

Node ne devrait pas faire de render. Il doit envoyer un ou plusieurs fichier html et des données (via une API).

Le fichier html va contenir tout ce qui est front et doit effectuer des requêtes sur ton serveur.

Si tu fais une app de todo list :

Tu as un fichier html avec un script vue et tes scripts custom qui gèrent les vues etc.
Ce fichier tu l’envoies depuis le serveur via /.
Pendant l’affichage de ton front, tu demandes la liste des todo existantes au serveur via une requête get de type /liste, le serveur cherche ça dans ta base de donnée et envoi un json. Une fois la réponse du serveur reçu, tu les affiches / exploites dans ton front.
Quand tu veux ajouter un todo tu envoies une requête post sur ton serveur de type /ajouter-todo avec les données relatives transmis via un json, et sur ton serveur tu crées une route post /ajouter-todo qui va s’occuper d’ajouter ta todo dans la base de donnée.

Une fois que tu auras compris ça, tu pourras apprendre à build avec webpack, pour « unifier » tous tes fichiers serveur en un seul et les fichiers front en un seul ou plusieurs (un seul suffira largement pour commencer, tu peux diviser si tu as plusieurs parties sur ton site pour éviter que les utilisateur chargent des trucs qu’ils n’utiliseront pas) et compiler

Je t’explique pas forcément le truc de la façon la plus optimale possible mais j’espère que tu as compris les principes de base

Essayes ce tuto ça devrait être bien plus clair : https://www.youtube.com/watch?v=j55fHUJqtyw

Le 02 octobre 2019 à 14:34:05 maskah a écrit :
Il faut que tu sépares le front (vue ici) du back (node).

Node ne devrait pas faire de render. Il doit envoyer un ou plusieurs fichier html et des données (via une API).

Le fichier html va contenir tout ce qui est front et doit effectuer des requêtes sur ton serveur.

Si tu fais une app de todo list :

Tu as un fichier html avec un script vue et tes scripts custom qui gèrent les vues etc.
Ce fichier tu l’envoies depuis le serveur via /.
Pendant l’affichage de ton front, tu demandes la liste des todo existantes au serveur via une requête get de type /liste, le serveur cherche ça dans ta base de donnée et envoi un json. Une fois la réponse du serveur reçu, tu les affiches / exploites dans ton front.
Quand tu veux ajouter un todo tu envoies une requête post sur ton serveur de type /ajouter-todo avec les données relatives transmis via un json, et sur ton serveur tu crées une route post /ajouter-todo qui va s’occuper d’ajouter ta todo dans la base de donnée.

Une fois que tu auras compris ça, tu pourras apprendre à build avec webpack, pour « unifier » tous tes fichiers serveur en un seul et les fichiers front en un seul ou plusieurs (un seul suffira largement pour commencer, tu peux diviser si tu as plusieurs parties sur ton site pour éviter que les utilisateur chargent des trucs qu’ils n’utiliseront pas) et compiler

Je t’explique pas forcément le truc de la façon la plus optimale possible mais j’espère que tu as compris les principes de base

Merci beaucoup, c'est exactement le type de réponse que j'espérais recevoir.
J'y vois plus clair, je pense. J'ai besoin de détails techniques concernant les deux lignes suivantes (notamment concernant "l'envoi de json", mais pour le coup c'est directement relatif à l'apprentissage, et qu'au fond je sais comment faire mais que le fait que je sois un peu paumé et fatigué n'aide pas ce soir, donc je vais me débrouiller pour trouver les infos. Si jamais tu as une source intéressante avec des exemples probants et de "bonnes pratiques" je suis preneur, je fonctionne beaucoup aux exemples.

Pendant l’affichage de ton front, tu demandes la liste des todo existantes au serveur via une requête get de type /liste, le serveur cherche ça dans ta base de donnée et envoi un json. Une fois la réponse du serveur reçu, tu les affiches / exploites dans ton front.
Quand tu veux ajouter un todo tu envoies une requête post sur ton serveur de type /ajouter-todo avec les données relatives transmis via un json, et sur ton serveur tu crées une route post /ajouter-todo qui va s’occuper d’ajouter ta todo dans la base de donnée.

En tous cas merci beaucoup d'avoir pris le temps de me répondre !

Le 02 octobre 2019 à 16:31:04 Mononokehime a écrit :
Essayes ce tuto ça devrait être bien plus clair : https://www.youtube.com/watch?v=j55fHUJqtyw

Merci beaucoup pour la référence, je vais y jeter un oeil dès demain !

au global, tu vas avoir deux programmes qui vont s'architecturer comme ça : https://roaringstudios.com/assets/img/why-mean-stack.jpg
Considère que VueJS c'est ton "front" c'est à dire l'affichage. Il n'a que peu de logique (des logiques d'affichages genre afficher un bouton ou pas, les liens entre les pages...)
NodeJS c'est ton "back" lui il fait toute la partie logique et stock l'état de ton programme dans la base de donnée.
Maintenant pour que ton "front" affiche des choses utiles, il faut qu'il aille demander des informations au back pour les afficher à l'utilisateur, qui va effectuer des choix, et le front va devoir "pousser" ces choix à ton "back", qui va mettre à jour l'état du programme et le stocker en base.

La partie communication de ce type d'application s'effectue en général via la norme REST* c'est à dire que l'échange de données va s'effectuer via des appels javascript (avec une librairie genre axios**) et le format d'échange est le JSON (en gros c'est un objet javascript qui transite via une requête HTTP). Si tu veux lire du code par toi même je te laisse ça ici ***

Une fois que tes 2 applications tournent en local, on pourra voir plusieurs façon de mettre ça en ligne via docker par exemple

1) au hasard sur google https://blog.mwaysolutions.com/2014/06/05/10-best-practices-for-better-restful-api/
2) https://github.com/axios/axios
3) https://github.com/gothinkster/node-express-realworld-example-app
4) https://github.com/gothinkster/vue-realworld-example-app

Merci beaucoup pour ta réponse, j'y vois beaucoup plus clair. Grâce à vos réponses, j'ai réussi à comprendre les rôles de chacun !
J'ai passé le weekend sur un petit projet mettant en oeuvre un serveur NodeJS et un client développé avec VueJS, je suis époustouflé par la puissance de cette combinaison. L'utilisation de sockets.io combinée à VueJS permet une réactivité incroyable, avec si peu d'efforts...
Quelle belle découverte !! Y'a plus qu'à bosser pour progresser, maintenant !