1/2 - Laravel + Vue + SPA + CRUD
HTML-код
- Опубликовано: 3 авг 2024
- Primer video del curso: Laravel 8 + Vue + SPA + CRUD.
00:00 - Intro
01:51 - ¿Qué estructura vamos a crear?
02:30 - ¿Cómo será nuestro router con Vue?
02:56 - ¿Cómo serán las rutas con Laravel?
03:49 - Cursos recomendados
06:13 - Probando nuestra app
07:05 - Creación del proyecto
07:53 - Base de datos - configuración
08:07 - Instalación de las librerías Vue, Axios, Router
10:45 - Modelo - creación
11:07 - Migraciones - creación
11:41 - Migración - configuración
12:00 - Modelo - configuración
12:45 - Controlador - creación
13:38 - Controlador - Desarrollo
16:48 - Cómo crear Modelo-Migración-Controlador todo en uno
18:11 - Rutas en Laravel
20:45 - Layout blade base
22:26 - Estructura para los componentes Vue
24:58 - Creación y configuración del router con Vue
28:10 - Configurar archivo app.js
30:34 - Probando nuestra app
Si quieres apoyar al canal Informática DP - link para donación con Paypal
www.paypal.com/paypalme/infor...
REDES SOCIALES
Canal de RUclips: / informaticadp
Web: www.informaticadp.com.ar/
Facebook: / informaticadp.com.ar
Instagram: / info_dp
Twitter: / infodp1
Cursos de Laravel
Laravel 8 ¡desde cero!
• Laravel ¡desde cero!
CRUD con Laravel 8 + Livewire + Jetstream
• CRUD con Laravel + Liv...
CRUD con Laravel 8 + Inertia + Jetstream
• CRUD con Laravel + Ine...
CRUD con Laravel 8 - Imágenes
• CRUD con Laravel - Imá...
Laravel 8 - Varios
• Laravel - Varios
Excelente vídeo, es imposible no entender con semejante explicación lo felicito
Muchas gracias Marlon!!! Viste que esa combinación laravel + vue tiene mucha demanda. Espero ayudarlos. Saludos!
bnnbju7tfu7txxf2kml9
fcb...
ml9
fv ..ño
@@informaticadp x cvgy8
Es increíble como en un video de 30 minutos enseña más cosas que en un ramo de la u completo además usando tecnologias actuales que son las que se piden en la actualidad, le doy las gracias por etregar estos videos que son oro para los que llevamos poco tiempo en el rubro.
Muchas gracias Jose!!! Es lo mejor saber esto. Y me alegra poder ayudar. Abrazo!!
Muy buenos tus videos. Sigue adelante que muchos te seguimos y muchas gracias crack por compartir tus conocimientos
Muchas gracias Carlos!!
increible la manera de explicar bro, te debo una parte de mi salario, mas canales como el tuyo
Con éste comentario basta y sobra. Muchas gracias!!!
GENIO TOTALLL!!! Exelente video !
Grande señor , estos tutoriales viene de 10 Laravel esta pegando fuerte acá en Chile , agradecido como siempre señor!!
Saludos mi estimado! Así es, Laravel es muy bueno. Abrazo!
Gracias master, esta aplicación me servirá para una prueba técnica.
Saludos capo. Videazo
Excelente Rodrigo!!! Saludos
Para los que tengan el problema de no ver el App.js cuando inicia el servidor (127.0.0.1) ERROR 404 es porque hay que añadir alguna linea que otra en web.php debiendo quedar asi
Route::get('{any}', function () {
return view('app');
})->where('any', '.*');
Me ha llevado dos dias buscando la solucion, pero por lo demás muy buen video. He aprendido mucho
amigo me podes ayudar, tengo ese error y no hay forma de solucionarlo
Gracias Juan Antonio por el aporte!
jaja yo con eso no tuve problema casi al final del video cuando comenta "welcome" se ve el where('any', '.*') pero si tuve problemas con la versión de Vue me instalo Vue3 y tuve que desinstalar y instalar Vue2
Esta combinación es mortal, use livewire pero Vue soluciona al 100% todos mis problemas frontend, eres un crack Bro, Dios quiera pronto llegues al millón como regalo a tu esfuerzo y dedicación para darnos estas joyas
Grande bro! Muchas gracias por las buenas vibras!! Abrazo!!
Excelente explicación
Muchas gracias!!!
Perfecto Bro!!
Gracias Diego!!
Es un crack Master!
Saludos y muchas gracias Emmanuel!
Excelente facil de seguir
Gracias Raúl!!
De verdad? Y el código que dijo que dejaría en el minuto 21:40? Usted lo encontró? cómo pudo seguirlo si ese código ni lo mostró completo en el video ni lo compartió?
Eres el mejor, un crack
Gracias, saludos!!
Acabo de encontrar tu canal y me encantó! Muchas gracias por compartir tu conocimiento! Me gustaría saber si tenés pensado hace algún video sobre cómo consumir una API externa con Laravel y VueJS. Gracias!
Muchas gracias!! Si no viste este video, te lo recomiendo.
ruclips.net/video/eRYz62Cx0Wg/видео.html
Muy bueno, gracias por compartir, sería bueno que actualices para Laravel 9 + Vue3 con ViteJS
Gracias! Ya Laravel 10 jeje
deberias subir mas videos para crear sistemas completos como minimo 2 clases porque yo siempre tuve esa duda con respecto a las migraciones en laravel
Hola Fijate en el canal, hay muchos proyectos donde muestro diferentes formas de trabajar con las migraciones. Igual vamos con mas Laravel.. saludos..
master eres una maquina, pero me gustaría sugerirte que hicieras esto mismo con vuex hasta donde tengo entendido es una mejor practica....comenzamossss =)
Muchas gracias! Tengo en mente un login con vue y vuex, para usar la API de laravel que hicimos con JWT.
Si alguien tiene error con webpack-cli sólo modifique estás dependencias en el package json "vue": "^2.6.12",
"vue-loader": "^15.9.8",
npm i vue@2.6.12 vue-loader@15.9.8
@@luizarnoldchavezburgos3638 no me funciono con npm i vue@2.6.12 tuve que instalar el vue@2.6.14 como senalan mas abajo. Alli si
MIL GRACIAS BRO, estuve horas intentando solucionar el problema y tu comentario me ayudo un monton. De verdad que gracias
Hola master, tengo una duda si nada mas quiero utilizar VueJS para validar los input del lado del cliente tengo que igual instalarlo en el proyecto con npm o puedo apuntar directamente al cdn en el header del index.blade.php
Por cierto excelente video
Excelente tutorial, y como haría si quisiera utilizar typescript?
Y si hiciera mis rutas con Laravel y Vue solo lo usara para los componentes ¿No lo ves bien? Es duda. Gracias.
Justo lo que andaba buscando bro!! una pregunta, es mejor vue en SPA o tambien es recomendable para MPA??
Para ambas! Vas a ver en este curso lo fácil que es trabajar con vue y sus componentes con Laravel. Espero te sirva. Abrazo Bro!
@@informaticadp Muchas gracias!! En este proyecto utilizas jetsetram/inertia?
Un componente en Vue es equivalente a un metodo de un controlador en Laravel ? Asi lo comprendi.
Ayuda, al momento de correr "npm run watch" me generó warnings en los imports:
WARNING in ./resources/js/app.js 4:13-16
export 'default' (imported as 'vue') was not found in 'vue'
Y me sugiere una lista de possible exports.
Esto pasa también con el router
export 'default' (imported as 'VueRouter') was not found in 'vue-router'
también tengo este problema
Es por que te instalaste vuejs3 y no es compatible con este curso cambialo a vue2 en el package.json
Por que te instalaste vue3 tienes que usar vue2
@@cesart.molina2177 gracias!!
Me funcionó con las dependencias en estas versiones:
vue@2.6.14
vue-router@3.5.3
y devDependencies:
vue-loader@15.9.8
vue-template-compiler@2.6.14
Que plugins usas en VSCODE para este curso???
7:54 Hola amigo, buen video existe algún motivo en especial por el cual defines en 191 el tamaño del string?
Hola Kevin. Era por la versión de MySQL. En un video lo explico. No recuerdo cuál. Si tu versión está actualizada, esa configuración no hace falta. Saludos!
existe repo de Github?
buenos dias excelente curso muy bien explicado pero si quisiera añadir una tabla categoria como se hace la relacion?ej una categoria puede tener varios blogs ah y no tienes cursos en udemy? me gustaria adquirir si lo tienes
Para eso necesitarías crear un nuevo modelo con migración llamado Category y agregar una clave foránea a la tabla blogs junto con una relación en el modelo de Blog que indique que está relacionado con Category. Esto último es para poder trabajar con eloquent.
Resumiendo...
-Creas dos migraciones. Una para crear la tabla de categories y otra para agregar la clave foránea en la tabla blogs.
- Generas el modelo de Category, esto igual, lo podes hacer junto con la migración, php artisan make:model Category -m
-Después de eso agregas la relación al modelo Blog con belongsTo
-También agregas la relación al modelo Category con hasMany.
Una vez que tengas eso ya vas a poder obtener todos los blogs de una categoría con $category->blogs
Y la categoría de un blog con $blog->category
Esto te obtendrá un object de la relación.
Se entiende por ->blog y ->category que son los nombres de las funciones donde obtenemos la relación en el modelo.
Saludos!
Hola, buen video. En el depurador o compilador del vue "npm run watch" no me muestra ningun error, segui todo al pie de la letra comillas, mayusculas y demas. pero llego al momento de mostrar la pagina 127.0.0.1:8000 y la pagina queda en blanco, vue no me lleva lo de mi App.vue a mi div con id app, queda en blanco esa parte.
hola, tengo el mismo problema en este momento... lograste solucionarlo?
@@freddyarriagacruz8987 no, aún no lo logro. Vi el vídeo 3 veces más, le di pausa y compare 20 mil veces y aún se me presenta el problema.
Avísame si tú puedes solucionarlo brother
vale, mirando el código fuente del siguiente vídeo puedo comprobar que el archivo app.js define mal la constante app, que debería ser:
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
})
@@JaimeReyCasadoMonokepos muchas gracias brother, voy a hacer los ajustes a ver si me funciona.
@@JaimeReyCasadoMonokepos esta igual que en el video const app = new Vue({
el: '#app',
router: router,
render: h => h(App)
});
alguien le da este waring export 'vue' (imported as 'vue') was not found in 'vue'
Buenas tardes,
Me sale error al confuigurar el vueRouter, dice que no se puede usar el use,ayuda porfavor
Hola muy buen curso pero tengo una duda. Cuando en routes/web.php al final se pone Route::get('{any}') y todo lo que lleva mas el .* al final. Para que se utiliza? Gracias
después de la declaración de una ruta,
donde el primer parámetro es el parámetro nombrado en la ruta y
el segundo parámetro es una expresión regular que debe coincidir con verdadero. Si no es así,
la ruta no se ejecuta y se encuentra otra coincidencia (si existe)
@@camilooyarzo9987 genial Gracias!
Sigo prefiriendo no integrarlo en el mismo proyecto el vue ya que como son apis, lo hago aparte, lo genero y ya tengo todo bien ordenado, aunq esta parte me gusto de crearlo desde 0 pero como dices es duro cuando se hace con el artisan ui porque crea todo lo de vue y se vuelve complejo a lo ultimo de entender para el siguiente...
Si, son formas. Comparto lo que decís. Igual Vue se integra perfecto en un proyecto con Laravel. De hecho Laravel ofrece el stack Inertia y trabajan como en el vídeo. Saludos.
@@informaticadp es cierto, saludos desde colombia.
@Informática DP puedes hacer un mismo ejemplo pero usando Vue.js 3 veo el package.json y se uso la versión 2 de vue.js. gracias.
Si. Estaba esperando que Vue 3 ya salga de versiones beta. Si ya salió la definitiva , lo hacemos. Perdón pero no estoy al tanto en que versión está.
@@informaticadp okok gracias
@@informaticadp The current latest stable version of Vue is v3. 2.33.
nuevo suscriptor, amigo tengo un problema usas vue 3 y cunado ejecuto el proyecto me vota un error , export 'default' (imported as 'vue') was not found in 'vue' . Es un error de que la version 3 no soporta algunos componentes como podria solucionarlo, me e guiado al 100% paso a paso de tus videos
Muchas gracias!! Es tal cuál lo decís. No usé vue 3 porqué todavía hay algunas incompatibilidades. Fíjate en el canal siempre trato de usar las últimas versiones al momento de hacer los videos. Pero creo que vue 3 no es estable actualmente o si?
@@informaticadp Aún no es compatible, bajaré a la versión 2.6
Aca un Hilo Si usas laravel 9:
En api.php usa Route::resource ('blog',BlogController::class)->except(['edit']); funciona igual que usando only ;)
En el package.json coloquen vue-loader:^15.9.8 vue:^2.6.12 vue-axios:^2.0.0 vue-router : ^3.0.0 npm update luego npm install y npm run dev
Cuando el usa Schema en el appService lo usa por que tiene un mysql viejito, pero si tienes actualuzado mysql no es necesario
Gracias, amigo. Tenía ese problema y trataba de encontrar algo en la documentación de Laravel que me orientara.
Hola Gustavo, serías tan amable en decirme cual es el tema de color que usas en VScode
Hola Carlos! Te paso.
Visual studio code. Theme: Outrun Night
Gracias
donde esta el codigo que menciona del minuto 21'
Y el código de layout blade ?
tengo detalle en los axios, hay q instalar algo aparte o agregar alguna otra cosa?
No, que es lo que te sale?
@@informaticadp app.js:19786
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get') ; INTENTO hacer un test con postman y me regresa el html , si comento en el route web- el Route::any , y solo dejo el api si me regresa algo el post
Route::get('{any}', function(){
return view('app');
})->where('any', '.*') me he topa q es por este, como podre llamar las rutas, yaq si le quito el any, y solo a una pagina, cuando recargo en otra page me dice 404 not found solo al recargar
@@informaticadp hago un console, y al hacer /api/... me regresa html, esta entrando ala route de web {any}
El código del minuto 21:51 está publicado en algún lado? Para simplemente copiar y pegar. Saludos.
Hola! Todos los proyectos estan en mi cuenta de Github. Siempre en la descripción del último video de cada serie.
Buenas. Cuando trato de visualizar en el navegador el "App.vue", no me muestra el texto, y aparece un error en la consola: "Error in ./resources/js/app.js
Module not found: Error can't resolve './routes' in '....resources\js'
Paso mi app.js
require('./bootstrap');
import vue from 'vue'
window.Vue = vue
import App from './components/App.vue';
import VueAxios from 'vue-axios';
import axios from 'axios';
import VueRouter from 'vue-router';
import { routes } from '/.routes';
import Vue from 'vue';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode:'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App)
});
Era la versión de node js. Lo pude solucionar 👍
@@jorgefernandorodriguez1581 como lo solucionaste?
Me aparece la pantalla en blanco, porque puede ser?¡
alguien encontro el codigo de el minuto 21:00?
a mi no me aparece el archivo webpack.mix.js 😞
El código fuente donde le puedo descargar
El código siempre está en el último video de la serie.
ruclips.net/p/PLrAw40DbN0l33O9tOstCiNsQdjpPYvjOj
genial
Hola, muy buen curso, felicidades!! Donde puedo encontrar el código?? Saludos
Muchas gracias! Todos los proyectos con su respectivo código están en mi repo de Github. Y Siempre el link está en la descripción del último vídeo de la serie. Saludos.
Recomendacion yo veo de mi celu los turorilaes en el temrinal la fuenta esta. Chiquita
Lo voy a tener en cuenta para próximos videos..el tema de la terminal. Saludos.
para que hace los del paso 7:48 configura la fachada de squema
Eso se hace por la version de mysql por que te genera in error al migrar si tienes una version reciente eso no es necesario
npm i vue@2.6.12 vue-loader@15.9.8 vue-router@3.*
que es SPA?
Single Page Application
todo bien , pero me aparece un error al importa vue, lo volveré hacer
Hola! Que error??
@@informaticadp WARNING in ./resources/js/app.js 20:14-17
export 'default' (imported as 'Vue') was not found in 'vue
asi lo tengo
import Vue from 'vue';
import VueRouter from 'vue-router';
Muy buen tutorial, pero vas super volando, tuve que pones el video mas lentito para poder seguir el paso y no perderme de todo a la vez, jaja
Jaja muchas gracias! Si todo un tema con el ritmo. Lo bueno es que se puede hacer lo que haces y el código siempre disponible. Abrazo bro!
Si, eso si, me ayudo muchisimo a entender unas cosas y como ando comenzando con Vue mucho mejor para familiarizarse, pero muy bueno el video 😁😁
@@informaticadp Tengo problemas ya al final, y no logro encontrar solucion por lo que veo mi tutorial llega hasta este punto :C, tengo desde ayer tratandole y nada, no se como solucionar :/, siempre me tira este error:
export 'default' (imported as 'vue') was not found in 'vue'
y me pone una lista gigante de exports. El laravel mix me pone todos estos errores y warnings:
webpack compiled with 6 warnings, he tratado de todo y la verdad no consigo como hacer para que pase de ese paso :/, los warnings todos tienen que ver con la parte de los import vue, axios, router, etc, los del app.js
npm update vue-loader
i think the tutorial is good. but i cant understand, please include in the title your language
Ok, I'll take it into account, thanks!
Me van a matar, pero sigo sin comprender como es necesario hacer semejante ensalada de 2000 millones de cosas para hacer un abm simple php
Venis de la programación desktop?
Dios como poses decir eso, desarrollar sistemas en la actualidad es un arte y tiene que ser mantenible, escalable y facil de leer para otros devs, lo que el hiso es muy basico, y eso que no usó git, tdd, ni solid para el desarrollo
@@informaticadp No. HTML CSS JS. Mi opinión va orientada que es increíble la cantidad de librerías y frameworks que están saliendo. Pero se está volviendo un descontrol. Se habla de "mantenibiliedad", y gran parte de la mantenibilidad está en la solidez de las distintas partes que componen un framework, y esto está descontrolado. Uno usa 300mb de librerías y resulta que en la nueva versión , cada uno hace lo que quiere en forma anárquica y hay que andar modificando todo o incluso reemplazando librerías por completo. Eso lleva trabajo y tiempo, además de la desagradable sorpresa de que en la nueva versión, lo que en la anterior re dijeron que era fantástica ... de golpe la famosa frase ... "deprecated". Corran cualquier cosa con Node, y no hay uno solo que no tenga media docena de Warnings de todo tipo, y si cambia la versión de algo, se desata el infierno, porque incluso resulta que dos librerías que usabas, una no es compatible con tal versión de la otra, pero la otra no va con la de la otra. No me gusta el enrutamiento. Se pieder mucho tiempo entre entorno de desarrollo y otro de producción, hay clientes que piden modificaciones de todo tipo a cada rato y se necesita algo con lo que se puedan hacer rápido y no tener que tener no menos de 2 aplicaciones distintas corriendo por separado, y ni hablar de si en un mismo servidor se tienen 20 aplicaciones de 20 clientes. Me la pasaría todo el día tratando de hacer que el framework funcione en lugar de programar soluciones. Me parece un trabajo increíble el que se está haciendo, por eso me interesa, y mucho. Pero lo veo una ensalada y poco confiable para decidir usar un framework compuesto por un montón de paquetes que no se siquiera si en la versión de dentro de 6 meses van a seguir funcionando. Hasta webpack parece tener los días contados. Es muy anárquico. Tampoco quiero un microsoft, pero necesito al menos una tecnología que me de 4 años de tranquilidad de poder dedicarme a desarrollar la solución del cliente, y no ver como hago magia para seguir haciendo funcionar el framework.
@@rickkk226 pues que te puedo decir, laravel actualiza cada 6 meses pero tambien estan sus versiones lts por ejemplo yo uso laravel 9 y es compatible con su anterior version eso si, tienes que adaptar algunas pequeñas cosas pero nada que preocuparse para no quedarte desactualizado y esas mamadas, estoy d acuerdo contigo y por eso una occion es usar ddd y no depender del framework ni mucho menos la version :), y si te contara sobre django es peor, y el uso de vuejs ya eso es por el front end podes usar vanilla JavaScript si quieres, liveware o nose la verdad estos tiempo estan que apenas terminas el projecto te das cuenta que tu version esta desactualizada jajaja ya me paso con Laravel 7
@@rickkk226 por eso el full stack no existe realmente, que sepa front end no significa que sea full stack, yo soy backend que desarrolla tdd usa patrones de diseño, control de versioned, y desarrolla api, esa es mi funcion otro compañero se encarga de vuejs y css, otro de base de datos y yo solo le mando una pequeña documentacion de las rutas del como funcionan, los parametros y lo que devuelve, en fin el desarrollo de software es complejo por eso lo pagan bien, lo unico que puedes hacer es dominar un lenguaje backend sea python , php o typescript ya con eso no importa el framework de moda lo importante es que domines la programacion
demasiados errores con las versiones
En cual?
tengo un error hermano me aparece el siguiente error WARNING in ./resources/js/app.js 17:14-17
export 'default' (imported as 'Vue') was not found in 'vue'
Talves por que instalaste vuejs 3 este curso es con vuejs 2 tienes que cambiarlo en el archivo package.json
En el package.json coloquen vue-loader:^15.9.8 vue:^2.6.12 vue-axios:^2.0.0 vue-router : ^3.0.0 npm update luego npm install y npm run dev
@@necris25 eres god bro, me funcionó
con eso me surgió una pregunta, ¿Cuándo modificas el package.json de esa forma, se da a entender que esa sintaxis funcionará a partir de las versiones que indicaste? saludos
@@necris25 Gracias!!! Arreglo mi problema
En el minuto 21:40 dice que deja un código de app.blade.php, pero no lo veo. Hasta acá llegué
despues de configurar el archivo app.js, al hacer nom run watch me aparece "WARNING in ./resources/js/app.js 19:14-17
export 'default' (imported as 'Vue') was not found in 'vue'"
Es por vue3 tienes que usar vue2
En el package.json coloquen vue-loader:^15.9.8 vue:^2.6.12 vue-axios:^2.0.0 vue-router : ^3.0.0 npm update luego npm install y npm run dev
@@necris25 Me has salvado la vida, Muchas Gracias Crack!
@@necris25 comprobado, con eso se soluciona el error, es un tema de compatabilidad, pero de verdad que puede llegar a ser un dolor de cabeza🤗
gracias mil gracias @@necris25