<!-- If the browser does not support frames put the first topic content here --> <div class="WordSection1"> <p class="MsoNormal"><b><span style='font-size:14.0pt'>Attention ! Ceci ne fonctionne que si les scripts sont sur un serveur web.</span></b></p> <p class="MsoNormal"> </p> <p class="MsoNormal">Fichier html <i>final</i> :</p> <table class="MsoTableGrid" border="1" cellspacing="0" cellpadding= "0" style='border-collapse:collapse;border:none'> <tr> <td width="302" valign="top" style= 'width:226.55pt;border:solid windowtext 1.0pt; background:#D9D9D9;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" align="center" style='text-align:center'> <b><span style='color:black'>Version JSON</span></b></p> </td> <td width="302" valign="top" style= 'width:226.55pt;border:solid windowtext 1.0pt; border-left:none;background:#D9D9D9;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal" align="center" style='text-align:center'> <b><span style='color:black'>Version XML</span></b></p> </td> </tr> <tr> <td width="302" valign="top" style= 'width:226.55pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal"><html></p> <p class="MsoNormal"><head></p> <p class="MsoNormal"><meta charset="ISO"></p> <p class="MsoNormal"><title>Requete http avec vue js3 et axios</title></p> <p class="MsoNormal"></head></p> <p class="MsoNormal"> </p> <p class="MsoNormal"><body></p> <p class="MsoNormal"><div id='app'></p> <p class="MsoNormal"> <select v-model='id'></p> <p class="MsoNormal"> <option>1</option></p> <p class="MsoNormal"> <option>2</option></p> <p class="MsoNormal"> <option>3</option></p> <p class="MsoNormal"> <option>4</option></p> <p class="MsoNormal"> <option>5</option></p> <p class="MsoNormal"> <option>6</option></p> <p class="MsoNormal"> <option>7</option></p> <p class="MsoNormal"> <option>8</option></p> <p class="MsoNormal"> <option>9</option></p> <p class="MsoNormal"> <option>10</option></p> <p class="MsoNormal"> </select></p> <p class="MsoNormal"> <button @click='fetchAPI'> Voir le proverbe</button></p> <p class="MsoNormal"> <br/></p> <p class="MsoNormal"> <ol></p> <p class="MsoNormal"> <div v-for="objet in tabObjets"></p> <p class="MsoNormal"> <span v-if="objet.id==id">{{ objet.proverbe }}</span></p> <p class="MsoNormal"> </div></p> <p class="MsoNormal"> </ol></p> <p class="MsoNormal"></div></p> <p class="MsoNormal"><script src="https://unpkg.com/vue@next"></script> <!-- pour utiliser vue js --></p> <p class="MsoNormal"><script src="./app.js"></script> <!-- notre application vue js --></p> <p class="MsoNormal"><script src="https://unpkg.com/axios/dist/axios.min.js" ></script> <!-- pour utiliser axios (facilite les requetes http) --></p> <p class="MsoNormal"> </p> <p class="MsoNormal"></body></p> <p class="MsoNormal"></html></p> </td> <td width="302" valign="top" style= 'width:226.55pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal"><html></p> <p class="MsoNormal"><head></p> <p class="MsoNormal"><meta charset="ISO"></p> <p class="MsoNormal"><title>Requete http avec vue js3 et axios</title></p> <p class="MsoNormal"></head></p> <p class="MsoNormal"> </p> <p class="MsoNormal"><body></p> <p class="MsoNormal"><div id='app'></p> <p class="MsoNormal"> Choisir un proverbe :</p> <p class="MsoNormal"> <select v-model='id' @change="fetchAPI"></p> <p class="MsoNormal"> <option>1</option></p> <p class="MsoNormal"> <option>2</option></p> <p class="MsoNormal"> <option>3</option></p> <p class="MsoNormal"> <option>4</option></p> <p class="MsoNormal"> <option>5</option></p> <p class="MsoNormal"> <option>6</option></p> <p class="MsoNormal"> <option>7</option></p> <p class="MsoNormal"> <option>8</option></p> <p class="MsoNormal"> <option>9</option></p> <p class="MsoNormal"> <option>10</option></p> <p class="MsoNormal"> </select></p> <p class="MsoNormal"> <br/></p> <p class="MsoNormal"> <ol></p> <p class="MsoNormal"> <div></p> <p class="MsoNormal"> <span v-show="id > 0">{{ monProverbe }}<br></span></p> <p class="MsoNormal"> </div></p> <p class="MsoNormal"> </ol></p> <p class="MsoNormal"></div></p> <p class="MsoNormal"><script src="https://unpkg.com/vue@next"></script> <!-- pour utiliser vue js --></p> <p class="MsoNormal"><script src="https://unpkg.com/axios/dist/axios.min.js" ></script> <!-- pour utiliser axios (facilite les requetes http) --></p> <p class="MsoNormal"><script src="./app.js"></script> <!-- notre application vue js --></p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"></body></p> <p class="MsoNormal"></html></p> </td> </tr> </table> <p class="MsoNormal"> </p> <p class="MsoNormal">Et fichier app.js <i>final</i>:</p> <table class="MsoTableGrid" border="1" cellspacing="0" cellpadding= "0" style='border-collapse:collapse;border:none'> <tr> <td width="302" valign="top" style= 'width:226.55pt;border:solid windowtext 1.0pt; background:#D9D9D9;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal"><b><span style= 'color:black'>VersionJSON</span></b></p> </td> <td width="302" valign="top" style= 'width:226.55pt;border:solid windowtext 1.0pt; border-left:none;background:#D9D9D9;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal"><b><span style='color:black'>Version XML</span></b></p> </td> </tr> <tr> <td width="302" valign="top" style= 'width:226.55pt;border:solid windowtext 1.0pt; border-top:none;padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal">const API = "./proverbes.json"</p> <p class="MsoNormal">const app = Vue.createApp({</p> <p class="MsoNormal"> data() {</p> <p class="MsoNormal"> return {</p> <p class="MsoNormal"> tabObjets : [],</p> <p class="MsoNormal"> proverbe : '',</p> <p class="MsoNormal"> id : 1</p> <p class="MsoNormal"> }</p> <p class="MsoNormal"> },</p> <p class="MsoNormal"> methods : {</p> <p class="MsoNormal"> async fetchAPI() {</p> <p class="MsoNormal"> await axios.get(API)</p> <p class="MsoNormal"> .then((response)=>{</p> <p class="MsoNormal"> this.tabObjets = response.data</p> <p class="MsoNormal"> })</p> <p class="MsoNormal"> .catch((error)=>{</p> <p class="MsoNormal"> console.log(error)</p> <p class="MsoNormal"> })</p> <p class="MsoNormal"> }</p> <p class="MsoNormal"> }</p> <p class="MsoNormal">});</p> <p class="MsoNormal">const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</p> </td> <td width="302" valign="top" style= 'width:226.55pt;border-top:none;border-left: none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt'> <p class="MsoNormal">const API = "./proverbes.xml"</p> <p class="MsoNormal">const app = Vue.createApp({</p> <p class="MsoNormal"> data() {</p> <p class="MsoNormal"> return {</p> <p class="MsoNormal"> id: 0,</p> <p class="MsoNormal"> monProverbe: '',</p> <p class="MsoNormal"> }</p> <p class="MsoNormal"> },</p> <p class="MsoNormal"> methods : {</p> <p class="MsoNormal"> async fetchAPI() {</p> <p class="MsoNormal"> await axios.get(API)</p> <p class="MsoNormal"> .then((response)=>{</p> <p class="MsoNormal"> parser = new DOMParser();</p> <p class="MsoNormal"> xmlDoc = parser.parseFromString(response.data, "text/xml");</p> <p class="MsoNormal"> mesProverbes = xmlDoc.getElementsByTagName("proverbe");</p> <p class="MsoNormal"> this.monProverbe = mesProverbes.item((this.id - 1)).firstChild.nodeValue;</p> <p class="MsoNormal"> })</p> <p class="MsoNormal"> .catch((error)=>{</p> <p class="MsoNormal"> console.log(error)</p> <p class="MsoNormal"> })</p> <p class="MsoNormal"> }</p> <p class="MsoNormal"> }</p> <p class="MsoNormal">});</p> <p class="MsoNormal">const vm = app.mount('#app'); // mount spécifie que l'application Vue s'affichera dans la div avec id="app"</p> </td> </tr> </table> <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