Récupérer le résultat d'une requête mysql via vue.js

**Zembla** · 06/06/2018, 13h26

Bonjour,

J'essaye de reproduire un tutorial sur comment afficher les donnée d'une requete mysql via un coposant vue.js mais ça ne marche pas

voici le html et le javascript

( bien sur dans le head j'ai les appels au biblis vue.js et axios.js )

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<divid='myapp'>
 
<!-- Select All records -->
<inputtype='button' @click='allRecords()'value='Select All users'>
<br><br>
 
<!-- Select record by ID -->
<inputtype='text'v-model='userid'placeholder="Enter Userid between 1 - 24">
<inputtype='button' @click='recordByID()'value='Select user by ID'>
<br><br>
 
<!-- List records -->
<tableborder='1'width='100%'style='border-collapse: collapse;'>
<tr>
<th>Username</th>
<th>Name</th>
<th>Email</th>
</tr>
 
<trv-for='user in users'>
<td>{{ user.username }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</table>
 
</div>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
<script>
varapp=newVue({
el:'#myapp',
data:function () {
return {
users:"",
userid:0
                    }
                  }
                ,               
methods: {
allRecords:function(){
 
axios.get('http://localhost/vue-js-mysql-2/ajaxfile.php')
                        .then(function (response) {
app.users=response.data;
                        })
                        .catch(function (error) {
console.log(error);
                        });
                    },
recordByID:function(){
if(this.userid>0){
 
axios.get('http://localhost/vue-js-mysql-2/ajaxfile.php', {
params: {
userid:this.userid
                                }
                            })
                            .then(function (response) {
app.users=response.data;
                            })
                            .catch(function (error) {
console.log(error);
                            });
                        }
 
                    }
                }
            })
 
</script>

le php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
include"config.php";
 
$condition  = "1";
if(isset($_GET['userid'])){
$condition  = " id=".$_GET['userid'];
}
// Tous les utilisateurs de notre table
$utils = $con->query('SELECT*FROM `users` WHERE'.$condition);
 
// Parcours des résultats en mode PDO::FETCH_ASSOC
while ($response = $utils->fetch(PDO::FETCH_ASSOC)) {
// print_r($response);
$response = json_encode($response);
echo$response;
}
exit;

la requête sql via json donne en sortie

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

{"id":"1","username":"yssyogesh","name":"Yogesh singh","email":"yssyogesh_gmail.com"}{"id":"2","username":"sonarika","name":"Sonarika","email":"sonarika_gmail.com"}{"id":"3","username":"vishal","name":"Vishal Sahu","email":"vishal_gmail.com"}{"id":"4","username":"mayank","name":"Mayank","email":"mayank_yahoo.com"}{"id":"5","username":"vijay","name":"Vijay","email":"vijayec_gmai.com"}{"id":"6","username":"jiten","name":"Jiten singh","email":"jiten93_gmail.com"}{"id":"7","username":"rahul","name":"Rahul singh","email":"rahul_gmail.com"}{"id":"8","username":"shreya","name":"Shreya","email":"shreya_yahoo.com"}{"id":"9","username":"mohit","name":"Mohit","email":"mohit_gmail.com"}{"id":"10","username":"rohit","name":"Rohit singh","email":"rohit_gmail.com"}{"id":"11","username":"abhilash","name":"Abhilash ","email":"abhilash_gmail.com"}

mais le résultat donne l'affichage du tableau mais avec des lignes vides.

j'aimerais récupérer le résultat de la requête mysql dans le composant data de vue.js

ici

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
varapp=newVue({
el:'#myapp',
data:function () {
return {
users:"",
 
userid:0
                    }
                  }

merci de l'aide

**bonjourajax** · 07/06/2018, 04h29

Bonjour,
la valeur de $response n'est pas celle qui est affichée

mais le résultat donne l'affichage du tableau mais avec des lignes vides.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$utils = $con->query('SELECT * FROM users');
 
while ($response = $utils->fetch(PDO::FETCH_ASSOC)) 
  $result = json_encode($response);
 
echo $result;

j'aimerais récupérer le résultat de la requête mysql dans le composant data de vue.js

la tu auras la valeur de la derniere ligne, mais ce n'est toujours pas la finalité !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<inputtype='button' @click='allRecords()'value='Select All users'>

ne pas coller input type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type

edit : je te l'ai fais en php et en jquery.
vue.js et axios.js je connais pas

**Zembla** · 07/06/2018, 10h00

Merci pour la réponse.

ne pas coller input type

dans mon code ce n'est pas collé , j'ai du faire une faute de frappe quant j'ai posté le script.

le fait de retirer la condition where dans la requête ne change rien. le script fonctionne en ligne ( demo de l'auteur du tuto ) ici
http://demo.makitweb.com/vuejs_fetch_data/

mais je ne sais pour quelle raison ( alors que j'ai exactement les mêmes fichiers ) de mon coté il m'affiche un tableau html vide.

vue.js est un framework javascript léger
https://maurice-chavelli.developpez....ases-vue-js-2/

et axios et un client HTTP pour le navigateur et node.js.

hors j'ai bien node.js d'installé sur mon pc.

**bonjourajax** · 07/06/2018, 12h04

D'acc

J'ai édité mon post précédent, si ca marche pas :

1) vérifier que ta table s'appelle bien comme ca
2) est ce qu'il y a une erreur ?
3) pourquoi placer des scripts dans le <head> et d'autres en bas du html? met tout ensemble

Pour t'aiguiller davantage il sera mieux d'utiliser les résultats de cette façon:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$result = [];
while ($response = $utils->fetch(PDO::FETCH_ASSOC)) 
  $result[] = $response;
 
echo json_encode($result);

**Zembla** · 07/06/2018, 12h38

Merci,
ça fonctionne maintenant

j'ai remplacé le bout de code de la boucle while par le tient.

bravo bonjourajax

**bonjourajax** · 07/06/2018, 13h14

de rien mais ca c'était que le début

j'avais fais tout le reste du script avec le traitement complet
mais bon si ca te suffit c'est que le module vue.js doit faire un sacré boulot pour s'adapter a chaque json ^^

Récupérer le résultat d'une requête mysql via vue.js [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager