Forum : Je suis complètement perdu

Bonjour,

Voila je rencontre un petit problème avec mon code.
Je ne sais pas par ou commencer, ni par ou m'orienter car je débute le nodeJS donc je viens vers vous pour démander des avis extérieurs !

Ce que je fais

Je suis en train de développer une mini application web en NodeJS et Vue.JS toute simple qui affiche la liste de tous les Pokemons qui existent.
La base de donnée est en format .json sous cette forme :

{
    "id": 1,
    "name": {
      "english": "Bulbasaur",
      "japanese": "フシギダネ",
      "chinese": "妙蛙种子",
      "french": "Bulbizarre"
    },
    "type": [
      "Grass",
      "Poison"
    ],
    "base": {
      "HP": 45,
      "Attack": 49,
      "Defense": 49,
      "Sp. Attack": 65,
      "Sp. Defense": 65,
      "Speed": 45
    }
  },

Ce que je veux

J'aimerais afficher cette liste dès que l'on arrive sur la page.

Ce que j'obtiens

Je ne sais pas vraiment vers ou commencer... je ne sais pas laquelle des solutions est la "meilleure", plus réactive/rapide au chargement et est plus propre. Par exemple, j'imaginais afficher cette liste de plusieurs façon :

La solution la plus simple à mes yeux, serait de l'afficher grâce à JQuery, on parse le json puis on l'affiche sur la page mais je ne sais pas si cette méthode est dites "propre", vu qu'elle est gérer complètement du coté client et non du serveur ?
- La deuxième solution, serait d'envoyer le fichier json, dans un objet, dans une requête socket.io dès que l'utilisateur arrive sur la page puis de l'afficher grâce a Vue.JS ou JQuery.
  On obtiendrais un truc comme ça à peu près :
```
//app.js
var pokedex = JSON.parse(fs.readFileSync('public/pokedex.json', 'utf8'));
socket.emit('userconnect', { ok: pokedex });
```


  - La troisième méthode est pour moi la plus compliqué car je viens tout juste de m'y mettre : est de l'afficher grâce à Vue.JS seulement. Je ne vois pas trop comment faire sans copier entièrement le fichier dans la zone "data:" en haut de notre vue mais je suis sûr que cela est possible et est sûrement la plus propre ?

  Ce que j'entend pas "propre" c'est une manière rapide/courte à coder et rapide/performante pour l'utilisateur. Je ne sais pas si ça change grand chose mais dans mon exemple le json contient beaucoup de contenue. 

  J'aimerais votre avis, sur laquelle de mes méthodes seraient la meilleure et aussi sur comment vous, vous y prenez et pourquoi vous faites ce choix. Merci beaucoup d'avance pour vos retours ! :)

2 réponses

Pandazaur

Réponse acceptée

Salut !

Je vais essayer de t'aiguiller. Déja la websocket n'est pas la meilleure idée: tu peux passer par des requêtes HTTP qui sont plus simples et plus adaptées.

Tu fais serveur Node.js avec Express.js ? Si oui, tu as juste a créé une route qui va envoyer ta liste de pokémon, et ensuite depuis ton Vue.js, dans ton mounted() tu auras plus qu'à faire la requête vers cette route que tu as créé pour avoir la liste

app.js (si tu utilises Express.js)

// ... toute l'initialisation

app.get('/pokedex', (req, res) => {
    const pokedex = JSON.parse(fs.readFileSync('public/pokedex.json', 'utf8'))
    res.send(pokedex)
})

Depuis ton composant Vue.js

export defaut {
    data () {
        return {
            pokedex: null
        }
    },
    mounted () {
        fetch(`${IP_ET_PORT_DE_TON_SERVEUR}/pokedex`)
            .then(pokedex => this.pokedex = pokedex)
    }
}

Mon code est approximatif, je ne l'ai pas testé, il contient peut etre des erreurs.
J'espère que ca peut t'aider

Dehairka

Auteur

Salut !
Merci beaucoup pour ta réponse , je ne savais même pas qu'il était possible de faire ça grâce a VueJS et ça me permet de voir différemment comment aborder certaines idées que j'ai !

En attendant une réponse, j'ai opté pour l'utilisation de "axios" qui sert normalement pour des API avec Vue.JS

new Vue({
          el: '#pokedex',
          data () {
            return {
              info: null
            }

          },mounted () {
            axios
              .get('pokedex.json')
              .then(response => (this.info = response.data))
          }
        })

Je ne sais pas ce que tu en penses mais j'ai l'impression que le procédé est un peu pareil sauf que j'utilise dans mon exemple un plugin entier pour 1 ligne de code donc je considère à première vue ton exemple plus performant ?

Pour anecdote, j'avais fait à peu près pareil lors de mon première essaie en envoyant le json via express puis de l'utiliser avec EJS grâce au "template" (j'crois que c'est ça le nom) comme ça :

<%= pokedex[0].name %>

Mais j'avais des soucis pour manipuler les données, surtout quand il y en a autant

Merci en tout cas, c'est parfait ça m'aide vraiment beaucoup !
Bonne soirée :)