➜ CRUD LIST | Mostrar registros con Vue.js
VueJS y PHP: Construyendo un CRUD List para Mostrar Usuarios | La extracción de registros se realiza mediante peticiones ajax para ello usaremos axios, que integrado a Vue.js ofrece más velocidad y código más legible.
¡Sumérgete en el desarrollo web con este tutorial práctico donde aprenderás a construir un CRUD List para mostrar la lista de usuarios! Utilizaremos VueJS para la interfaz dinámica y PHP junto con MySQL para gestionar la información del usuario. Desde la configuración inicial hasta la visualización de datos en tiempo real, este tutorial te proporcionará las habilidades esenciales para crear aplicaciones web interactivas.
Html
<div class="page">
<H1 class="text-center">VUE JS | API REST EN PHP MYSQL</H1>
<button @click="modalCreate=true">Create</button>
<table>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>IMAGE</th>
<th>ACCIÓN</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>
<img :src="'img/'+user.image" width="100">
</td>
<td>
<button @click="modalUpdate=true; selectUser(user)">Edit</button>
<button @click="modalDel=true; selectUser(user)">Del</button>
</td>
</tr>
</tbody>
</table>
</div>
Vue JS
const app= Vue.createApp({
data() {
return{
message : "Hola Vue !!!!",
users:[]
}
},
mounted(){
this.getUsers()
},
methods:{
getUsers(){
axios.get(api+"?opc=list")
.then(function(response){
app.users = response.data.users
})
},}).mount("#app")
4950 visitas
Capítulo 5 – CRUD Insert Usuario | agregar un registro con Vue.js »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar