Open menu

Connexion

R3.01 - dev. web - côté client (vuejs)

\2TP n°2 : bases vuejs - solution

Détails
Écrit par : stéphane Domas
Catégorie : R3.01 - dev. Web côté client (vuejs)
Clics : 719
Bases Vuejs

Exercice 1 & 2 - affichage dynamisé + gestion événements
1°/ model.js
  • Le fichier model.js peut être repris directement du TP n°1 bis, ou être téléchargé [ ici ]
  • NB : le remplissage de quelques localisations avec des items a été déplacé dans ce fichier (anciennement dans myscript.js)
2°/ index.js
  • NB : pour que le nom des items à acheter ne soit pas écrit en dur, mais soit lui-aussi dynamique, on peut ajouter dans data un tableau contenant ces items.
  • contenu de index.js :
1
2
3
4
5
6
7
8

var app = new Vue({
  el: '#mydiv',
  data: {
      perso:players[0],
      chosenItem:items[4],
      lstitems: [items[4],items[20],items[33]] // ids of items to buy
  }
})

 

 

3°/ myscript.js

  • Tout ce qui concerne l'affichage dynamique est maintenant géré grâce à vuejs.
  • Il n'y a donc pas besoin des méthodes updateXXX(), ni de récupérer des éléments du DOM.
  • Il ne reste plus que les fonctions à appeler en cas d'événement.
  • contenu de myscript.js :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function getSelectedItem() {
  let r1 = document.getElementById("rit1");
  if (r1.checked) return items[4];
  let r2 = document.getElementById("rit2");
  if (r2.checked) return items[20];
  let r3 = document.getElementById("rit3");
  if (r3.checked) return items[33];
}
 
// wrapper to check is enough gold then call buy() of player and to update gold
function buy() {
 
  if (app.chosenItem.price > app.perso.gold) {
    alert("Not enough gold");
  }
  else {
    let r = confirm("want to buy " + app.chosenItem.name+" for "+app.chosenItem.price+"gp ?");
    if (r == true) {
      app.perso.buy(app.chosenItem);
    }
  }
}

4°/ shop.html

  • NB : l'affichage des items par localisation est "moche" car il est fait en utilisant directement le tableau items de chaque localisation.
  • Pour bien faire, il faudrait pouvoir parcourir ce tableau et utiliser {{ }} sur chaque élément. Ce sera abordé dans le 3ème cours.
  • contenu de shop.html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="model.js"></script>
</head>
<body>
  <div id="mydiv">
    <h1>{{perso.name}}, level {{perso.level}}, life = {{perso.life}}, strength =  {{perso.strength}}</h1>
    <table border="1">
      <tr><td>head</td><td>{{perso.slots[0].items}}</td></tr>
      <tr><td>body</td><td>{{perso.slots[1].items}}</td></tr>
      <tr><td>hands</td><td>{{perso.slots[2].items}}</td></tr>
      <tr><td>belt</td><td>{{perso.slots[3].items}}</td></tr>
      <tr><td>bag</td><td>{{perso.slots[4].items}}</td></tr>
    </table>
    <label for="gold">Gold:</label>
    <input type="text" readonly id="gold" v-bind:value="perso.gold"><br>
    <label for="rit1">{{lstitems[0].name}}</label>
    <input type="radio" checked id="rit1" name="buyitem" onclick="it=getSelectedItem();app.chosenItem = it;">
    <label for="rit2">{{lstitems[1].name}}</label>
    <input type="radio" id="rit2" name="buyitem" onclick="it=getSelectedItem();app.chosenItem = it;">
    <label for="rit3">{{lstitems[2].name}}</label>
    <input type="radio" id="rit3" name="buyitem" onclick="it=getSelectedItem();app.chosenItem = it;">
    <button id="buyitem" onclick="buy()">Buy</button><br>
    <label for="price">Price:</label>
    <input type="text" readonly id="price" v-bind:value="chosenItem.price"><br>
  </div>
  <script src="myscript.js"></script>
  <script src="index.js"></script>
</body>
</html>

Remarques :

  • l'affichage des items par localisation est "moche" car il est fait en utilisant directement le tableau items de chaque localisation.
  • Pour bien faire, il faudrait pouvoir parcourir ce tableau et utiliser {{ }} sur chaque élément. Ce sera abordé dans le 3ème cours.
  • Pour "simplifier" les onclick qui sont tous identiques, il serait profitable de créer une fonction qui enveloppe les deux instructions.
  • ATTENTION ! onclick n'est pas géré par vuejs donc le code javascript accède aux variables et fonctions définies globalement. C'est pourquoi on DOIT utiliser app.chosenItem plutôt que chosenItem directement.
  • La gestion des événements grâce à vuejs sera abordée dans le 4ème cours.
5°/ Archive globale
  • Vous pouvez télécharger une archive avec tous les fichiers [ ici ]