VehiclesFashionRecipesBlogsHuntTravelsSportFunHandmadeITEducation
Mini-Games
x

x
zakruti.com » IT - Software » freeCodeCamp.org
Full Stack Web App using Vue.js & Express.js: Part 5 - View Song

Full Stack Web App using Vue.js & Express.js: Part 5 - View Song

FBTwitterReddit

video description

Rating: 4.0; Vote: 1
Welcome to part 5 of a new series where I will create a full stack web application using Vue.js and Express.js GitHub repo: https://github.com/codyseibert/tab-tracker Follow Cody on
Date: 2022-03-14

Comments and reviews: 10


Cody, hopefully in the future you will 'git branch Partx' so us poor fools can get back on track since the master is completely different than what you are doing here in Part 5. Maybe it's me but I am getting bored with UI copy.paste of html when this is supposed to be about VueJS. Just saying. Overall nice job but decided to look up the final code for what I can learn. I think this series could of done in half the time if you just put your design hat on before coding....
reply

hey cody thank you very much , and i face a problem in this part
const areAllFieldsFilledIn = Object.keys(this.song).every(key => !!this.song[key])
if (!areAllFieldsFilledIn) -
this.error = 'Please fill in all the required fields.'
return
-
in edit song page if i remove this part it's going to be right but if i use it it give me error that is -Please fill in all the required fields.-
although i already filled all inputs!!!

reply

Is anyone else having a problem with the show endpoint sending back all db records, instead of just the one matching the songId sent? Using sequelize 5, so I'm having to use findByPk. Here's my show endpoint
async show (req, res) -
try -
const song = await Song.findByPk(req.params.songId)
res.send(song)
- catch (err)-
res.status(400).send(-
error: -$-err-'An error has occured trying to create the song '-
-)
-
-

reply

This app is going well so far Cody thanks! Now that I am at part 5 I would say that it is a bit speedy as I have not gained the skills with the shortcuts in the editor like you have. And I would like to point out that at the beginning I wasn't very aware that this requires a good amount of knowledge in ES6 JS which I haven't touched on a lot yet. Otherwise this is incredible to see Vue's inner workings. I'm excited to make my web apps with it.
reply

Cody, great tutorials! I've learned a lot. Thank you. You were suggesting that there was a different way to return to the previous page. After searching I found this: this.$router.go(-1). Works just like the back button assuming your browser is keeping the history.
Also, instead of sending the id separately, I just use the id value in the body. Is there any reason not to do it that way?
Thanks again! Looking forward to 6 & 7.

reply

At 8:32 in the video, I am following exactly the code to get a single song view but keep on getting a 500 error. I get the following error: Error in mounted hook (Promise/async): -Error: Request failed with status code 500-. Any ideas on what might be causing this. I have spent several hours trying to debug and cannot seem to find what is causing the error. Thanks :)
reply

Hi Cody,,Great work and great way of doing the tutorial. People understand the nuances of coding and lot more since your video exactly shows what you are doing. I would say there is a lot to learn by the way you are coding if people watch with attention to details. Patience is the key.
reply

Great tutorial! I went down the path of making another application after making the login and I was wondering how I could persist the vuex store state of tokens and users after a page refresh. If anyone could point me in the right direction that would be wonderful. Thanks
reply

A little late to the party but to include the vue-youtube-embed without doing it globally, I found that adding Vue.use(VueYoutubeEmbed) in the Youtube.vue file works. If you include the import here as well you don't need to import on the main.js file at all.
reply

For anyone watching this tutorial recently. I ran across an issue where my show would keep catching a 500 error. It is because -findById- is deprecated in the new sequelize. Instead, use -findByPk- - 'find by primary key'. Works like a charm.
reply
Add a review, comment






Other channel videos