<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal"> </p> <p class="MsoNormal">On dispose d'une API qui fournit la liste des villes des Côtes d'armor.</p> <p class="MsoNormal">Celle-ci est accessible à l'adresse suivante :</p> <p class="MsoNormal" align="center" style='text-align:center'> <span style= 'color:#4472C4'>https://geo.api.gouv.fr/communes?codeDepartement=22</span></p> <p class="MsoNormal"> </p> <p class="MsoNormal">A partir de celle-ci, et en utilisant Vue js, on souhaite obtenir l'affichage ci-dessous :</p> <p class="MsoNormal" align="center" style='text-align:center'> <span style='border:solid windowtext 1.0pt;padding:0cm'><img width= "540" height="308" id="Image 1" src= "Cor_Tp3_ville(vue&ajax)_fichiers/image001.png" alt="image" name="Image 1" /></span></p> <p class="MsoNormal"> </p> <p class="MsoNormal">L'affichage des villes est affiné en fonction de la saisie dans la zone input.</p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"><b><u><span style= 'font-size:14.0pt'>Correction</span></u></b></p> <p class="MsoNormal">Fichier html :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'> <html></p> <p class="MsoNormal" style='border:none;padding:0cm'> <head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <script></p> <p class="MsoNormal" style='border:none;padding:0cm'> </script></p> <p class="MsoNormal" style='border:none;padding:0cm'><style type="text/css"></p> <p class="MsoNormal" style='border:none;padding:0cm'> input,select</p> <p class="MsoNormal" style='border:none;padding:0cm'>{</p> <p class="MsoNormal" style='border:none;padding:0cm'> font-family:Arial;</p> <p class="MsoNormal" style='border:none;padding:0cm'> font-size:11px;</p> <p class="MsoNormal" style='border:none;padding:0cm'> background-color:lightgray;</p> <p class="MsoNormal" style='border:none;padding:0cm'> width:220;</p> <p class="MsoNormal" style='border:none;padding:0cm'>}</p> <p class="MsoNormal" style='border:none;padding:0cm'> </style></p> <p class="MsoNormal" style='border:none;padding:0cm'> </p> <p class="MsoNormal" style='border:none;padding:0cm'> </head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <body></p> <p class="MsoNormal" style='border:none;padding:0cm'><div id='app'></p> <p class="MsoNormal" style='border:none;padding:0cm'> <form name='f1'></p> <p class="MsoNormal" style='border:none;padding:0cm'> Liste des communes des Côtes d'armor : <br/></p> <p class="MsoNormal" style='border:none;padding:0cm'> <input <b>v-model="touches"</b> type='text' id='saisieVille' <b>@KeyUp='fetchAPI'</b>></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br/></p> <p class="MsoNormal" style='border:none;padding:0cm'> <select id='afficheVille' size='10' <b>v-model="ville"</b>></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option <b>v-for="objet in tabObjets" @click="afficheDetails"</b>>{{objet.nom}}</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> </select></p> <p class="MsoNormal" style='border:none;padding:0cm'> </form></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br></p> <p class="MsoNormal" style='border:none;padding:0cm'> <span id='details' <b>v-show="!vide"</b>></p> <p class="MsoNormal" style='border:none;padding:0cm'> <h2>Détails sur <b>{{ ville }}</b> :</h2></p> <p class="MsoNormal" style='border:none;padding:0cm'> <ul></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div <b>v-html="detailVille"</b>> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </ul></p> <p class="MsoNormal" style='border:none;padding:0cm'> </span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </p> <p class="MsoNormal" style='border:none;padding:0cm'><script src="https://unpkg.com/vue@next"></script> <!-- pour utiliser vue js --></p> <p class="MsoNormal" style='border:none;padding:0cm'><!-- pour utiliser axios (facilite les requetes http) --></p> <p class="MsoNormal" style='border:none;padding:0cm'><script src="https://unpkg.com/axios/dist/axios.min.js" ></script></p> <p class="MsoNormal" style='border:none;padding:0cm'><script src="./app.js"></script> <!-- notre application vue js --></p> <p class="MsoNormal" style='border:none;padding:0cm'> </body></p> <p class="MsoNormal" style='border:none;padding:0cm'> </html></p> </div> <p class="MsoNormal"> </p> <p class="MsoNormal">Fichier app.js final :</p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 1.0pt 1.0pt 1.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'>const API = "https://geo.api.gouv.fr/communes?codeDepartement=22";</p> <p class="MsoNormal" style='border:none;padding:0cm'> </p> <p class="MsoNormal" style='border:none;padding:0cm'>const app = Vue.createApp({</p> <p class="MsoNormal" style='border:none;padding:0cm'> data() {</p> <p class="MsoNormal" style='border:none;padding:0cm'> return {</p> <p class="MsoNormal" style='border:none;padding:0cm'> donnees : [],</p> <p class="MsoNormal" style='border:none;padding:0cm'> tabObjets : [],</p> <p class="MsoNormal" style='border:none;padding:0cm'> objet : {},</p> <p class="MsoNormal" style='border:none;padding:0cm'> touches : '',</p> <p class="MsoNormal" style='border:none;padding:0cm'> ville : '',</p> <p class="MsoNormal" style='border:none;padding:0cm'> vide: true,</p> <p class="MsoNormal" style='border:none;padding:0cm'> detailVille: '',</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> mounted: function () {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.fetchAPI();</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> methods : {</p> <p class="MsoNormal" style='border:none;padding:0cm'> async fetchAPI() {</p> <p class="MsoNormal" style='border:none;padding:0cm'> await axios.get(API)</p> <p class="MsoNormal" style='border:none;padding:0cm'> .then((response)=>{</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.tabObjets=[]</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.donnees = response.data</p> <p class="MsoNormal" style='border:none;padding:0cm'> //parcours du json donnees. A chaque "tour" pays reçoit un objet ({nom: ...})</p> <p class="MsoNormal" style='border:none;padding:0cm'> for (ville of this.donnees)</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> if (ville.nom.startsWith(this.touches))</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.tabObjets.push(ville);</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> })</p> <p class="MsoNormal" style='border:none;padding:0cm'> .catch((error)=>{</p> <p class="MsoNormal" style='border:none;padding:0cm'> console.log(error)</p> <p class="MsoNormal" style='border:none;padding:0cm'> })</p> <p class="MsoNormal" style='border:none;padding:0cm'> },</p> <p class="MsoNormal" style='border:none;padding:0cm'> afficheDetails()</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.vide = false;</p> <p class="MsoNormal" style='border:none;padding:0cm'> for(objet of this.tabObjets)</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> //console.log(this.ville + "vs:" + objet.nom);</p> <p class="MsoNormal" style='border:none;padding:0cm'> if (this.ville == objet.nom)</p> <p class="MsoNormal" style='border:none;padding:0cm'> {</p> <p class="MsoNormal" style='border:none;padding:0cm'> this.detailVille = "<li>Code postal : " + objet.codesPostaux[0] + " - Code commune : " + objet.code + " - Population : " + objet.population + " habitants.</li>";</p> <p class="MsoNormal" style='border:none;padding:0cm'> console.log(this.detailVille);</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'> }</p> <p class="MsoNormal" style='border:none;padding:0cm'>});</p> <p class="MsoNormal" style='border:none;padding:0cm'>const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</p> </div> <p class="MsoNormal"> </p> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor