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



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 Twitter: https://twitter.com/CodyLSeibert

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

source

This Post Has 20 Comments

  1. nelida murataj

    Hello, thank u for your tutorial.Should we need to use Vuex for a project like this one?

  2. Kevin Brown

    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 '`
    })
    }
    }

  3. Roberto Garcia

    he pass parameters to the edit song .Why he specific the route path like: path: '/songs/:songId/edit ? rather then path: '/songs/:songId/edit/:songId'

  4. 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.

  5. mcdba

    Song.findById need change to Song.findByPk

  6. Meme Shorts

    With Sequelize v5, findById() was replaced by findByPk(). Replace findById using findByPk and everything should work fine

  7. AliveAgain

    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.

  8. S. Robinson

    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 🙂

  9. Evan Vaughan

    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

  10. Alex Leibowitz

    Why do you get the parameters from the store rather than the router?

  11. Diego L

    it's the best you can find on youtube

    full-stack

    thanks cody

  12. Tony Branze

    Vuetify kiind of sucks… and is way different when I'm using it vs this tut

  13. Max Drljić

    It's a good tutorial, but very difficult to follow along

  14. christo Ben

    am having this problem Error: Invalid value { title: { '$like': '%f%' } }. I dont know what to do

  15. YesImHere

    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.

  16. CW

    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….

  17. Mohamed Adel

    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!!!

Leave a Reply