<!-- 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 pays européens.</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://restcountries.eu/rest/v2/region/europe?fields=name</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'> <img width="414" height="322" id="Picture 4" src= "Tp2_pays(vue&ajax)_fichiers/image001.jpg" alt="image" name= "Picture 4" /></p> <p class="MsoNormal">L'affichage est affiné en fonction de la saisie dans la zone input.</p> <p class="MsoNormal"> </p> <p class="MsoNormal">On fournit le fichier html de départ :</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'> </head></p> <p class="MsoNormal" style='border:none;padding:0cm'> <body></p> <p class="MsoNormal" style='border:none;padding:0cm'><form name='f1'></p> <p class="MsoNormal" style='border:none;padding:0cm'>Liste des pays : <br/></p> <p class="MsoNormal" style='border:none;padding:0cm'><input type='text' id='saisiePays'></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br/></p> <p class="MsoNormal" style='border:none;padding:0cm'><select id='affichePays' size='10'></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'> </html></p> </div> <span style= 'font-size:11.0pt;font-family:"Calibri",sans-serif'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"> </p> <p class="MsoNormal">Et le fichier app.js de départ :</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'>const API = "https://restcountries.eu/rest/v2/region/europe?fields=name";</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'> </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'> },</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'> </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'> </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'> }</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> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <div style= 'border:solid windowtext 1.0pt;border-bottom:none;padding:1.0pt 4.0pt 0cm 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'>T.A.F.</p> </div> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'>Réaliser cette application</p> </div> </div>
Table des matières
Sujets
Recherche
Help content
Help content
Générée avec
chmProcessor
Générée avec
chmProcessor