CARGAR TABLA VUEJS NOMBRE Y APELLIDO FOTO CON API JSON PHP MYSQL CON NEW VUE Y LIBRERIA SCRIPT SRC URL
cargar en tabla nombre y apellido con api json php pdo mysql hacerlo con = new Vue y usar librería <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Para cargar en una tabla el nombre y apellido utilizando API JSON, PHP, PDO y MySQL, puedes seguir los siguientes pasos:
Crear una base de datos en MySQL con una tabla que tenga campos para el nombre y apellido, y configurar la conexión a la base de datos en PHP utilizando PDO.
Crear un archivo PHP que se encargue de obtener los datos de la tabla y devolverlos en formato JSON. Por ejemplo, el archivo datos.php podría contener el siguiente código:
php
Copy code
<?php
header('Content-Type: application/json');
try {
$pdo = new PDO('mysql:host=nombre_del_servidor;dbname=nombre_de_la_base_de_datos', 'usuario', 'contraseña');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $pdo->prepare('SELECT nombre, apellido FROM tabla');
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($result);
} catch(PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
?>
Este código devuelve los datos de la tabla en formato JSON.
Crear una página HTML que utilice Vue.js y la librería de Vue.js que se especificó en la pregunta.
html
Copy code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de carga de datos con Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
</tr>
</thead>
<tbody>
<tr v-for="dato in datos">
<td>{{ dato.nombre }}</td>
<td>{{ dato.apellido }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
datos: []
},
mounted: function() {
var self = this;
fetch('datos.php')
.then(function(response) {
return response.json();
})
.then(function(data) {
self.datos = data;
});
}
});
</script>
</body>
</html>
Este código utiliza Vue.js para cargar los datos del archivo datos.php en la tabla HTML. La propiedad datos del objeto Vue se inicializa como un array vacío y se llena con los datos obtenidos a través de la API JSON en el método mounted. Luego, se utiliza la directiva v-for para iterar sobre los datos y generar las filas de la tabla.
Espero que esta solución te sea útil.
jose fernandez
cargar en tabla nombre y apellido Y FOTO GUARDADA EN CARPETA con api json php pdo mysql hacerlo con = new Vue y usar librería <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Para cargar en una tabla el nombre, apellido y foto guardada en una carpeta utilizando API JSON, PHP, PDO y MySQL, puedes seguir los siguientes pasos:
Crear una base de datos en MySQL con una tabla que tenga campos para el nombre y apellido, y el nombre del archivo de imagen en la carpeta donde se guardarán las imágenes. También debes configurar la conexión a la base de datos en PHP utilizando PDO.
Crear un archivo PHP que se encargue de obtener los datos de la tabla y devolverlos en formato JSON, incluyendo el nombre de la imagen. Además, este archivo debe devolver la ruta completa de la imagen. Por ejemplo, el archivo datos.php podría contener el siguiente código:
php
Copy code
<?php
header('Content-Type: application/json');
try {
$pdo = new PDO('mysql:host=nombre_del_servidor;dbname=nombre_de_la_base_de_datos', 'usuario', 'contraseña');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $pdo->prepare('SELECT nombre, apellido, foto FROM tabla');
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Agregar la ruta completa de la imagen a cada elemento del resultado
foreach ($result as &$row) {
$row['ruta_foto'] = 'ruta/completa/a/carpeta/de/imagenes/' . $row['foto'];
}
echo json_encode($result);
} catch(PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
?>
Este código devuelve los datos de la tabla en formato JSON, incluyendo el nombre de la imagen y la ruta completa de la imagen.
Crear una carpeta en el servidor donde se guardarán las imágenes y otorgar permisos de escritura a la carpeta.
Crear una página HTML que utilice Vue.js y la librería de Vue.js que se especificó en la pregunta. Además, esta página debe incluir una etiqueta img que muestre la imagen correspondiente al elemento de la tabla que se esté visualizando.
html
Copy code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de carga de datos con Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Foto</th>
</tr>
</thead>
<tbody>
<tr v-for="dato in datos">
<td>{{ dato.nombre }}</td>
<td>{{ dato.apellido }}</td>
<td>
<img :src="dato.ruta_foto" alt="">
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
datos: []
},
mounted: function() {
var self = this;
fetch('datos.php')
.then(function(response) {
return response.json();
})
.then(function(data) {
self.datos = data;
});
}
});
</script>
</body>
</html>
Este código utiliza Vue.js para cargar los datos del archivo datos.php en la tabla HTML. La propiedad datos del objeto Vue se inicializa
Comentarios
Publicar un comentario