<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal">A partir du fichier html suivant :</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'><meta charset="ISO"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <title>Requete http avec vue js3 et axios</title></p> <p class="MsoNormal" style='border:none;padding:0cm'> </head></p> <p class="MsoNormal" style='border:none;padding:0cm'> </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'> <select v-model='id'></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>1</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>2</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>3</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>4</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>5</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>6</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>7</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>8</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>9</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> <option>10</option></p> <p class="MsoNormal" style='border:none;padding:0cm'> </select></p> <p class="MsoNormal" style='border:none;padding:0cm'> <button > Voir le proverbe</button></p> <p class="MsoNormal" style='border:none;padding:0cm'> <br/></p> <p class="MsoNormal" style='border:none;padding:0cm'> <ol></p> <p class="MsoNormal" style='border:none;padding:0cm'> <div ></p> <p class="MsoNormal" style='border:none;padding:0cm'> <span ></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'> </ol></p> <p class="MsoNormal" style='border:none;padding:0cm'> </div></p> <p class="MsoNormal" style='border:none;padding:0cm'><script src="https://unpkg.com/vue@3/dist/vue.global.js></script> <!-- pour utiliser vue js --></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'><script src="https://unpkg.com/axios/dist/axios.min.js" ></script> <!-- pour utiliser axios (facilite les requetes http) --></p> <p class="MsoNormal" style='border:none;padding:0cm'> </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">Et du fichier app.js :</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 = "./proverbes.json"</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'> 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'> .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">produisant l'affichage ci-dessous :</p> <p class="MsoNormal"><span style= 'border:solid windowtext 1.0pt;padding:0cm'><img width="167" height="195" id="Image 3" src= "TP1-proverbes_enonce_fichiers/image001.png" alt="image" name= "Image 3" /></span></p> <p class="MsoNormal"> </p> <p class="MsoNormal">On voudrait, à l'aide de vue js, obtenir, à partir du clic sur le bouton <Voir le proverbe>, l'affichage suivant :</p> <p class="MsoNormal"><span style= 'border:solid windowtext 1.0pt;padding:0cm'><img width="442" height="79" id="Image 1" src= "TP1-proverbes_enonce_fichiers/image002.png" alt="image" name= "Image 1" /></span></p> <p class="MsoNormal"> </p> <p class="MsoNormal">Vous ferez 2 versions, une en utilisant le fichier proverbes.json et une 2<sup>nde</sup> en utilisant proverbes.xml.</p> <p class="MsoNormal"> </p> <p class="MsoNormal">Le fichier html, le fichier js de départ et les ressources proverbes.xml et proverbes.json sont fournis en ressources dans \\prof\vue js\tp1\ressources.</p> <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