Full Stack Web App using Vue.js & Express.js: Part 4
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Mr.Nobody
Hey cody i have a question i started watching your first video the intro and you said open the console but i dont know how im new to coding. and i dont know how to download anything can you plsss help me set up everything so that i can start. And also everytime i try to download something that you say this comes up npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the
name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ npm install -g vue-cli
+ ---
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException.What do i do ?. Best Regards Angel :)
reply
Hey cody i have a question i started watching your first video the intro and you said open the console but i dont know how im new to coding. and i dont know how to download anything can you plsss help me set up everything so that i can start. And also everytime i try to download something that you say this comes up npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the
name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ npm install -g vue-cli
+ ---
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException.What do i do ?. Best Regards Angel :)
reply
Arnold
Almost done with part 4. I can't figure out why I'm always getting false on areAllFieldsFilledIn. Is anyone experience the same? Thank you
methods: -
async create () -
// Validate the all mandatory fields were satistified
this.error = null
const areAllFieldsFilledIn = Object
.keys(this.song)
.every(key => !!this.song[key])
if (!areAllFieldsFilledIn) -
console.log(areAllFieldsFilledIn)
this.error = 'Please fill in all the required fields.'
return
-
// Call API
try -
await SongsService.post(this.song)
this.$router.push(-
name: 'songs'
-)
- catch (err) -
console.log(err)
-
-
-
reply
Almost done with part 4. I can't figure out why I'm always getting false on areAllFieldsFilledIn. Is anyone experience the same? Thank you
methods: -
async create () -
// Validate the all mandatory fields were satistified
this.error = null
const areAllFieldsFilledIn = Object
.keys(this.song)
.every(key => !!this.song[key])
if (!areAllFieldsFilledIn) -
console.log(areAllFieldsFilledIn)
this.error = 'Please fill in all the required fields.'
return
-
// Call API
try -
await SongsService.post(this.song)
this.$router.push(-
name: 'songs'
-)
- catch (err) -
console.log(err)
-
-
-
reply
Darius
really helpful series. 2 things in particular. I am familiar with RoR, so when you make comparisons to that framework/language, it is very helpful to me. eg, subcomponents remind me of partials in rails and slot tags seem very much like yield tags in rails. otoh, a service seems to be a mix between a model and controller. I imagine to the extent ou have other analogies i imagine it would help others understand as well Secondly, I very much appreciate you showing how you troubleshoot using the docs instead of pretending that everything went perfectly on the first go through!
reply
really helpful series. 2 things in particular. I am familiar with RoR, so when you make comparisons to that framework/language, it is very helpful to me. eg, subcomponents remind me of partials in rails and slot tags seem very much like yield tags in rails. otoh, a service seems to be a mix between a model and controller. I imagine to the extent ou have other analogies i imagine it would help others understand as well Secondly, I very much appreciate you showing how you troubleshoot using the docs instead of pretending that everything went perfectly on the first go through!
reply
Gil
Around 30:00 the reason why your backend is crashing is because you started to define your Song's model with the attribute -albumImage- and -youtubeId-. You saved your file, the DB recorded the table as it is. Then you changed this attribute to -albumImageUrl- and -youtubeIdUrl-. So now the model Song doesn't match what the engine is looking for.
A .sync(-force: true-) drop the previous table and create one with the last model. :D
reply
Around 30:00 the reason why your backend is crashing is because you started to define your Song's model with the attribute -albumImage- and -youtubeId-. You saved your file, the DB recorded the table as it is. Then you changed this attribute to -albumImageUrl- and -youtubeIdUrl-. So now the model Song doesn't match what the engine is looking for.
A .sync(-force: true-) drop the previous table and create one with the last model. :D
reply
Maximilian
Why don't you use v-textarea?
Also, you can simply specify to=-...- in a v-btn instead of encapsulating inside a router-link.
So no need to use a navigateTo function.
A quick tip which I recently learnt: use rem to allow the user to have font size being relative to what he/she set it in his/her browser which wouldn't change the pixel unit text but would do so for those using rem/em units (for accessibility sake)
reply
Why don't you use v-textarea?
Also, you can simply specify to=-...- in a v-btn instead of encapsulating inside a router-link.
So no need to use a navigateTo function.
A quick tip which I recently learnt: use rem to allow the user to have font size being relative to what he/she set it in his/her browser which wouldn't change the pixel unit text but would do so for those using rem/em units (for accessibility sake)
reply
Enrico
Ready to go to part 5, following in 2020... many things have changed. Different versions, deprecated features, different syntax/behaviour of some module (in particular the hash part)... but still I was able to follow and modify accordingly... still a great tutorial.
I wonder if there will be at least an updated version of the files on github...
reply
Ready to go to part 5, following in 2020... many things have changed. Different versions, deprecated features, different syntax/behaviour of some module (in particular the hash part)... but still I was able to follow and modify accordingly... still a great tutorial.
I wonder if there will be at least an updated version of the files on github...
reply
Alexander
If you have vetur installed in vscode type -scaffold- to generate basic template
And you can iterate through object to build a form:
data() -
return -
song: -
title: '',
genre: '',
artist: '',
album: '',
albumImage: '',
youtubeId: '',
lyrics: '',
tab: ''
-
-;
-
reply
If you have vetur installed in vscode type -scaffold- to generate basic template
And you can iterate through object to build a form:
data() -
return -
song: -
title: '',
genre: '',
artist: '',
album: '',
albumImage: '',
youtubeId: '',
lyrics: '',
tab: ''
-
-;
-
reply
Paul
hey everyone. been following this guide in 2021 and it's been really helpfull. i'm stuck in the part where we bind each textfield with the prop v-model. It doesn't seem to work when i type song.title for exemple. Anyone has ideas on how to solve this? that's with vuetify 2.4
reply
hey everyone. been following this guide in 2021 and it's been really helpfull. i'm stuck in the part where we bind each textfield with the prop v-model. It doesn't seem to work when i type song.title for exemple. Anyone has ideas on how to solve this? that's with vuetify 2.4
reply
Macluda
Hey Cody, Say you have a list of ids [1,2,3,4,5,6,8,9] and you use :key=-song.id- and then later we delete id=4 and we're left with [1,2,3,5,6,7,8,9]. How will this affect the iterator? Will it know to go '3' then '5' or will it crash? Thank you!
reply
Hey Cody, Say you have a list of ids [1,2,3,4,5,6,8,9] and you use :key=-song.id- and then later we delete id=4 and we're left with [1,2,3,5,6,7,8,9]. How will this affect the iterator? Will it know to go '3' then '5' or will it crash? Thank you!
reply
Gede
Hey cody, thank you so much for this inspiring tutor :) can i request a video of simple full stack web apps using vanilla js ? Cause im still a beginner and i really want to learn the fundamentals on how creating web apps. Thank you so much :))
reply
Hey cody, thank you so much for this inspiring tutor :) can i request a video of simple full stack web apps using vanilla js ? Cause im still a beginner and i really want to learn the fundamentals on how creating web apps. Thank you so much :))
reply
Add a review, comment
Other channel videos
