https://cours-info.iut-bm.univ-fcomte.fr/index.php/menu-cours-s4/menu-mmi4web/2556-tp-n-1-heroes-vilains-axios-vuetify

Préambule

Le but de ce TP est de commencer une SPA en vuejs intitulée "Heroes & Vilains", qui permet de gérer des personnes (plus ou moins gentilles/méchantes) avec des super-pouvoirs, des équipes composées de ces personnes, et des organisations qui fédèrent des équipes.

Toutes les données sont stockées dans une base de données non relationnelle mongdb, manipulable au travers d'une API proposant diverses routes, décrites ci-dessous.

La SPA permet de s'exercer à accéder à cette API en utilisant axios et de visualiser les données ainsi récupérées grâce à une IG utilisant vuetify.

Les compétences/connaissances vuejs utiles pour ce TP sont celles qui ont été abordées dans le semestre précédent, plus celles du premier TD.

1°/ Modèle de données

La BdD a été créée sur un serveur mongodb. Elle définit 3 collections : heroes, teams, organizations. Ces collections sont comme des tables en SQL, excepté qu'elles contiennent des documents dont la structure n'est pas celle du relationnel. Ces documents sont des objets JSON.

Pour résumer ce que contiennent ces documents :

• un héro a un nom public, un nom réel, des pouvoirs. Chaque pouvoir a un nom, un type (force, vitesse, endurance, magie, effrayant, furtivité, stupidité) et un niveau de 0 à 100.
• une équipe a un nom et des membres qui sont des héros.
• une organisation a un nom, un mot de passe secret et rassemble des équipes.

Voici un exemple de document tiré de la collection heroes :

{
  "_id": ObjectId("614ddafcfda4c31dc9299352"),
  "publicName": "super dupond",
  "realName": "jean dupond",
  "powers": [
    {
      "_id": ObjectId("614ddafcfda4c31dc9299353"),
      "name": "super biscottos",
      "type": 1,
      "level": 75
    },
    {
      "_id": ObjectId("614ddafcfda4c31dc9299354"),
      "name": "super ducon",
      "type": 6,
      "level": 50
    }
  ]
}

On remarque qu'avec mongodb, tous les objets, y compris ceux qui sont à l'intérieur d'autres objets, sont référencés par un identifiant, sous la forme d'un ObjectId, qui contient un hashcode unique pour chaque objet de la BdD.

Pour y accéder à la BdD, l'API utilise l'ORM Mongoose qui définit des schémas qui permettent de décrire la structuration des ces documents.

Pour décrire les documents de heroes, il y a deux schémas dont le code simplifié est donné ci-dessous :

let PowerSchema = new Schema({
  name: {type: String, required: true},
  type: { type: Number, required: true },
  level: {type: Number, required: true}
}

let HeroeSchema = new Schema({
  publicName: {type: String, required: true},
  realName: {type: String},
  powers: [ PowerSchema ],
});

Si on se réfère à l'exemple ci-dessus, tiré de la BdD, on remarque que ces schémas correspondent bien aux documents stockés en BdD : un héro a des champs publicName, realName et powers, et ce dernier est bien un tableau contenant des objets dont la structure correspond à PowerSchema, avec des champs name, type, level.

La seule différence est que les schémas n'ont pas besoin de contenir le champ _id dans tous les objets. C'est normal car mongoose se charge de les ajouter tout seul.